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

package/components/header/header.component.ts

@@ -0,0 +1,135 @@
+import { CommonModule, isPlatformBrowser, isPlatformServer } from '@angular/common';
+import {
+  Component,
+  effect,
+  PLATFORM_ID,
+  ViewEncapsulation,
+  ElementRef,
+  AfterViewInit,
+  DOCUMENT,
+  input,
+  TemplateRef,
+  signal,
+  HostListener,
+  output,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { getHeaderTheme } from './helpers/headerTheme.func';
+import { HeaderTheme } from './models/HeaderTheme.model';
+import { HeaderService } from '@rededor/site-front-end-lib/components/header/services';
+import { UntypedFormControl } from '@angular/forms';
+import { HeaderLogoComponent } from './components/header-logo/header-logo.component';
+import { HeaderActionMenuComponent } from '@rededor/site-front-end-lib/components/header/components/action';
+import { MenuItem } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { OverlayComponent } from '@rededor/site-front-end-lib/components/overlay';
+import { SearchComponent } from '@rededor/site-front-end-lib/components/search';
+import { HeaderMainMenuItemComponent } from '@rededor/site-front-end-lib/components/header/components/main';
+import { HeaderSideMenuComponent } from '@rededor/site-front-end-lib/components/header/components/side';
+import { HeaderAuxMenuItemComponent } from '@rededor/site-front-end-lib/components/header/components/auxiliar';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'header[sl-hdr]',
+  imports: [
+    CommonModule,
+    OverlayComponent,
+    SearchComponent,
+    HeaderLogoComponent,
+    HeaderActionMenuComponent,
+    HeaderMainMenuItemComponent,
+    HeaderSideMenuComponent,
+    HeaderAuxMenuItemComponent,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss',
+  host: {
+    '[style.--font-family]': 'this.curaApiService.theme.fonts.getFamily()',
+  },
+})
+export class HeaderComponent implements AfterViewInit, OnInit {
+  public curaApiService = inject(CuraApiService);
+  private elementRef = inject(ElementRef);
+  private document = inject(DOCUMENT);
+  private platformId = inject(PLATFORM_ID);
+  headerService = inject(HeaderService);
+
+  project = input<string>('site');
+  theme = input<string>('default');
+  loginUrl = input<string>('');
+  homeUrl = input<string>('');
+  showSearch = input<boolean>(true);
+  logo = input<{ src: string; alt: string; title: string; href: string }>({ src: '', alt: '', title: '', href: '' });
+  searchControl = input<UntypedFormControl | null>(null);
+
+  mainMenu = input<MenuItem[]>([]);
+  auxMenuGroups = input<MenuItem[][]>([]);
+  auxMenuGeoloc = input<TemplateRef<any> | null>(null);
+  sideMenuGroups = input<MenuItem[][]>([]);
+  sideMenuGeoloc = input<TemplateRef<any> | null>(null);
+
+  headerAuxMenuItemClick = output<Event>();
+  headerAuxMenuItemDDClick = output<Event>();
+  headerMainMenuCtaDDClick = output<{ event: Event; item: MenuItem }>();
+  searchChange = output<string>();
+
+  isDesktop = signal(false);
+  scrollTop = 0;
+  windowWidth = 0;
+
+  @HostListener('window:resize', ['$event'])
+  checkWindowWidth(event: any) {
+    this.isDesktop.set((event?.target?.innerWidth ?? 0) >= 1260);
+  }
+
+  constructor() {
+    effect(() => {
+      if (isPlatformServer(this.platformId) || !this.document.defaultView) return;
+      if (this.headerService.showSearch() || this.headerService.showSideMenu()) {
+        this.scrollTop = this.document.documentElement.scrollTop ?? 0;
+        this.document.defaultView.onscroll = () => {
+          this.document.documentElement.scrollTo({ top: this.scrollTop, behavior: 'auto' });
+        };
+      } else {
+        this.document.defaultView.onscroll = null;
+        this.scrollTop = 0;
+      }
+    });
+
+    effect(() => {
+      this.updateHeaderTheme();
+    });
+  }
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.windowWidth = window.innerWidth;
+      this.isDesktop.set((this.windowWidth ?? 0) >= 1260);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.updateHeaderTheme();
+  }
+
+  private updateHeaderTheme() {
+    const headerTheme: HeaderTheme = getHeaderTheme(this.project(), this.theme(), this.curaApiService);
+    Object.entries(headerTheme).forEach(([key, value]) => {
+      Object.entries(value).forEach(([prop, val]) => {
+        const cssVar = `--${key}-${prop}`;
+        this.elementRef.nativeElement.style.setProperty(cssVar, val as string);
+      });
+    });
+  }
+
+  overlayClick() {
+    this.headerService.toggleShowSearch(false);
+  }
+
+  doSearch(event: any) {
+    this.searchChange.emit(event);
+    this.headerService.toggleShowSearch(false);
+  }
+}

package/components/header/helpers/headerTheme.func.ts

@@ -0,0 +1,288 @@
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { HeaderTheme } from '../models/HeaderTheme.model';
+
+export const getHeaderTheme = (project: string = 'site', themeStyle: string = 'default', curaApiService: CuraApiService) => {
+  const theme: HeaderTheme = {
+    hdr: {},
+    'hdr-aux': {},
+    'hdr-act': {},
+    'hdr-main': {},
+    'hdr-side': {},
+  };
+
+  const [primaryLighter, primaryLight, primaryBase, primaryDark, primaryDarker] = [
+    curaApiService.theme.colors.getColor('primary-lighter'),
+    curaApiService.theme.colors.getColor('primary-light'),
+    curaApiService.theme.colors.getColor('primary-base'),
+    curaApiService.theme.colors.getColor('primary-dark'),
+    curaApiService.theme.colors.getColor('primary-darker'),
+  ];
+  const [accentLighter, accentLight, accentBase] = [
+    curaApiService.theme.colors.getColor('accent-lighter'),
+    curaApiService.theme.colors.getColor('accent-light'),
+    curaApiService.theme.colors.getColor('accent-base'),
+  ];
+  const [neutralPurewhite, neutralWhite, neutralBase, neutralBlack, neutralDarker] = [
+    curaApiService.theme.colors.getColor('neutral-purewhite'),
+    curaApiService.theme.colors.getColor('neutral-white'),
+    curaApiService.theme.colors.getColor('neutral-base'),
+    curaApiService.theme.colors.getColor('neutral-black'),
+    curaApiService.theme.colors.getColor('neutral-darker'),
+  ];
+
+  const [secondaryLighter, secondaryLight, secondaryDark] = [
+    curaApiService.theme.colors.getColor('secondary-lighter'),
+    curaApiService.theme.colors.getColor('secondary-light'),
+    curaApiService.theme.colors.getColor('secondary-dark'),
+  ];
+
+  switch (project) {
+    case 'site':
+      if (themeStyle === 'default') {
+        theme.hdr = {
+          'bg-color': primaryBase,
+          'over-bg-color': primaryDarker,
+        };
+        theme['hdr-aux'] = {
+          'bg-color': primaryBase,
+          'container-bg-color': primaryDarker,
+          'drop-bg-color': neutralPurewhite,
+          color: neutralPurewhite,
+          hover: accentLight,
+          active: accentBase,
+          'color-alt': primaryLighter,
+          'hover-alt': primaryLight,
+          'active-alt': primaryBase,
+        };
+        theme['hdr-act'] = {
+          'bg-color': neutralBase,
+          'items-bg-color': neutralPurewhite,
+          'items-color': primaryBase,
+          'items-hover': primaryLight,
+          'items-active': primaryDark,
+        };
+        theme['hdr-main'] = {
+          'bg-color': primaryBase,
+          color: neutralPurewhite,
+          'color-icon': neutralPurewhite,
+          hover: primaryLighter,
+          'bg-hover': primaryDarker,
+          active: primaryLight,
+          'dd-bg-color': primaryDarker,
+          'dd-color': neutralPurewhite,
+          'dd-info-color': neutralPurewhite,
+          'dd-icon-color': primaryLight,
+          'dd-icon-color-hover': primaryLight,
+          'dd-alt-color': primaryLighter,
+          'dd-alt-hover': neutralPurewhite,
+          'dd-lv2-content-bg': primaryBase,
+          'dd-lv2-bg': primaryDarker,
+          'dd-lv3-bg': primaryBase,
+          'dd-lv4-bg': primaryDark,
+          'dd-hl-title-color': primaryLighter,
+          'dd-hl-title-hover': neutralPurewhite,
+          'dd-hl-desc-color': primaryLighter,
+          'dd-cta-bg': neutralPurewhite,
+          'dd-cta-color': primaryBase,
+          'dd-cta-border-color': neutralPurewhite,
+        };
+        theme['hdr-side'] = {
+          'bg-color': primaryDarker,
+          'border-bottom': primaryBase,
+          'open-color': primaryLight,
+          color: neutralPurewhite,
+          hover: accentLighter,
+          active: accentLight,
+          'alt-color': primaryLighter,
+          'alt-hover': neutralPurewhite,
+          'alt-active': primaryLight,
+        };
+      } else {
+        theme.hdr = {
+          'bg-color': neutralPurewhite,
+          'over-bg-color': primaryDarker,
+        };
+        theme['hdr-aux'] = {
+          'bg-color': primaryDark,
+          'container-bg-color': primaryBase,
+          'drop-bg-color': neutralPurewhite,
+          color: neutralPurewhite,
+          hover: accentLight,
+          active: accentBase,
+          'color-alt': neutralPurewhite,
+          'hover-alt': primaryLighter,
+          'active-alt': primaryLight,
+        };
+        theme['hdr-act'] = {
+          'bg-color': primaryBase,
+          'items-bg-color': primaryDark,
+          'items-color': primaryLight,
+          'items-hover': primaryLighter,
+          'items-active': primaryBase,
+        };
+        theme['hdr-main'] = {
+          'bg-color': neutralPurewhite,
+          color: primaryBase,
+          'color-icon': primaryBase,
+          hover: primaryLighter,
+          'bg-hover': primaryDarker,
+          active: primaryLight,
+          'dd-bg-color': primaryDarker,
+          'dd-color': neutralPurewhite,
+          'dd-info-color': neutralPurewhite,
+          'dd-icon-color': primaryLight,
+          'dd-icon-color-hover': primaryLight,
+          'dd-alt-color': primaryLighter,
+          'dd-alt-hover': neutralPurewhite,
+          'dd-lv2-content-bg': primaryBase,
+          'dd-lv2-bg': primaryDarker,
+          'dd-lv3-bg': primaryBase,
+          'dd-lv4-bg': primaryDark,
+          'dd-hl-title-color': primaryLighter,
+          'dd-hl-title-hover': neutralPurewhite,
+          'dd-hl-desc-color': primaryLighter,
+          'dd-cta-bg': neutralPurewhite,
+          'dd-cta-color': primaryBase,
+          'dd-cta-border-color': neutralPurewhite,
+        };
+        theme['hdr-side'] = {
+          'bg-color': primaryDarker,
+          'border-bottom': primaryBase,
+          'open-color': primaryLight,
+          color: neutralPurewhite,
+          hover: accentLighter,
+          active: accentLight,
+          'alt-color': primaryLighter,
+          'alt-hover': neutralPurewhite,
+          'alt-active': primaryLight,
+        };
+      }
+      break;
+    case 'star':
+      if (themeStyle === 'star') {
+        theme.hdr = {
+          'bg-color': neutralPurewhite,
+          'over-bg-color': primaryBase,
+        };
+        theme['hdr-aux'] = {
+          'bg-color': secondaryLighter,
+          'container-bg-color': secondaryLight,
+          'drop-bg-color': neutralPurewhite,
+          color: neutralBlack,
+          hover: primaryBase,
+          active: accentBase,
+          'color-alt': neutralBlack,
+          'hover-alt': primaryBase,
+          'active-alt': neutralDarker,
+        };
+        theme['hdr-act'] = {
+          'bg-color': secondaryLighter,
+          'items-bg-color': secondaryDark,
+          'items-color': neutralPurewhite,
+          'items-hover': secondaryLight,
+          'items-active': primaryBase,
+        };
+        theme['hdr-main'] = {
+          'bg-color': primaryBase,
+          color: neutralBlack,
+          'color-icon': primaryBase,
+          hover: neutralPurewhite,
+          'bg-hover': primaryBase,
+          active: primaryLight,
+          'dd-bg-color': neutralWhite,
+          'dd-color': neutralPurewhite,
+          'dd-info-color': primaryBase,
+          'dd-icon-color': primaryLight,
+          'dd-icon-color-hover': neutralPurewhite,
+          'dd-alt-color': primaryBase,
+          'dd-alt-hover': neutralPurewhite,
+          'dd-lv2-content-bg': accentLighter,
+          'dd-lv2-bg': neutralWhite,
+          'dd-lv3-bg': primaryBase,
+          'dd-lv4-bg': primaryDark,
+          'dd-hl-title-color': secondaryDark,
+          'dd-hl-title-hover': primaryDarker,
+          'dd-hl-desc-color': neutralBlack,
+          'dd-cta-bg': neutralPurewhite,
+          'dd-cta-color': primaryBase,
+          'dd-cta-border-color': primaryBase,
+        };
+        theme['hdr-side'] = {
+          'bg-color': secondaryDark,
+          'border-bottom': primaryBase,
+          'open-color': primaryDark,
+          color: neutralPurewhite,
+          hover: primaryDarker,
+          active: accentLight,
+          'alt-color': primaryLighter,
+          'alt-hover': neutralPurewhite,
+          'alt-active': primaryLight,
+        };
+      } else {
+        theme.hdr = {
+          'bg-color': neutralPurewhite,
+          'over-bg-color': primaryDarker,
+        };
+        theme['hdr-aux'] = {
+          'bg-color': primaryDark,
+          'container-bg-color': primaryBase,
+          'drop-bg-color': neutralPurewhite,
+          color: neutralPurewhite,
+          hover: accentLight,
+          active: accentBase,
+          'color-alt': neutralPurewhite,
+          'hover-alt': primaryLighter,
+          'active-alt': primaryLight,
+        };
+        theme['hdr-act'] = {
+          'bg-color': primaryBase,
+          'items-bg-color': primaryDark,
+          'items-color': primaryLight,
+          'items-hover': primaryLighter,
+          'items-active': primaryBase,
+        };
+        theme['hdr-main'] = {
+          'bg-color': neutralPurewhite,
+          color: primaryBase,
+          'color-icon': primaryBase,
+          hover: primaryLighter,
+          'bg-hover': primaryDarker,
+          active: primaryLight,
+          'dd-bg-color': primaryDarker,
+          'dd-color': neutralPurewhite,
+          'dd-info-color': neutralPurewhite,
+          'dd-icon-color': primaryLight,
+          'dd-icon-color-hover': primaryLight,
+          'dd-alt-color': primaryLighter,
+          'dd-alt-hover': neutralPurewhite,
+          'dd-lv2-content-bg': primaryBase,
+          'dd-lv2-bg': primaryDarker,
+          'dd-lv3-bg': primaryBase,
+          'dd-lv4-bg': primaryDark,
+          'dd-hl-title-color': primaryLighter,
+          'dd-hl-title-hover': neutralPurewhite,
+          'dd-hl-desc-color': primaryLighter,
+          'dd-cta-bg': neutralPurewhite,
+          'dd-cta-color': primaryBase,
+          'dd-cta-border-color': neutralPurewhite,
+        };
+        theme['hdr-side'] = {
+          'bg-color': primaryDarker,
+          'border-bottom': primaryBase,
+          'open-color': primaryLight,
+          color: neutralPurewhite,
+          hover: accentLighter,
+          active: accentLight,
+          'alt-color': primaryLighter,
+          'alt-hover': neutralPurewhite,
+          'alt-active': primaryLight,
+        };
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  return theme;
+};

package/components/header/index.ts

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

package/components/header/models/HeaderTheme.model.ts

@@ -0,0 +1,9 @@
+export interface HeaderTheme {
+  hdr: Record<string, any>;
+  'hdr-aux': Record<string, any>;
+  'hdr-act': Record<string, any>;
+  'hdr-main': Record<string, any>;
+  'hdr-side': Record<string, any>;
+}
+
+export type HeaderThemeKeys = keyof HeaderTheme;

package/components/header/ng-package.json

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

package/components/header/public-api.ts

@@ -0,0 +1,2 @@
+export * from './header.component';
+export * from './components/header-logo/header-logo.component';

package/components/header/services/header.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HeaderService } from './header.service';
+
+describe('HeaderService', () => {
+  let service: HeaderService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HeaderService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/components/header/services/header.service.ts

@@ -0,0 +1,40 @@
+import { Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeaderService {
+  public showSearch = signal(false);
+  public showSideMenu = signal(false);
+  public showSearchOpacity = signal(false);
+
+  toggleShowSearch(value?: boolean) {
+    // reset showSideMenu to not overlap
+    this.showSideMenu.update(() => false);
+
+    if (typeof value === 'undefined') {
+      this.showSearch.update((currentValue) => !currentValue);
+      return;
+    }
+    this.showSearch.update(() => value);
+  }
+
+  toggleShowSearchOpacity(value?: boolean) {
+    if (typeof value === 'undefined') {
+      this.showSearchOpacity.update((currentValue) => !currentValue);
+      return;
+    }
+    this.showSearchOpacity.update(() => value);
+  }
+
+  toggleShowSideMenu(value?: boolean) {
+    // reset showSearch to not overlap
+    this.showSearch.update(() => false);
+
+    if (typeof value === 'undefined') {
+      this.showSideMenu.update((currentValue) => !currentValue);
+      return;
+    }
+    this.showSideMenu.update(() => value);
+  }
+}

package/components/header/services/index.ts

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

package/components/header/services/ng-package.json

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

package/components/header/services/public-api.ts

@@ -0,0 +1 @@
+export * from './header.service';

package/components/image/image.component.html

@@ -0,0 +1,9 @@
+<picture>
+  @if (imageWebpSrc()) {
+    <source [srcset]="imageWebpSrc()" [type]="mimeType()" />
+  }
+  @for (image of imageSizes(); track image.source_url) {
+    <source [srcset]="image.source_url" [media]="image.media" [type]="image.mime_type" />
+  }
+  <img [src]="imageDefaultSrc()" [alt]="alt()" [title]="title()" [attr.loading]="loading()" (error)="handleImageError()" />
+</picture>

package/components/image/image.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/components/image/image.component.spec.ts

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

package/components/image/image.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, PLATFORM_ID, input, model, inject } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { LIB_CONFIG, LibConfig, RdsiteImage } from '@rededor/site-front-end-lib/core';
+import { ImageMimeType } from '@rededor/site-front-end-lib/enums';
+
+@Component({
+  selector: 'rdsite-image',
+  imports: [],
+  templateUrl: './image.component.html',
+  styleUrl: './image.component.scss',
+})
+export class ImageComponent implements OnInit {
+  private libConfig = inject<LibConfig>(LIB_CONFIG);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly imageWebpSrc = input<string>('');
+  imageDefaultSrc = model<string>('');
+  readonly imageSizes = input<RdsiteImage[]>([]);
+  mimeType = model<ImageMimeType>(ImageMimeType.JPEG);
+  readonly alt = input<string>('');
+  readonly title = input<string>('');
+  readonly loading = input<'eager' | 'lazy'>('lazy');
+
+  ngOnInit(): void {
+    if (this.imageWebpSrc()) {
+      this.mimeType.set(ImageMimeType.WEBP);
+    }
+
+    if (isPlatformServer(this.platformId)) {
+      this.handleServerImageError();
+    }
+  }
+
+  private handleServerImageError() {
+    if (!this.imageDefaultSrc()) {
+      this.handleImageError();
+    }
+  }
+
+  handleImageError(): void {
+    this.imageDefaultSrc.set(this.libConfig.fallbackImgSrc || '');
+  }
+}

package/components/image/index.ts

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

package/components/image/ng-package.json

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

package/components/image/public-api.ts

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

package/components/load-screen/index.ts

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