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

package/components/header/header.component.ts

@@ -1,135 +0,0 @@
-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

@@ -1,288 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

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

package/components/header/public-api.ts

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

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

@@ -1,16 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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

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

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

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

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

package/components/image/image.component.html

@@ -1,9 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-: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

@@ -1,22 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

package/components/image/ng-package.json

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

package/components/image/public-api.ts

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

package/components/load-screen/index.ts

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