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

package/core/services/site-back-end/site-back-end.service.ts

@@ -0,0 +1,48 @@
+import { Injectable, PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { Observable } from 'rxjs';
+import { LIB_CONFIG, LibConfig } from '../../tokens/LibConfig';
+import { toQueryParams } from '../../helpers/toQueryParams.func';
+import { HttpClientService } from '../http-client/http-client.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SiteBackendService {
+  private httpClientService = inject(HttpClientService);
+  private libConfig = inject<LibConfig>(LIB_CONFIG);
+  private platformId = inject(PLATFORM_ID);
+
+  siteApiUrl: string;
+
+  constructor() {
+    this.siteApiUrl = this.getApiUrl();
+  }
+
+  private getApiUrl(): string {
+    if (isPlatformServer(this.platformId) && this.libConfig.server) {
+      return this.libConfig.siteApi.baseInternal;
+    }
+    return this.libConfig.siteApi.base;
+  }
+
+  /**
+   * GET para qualquer endpoint do back-end do site.
+   * @param path - O caminho do recurso. (Inicia sem '/'. Ex: 'unidades/wp')
+   * @param params - Parâmetros opcionais para a requisição.
+   * @returns Observable que emite os dados retornados pelo back-end.
+   */
+  get<T = any>(path: string, params?: any): Observable<T> {
+    return this.httpClientService.get<T>(`${this.siteApiUrl}${path}${toQueryParams(params)}`);
+  }
+
+  /**
+   * POST para qualquer endpoint do back-end do site.
+   * @param path - O caminho do recurso. (Inicia sem '/'. Ex: 'unidades/wp')
+   * @param params - Parâmetros opcionais para a requisição.
+   * @returns Observable que emite os dados retornados pelo back-end.
+   */
+  post<T = any>(path: string, params?: any): Observable<T> {
+    return this.httpClientService.post<T>(`${this.siteApiUrl}${path}`, params);
+  }
+}

package/core/services/ssr-response/ssr-response.service.spec.ts

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

package/core/services/ssr-response/ssr-response.service.ts

@@ -0,0 +1,57 @@
+import { Injectable, inject, RESPONSE_INIT } from '@angular/core';
+
+export interface ISsrResponseService {
+  setStatus(code: number, message?: string): this;
+  setNotFound(message?: string): this;
+  setError(message?: string): this;
+  setRedirect(params?: { statusCode?: number; url?: string }): this;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SsrResponseService implements ISsrResponseService {
+  private readonly responseInit = inject(RESPONSE_INIT, { optional: true });
+
+  setStatus(code: number, message?: string): this {
+    if (this.responseInit) {
+      this.responseInit.status = code;
+      if (message !== undefined) {
+        this.responseInit.statusText = message;
+      }
+    }
+    return this;
+  }
+
+  setNotFound(message = 'Não encontrado'): this {
+    if (this.responseInit) {
+      this.responseInit.status = 404;
+      this.responseInit.statusText = message;
+    }
+    return this;
+  }
+
+  setError(message = 'Erro interno de servidor'): this {
+    if (this.responseInit) {
+      this.responseInit.status = 500;
+      this.responseInit.statusText = message;
+    }
+    return this;
+  }
+
+  setRedirect(
+    params: { statusCode?: number; url?: string } = {
+      statusCode: 301,
+      url: undefined,
+    },
+  ): this {
+    if (this.responseInit && params.url) {
+      this.responseInit.status = params.statusCode ?? 301;
+      this.responseInit.statusText = params.statusCode === 302 ? 'Found' : 'Moved Permanently';
+      const existingHeaders = this.responseInit.headers ? new Headers(this.responseInit.headers as HeadersInit) : new Headers();
+      existingHeaders.set('Location', params.url);
+      this.responseInit.headers = existingHeaders;
+    }
+    return this;
+  }
+}

package/core/tokens/LibConfig.ts

@@ -0,0 +1,64 @@
+import { ElementRef, InjectionToken } from '@angular/core';
+
+export interface LibConfig {
+  production: boolean;
+  environmentName: string;
+  siteProject: string;
+  server: boolean;
+  siteName: string;
+  siteUrl: string;
+  siteSufix?: string;
+  skipDuplicationSufixRule: boolean;
+  client_id: string;
+  xOriginApplication: string;
+  searchApiEnv: string;
+  fallbackImgSrc: string;
+
+  // Cura iconset
+  iconsetDefaultList: string[];
+
+  // site-back-end (SNF)
+  siteApi: {
+    auth: {
+      user: string;
+      password: string;
+    };
+    base: string;
+    baseInternal: string;
+    recaptcha: string;
+    centroEstudos: string;
+  };
+
+  // Algolia Search
+  algoliaConfig: {
+    id: string;
+    key: string;
+  };
+
+  // Wordpress
+  wpUrl: string;
+
+  // SEO
+  keywords: string;
+  logoPath?: string;
+
+  // Mapbox
+  mapboxAccessToken: string;
+  mapboxSSRAccessToken: string;
+
+  // rdsitelink custom anchor adjustment
+  customAnchorAdjustment?: (document: Document) => number;
+  customPhoneModalCondition?: (element: ElementRef<any>) => boolean;
+  customInternalLinkNavigation?: (noBaseHref: string) => boolean;
+
+  // rdsitelink navigation behavior
+  forcePageReload?: boolean;
+
+  // TransferState configuration
+  transferState?: {
+    includeHeaders?: string[];
+  };
+}
+
+// Configura a lib com informações especificas de cada projeto.
+export const LIB_CONFIG = new InjectionToken<LibConfig>('libConfig');

package/core/tokens/express.tokens.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import type { Request, Response } from 'express';
+
+export const REQUEST: InjectionToken<Request> = new InjectionToken<Request>('REQUEST');
+export const RESPONSE: InjectionToken<Response> = new InjectionToken<Response>('RESPONSE');

package/cura/accordion/cura-accordion/cura-accordion.component.html

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

package/cura/accordion/cura-accordion/cura-accordion.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  color: var(--font-color);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-regular);
+}

package/cura/accordion/cura-accordion/cura-accordion.component.ts

@@ -0,0 +1,203 @@
+import { Component, inject, input, computed, AfterViewInit, OnDestroy, ElementRef, contentChildren } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { AccordionColorMode, AccordionBehavior, AccordionLevel } from '../cura-accordion.definitions';
+import { CuraAccordionItemComponent } from '../cura-accordion-item/cura-accordion-item.component';
+
+@Component({
+  selector: 'cura-accordion',
+  templateUrl: './cura-accordion.component.html',
+  styleUrls: ['./cura-accordion.component.scss'],
+  host: {
+    '[style.--base-spacing]': 'baseSpacing()',
+    '[style.--neutral-base]': 'neutralBase()',
+    '[style.--font-size]': 'fontSize()',
+    '[style.--font-color]': 'fontColor()',
+    '[style.--font-family]': 'fontFamily()',
+    '[style.--font-weight-regular]': 'weights().regular',
+    '[style.--acc-color]': 'accordionColors().accColor',
+    '[style.--acc-color-hover]': 'accordionColors().accColorHover',
+    '[style.--acc-color-icon]': 'accordionColors().accColorIcon',
+    '[style.--acc-color-icon-hover]': 'accordionColors().accColorIconHover',
+    '[style.--acc-color-inverted]': 'accordionColors().accColorInverted',
+    '[style.--acc-color-hover-inverted]': 'accordionColors().accColorHoverInverted',
+    '[style.--acc-color-icon-inverted]': 'accordionColors().accColorIconInverted',
+    '[style.--acc-color-icon-hover-inverted]': 'accordionColors().accColorIconHoverInverted',
+  },
+})
+export class CuraAccordionComponent implements AfterViewInit, OnDestroy {
+  private curaApi = inject(CuraApiService);
+  private elementRef = inject(ElementRef);
+
+  /**
+   * Color scheme base color
+   */
+  color = input<string>('primary');
+
+  /**
+   * Set the color mode to dark or light
+   */
+  colorMode = input<AccordionColorMode>('dark');
+
+  /**
+   * Accordion items icons
+   */
+  iconSize = input<number>(20);
+  labelIcon = input<string>('');
+  openIcon = input<string>('down');
+  closeIcon = input<string>('up');
+
+  /**
+   * Color scheme base color
+   * (By default, the icon will use the same color of 'color')
+   */
+  iconColor = input<string>('');
+
+  /**
+   * Accordion behavior when item is clicked
+   * (The default will close all items except the current one)
+   */
+  behavior = input<AccordionBehavior>('default');
+
+  /**
+   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+   * Values: 1 to 6 (3 default).
+   */
+  level = input<AccordionLevel>(3);
+
+  accordionItems = contentChildren(CuraAccordionItemComponent);
+
+  private mutationObserver?: MutationObserver;
+
+  // Computed properties para estilos
+  weights = computed(() => {
+    return this.curaApi.theme.fonts.getWeights();
+  });
+
+  baseSpacing = computed(() => {
+    return this.curaApi.theme.spacing.getSpacing();
+  });
+
+  neutralBase = computed(() => {
+    return this.curaApi.theme.colors.getColor('neutral-base');
+  });
+
+  fontSize = computed(() => {
+    return this.curaApi.theme.fonts.getSize();
+  });
+
+  fontColor = computed(() => {
+    return this.curaApi.theme.fonts.getColor();
+  });
+
+  fontFamily = computed(() => {
+    return this.curaApi.theme.fonts.getFamily();
+  });
+
+  accordionColors = computed(() => {
+    const iconColorValue = this.iconColor() || this.color();
+    return {
+      accColor: this.curaApi.theme.colors.getColor('neutral-black'),
+      accColorHover: this.curaApi.theme.colors.getColor(`${this.color()}-base`),
+      accColorIcon: this.curaApi.theme.colors.getColor(`${iconColorValue}-base`),
+      accColorIconHover: this.curaApi.theme.colors.getColor(`${iconColorValue}-darker`),
+      accColorInverted: this.curaApi.theme.colors.getColor('neutral-white'),
+      accColorHoverInverted: this.curaApi.theme.colors.getColor(`${this.color()}-lighter`),
+      accColorIconInverted: this.curaApi.theme.colors.getColor('neutral-white'),
+      accColorIconHoverInverted: this.curaApi.theme.colors.getColor(`${iconColorValue}-lighter`),
+    };
+  });
+
+  childConfiguration = computed(() => {
+    return {
+      colorMode: this.colorMode(),
+      iconColor: this.iconColor() || this.color(),
+      iconSize: this.iconSize(),
+      labelIcon: this.labelIcon(),
+      openIcon: this.openIcon(),
+      closeIcon: this.closeIcon(),
+      level: this.level(),
+    };
+  });
+
+  ngAfterViewInit() {
+    // Configurar propriedades dos cura-accordion-item
+    this.setChildrenProperties();
+
+    // Observar mudanças nos cura-accordion-item
+    this.setupMutationObserver();
+  }
+
+  ngOnDestroy() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+
+  private setupMutationObserver() {
+    if (typeof MutationObserver === 'undefined') return;
+
+    this.mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'opened') {
+          const target = mutation.target as any;
+          if ((target as HTMLElement)?.getAttribute('opened') === 'true' && this.behavior() === 'default') {
+            // Fechar todos os outros itens
+            this.accordionItems().forEach((item) => {
+              if (item.elementRef.nativeElement !== target) {
+                item.opened.set(false);
+              }
+            });
+          }
+        }
+        if (mutation.type === 'childList') {
+          const addedNodes = Array.from(mutation.addedNodes || []);
+          for (let node of addedNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              this.setChildProperties(node as HTMLElement);
+            }
+          }
+        }
+      }
+    });
+
+    const options: MutationObserverInit = {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['opened'],
+    };
+
+    this.mutationObserver.observe(this.elementRef.nativeElement, options);
+  }
+
+  private setChildrenProperties() {
+    this.accordionItems().forEach((item) => {
+      this.setChildProperties(item.elementRef.nativeElement);
+      this.setItemProperties(item);
+    });
+  }
+
+  private setChildProperties(element: HTMLElement) {
+    // Configurar propriedades via atributos para compatibilidade
+    const config = this.childConfiguration();
+    element.setAttribute('color-mode', config.colorMode);
+    element.setAttribute('icon-color', config.iconColor);
+    element.setAttribute('icon-size', config.iconSize.toString());
+    if (config.labelIcon) element.setAttribute('label-icon', config.labelIcon);
+    element.setAttribute('open-icon', config.openIcon);
+    element.setAttribute('close-icon', config.closeIcon);
+    element.setAttribute('level', config.level.toString());
+  }
+
+  private setItemProperties(item: CuraAccordionItemComponent) {
+    // Configurar propriedades diretamente no componente
+    const config = this.childConfiguration();
+    item.colorMode.set(config.colorMode);
+    item.iconColor.set(config.iconColor);
+    item.iconSize.set(config.iconSize);
+    if (config.labelIcon) item.labelIcon.set(config.labelIcon);
+    item.openIcon.set(config.openIcon);
+    item.closeIcon.set(config.closeIcon);
+    item.level.set(config.level);
+  }
+}

package/cura/accordion/cura-accordion-item/cura-accordion-item.component.html

@@ -0,0 +1,20 @@
+<div [ngClass]="containerClasses()">
+  <div class="label" (click)="accordionItemClick($event)">
+    <div class="label-container">
+      <div class="label-content">
+        @if (labelIcon()) {
+          <cura-icon [name]="labelIcon()" [size]="iconSize()" color="neutral-black"> </cura-icon>
+        }
+        <cura-heading size="small" [level]="level()" weight="bold" marginBlock="0" color="neutral-black">
+          {{ label() }}
+        </cura-heading>
+      </div>
+      <cura-icon [name]="currentIcon()" [size]="iconSize()" color="neutral-black"> </cura-icon>
+    </div>
+  </div>
+  <div class="content">
+    <div class="content-wrapper">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>

package/cura/accordion/cura-accordion-item/cura-accordion-item.component.scss

@@ -0,0 +1,139 @@
+@use '../../scss/mixins/responsive.scss' as responsive;
+@use '../../scss/mixins/spacing.scss' as spacing;
+
+:host {
+  display: block;
+
+  .accordion-item {
+    width: 100%;
+
+    &::after {
+      content: '';
+      display: block;
+      border-top: solid 1px var(--neutral-base);
+      width: 100%;
+    }
+
+    &:hover:not(.active)::after {
+      content: '';
+      display: block;
+      border-top: solid 1px var(--acc-color-icon-hover);
+      width: 100%;
+    }
+
+    .label {
+      display: flex;
+      flex-direction: column;
+
+      .label-container {
+        display: flex;
+        flex-grow: 1;
+        justify-content: space-between;
+        align-items: center;
+        gap: #{spacing.$spacing-xxxs};
+        padding: #{spacing.$spacing-xxxs};
+        word-break: break-word;
+        cursor: pointer;
+        font-size: 1.14em;
+        font-weight: var(--font-weight-regular);
+
+        .label-content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: #{spacing.$spacing-xxxs};
+
+          cura-icon {
+            --color: var(--acc-color) !important;
+          }
+
+          cura-heading {
+            --color-body: var(--acc-color) !important;
+          }
+        }
+
+        cura-icon {
+          --color: var(--acc-color-icon) !important;
+          margin-right: 4px;
+        }
+
+        &:hover {
+          cura-heading {
+            --color-body: var(--acc-color-hover) !important;
+          }
+          cura-icon {
+            --color: var(--acc-color-icon-hover) !important;
+          }
+        }
+      }
+    }
+
+    .content {
+      font-size: 1em;
+      overflow: hidden;
+      max-height: 0;
+      transition: max-height 0.25s ease;
+      .content-wrapper {
+        padding: #{spacing.$spacing-xxxs};
+      }
+    }
+
+    &.inverted {
+      &:hover:not(.active)::after {
+        content: '';
+        display: block;
+        border-top: solid 1px var(--acc-color-icon-hover-inverted);
+        width: 100%;
+      }
+
+      .label .label-container {
+        cura-heading {
+          --color-body: var(--acc-color-inverted) !important;
+        }
+        cura-icon {
+          --color: var(--acc-color-icon-inverted) !important;
+        }
+        &:hover {
+          cura-heading {
+            --color-body: var(--acc-color-hover-inverted) !important;
+          }
+          cura-icon {
+            --color: var(--acc-color-icon-hover-inverted) !important;
+          }
+        }
+      }
+    }
+
+    &.active {
+      .content {
+        max-height: 200vh;
+        overflow-y: auto;
+        transition: max-height 0.5s ease 0.14s;
+      }
+    }
+  }
+
+  @include responsive.medium-only() {
+    .accordion-item {
+      .label .label-container {
+        font-size: 1.29em;
+      }
+
+      .content {
+        font-size: 1.14em;
+      }
+    }
+  }
+
+  @include responsive.large-up() {
+    .accordion-item {
+      .label .label-container {
+        font-size: 1.29em;
+      }
+
+      .content {
+        font-size: 1.14em;
+      }
+    }
+  }
+}

package/cura/accordion/cura-accordion-item/cura-accordion-item.component.ts

@@ -0,0 +1,75 @@
+import { Component, inject, input, signal, ElementRef, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';
+import { AccordionColorMode, AccordionLevel } from '../cura-accordion.definitions';
+
+@Component({
+  selector: 'cura-accordion-item',
+  imports: [CommonModule, CuraIconComponent, CuraHeadingComponent],
+  templateUrl: './cura-accordion-item.component.html',
+  styleUrls: ['./cura-accordion-item.component.scss'],
+  host: {
+    '[attr.opened]': 'opened().toString()',
+  },
+})
+export class CuraAccordionItemComponent {
+  public elementRef = inject(ElementRef);
+
+  /**
+   * Text label for accordion item
+   */
+  label = input<string>('');
+
+  /** ***Properties below are inherited from the cura-accordion*** */
+  /**
+   * Accordion items icons
+   */
+  iconSize = signal<number>(20);
+  labelIcon = signal<string>('');
+  openIcon = signal<string>('down');
+  closeIcon = signal<string>('up');
+
+  /**
+   * Color scheme base color
+   * (By default, the icon will use the same color of 'color')
+   */
+  iconColor = signal<string>('');
+
+  /**
+   * Set the color mode to dark or light
+   */
+  colorMode = signal<AccordionColorMode>('dark');
+
+  /**
+   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+   * Values: 1 to 6 (3 default).
+   */
+  level = signal<AccordionLevel>(3);
+
+  /**
+   * Controls if the accordion item is opened
+   */
+  opened = signal<boolean>(false);
+
+  // Computed signal para classes (equivalente ao Stencil)
+  containerClasses = computed(() => {
+    const classes: { [key: string]: boolean } = {};
+    classes['accordion-item'] = true;
+    classes['active'] = this.opened();
+    classes['inverted'] = this.colorMode() === 'light';
+    return classes;
+  });
+
+  currentIcon = computed(() => {
+    return this.opened() ? this.closeIcon() : this.openIcon();
+  });
+
+  accordionItemClick(event: Event) {
+    event.preventDefault();
+    this.opened.set(!this.opened());
+
+    // Emitir evento customizado para o MutationObserver do parent
+    this.elementRef.nativeElement.setAttribute('opened', this.opened().toString());
+  }
+}

package/cura/accordion/cura-accordion.definitions.ts

@@ -0,0 +1,5 @@
+export type AccordionColorMode = 'dark' | 'light';
+
+export type AccordionBehavior = 'default' | 'keep-open';
+
+export type AccordionLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/cura/accordion/index.ts

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

package/cura/accordion/ng-package.json

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

package/cura/accordion/public-api.ts

@@ -0,0 +1,3 @@
+export * from './cura-accordion.definitions';
+export * from './cura-accordion/cura-accordion.component';
+export * from './cura-accordion-item/cura-accordion-item.component';

package/cura/api/CuraConfig.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { CuraConfig } from './cura-api.types';
+
+// Configura o cura com informações especificas de cada projeto.
+export const CURA_CONFIG = new InjectionToken<CuraConfig>('curaConfig');