@rededor/site-front-end-lib 20.0.25 → 20.0.27

package/components/algolia-search/components/algolia-search-result-item/algolia-search-result-item.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ElementRef, input, output, viewChild, effect, inject, PLATFORM_ID, signal, model, HostBinding } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { ImageComponent } from '@rededor/site-front-end-lib/components/image';
+import { CuraBadgeDistanceComponent } from '@rededor/site-front-end-lib/cura/badges/cura-badge-distance';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'algolia-search-result-item',
+  imports: [CommonModule, RouterLink, ImageComponent, CuraBadgeDistanceComponent, CuraIconComponent],
+  templateUrl: './algolia-search-result-item.component.html',
+  styleUrl: './algolia-search-result-item.component.scss',
+})
+export class AlgoliaSearchResultItemComponent implements OnInit {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly curaApiService = inject(CuraApiService);
+
+  readonly title = input<string>('');
+  readonly subtitle = input<string>('');
+  readonly description = input<string>('');
+  readonly icon = input<string>('');
+  readonly img = input<string>('');
+  readonly alt = input<string>('');
+  readonly ctaLabel = input<string>('');
+  readonly ctaIcon = input<string>('');
+  readonly ctaUrl = input<string>('');
+  readonly item = input<any>();
+  readonly showDefaultCta = input<boolean>(true);
+  readonly isGroup = input<boolean>(false);
+  readonly distance = input<number | null>(null);
+  readonly preselected = model<boolean>(false);
+
+  readonly itemSelect = output<any>();
+  readonly mouseOver = output<any>();
+  readonly imgError = output<any>();
+
+  readonly resultElement = viewChild<ElementRef | null>('resultItem');
+
+  externalCta = signal(false);
+  externalRegex = /^(http:|https:|tel:|www\.|mailto:)/;
+
+  @HostBinding('style') get hostStyles() {
+    return {
+      '--background-color': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+      '--border-color': this.curaApiService.theme.colors.getColor('primary-base'),
+      '--border-radius': '50%',
+      '--border': '2px',
+      '--size': '32px',
+    };
+  }
+
+  constructor() {
+    effect(() => {
+      if (this.preselected()) {
+        this.scroll();
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    const ctaUrl = this.ctaUrl();
+    if (ctaUrl) {
+      this.externalCta.set(this.externalRegex.test(ctaUrl));
+    }
+  }
+
+  onSelect() {
+    this.itemSelect.emit(this.item());
+  }
+
+  scroll() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.resultElement()?.nativeElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+    }
+  }
+}

package/components/algolia-search/components/algolia-search-results/algolia-search-results.component.html

@@ -0,0 +1,6 @@
+<div class="algolia-search-results" data-testid="_algolia-search-results">
+  <div class="algolia-search-results-container" data-testid="_algolia-search-results-container">
+    <ng-content select="algolia-search-result-item"></ng-content>
+    <ng-content></ng-content>
+  </div>
+</div>

package/components/algolia-search/components/algolia-search-results/algolia-search-results.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlgoliaSearchResultsComponent } from './algolia-search-results.component';
+
+describe('AlgoliaSearchResultsComponent', () => {
+  let component: AlgoliaSearchResultsComponent;
+  let fixture: ComponentFixture<AlgoliaSearchResultsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgoliaSearchResultsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlgoliaSearchResultsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/algolia-search/components/algolia-search-results/algolia-search-results.component.ts

@@ -0,0 +1,90 @@
+import { Component, output, contentChildren, effect, signal, computed } from '@angular/core';
+import { AlgoliaSearchResultItemComponent } from '../algolia-search-result-item/algolia-search-result-item.component';
+
+@Component({
+  selector: 'algolia-search-results',
+  templateUrl: './algolia-search-results.component.html',
+  styleUrl: './algolia-search-results.component.scss',
+})
+export class AlgoliaSearchResultsComponent {
+  readonly resultList = contentChildren(AlgoliaSearchResultItemComponent, { descendants: true });
+  readonly updatePreselected = output<{
+    index: number | null;
+    item: AlgoliaSearchResultItemComponent | null;
+  }>();
+
+  readonly preselectedIndex = signal<number | null>(null);
+  readonly navDirection = signal<'UP' | 'DOWN' | 'NONE'>('NONE');
+
+  readonly currentItems = computed(() => this.resultList());
+  readonly preselectedItem = computed(() => {
+    const index = this.preselectedIndex();
+    const items = this.currentItems();
+    return index !== null && items[index] ? items[index] : null;
+  });
+
+  constructor() {
+    effect(() => {
+      const direction = this.navDirection();
+      this.handleNavigation(direction);
+    });
+
+    effect(() => {
+      const item = this.preselectedItem();
+      const index = this.preselectedIndex();
+
+      this.updatePreselected.emit({ index, item });
+    });
+
+    effect(() => {
+      const items = this.currentItems();
+      const selectedIndex = this.preselectedIndex();
+
+      items.forEach((item, index) => {
+        item.preselected.set(index === selectedIndex);
+      });
+    });
+  }
+
+  public navigateUp() {
+    this.navDirection.set('UP');
+  }
+
+  public navigateDown() {
+    this.navDirection.set('DOWN');
+  }
+
+  public resetSelection() {
+    this.navDirection.set('NONE');
+  }
+
+  private handleNavigation(direction: 'UP' | 'DOWN' | 'NONE') {
+    const items = this.currentItems();
+    const current = this.preselectedIndex();
+
+    switch (direction) {
+      case 'UP':
+        if (items.length) {
+          const newIndex = current === null ? null : current > 0 ? current - 1 : null;
+          this.preselectedIndex.set(newIndex);
+        }
+        break;
+
+      case 'DOWN':
+        if (items.length) {
+          const newIndex = current === null ? 0 : current < items.length - 1 ? current + 1 : current;
+          this.preselectedIndex.set(newIndex);
+        }
+        break;
+
+      case 'NONE':
+        this.preselectedIndex.set(null);
+        break;
+    }
+
+    // Reset direction after handling
+    if (direction !== 'NONE') {
+      this.navDirection.set('NONE');
+    }
+  }
+}

package/components/algolia-search/components/algolia-search-tooltip/algolia-search-tooltip.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/components/algolia-search/components/algolia-search-tooltip/algolia-search-tooltip.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlgoliaSearchTooltipComponent } from './algolia-search-tooltip.component';
+
+describe('AlgoliaSearchTooltipComponent', () => {
+  let component: AlgoliaSearchTooltipComponent;
+  let fixture: ComponentFixture<AlgoliaSearchTooltipComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgoliaSearchTooltipComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlgoliaSearchTooltipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/algolia-search/components/algolia-search-tooltip/algolia-search-tooltip.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'algolia-search-tooltip',
+  imports: [],
+  templateUrl: './algolia-search-tooltip.component.html',
+  styleUrl: './algolia-search-tooltip.component.scss',
+})
+export class AlgoliaSearchTooltipComponent {}

package/components/algolia-search/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/components/algolia-search/models/algolia-component-style.enum.ts

@@ -0,0 +1,4 @@
+export enum AlgoliaComponentStyle {
+  DEFAULT = 'default',
+  LIGHT = 'light',
+}

package/components/algolia-search/models/algolia-config.model.ts

@@ -0,0 +1,8 @@
+import { AlgoliaMultipleIndex } from './algolia-multiple-index.model';
+
+export interface AlgoliaConfig {
+  id: string;
+  key: string;
+  index?: string;
+  multipleIndex?: AlgoliaMultipleIndex[];
+}

package/components/algolia-search/models/algolia-hint.model.ts

@@ -0,0 +1,4 @@
+export interface AlgoliaHint {
+  label: string;
+  value: any;
+}

package/components/algolia-search/models/algolia-hit-description.model.ts

@@ -0,0 +1,6 @@
+import { Hit } from '@algolia/client-search';
+
+export interface AlgoliaHitDescription<T = any> {
+  description: string;
+  item: Hit<T>;
+}

package/components/algolia-search/models/algolia-multiple-index.model.ts

@@ -0,0 +1,7 @@
+import { AlgoliaSearchParams } from './algolia-search-params.model';
+
+export interface AlgoliaMultipleIndex {
+  indexName: string;
+  params?: AlgoliaSearchParams;
+  query?: string;
+}

package/components/algolia-search/models/algolia-results-item.model.ts

@@ -0,0 +1,8 @@
+export interface AlgoliaResultsItem<T = any> {
+  title: string;
+  subtitle: string;
+  item: T;
+  icon?: string;
+  description?: string;
+  [attr: string]: any;
+}

package/components/algolia-search/models/algolia-results-multiple.model.ts

@@ -0,0 +1,6 @@
+import { SearchResponse } from '@algolia/client-search';
+
+export interface AlgoliaResultsMultiple<T = any> {
+  hits: SearchResponse<T>[];
+  term: string;
+}

package/components/algolia-search/models/algolia-search-params.model.ts

@@ -0,0 +1,83 @@
+export interface AlgoliaSearchParams {
+  // Search
+  query?: string;
+  similarQuery?: string;
+  // Attributes
+  attributesToRetrieve?: string[];
+  restrictSearchableAttributes?: string[];
+  // Filtering
+  filters?: string;
+  facetFilters?: any[];
+  optionalFilters?: any[];
+  numericFilters?: string[];
+  tagFilters?: any[];
+  sumOrFiltersScores?: boolean;
+  // Faceting
+  facets?: string[];
+  maxValuesPerFacet?: number;
+  facetingAfterDistinct?: boolean;
+  sortFacetValuesBy?: 'count' | 'alpha';
+  // Highlighting-snippeting
+  attributesToHighlight?: string[];
+  attributesToSnippet?: string[];
+  highlightPreTag?: string;
+  highlightPostTag?: string;
+  snippetEllipsisText?: string;
+  restrictHighlightAndSnippetArrays?: boolean;
+  // Pagination
+  page?: number;
+  hitsPerPage?: number;
+  offset?: number;
+  length?: number;
+  // Typos
+  minWordSizefor1Typo?: number;
+  minWordSizefor2Typos?: number;
+  typoTolerance?: boolean | 'min' | 'strict';
+  allowTyposOnNumericTokens?: boolean;
+  disableTypoToleranceOnAttributes?: string[];
+  // Geo-search
+  aroundLatLng?: string;
+  aroundLatLngViaIP?: boolean;
+  aroundRadius?: number | 'all';
+  aroundPrecision?: number | any[];
+  minimumAroundRadius?: number;
+  insideBoundingBox?: any[];
+  insidePolygon?: any[];
+  // Languages
+  ignorePlurals?: boolean | string[];
+  removeStopWords?: boolean | string[];
+  queryLanguages?: string[];
+  naturalLanguages?: string[];
+  // Rules
+  enableRules?: boolean;
+  ruleContexts?: string[];
+  // Personalization
+  enablePersonalization?: boolean;
+  personalizationImpact?: number;
+  userToken?: string;
+  // Query-strategy
+  queryType?: 'prefixLast' | 'prefixAll' | 'prefixNone';
+  removeWordsIfNoResults?: 'none' | 'lastWords' | 'firstWords' | 'allOptional';
+  advancedSyntax?: boolean;
+  optionalWords?: string[];
+  disableExactOnAttributes?: string[];
+  exactOnSingleWordQuery?: 'attribute' | 'none' | 'word';
+  alternativesAsExact?: string[];
+  advancedSyntaxFeatures?: string[];
+  // Advanced
+  distinct?: 0 | 1 | 2 | 3;
+  getRankingInfo?: boolean;
+  clickAnalytics?: boolean;
+  analytics?: boolean;
+  analyticsTags?: string[];
+  synonyms?: boolean;
+  replaceSynonymsInHighlight?: boolean;
+  minProximity?: number;
+  responseFields?: string[];
+  maxFacetHits?: number;
+  percentileComputation?: boolean;
+  attributeCriteriaComputedByMinProximity?: boolean;
+  enableABTest?: boolean;
+  // Custom headers
+  [propName: string]: any;
+}

package/components/algolia-search/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/algolia-search/public-api.ts

@@ -0,0 +1,13 @@
+export * from './components/algolia-search/algolia-search.component';
+export * from './components/algolia-search-field/algolia-search-field.component';
+export * from './components/algolia-search-results/algolia-search-results.component';
+export * from './components/algolia-search-result-item/algolia-search-result-item.component';
+export * from './components/algolia-search-tooltip/algolia-search-tooltip.component';
+export * from './models/algolia-component-style.enum';
+export * from './models/algolia-config.model';
+export * from './models/algolia-hint.model';
+export * from './models/algolia-hit-description.model';
+export * from './models/algolia-multiple-index.model';
+export * from './models/algolia-results-item.model';
+export * from './models/algolia-results-multiple.model';
+export * from './models/algolia-search-params.model';

package/components/banner/content-banner/content-banner.component.html

@@ -0,0 +1,51 @@
+@if (content()?.title) {
+  <cura-heading [level]="4" weight="bold" color="neutral-purewhite" marginBlock="0">
+    {{ content()?.title }}
+  </cura-heading>
+}
+
+@if (content()?.text) {
+  <cura-paragraph color="neutral-purewhite" marginBlock="0">
+    {{ content()?.text }}
+  </cura-paragraph>
+}
+
+@if (content()?.info?.length) {
+  <div class="info" data-testid="_content-banner-info">
+    @for (item of content()?.info || []; track $index) {
+      @if (item.text) {
+        <a [ngClass]="{ disabled: !item.link }" rdsitelink [href]="item.link || ''">
+          @if (item.icon) {
+            <cura-icon [name]="item.icon" size="16" color="neutral-purewhite"></cura-icon>
+          }
+          {{ item.text }}
+        </a>
+      }
+    }
+  </div>
+}
+
+@if (content()?.cta?.text && content()?.cta?.link) {
+  <cura-button
+    rdsitelink
+    (click)="onCtaClick(content()?.cta?.text || '', content()?.cta?.link || '')"
+    size="large"
+    type="button"
+    color="accent"
+    [iconName]="content()?.cta?.icon || ''"
+    [href]="content()!.cta.link"
+    target="_self"
+  >
+    {{ content()?.cta?.text }}
+  </cura-button>
+}
+
+@if (content()?.image) {
+  <rdsite-image
+    [imageDefaultSrc]="content()?.image.url"
+    [imageWebpSrc]="content()?.image?.webp_url"
+    [title]="content()?.image.title"
+    [alt]="content()?.image.alt"
+  >
+  </rdsite-image>
+}

package/components/banner/content-banner/content-banner.component.scss

@@ -0,0 +1,91 @@
+@use '../../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  position: relative;
+  z-index: 0;
+  display: block;
+  width: 100%;
+  height: auto;
+  padding: 32px 56px 96px;
+  margin-bottom: 30px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #004186 7.78%, #1163a1 40.08%, #2791c6 76.03%, #36b1df 95.14%);
+
+  cura-heading {
+    position: relative;
+    z-index: 2;
+    margin-bottom: 8px;
+  }
+
+  cura-paragraph {
+    position: relative;
+    z-index: 2;
+    margin-bottom: 20px;
+  }
+
+  .info {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    margin-top: 20px;
+
+    > a {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 8px;
+      width: fit-content;
+      min-height: 34px;
+      color: var(--neutral-purewhite);
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 13px;
+      letter-spacing: 0.72px;
+      padding: 4px 20px;
+      border-radius: 20px;
+      background: var(--color-one-lighter);
+      text-decoration: none;
+
+      &.disabled {
+        pointer-events: none;
+      }
+
+      cura-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 20px;
+        height: 20px;
+        border: 1.5px solid var(--neutral-purewhite);
+        border-radius: 50%;
+      }
+    }
+  }
+
+  cura-button {
+    position: relative;
+    z-index: 2;
+    margin-top: 30px;
+  }
+
+  rdsite-image {
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    right: 40px;
+    height: 90%;
+
+    ::ng-deep {
+      .rdsite-image {
+        height: 100%;
+
+        img {
+          height: 100%;
+        }
+      }
+    }
+  }
+}

package/components/banner/content-banner/content-banner.component.spec.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ContentBannerComponent } from './content-banner.component';
+
+describe('ContentBannerComponent', () => {
+  let component: ContentBannerComponent;
+  let fixture: ComponentFixture<ContentBannerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ContentBannerComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentBannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/banner/content-banner/content-banner.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, input, output, inject } from '@angular/core';
+import { ContentBanner, RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { ImageComponent } from '@rededor/site-front-end-lib/components/image';
+import { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';
+import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
+import { CuraButtonComponent } from '@rededor/site-front-end-lib/cura/buttons/cura-button';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-content-banner',
+  imports: [CommonModule, RdsiteLinkDirective, ImageComponent, CuraHeadingComponent, CuraParagraphComponent, CuraButtonComponent, CuraIconComponent],
+  templateUrl: './content-banner.component.html',
+  styleUrls: ['./content-banner.component.scss'],
+})
+export class ContentBannerComponent {
+  private curaApiService = inject(CuraApiService);
+
+  readonly content = input<ContentBanner | null>(null);
+  readonly ctaClick = output<{
+    text: string;
+    link: string;
+  }>();
+
+  @HostBinding('style') get styleBinding() {
+    return {
+      '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+      '--color-one-lighter': this.curaApiService.theme.colors.getColor('primary-lighter', 0.5),
+    };
+  }
+
+  onCtaClick(text: string, link: string) {
+    this.ctaClick.emit({ text, link });
+  }
+}

package/components/banner/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/components/banner/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/components/banner/public-api.ts

@@ -0,0 +1 @@
+export * from './content-banner/content-banner.component';