Finetuning, corrected naming and fixed breadcrumb bug

apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="!mainOutletActive; else mainOutlet">
+<ng-container *ngIf="!primaryOutletActive; else primaryOutlet">
   <div class="bg-ucla-blue rounded w-[4.375rem] h-[5.625rem] animate-[load_1s_linear_infinite]"></div>
   <div class="flex flex-col flex-grow">
     <div class="h-4 bg-ucla-blue ml-4 mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
@@ -18,7 +18,7 @@
   </div>
 </ng-container>
 
-<ng-template #mainOutlet>
+<ng-template #primaryOutlet>
   <div class="bg-ucla-blue rounded w-[3rem] h-[4.125rem] animate-[load_1s_linear_infinite]"></div>
   <div class="flex flex-col ml-4 w-[36.6%]">
     <div class="h-4 bg-ucla-blue mb-2 w-[8.8125rem] animate-[load_1s_linear_infinite]"></div>

apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts

@@ -8,11 +8,11 @@ import { Component, ChangeDetectionStrategy, HostBinding, Input } from '@angular
 })
 export class SearchResultItemLoadingComponent {
   @Input()
-  mainOutletActive?: boolean = false;
+  primaryOutletActive?: boolean = false;
 
   constructor() {}
 
   @HostBinding('style') get class() {
-    return this.mainOutletActive ? { height: '6.125rem' } : '';
+    return this.primaryOutletActive ? { height: '6.125rem' } : '';
   }
 }

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -1,8 +1,8 @@
 <a
   class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded"
-  [class.page-search-result-item__item-card-main]="mainOutletActive"
+  [class.page-search-result-item__item-card-primary]="primaryOutletActive"
   [routerLink]="detailsPath"
-  [routerLinkActive]="!isTablet && !mainOutletActive ? 'active' : ''"
+  [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
   [queryParamsHandling]="!isTablet ? 'preserve' : ''"
   (click)="isDesktop ? scrollIntoView() : ''"
 >
@@ -16,7 +16,10 @@
     />
   </div>
 
-  <div class="page-search-result-item__item-grid-container" [class.page-search-result-item__item-grid-container-main]="mainOutletActive">
+  <div
+    class="page-search-result-item__item-grid-container"
+    [class.page-search-result-item__item-grid-container-primary]="primaryOutletActive"
+  >
     <div
       class="page-search-result-item__item-contributors desktop-small:text-p3 font-bold text-[#0556B4] text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap"
     >
@@ -65,7 +68,7 @@
 
     <div
       class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
-      [class.page-search-result-item__item-price-main]="mainOutletActive"
+      [class.page-search-result-item__item-price-primary]="primaryOutletActive"
     >
       {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
     </div>
@@ -83,7 +86,7 @@
 
     <button
       class="page-search-result-item__item-stock desktop-small:text-p3 font-bold z-dropdown justify-self-start flex flex-row items-center justify-center"
-      [class.justify-self-end]="!mainOutletActive"
+      [class.justify-self-end]="!primaryOutletActive"
       [uiOverlayTrigger]="tooltip"
       [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
       type="button"
@@ -109,10 +112,12 @@
 
     <div
       class="page-search-result-item__item-ssc desktop-small:text-p3 w-full text-right overflow-hidden text-ellipsis whitespace-nowrap"
-      [class.page-search-result-item__item-ssc-main]="mainOutletActive"
+      [class.page-search-result-item__item-ssc-primary]="primaryOutletActive"
     >
       <ng-container *ngIf="ssc$ | async; let ssc">
-        <div class="hidden" [class.page-search-result-item__item-ssc-tooltip]="mainOutletActive">{{ ssc?.ssc }} - {{ ssc?.sscText }}</div>
+        <div class="hidden" [class.page-search-result-item__item-ssc-tooltip]="primaryOutletActive">
+          {{ ssc?.ssc }} - {{ ssc?.sscText }}
+        </div>
         <strong>{{ ssc?.ssc }}</strong> - {{ ssc?.sscText }}
       </ng-container>
     </div>

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss

@@ -20,7 +20,7 @@
     'misc ssc ssc';
 }
 
-.page-search-result-item__item-grid-container-main {
+.page-search-result-item__item-grid-container-primary {
   @apply gap-x-4;
   grid-template-rows: 1.3125rem 1.3125rem auto;
   grid-template-columns: 37.5% 32.5% 20% auto;
@@ -38,7 +38,7 @@
   grid-area: price;
 }
 
-.page-search-result-item__item-price-main {
+.page-search-result-item__item-price-primary {
   @apply justify-self-start;
 }
 
@@ -76,7 +76,7 @@
   }
 }
 
-.page-search-result-item__item-ssc-main {
+.page-search-result-item__item-ssc-primary {
   @apply text-left overflow-hidden text-ellipsis whitespace-nowrap;
 }
 

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts

@@ -52,7 +52,7 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   }
 
   @Input()
-  mainOutletActive?: boolean = false;
+  primaryOutletActive?: boolean = false;
 
   @Output()
   selectedChange = new EventEmitter<ItemDTO>();
@@ -173,6 +173,6 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   }
 
   @HostBinding('style') get class() {
-    return this.mainOutletActive ? { height: '6.125rem' } : '';
+    return this.primaryOutletActive ? { height: '6.125rem' } : '';
   }
 }

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -38,7 +38,7 @@
   </div>
 </div>
 
-<div class="page-search-results__order-by" [class.page-search-results__order-by-main]="primaryOutletActive$ | async">
+<div class="page-search-results__order-by" [class.page-search-results__order-by-primary]="primaryOutletActive$ | async">
   <shared-order-by-filter
     [orderBy]="(filter$ | async)?.orderBy"
     (selectedOrderByChange)="search({ clear: true, orderBy: true }); updateBreadcrumbs()"
@@ -57,16 +57,16 @@
   >
     <search-result-item
       class="page-search-results__result-item"
-      [class.page-search-results__result-item-main]="primaryOutletActive$ | async"
+      [class.page-search-results__result-item-primary]="primaryOutletActive$ | async"
       *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
       (selectedChange)="addToCart($event)"
       [selected]="isSelected(item)"
       [selectable]="isSelectable(item)"
       [item]="item"
-      [mainOutletActive]="primaryOutletActive$ | async"
+      [primaryOutletActive]="primaryOutletActive$ | async"
     ></search-result-item>
     <page-search-result-item-loading
-      [mainOutletActive]="primaryOutletActive$ | async"
+      [primaryOutletActive]="primaryOutletActive$ | async"
       *ngIf="fetching$ | async"
     ></page-search-result-item-loading>
   </cdk-virtual-scroll-viewport>

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -11,7 +11,7 @@
   @apply mb-px-10;
 }
 
-.page-search-results__result-item-main {
+.page-search-results__result-item-primary {
   @apply mb-[5px];
 }
 
@@ -41,7 +41,7 @@
   }
 }
 
-::ng-deep page-search-results .page-search-results__order-by-main shared-order-by-filter {
+::ng-deep page-search-results .page-search-results__order-by-primary shared-order-by-filter {
   @apply grid grid-flow-col justify-items-start gap-x-4 justify-start;
 
   .order-by-filter-button {

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -96,8 +96,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
   // Render genug Artikel um bei Navigation auf Trefferliste | PDP zum angewählten Artikel zu Scrollen
   maxBufferCdkScrollContainer$ = this.results$.pipe(
     withLatestFrom(this.primaryOutletActive$),
-    map(([results, mainOutlet]) => {
-      if (!mainOutlet && results?.length > 0) {
+    map(([results, primaryOutlet]) => {
+      if (!primaryOutlet && results?.length > 0) {
         // Splitscreen mode: Items Length * Item Pixel Height
         const maxBufferSize = results.length * 181;
         return maxBufferSize >= 1200 ? maxBufferSize : 1200;
@@ -194,7 +194,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
             await this.createBreadcrumb(processId, queryParams);
           }
 
-          if (!this.isDesktop || this.route?.outlet === 'main') {
+          if (!this.isDesktop || this.route?.outlet === 'primary') {
             await this.removeDetailsBreadcrumb(processId);
           }
         })