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

package/cura/api/cura-api.service.spec.ts

@@ -0,0 +1,138 @@
+import { TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+import { CuraApiService } from './cura-api.service';
+import { CuraThemeModule } from './modules/cura-theme.module';
+import { CURA_CONFIG } from '../tokens/CuraConfig';
+
+describe('CuraApiService', () => {
+  let service: CuraApiService;
+  let mockDocument: any;
+
+  beforeEach(() => {
+    mockDocument = {
+      head: {
+        querySelector: jasmine.createSpy('querySelector').and.returnValue(null),
+        appendChild: jasmine.createSpy('appendChild'),
+      },
+      createElement: jasmine.createSpy('createElement').and.returnValue({
+        id: '',
+        textContent: '',
+      }),
+      body: {
+        classList: {
+          add: jasmine.createSpy('add'),
+          remove: jasmine.createSpy('remove'),
+        },
+      },
+    };
+
+    TestBed.configureTestingModule({
+      providers: [CuraApiService, CuraThemeModule, { provide: DOCUMENT, useValue: mockDocument }, { provide: CURA_CONFIG, useValue: null }],
+    });
+    service = TestBed.inject(CuraApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should have default localAssetsPath', () => {
+    expect(service.localAssetsPath).toBe('/assets');
+  });
+
+  it('should have theme functions', () => {
+    expect(service.theme).toBeDefined();
+    expect(service.theme.load).toBeDefined();
+    expect(service.theme.setCustom).toBeDefined();
+    expect(service.theme.colors).toBeDefined();
+    expect(service.theme.fonts).toBeDefined();
+    expect(service.theme.spacing).toBeDefined();
+    expect(service.theme.breakpoints).toBeDefined();
+  });
+
+  it('should have colors API', () => {
+    expect(service.theme.colors.getColor).toBeDefined();
+    expect(typeof service.theme.colors.getColor).toBe('function');
+  });
+
+  it('should have fonts API', () => {
+    expect(service.theme.fonts.getFamily).toBeDefined();
+    expect(service.theme.fonts.getWeights).toBeDefined();
+    expect(service.theme.fonts.getSize).toBeDefined();
+    expect(service.theme.fonts.getColor).toBeDefined();
+  });
+
+  it('should have spacing API', () => {
+    expect(service.theme.spacing.getSpacing).toBeDefined();
+    expect(typeof service.theme.spacing.getSpacing).toBe('function');
+  });
+
+  it('should have breakpoints API', () => {
+    expect(service.theme.breakpoints.get).toBeDefined();
+    expect(typeof service.theme.breakpoints.get).toBe('function');
+  });
+
+  it('should toggle body scroll lock', () => {
+    service.toggleBodyScrollLock(true);
+    expect(mockDocument.body.classList.add).toHaveBeenCalledWith('cura-body-scroll-lock');
+
+    service.toggleBodyScrollLock(false);
+    expect(mockDocument.body.classList.remove).toHaveBeenCalledWith('cura-body-scroll-lock');
+  });
+
+  it('should get SSR vars', () => {
+    const vars = service.getSSRVars('default');
+    expect(vars).toBeDefined();
+    expect(typeof vars).toBe('object');
+  });
+
+  it('should add global classes', () => {
+    expect(mockDocument.createElement).toHaveBeenCalledWith('style');
+    expect(mockDocument.head.appendChild).toHaveBeenCalled();
+  });
+});
+
+describe('CuraApiService with config', () => {
+  let service: CuraApiService;
+  let mockDocument: any;
+  let onReadySpy: jasmine.Spy;
+
+  beforeEach(() => {
+    onReadySpy = jasmine.createSpy('onReady');
+    mockDocument = {
+      head: {
+        querySelector: jasmine.createSpy('querySelector').and.returnValue(null),
+        appendChild: jasmine.createSpy('appendChild'),
+      },
+      createElement: jasmine.createSpy('createElement').and.returnValue({
+        id: '',
+        textContent: '',
+      }),
+      body: {
+        classList: {
+          add: jasmine.createSpy('add'),
+          remove: jasmine.createSpy('remove'),
+        },
+      },
+    };
+
+    const config = {
+      localAssetsPath: '/custom-assets',
+      theme: 'custom',
+      onReady: onReadySpy,
+    };
+
+    TestBed.configureTestingModule({
+      providers: [CuraApiService, CuraThemeModule, { provide: DOCUMENT, useValue: mockDocument }, { provide: CURA_CONFIG, useValue: config }],
+    });
+    service = TestBed.inject(CuraApiService);
+  });
+
+  it('should use custom localAssetsPath', () => {
+    expect(service.localAssetsPath).toBe('/custom-assets');
+  });
+
+  it('should call onReady callback', () => {
+    expect(onReadySpy).toHaveBeenCalledWith(service);
+  });
+});

package/cura/api/cura-api.service.ts

@@ -0,0 +1,104 @@
+import { Injectable, WritableSignal, inject, signal } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { CuraConfig, APIThemeFunctions, CuraCustomTheme } from './cura-api.types';
+import { CuraThemeModule } from './modules/cura-theme.module';
+import { CURA_CONFIG } from './CuraConfig';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraApiService {
+  private curaConfig: CuraConfig = inject(CURA_CONFIG);
+  private document: Document = inject(DOCUMENT);
+  private themeModule: CuraThemeModule = new CuraThemeModule();
+
+  theme: APIThemeFunctions;
+  localAssetsPath: WritableSignal<string>;
+
+  constructor() {
+    this.localAssetsPath = signal(this.curaConfig?.localAssetsPath ? this.curaConfig?.localAssetsPath : `/assets`);
+
+    this.theme = {
+      load: (themeTag: string) => this.themeModule.load(themeTag),
+      setCustom: (customThemeDefinitions: CuraCustomTheme) => this.themeModule.setCustom(customThemeDefinitions),
+      colors: {
+        getColor: (colorWithDepth?: string, opacity?: number) => this.themeModule.colors.getColor(colorWithDepth, opacity),
+      },
+      fonts: {
+        getFamily: (type?: string) => this.themeModule.fonts.getFamily(type),
+        getWeights: () => this.themeModule.fonts.getWeights(),
+        getSize: () => this.themeModule.fonts.getSize(),
+        getColor: () => this.themeModule.fonts.getColor(),
+      },
+      spacing: {
+        getSpacing: () => this.themeModule.spacing.getSpacing(),
+      },
+      breakpoints: {
+        get: (size?: string, position?: string) => this.themeModule.breakpoints.get(size as any, position as any),
+      },
+    };
+
+    this.addGlobalClasses();
+
+    if (this.curaConfig && this.curaConfig.customTheme) {
+      this.theme.setCustom(this.curaConfig.customTheme);
+    } else {
+      const theme = this.curaConfig && this.curaConfig.theme ? this.curaConfig.theme : 'default';
+      this.theme.load(theme);
+    }
+
+    // Chama callback onReady se fornecido
+    if (this.curaConfig && this.curaConfig.onReady) {
+      this.curaConfig.onReady(this);
+    }
+  }
+
+  /**
+   * Adiciona classes CSS globais necessárias
+   */
+  private addGlobalClasses(): void {
+    if (!this.document) return;
+
+    const styleId = 'cura_global_classes';
+    let styleElement = this.document.head.querySelector(`#${styleId}`);
+
+    if (!styleElement) {
+      styleElement = this.document.createElement('style');
+      styleElement.id = styleId;
+      styleElement.textContent = `
+        .cura-body-scroll-lock {
+          overflow: hidden;
+          position: fixed;
+          left: 0;
+          right: 0;
+          top: 0;
+        }
+      `;
+      this.document.head.appendChild(styleElement);
+    }
+  }
+
+  /**
+   * Método para obter variáveis CSS para SSR
+   * @param theme Nome do tema
+   * @returns Objeto com variáveis CSS
+   */
+  getSSRVars(theme = 'default'): { [key: string]: any } {
+    return this.themeModule.loadVarsSSR(theme);
+  }
+
+  /**
+   * Método utilitário para adicionar/remover classe de scroll lock
+   * @param lock Se deve bloquear o scroll
+   */
+  toggleBodyScrollLock(lock: boolean): void {
+    if (!this.document) return;
+
+    const body = this.document.body;
+    if (lock) {
+      body.classList.add('cura-body-scroll-lock');
+    } else {
+      body.classList.remove('cura-body-scroll-lock');
+    }
+  }
+}

package/cura/api/cura-api.types.ts

@@ -0,0 +1,79 @@
+export interface CuraCustomThemeColorDepth {
+  base?: string;
+  depth0?: string;
+  depth20?: string;
+  depth40?: string;
+  depth80?: string;
+  depth100?: string;
+}
+
+export interface CuraCustomThemeColors {
+  primary?: CuraCustomThemeColorDepth;
+  secondary?: CuraCustomThemeColorDepth;
+  accent?: CuraCustomThemeColorDepth;
+}
+
+export interface CuraCustomThemeSpacing {
+  base?: string;
+}
+
+export interface CuraCustomThemeFontFamily {
+  title?: string;
+  body?: string;
+}
+
+export interface CuraCustomThemeFontSize {
+  base?: string;
+}
+
+export interface CuraCustomThemeFont {
+  family?: CuraCustomThemeFontFamily;
+  size?: CuraCustomThemeFontSize;
+}
+
+export interface CuraCustomThemeDefinitions {
+  colors?: CuraCustomThemeColors;
+  spacing?: CuraCustomThemeSpacing;
+  font?: CuraCustomThemeFont;
+}
+
+export interface CuraCustomTheme {
+  name: string;
+  definitions: CuraCustomThemeDefinitions;
+  fromPreset?: string;
+}
+
+export interface CuraConfig {
+  localAssetsPath?: string;
+  theme?: string;
+  customTheme?: CuraCustomTheme;
+  onReady?(api?: any): any;
+}
+
+export enum InterfaceModes {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+export interface APIThemeFunctions {
+  load(themeTag: string): unknown;
+  setCustom(customThemeDefinitions: CuraCustomTheme): unknown;
+  colors: {
+    getColor(colorWithDepth?: string, opacity?: number): string;
+  };
+  fonts: {
+    getFamily(type?: string): string;
+    getWeights(): any;
+    getSize(): string;
+    getColor(): string;
+  };
+  spacing: {
+    getSpacing(): string;
+  };
+  breakpoints: {
+    get(size?: string, position?: string): any;
+  };
+}
+
+export type BreakpointSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type BreakpointPosition = 'min' | 'max';

package/cura/api/index.ts

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

package/cura/api/modules/cura-theme-breakpoints.module.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Static } from '../theme-presets/static';
+import { BreakpointSize, BreakpointPosition } from '../cura-api.types';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraThemeBreakpointsModule {
+  /**
+   * Returns breakpoint values defined in the theme
+   * @param size Breakpoint size
+   * @param position Min or max position
+   * @returns Breakpoint value or all breakpoints
+   */
+  get(size: BreakpointSize | null = null, position: BreakpointPosition | null = null): any {
+    if (size) {
+      const breakpoint = position ? Static.breakpoints[size][position] : Static.breakpoints[size];
+      if (breakpoint || breakpoint === 0) return breakpoint;
+    }
+    return Static.breakpoints;
+  }
+}

package/cura/api/modules/cura-theme-colors.module.ts

@@ -0,0 +1,89 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+import { Static } from '../theme-presets/static';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraThemeColorsModule {
+  private document: Document = inject(DOCUMENT);
+
+  private readonly neutralDepthAlias: { [key: string]: string } = {
+    purewhite: '0',
+    white: '100',
+    pale: '200',
+    lighter: '300',
+    light: '400',
+    base: '500',
+    medium: '600',
+    dark: '700',
+    darker: '800',
+    black: '900',
+  };
+
+  private readonly colorDepthAlias: { [key: string]: string } = {
+    lighter: '100',
+    light: '300',
+    base: '500',
+    dark: '700',
+    darker: '900',
+  };
+
+  /**
+   * Get theme color.
+   * @param colorWithDepth string Ex.: primary-light
+   * @param opacity number Opacity value (0-1)
+   * @returns RGBA value.
+   */
+  getColor(colorWithDepth: string = 'primary-base', opacity = 1): string {
+    const { color, depth } = this.splitColorDepth(colorWithDepth);
+    const staticColor = this.getStatic(color, depth, opacity);
+    if (staticColor) return staticColor;
+    return this.getDynamic(color, depth, opacity);
+  }
+
+  /**
+   * Internal: Look for static color by name and depth.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @param opacity Opacity value.
+   * @returns RGBA value.
+   */
+  private getStatic(color: string, depth: string, opacity = 1): string | null {
+    const colorObj = (Static.color as any)[color];
+    if (!colorObj) return null;
+
+    const alias = color === 'neutral' ? this.neutralDepthAlias[depth] : this.colorDepthAlias[depth];
+    const colorValue = colorObj[alias] || colorObj[depth];
+
+    return colorValue ? `rgba(${colorValue}, ${opacity})` : null;
+  }
+
+  /**
+   * Internal: Look for theme dynamic colors.
+   * @param color Color name.
+   * @param depth Color depth.
+   * @param opacity Opacity value.
+   * @returns RGBA value.
+   */
+  private getDynamic(color: string, depth: string, opacity: number): string {
+    const themeVar = this.colorDepthAlias[depth] ? `--cura-color-${color}-${this.colorDepthAlias[depth]}` : `--cura-color-${color}-${depth}`;
+
+    if (typeof window !== 'undefined' && typeof getComputedStyle !== 'undefined' && this.document) {
+      const computedValue = getComputedStyle(this.document.documentElement).getPropertyValue(themeVar);
+      return computedValue ? `rgba(var(${themeVar}), ${opacity})` : `rgba(var(--cura-color-primary-500), ${opacity})`;
+    }
+
+    // Fallback para SSR
+    return `rgba(var(${themeVar}), ${opacity})`;
+  }
+
+  /**
+   * Internal: Split color strings
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark.
+   * @returns Object { color: string, depth: string }.
+   */
+  private splitColorDepth(colorWithDepth: string): { color: string; depth: string } {
+    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+    return { color: color ?? 'primary', depth: depth ?? 'base' };
+  }
+}

package/cura/api/modules/cura-theme-fonts.module.ts

@@ -0,0 +1,54 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+import { ThemeDefault } from '../theme-presets/theme-default';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraThemeFontsModule {
+  private document: Document = inject(DOCUMENT);
+
+  /**
+   * Get the CSS variable related to the font family defined by the theme.
+   * @param type 'body' | 'heading' | 'display'
+   * @returns Related css variable as a string.
+   */
+  getFamily(type: string = 'body'): string {
+    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+
+    if (typeof window !== 'undefined' && typeof getComputedStyle !== 'undefined' && this.document) {
+      const computedValue = getComputedStyle(this.document.body).getPropertyValue(curaFontFamilyCSSVar);
+      return computedValue ? `var(${curaFontFamilyCSSVar})` : 'var(--cura-font-body)';
+    }
+
+    // Fallback para SSR
+    return `var(${curaFontFamilyCSSVar})`;
+  }
+
+  /**
+   * Get the CSS variables related to font weights defined by the theme.
+   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
+   */
+  getWeights(): any {
+    const weights: { [key: string]: string } = {};
+    Object.keys(ThemeDefault.font.weights).forEach((key) => {
+      weights[key] = `var(--cura-font-weights-${key})`;
+    });
+    return weights;
+  }
+
+  /**
+   * Get the CSS variable related to the font size base defined by the theme.
+   * @returns Related CSS variable as a string.
+   */
+  getSize(): string {
+    return `var(--cura-font-size)`;
+  }
+
+  /**
+   * Get CSS variable related to the font color defined by the theme.
+   * @returns Related CSS variable as a string.
+   */
+  getColor(): string {
+    return `var(--cura-font-color)`;
+  }
+}

package/cura/api/modules/cura-theme-spacing.module.ts

@@ -0,0 +1,23 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraThemeSpacingModule {
+  private document: Document = inject(DOCUMENT);
+
+  private readonly curaSpacing = '--cura-spacing-base';
+  /**
+   * Returns the base spacing var defined in the theme
+   * @returns CSS variable string or fallback value
+   */
+  getSpacing(): string {
+    if (typeof window !== 'undefined' && typeof getComputedStyle !== 'undefined' && this.document) {
+      const computedValue = getComputedStyle(this.document.body).getPropertyValue(this.curaSpacing);
+      return computedValue ? `var(${this.curaSpacing})` : '4';
+    }
+
+    // Fallback para SSR
+    return `var(${this.curaSpacing})`;
+  }
+}

package/cura/api/modules/cura-theme.module.ts

@@ -0,0 +1,116 @@
+import { DOCUMENT, inject, Injectable } from '@angular/core';
+import { ThemePresets } from '../theme-presets/theme-presets';
+import { CuraCustomTheme } from '../cura-api.types';
+import { CuraThemeColorsModule } from './cura-theme-colors.module';
+import { CuraThemeSpacingModule } from './cura-theme-spacing.module';
+import { CuraThemeFontsModule } from './cura-theme-fonts.module';
+import { CuraThemeBreakpointsModule } from './cura-theme-breakpoints.module';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CuraThemeModule {
+  public colors: CuraThemeColorsModule = inject(CuraThemeColorsModule);
+  public spacing: CuraThemeSpacingModule = inject(CuraThemeSpacingModule);
+  public fonts: CuraThemeFontsModule = inject(CuraThemeFontsModule);
+  public breakpoints: CuraThemeBreakpointsModule = inject(CuraThemeBreakpointsModule);
+  private document: Document = inject(DOCUMENT);
+
+  private rootElement: HTMLElement | null = null;
+  private readonly prefix = '--cura';
+  private groupObject: { [key: string]: any } = {};
+
+  constructor() {
+    if (this.document?.defaultView) {
+      this.rootElement = this.document.defaultView.document.documentElement;
+    }
+  }
+
+  /**
+   * Load a theme.
+   * @param theme Theme tag.
+   */
+  load(theme = 'default'): void {
+    const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets['default'];
+    this.buildCssVars(this.prefix, preset);
+  }
+
+  /**
+   * Load variables for SSR
+   * @param theme Theme tag
+   * @returns Object with CSS variables
+   */
+  loadVarsSSR(theme = 'default'): { [key: string]: any } {
+    const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets['default'];
+    this.buildCssVars(this.prefix, preset, true);
+    return this.groupObject;
+  }
+
+  /**
+   * Define a custom theme
+   * @param customTheme Custom theme object definition
+   */
+  setCustom(customTheme: CuraCustomTheme): void {
+    const customTag = customTheme.name;
+    if (customTag in ThemePresets) {
+      console.log('Error building custom theme. Theme %s already exists. Loading default theme.', customTag);
+      this.load('default');
+    } else {
+      const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets ? ThemePresets[customTheme.fromPreset] : ThemePresets['default'];
+      const newTheme = { ...JSON.parse(JSON.stringify(preset)) };
+      this.mergeObject(customTheme.definitions, newTheme);
+      ThemePresets[customTag] = newTheme;
+      this.load(customTag);
+    }
+  }
+
+  /* Private methods */
+
+  /**
+   * Set css var based on object structure
+   */
+  private setCssVar = (prop: [string, any], path: string): void => {
+    if (!this.rootElement) return;
+    const varName = this.groupPath(path, prop[0]);
+    this.rootElement.style.setProperty(varName, prop[1]);
+  };
+
+  private groupPath = (a: string, b: string): string => `${a}-${b}`;
+
+  private isObject = (val: any): boolean => {
+    return val && typeof val === 'object' && !Array.isArray(val);
+  };
+
+  /**
+   * Deep merge objects
+   */
+  private mergeObject = (from: any, to: any): void => {
+    const entries = Object.entries(from);
+    for (let e of entries) {
+      if (this.isObject(e[1])) {
+        this.mergeObject(e[1], to[e[0]]);
+      } else {
+        to[e[0]] = e[1];
+      }
+    }
+  };
+
+  /**
+   * Set css vars from preset object
+   */
+  private buildCssVars = (path: string, obj: any, isGroup = false): void => {
+    const entries = Object.entries(obj);
+    for (let e of entries) {
+      if (this.isObject(e[1])) {
+        this.buildCssVars(this.groupPath(path, e[0]), e[1], isGroup);
+      } else {
+        if (isGroup) {
+          const varName = this.groupPath(path, e[0]);
+          this.groupObject[varName] = e[1];
+        } else {
+          this.setCssVar(e, path);
+        }
+      }
+    }
+  };
+}

package/cura/api/ng-package.json

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

package/cura/api/public-api.ts

@@ -0,0 +1,11 @@
+export * from './cura-api.service';
+export * from './cura-api.types';
+export * from './modules/cura-theme.module';
+export * from './modules/cura-theme-colors.module';
+export * from './modules/cura-theme-fonts.module';
+export * from './modules/cura-theme-spacing.module';
+export * from './modules/cura-theme-breakpoints.module';
+export * from './theme-presets/theme-presets';
+export * from './theme-presets/theme-default';
+export * from './theme-presets/static';
+export * from './CuraConfig';