feat: Initialize Angular SSR application with core pages, components, and server setup.

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html

@@ -5,10 +5,8 @@
   }
 
   <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg overflow-hidden relative">
-    <button
-      (click)="historyService.goBack()"
-      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden"
-    >
+    <button (click)="historyService.goBack()"
+      class="absolute top-4 right-4 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 print:hidden">
       <i class="fas fa-times"></i>
     </button>
     @if(listing){
@@ -19,30 +17,38 @@
         <p class="mb-4" [innerHTML]="description"></p>
 
         <div class="space-y-2">
-          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row" [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
+          <div *ngFor="let detail of listingDetails; let i = index" class="flex flex-col sm:flex-row"
+            [ngClass]="{ 'bg-neutral-100': i % 2 === 0 }">
             <div class="w-full sm:w-1/3 font-semibold p-2">{{ detail.label }}</div>
 
             <div class="w-full sm:w-2/3 p-2" *ngIf="!detail.isHtml && !detail.isListingBy">{{ detail.value }}</div>
 
-            <div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value" *ngIf="detail.isHtml && !detail.isListingBy"></div>
+            <div class="w-full sm:w-2/3 p-2 flex space-x-2" [innerHTML]="detail.value"
+              *ngIf="detail.isHtml && !detail.isListingBy"></div>
 
             <div class="w-full sm:w-2/3 p-2 flex space-x-2" *ngIf="detail.isListingBy && listingUser">
-              <a routerLink="/details-user/{{ listingUser.id }}" class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
-              <img *ngIf="listing.imageName" src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
+              <a routerLink="/details-user/{{ listingUser.id }}"
+                class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{
+                listingUser.lastname }}</a>
+              <img *ngIf="listing.imageName"
+                src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}"
+                class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
             </div>
           </div>
         </div>
         <div class="py-4 print:hidden">
           @if(listing && listingUser && (listingUser?.email===user?.email || (authService.isAdmin() | async))){
           <div class="inline">
-            <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center" [routerLink]="['/editBusinessListing', listing.id]">
+            <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              [routerLink]="['/editBusinessListing', listing.id]">
               <i class="fa-regular fa-pen-to-square"></i>
               <span class="ml-2">Edit</span>
             </button>
           </div>
           } @if(user){
           <div class="inline">
-            <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center" (click)="save()" [disabled]="listing.favoritesForUser.includes(user.email)">
+            <button class="share share-save text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              (click)="save()" [disabled]="listing.favoritesForUser.includes(user.email)">
               <i class="fa-regular fa-heart"></i>
               @if(listing.favoritesForUser.includes(user.email)){
               <span class="ml-2">Saved ...</span>
@@ -55,21 +61,46 @@
           <share-button button="print" showText="true" (click)="createEvent('print')"></share-button>
           <!-- <share-button button="email" showText="true"></share-button> -->
           <div class="inline">
-            <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center" (click)="showShareByEMail()">
+            <button class="share share-email text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              (click)="showShareByEMail()">
               <i class="fa-solid fa-envelope"></i>
               <span class="ml-2">Email</span>
             </button>
           </div>
 
-          <share-button button="facebook" showText="true" (click)="createEvent('facebook')"></share-button>
-          <share-button button="x" showText="true" (click)="createEvent('x')"></share-button>
-          <share-button button="linkedin" showText="true" (click)="createEvent('linkedin')"></share-button>
+          <div class="inline">
+            <button type="button"
+              class="share share-facebook text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              (click)="shareToFacebook()">
+              <i class="fab fa-facebook"></i>
+              <span class="ml-2">Facebook</span>
+            </button>
+          </div>
+
+          <div class="inline">
+            <button type="button"
+              class="share share-twitter text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              (click)="shareToTwitter()">
+              <i class="fab fa-x-twitter"></i>
+              <span class="ml-2">X</span>
+            </button>
+          </div>
+
+          <div class="inline">
+            <button type="button"
+              class="share share-linkedin text-white font-bold text-xs py-1.5 px-2 inline-flex items-center"
+              (click)="shareToLinkedIn()">
+              <i class="fab fa-linkedin"></i>
+              <span class="ml-2">LinkedIn</span>
+            </button>
+          </div>
         </div>
         <!-- Karte hinzufügen, wenn Straße vorhanden ist -->
         <div *ngIf="listing.location.latitude && listing.location.longitude" class="mt-6">
           <h2 class="text-xl font-semibold mb-2">Location Map</h2>
           <!-- <div style="height: 300px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom"></div> -->
-          <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers" [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
+          <div style="height: 400px" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers"
+            [leafletCenter]="mapCenter" [leafletZoom]="mapZoom" (leafletMapReady)="onMapReady($event)"></div>
         </div>
       </div>
 
@@ -80,19 +111,24 @@
         <form class="space-y-4">
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
-            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
+            <app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email"
+              kind="email"></app-validated-input>
           </div>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" mask="(000) 000-0000"></app-validated-input>
+            <app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber"
+              mask="(000) 000-0000"></app-validated-input>
             <!-- <app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input> -->
-            <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state" [items]="selectOptions?.states"></app-validated-ng-select>
+            <app-validated-ng-select label="State" name="state" [(ngModel)]="mailinfo.sender.state"
+              [items]="selectOptions?.states"></app-validated-ng-select>
           </div>
 
           <div>
-            <app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
+            <app-validated-textarea label="Questions/Comments" name="comments"
+              [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
           </div>
-          <button (click)="mail()" class="w-full sm:w-auto px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50">Submit</button>
+          <button (click)="mail()"
+            class="w-full sm:w-auto px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50">Submit</button>
         </form>
       </div>
     </div>
@@ -107,13 +143,17 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
         @for (related of relatedListings; track related.id) {
         <a [routerLink]="['/business', related.slug || related.id]" class="block group">
-          <div class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
+          <div
+            class="bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:scale-[1.02]">
             <div class="p-4">
               <div class="flex items-center mb-3">
                 <i [class]="selectOptions.getIconAndTextColorType(related.type)" class="mr-2 text-lg"></i>
-                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{ selectOptions.getBusiness(related.type) }}</span>
+                <span [class]="selectOptions.getTextColorType(related.type)" class="font-semibold text-sm">{{
+                  selectOptions.getBusiness(related.type) }}</span>
               </div>
-              <h3 class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">{{ related.title }}</h3>
+              <h3
+                class="text-lg font-bold mb-2 text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-2">
+                {{ related.title }}</h3>
               <div class="space-y-1 text-sm text-gray-600">
                 <div class="flex justify-between">
                   <span class="font-medium">Price:</span>
@@ -127,11 +167,14 @@
                 }
                 <div class="flex justify-between">
                   <span class="font-medium">Location:</span>
-                  <span>{{ related.location.name || related.location.county }}, {{ selectOptions.getState(related.location.state) }}</span>
+                  <span>{{ related.location.name || related.location.county }}, {{
+                    selectOptions.getState(related.location.state) }}</span>
                 </div>
               </div>
               <div class="mt-4">
-                <span class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View Details →</span>
+                <span
+                  class="inline-block bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">View
+                  Details →</span>
               </div>
             </div>
           </div>
@@ -141,4 +184,4 @@
     </div>
   </div>
   }
-</div>
+</div>