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

package/components/cta-wrapper/cta-wrapper.component.html

@@ -0,0 +1,54 @@
+@if (content()?.ctas?.length) {
+  @if (content()?.title && showTitleAndText()) {
+    <h3 class="ctas-title">{{ content()?.title }}</h3>
+  }
+
+  @if (content()?.text && showTitleAndText()) {
+    <p class="ctas-text" [innerHTML]="content()?.text"></p>
+  }
+
+  @if (!seeMoreControl) {
+    <nav class="ctas-wrapper" data-testid="_rdsite-ctas-wrapper">
+      @if (!bannerControl) {
+        <ngu-carousel #nguCarouselCtas [inputs]="carouselCtasConfig" [dataSource]="content()?.ctas">
+          <ngu-item *nguCarouselDef="let cta; let i = index">
+            <a rdsitelink class="cta" [href]="cta?.link" (click)="ctaWrapperItemClicked($event)">
+              @if (cta?.icon) {
+                <cura-icon [name]="cta.icon" size="24" [color]="colors().icon"></cura-icon>
+              }
+              <p>{{ cta?.label }}</p>
+            </a>
+          </ngu-item>
+        </ngu-carousel>
+
+        <div class="show-more" data-testid="_rdsite-ctas-wrapper-show-more">
+          <button type="button" (click)="moreOptions()">Mais opções</button>
+        </div>
+      } @else {
+        @for (cta of content()?.ctas; track $index) {
+          @if (cta?.label) {
+            <a rdsitelink class="cta" [href]="cta?.link" (click)="ctaWrapperItemClicked($event)">
+              @if (cta?.icon) {
+                <cura-icon [name]="cta.icon" size="24" [color]="colors().icon"></cura-icon>
+              }
+              <p>{{ cta?.label }}</p>
+            </a>
+          }
+        }
+      }
+    </nav>
+  } @else {
+    <nav class="more-options" data-testid="_rdsite-ctas-wrapper-more-options">
+      @for (cta of content()?.ctas; track $index) {
+        @if (cta?.label) {
+          <a rdsitelink class="cta" [href]="cta?.link" (click)="ctaWrapperItemClicked($event)">
+            @if (cta?.icon) {
+              <cura-icon [name]="cta.icon" size="24" [color]="colors().icon"></cura-icon>
+            }
+            <p>{{ cta?.label }}</p>
+          </a>
+        }
+      }
+    </nav>
+  }
+}

package/components/cta-wrapper/cta-wrapper.component.scss

@@ -0,0 +1,123 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: block;
+
+  .ctas-title,
+  .ctas-text {
+    font-family: var(--font-family);
+    padding: 0;
+    margin: 0;
+
+    &:not(:last-child) {
+      padding-bottom: 0;
+    }
+  }
+
+  .ctas-title {
+    color: var(--icon-color);
+    font-size: 29px;
+    font-weight: 500;
+    line-height: 38px;
+    letter-spacing: -0.58px;
+    padding: 0 24px;
+    margin-bottom: 24px;
+
+    @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+      font-size: 33px;
+      line-height: 43px;
+      letter-spacing: -0.66px;
+      padding: 0;
+    }
+  }
+
+  .ctas-text {
+    color: var(--icon-color);
+    font-size: 17px;
+    font-weight: 400;
+    line-height: 25px;
+    padding: 0 24px;
+
+    @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+      font-size: 19px;
+      line-height: 28px;
+      padding: 0;
+    }
+  }
+
+  .ctas-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 50px;
+
+    ngu-carousel {
+      max-width: 100vw;
+      margin-left: -6%;
+
+      &::ng-deep .ngucarousel {
+        padding-left: 6%;
+      }
+    }
+
+    ngu-item {
+      a {
+        margin-right: 16px;
+      }
+    }
+
+    .show-more {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+      height: auto;
+
+      button {
+        font-family: var(--font-family);
+        color: var(--icon-color);
+        background-color: transparent;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 145%;
+        letter-spacing: 0.32px;
+        text-decoration-line: underline;
+        text-align: center;
+      }
+    }
+  }
+
+  .more-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 60px;
+  }
+
+  .cta {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    min-width: 150px;
+    height: 100%;
+    min-height: 150px;
+    padding: 24px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    text-decoration: none;
+
+    p {
+      font-family: var(--font-family);
+      color: var(--icon-color);
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 145%;
+      letter-spacing: 0.32px;
+      padding: 0;
+      margin: 0;
+      text-align: center;
+    }
+  }
+}

package/components/cta-wrapper/cta-wrapper.component.spec.ts

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

package/components/cta-wrapper/cta-wrapper.component.ts

@@ -0,0 +1,77 @@
+import { isPlatformBrowser } from '@angular/common';
+import { Component, HostBinding, HostListener, OnInit, PLATFORM_ID, input, viewChild, inject, output } from '@angular/core';
+import { NguCarousel, NguCarouselConfig, NguCarouselDefDirective, NguItemComponent } from '@ngu/carousel';
+import { CtaWrapper, RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { NguCarouselService } from '@rededor/site-front-end-lib/services/ngu-carousel';
+import { MediaQueries } from '@rededor/site-front-end-lib/shared';
+
+@Component({
+  selector: 'rdsite-cta-wrapper',
+  imports: [NguCarousel, NguItemComponent, NguCarouselDefDirective, RdsiteLinkDirective, CuraIconComponent],
+  templateUrl: './cta-wrapper.component.html',
+  styleUrl: './cta-wrapper.component.scss',
+})
+export class CtaWrapperComponent implements OnInit {
+  private readonly curaApiService = inject(CuraApiService);
+  private nguService = inject(NguCarouselService);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly content = input<CtaWrapper | null>(null);
+  readonly showTitleAndText = input(true);
+  readonly colors = input<{
+    border: string;
+    icon: string;
+  }>({ border: 'primary-base', icon: 'primary-dark' });
+
+  readonly ctaWrapperItemClick = output<Event>();
+
+  carouselCtasConfig!: NguCarouselConfig;
+
+  bannerControl = false;
+  seeMoreControl = false;
+
+  readonly nguCarouselCtas = viewChild.required<NguCarousel<any, any>>('nguCarouselCtas');
+
+  @HostListener('window:resize')
+  onWindowResize() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.bannerControl = window.innerWidth > MediaQueries.smallBreakpoint;
+    }
+  }
+
+  @HostBinding('style')
+  get style(): { [key: string]: string } {
+    return {
+      '--font-family': this.curaApiService.theme.fonts.getFamily('') ?? '',
+      '--border-color': this.curaApiService.theme.colors.getColor(this.colors().border) ?? '',
+      '--icon-color': this.curaApiService.theme.colors.getColor(this.colors().icon) ?? '',
+    };
+  }
+
+  @HostBinding('class') class = ['rdsite-container'];
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.bannerControl = window.innerWidth > MediaQueries.smallBreakpoint;
+    }
+
+    this.carouselCtasConfig = this.nguService.customCarouselConfig({
+      grid: { xs: 2.1, sm: 2.1, md: 2.1, lg: 2.1, all: 0 },
+      loop: true,
+      interval: {
+        timing: 600000,
+        initialDelay: 600000,
+      },
+    });
+  }
+
+  moreOptions(): void {
+    this.seeMoreControl = !this.seeMoreControl;
+  }
+
+  ctaWrapperItemClicked(event: Event) {
+    this.ctaWrapperItemClick.emit(event);
+  }
+}

package/components/cta-wrapper/index.ts

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

package/components/cta-wrapper/ng-package.json

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

package/components/cta-wrapper/public-api.ts

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

package/components/error/error.component.html

@@ -0,0 +1,65 @@
+<div class="rdsite-error">
+  @if (ctasIconColor && breadcrumbsItems().length) {
+    <rdsite-breadcrumbs [breadcrumbs]="breadcrumbsItems()" [labelIconColor]="ctasIconColor" [fontWeight]="breadcrumbFontWeight"></rdsite-breadcrumbs>
+  }
+  <div class="rdsite-error-container">
+    @if (labelTextColor) {
+      <cura-label [color]="labelTextColor">
+        {{ type() === 'server-response' ? '500' : '404' }}
+      </cura-label>
+    }
+
+    <cura-heading color="neutral-black" size="medium" weight="bold"> Algo deu errado :( </cura-heading>
+
+    @if (responseText) {
+      <cura-paragraph color="neutral-black" size="large">
+        {{ responseText }}
+      </cura-paragraph>
+    }
+
+    @if (type() === error.NOT_FOUND && returnRoute() && returnLabel()) {
+      <cura-button
+        rdsitelink
+        [href]="returnRoute()"
+        size="medium"
+        type="button"
+        [color]="curaButtonColor"
+        fontColor="light"
+        iconName="arrowLeft"
+        target="_self"
+      >
+        Voltar para {{ returnLabel() }}
+      </cura-button>
+    }
+
+    @if (type() === error.SERVER_RESPONSE) {
+      @if (curaButtonColor) {
+        <cura-button size="medium" type="button" (click)="reloadPage()" [color]="curaButtonColor" fontColor="light" iconName="reload" target="_self">
+          Atualizar página novamente
+        </cura-button>
+      }
+
+      @if (returnLabel() && returnRoute()) {
+        <cura-paragraph color="neutral-black" size="large">ou</cura-paragraph>
+        @if (curaButtonOutlineColor) {
+          <cura-button-outline
+            rdsitelink
+            [href]="returnRoute()"
+            size="medium"
+            type="button"
+            [color]="curaButtonOutlineColor"
+            iconName="arrowLeft"
+            target="_self"
+          >
+            Voltar para {{ returnLabel() }}
+          </cura-button-outline>
+        }
+      }
+    }
+    @if (ctasContent.ctas && ctasContent.ctas.length > 0 && ctasBorderColor && ctasIconColor) {
+      <cura-paragraph class="wrapper-text" color="neutral-black" size="large"> Você pode também: </cura-paragraph>
+
+      <rdsite-cta-wrapper [content]="ctasContent" [showTitleAndText]="false" [colors]="{ border: ctasBorderColor, icon: ctasIconColor }"></rdsite-cta-wrapper>
+    }
+  </div>
+</div>

package/components/error/error.component.scss

@@ -0,0 +1,26 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+@use '../../styles/_mixins.scss' as mixins;
+
+.rdsite-error {
+  width: 100%;
+  background-color: var(--backgroundColor);
+  rdsite-breadcrumbs {
+    display: block;
+    padding-block: 16px;
+    @include mixins.rdsite-container;
+  }
+  &-container {
+    @include mixins.rdsite-container;
+    padding: 20px 0px 40px;
+    cura-label {
+      width: fit-content;
+      padding: var(--sizes-space-tiny, 4px);
+      border-radius: var(--sizes-cornerRadius-nano, 2px);
+      background: var(--labelColor);
+    }
+
+    cura-heading {
+      --margin-block: 40px;
+    }
+  }
+}

package/components/error/error.component.spec.ts

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

package/components/error/error.component.ts

@@ -0,0 +1,182 @@
+import { Component, HostBinding, OnDestroy, OnInit, PLATFORM_ID, input, inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { isPlatformServer } from '@angular/common';
+import {
+  LogService,
+  SeoService,
+  ServerResponseService,
+  SsrResponseService,
+  RdsiteLinkDirective,
+  BreadcrumbsItems,
+  CtaWrapper,
+  ErrorService,
+} from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CtaWrapperComponent } from '@rededor/site-front-end-lib/components/cta-wrapper';
+import { BreadcrumbsComponent } from '@rededor/site-front-end-lib/components/breadcrumbs';
+import { Errors, Themes } from '@rededor/site-front-end-lib/enums';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+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 { CuraButtonOutlineComponent } from '@rededor/site-front-end-lib/cura/buttons/cura-button-outline';
+
+@Component({
+  selector: 'rdsite-error',
+  imports: [
+    CtaWrapperComponent,
+    RdsiteLinkDirective,
+    BreadcrumbsComponent,
+    CuraLabelComponent,
+    CuraHeadingComponent,
+    CuraParagraphComponent,
+    CuraButtonComponent,
+    CuraButtonOutlineComponent,
+  ],
+  templateUrl: './error.component.html',
+  styleUrl: './error.component.scss',
+})
+export class ErrorComponent implements OnInit, OnDestroy {
+  private errorService = inject(ErrorService);
+  private curaApiService = inject(CuraApiService);
+  private logService = inject(LogService);
+  private seoService = inject(SeoService);
+  private serverResponse = inject(ServerResponseService);
+  private ssrResponse = inject(SsrResponseService);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly theme = input<Themes>(Themes.REDE);
+  readonly type = input.required<Errors>();
+  readonly returnRoute = input<string>('');
+  readonly returnLabel = input<string>('');
+  readonly pageTitle = input('Default component');
+  readonly component = input('DefaultComponent');
+  readonly breadcrumbsItems = input<BreadcrumbsItems[]>([]);
+
+  ctasSubscription!: Subscription;
+  ctasContent!: CtaWrapper;
+  responseText = '';
+
+  backgroundColor: string = '';
+  backgroundColorBadge: string = '';
+  breadcrumbFontWeight: string = '';
+  labelColor: string = '';
+  labelTextColor: string = '';
+  curaButtonColor: string = '';
+  curaButtonOutlineColor: string = '';
+  ctasBorderColor: string = '';
+  ctasIconColor: string = '';
+  public error = Errors;
+
+  @HostBinding('style') get style() {
+    switch (this.theme()) {
+      case Themes.REDE:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('neutral-white'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('primary-lighter'),
+        };
+      case Themes.ONCO:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('neutral-pale'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('success-lighter'),
+        };
+      case Themes.MATERNIDADE:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('accent-lighter'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('primary-light'),
+        };
+      case Themes.RICHET:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('neutral-white'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('primary-lighter'),
+        };
+      case Themes.STAR:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('secondary-lighter'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('secondary-light'),
+        };
+      default:
+        return {
+          '--backgroundColor': this.curaApiService.theme.colors.getColor('neutral-white'),
+          '--labelColor': this.curaApiService.theme.colors.getColor('primary-lighter'),
+        };
+    }
+  }
+
+  ngOnInit(): void {
+    const type = this.type();
+    if (type === Errors.NOT_FOUND) {
+      this.responseText = 'A página que você acessou não existe mais ou foi movida para outra URL';
+      if (isPlatformServer(this.platformId)) {
+        this.ssrResponse.setNotFound();
+        this.serverResponse.setNotFound();
+      }
+      this.logService.log404(this.component());
+      this.seoService.set404Title(this.pageTitle());
+    } else if (type === Errors.SERVER_RESPONSE) {
+      this.responseText = 'Recomendamos atualizar a página ou tentar novamente mais tarde.';
+      if (isPlatformServer(this.platformId)) {
+        this.ssrResponse.setError();
+        this.serverResponse.setError();
+      }
+      this.logService.log500(this.component());
+      this.seoService.set500Title(this.pageTitle());
+    }
+    this.ctasSubscription = this.errorService.ctas.subscribe((ctas) => {
+      this.ctasContent = ctas;
+    });
+    this.setTheme(this.theme());
+  }
+
+  setTheme(theme: Themes) {
+    switch (theme) {
+      case Themes.REDE:
+        this.labelTextColor = 'primary-dark';
+        this.curaButtonColor = 'primary';
+        this.curaButtonOutlineColor = 'primary';
+        this.ctasBorderColor = 'primary-darker';
+        this.ctasIconColor = 'primary-darker';
+        break;
+      case Themes.ONCO:
+        this.labelTextColor = 'primary-dark';
+        this.backgroundColorBadge = 'success-lighter';
+        this.curaButtonColor = 'accent';
+        this.curaButtonOutlineColor = 'accent';
+        this.ctasBorderColor = 'accent-base';
+        this.ctasIconColor = 'primary-dark';
+        this.breadcrumbFontWeight = '700';
+        break;
+      case Themes.MATERNIDADE:
+        this.labelTextColor = 'accent-base';
+        this.curaButtonColor = 'accent';
+        this.curaButtonOutlineColor = 'accent';
+        this.ctasBorderColor = 'accent-base';
+        this.ctasIconColor = 'accent-base';
+        break;
+      case Themes.RICHET:
+        this.labelTextColor = 'primary-dark';
+        this.curaButtonColor = 'primary';
+        this.curaButtonOutlineColor = 'primary';
+        this.ctasBorderColor = 'primary-darker';
+        this.ctasIconColor = 'primary-darker';
+        break;
+      case Themes.STAR:
+        this.labelTextColor = 'secondary-dark';
+        this.curaButtonColor = 'secondary';
+        this.curaButtonOutlineColor = 'secondary';
+        this.ctasBorderColor = 'secondary-base';
+        this.ctasIconColor = 'secondary-darker';
+        break;
+    }
+  }
+
+  reloadPage() {
+    if (window !== undefined) {
+      window.location.reload();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.ctasSubscription?.unsubscribe();
+  }
+}

package/components/error/index.ts

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

package/components/error/ng-package.json

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

package/components/error/public-api.ts

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

package/components/filter-letter-and-terms/filter-letter-and-terms.component.html

@@ -0,0 +1,33 @@
+<div class="filter-letter-and-terms" [class.starTheme]="isStarTheme()">
+  <a
+    id="todas"
+    rdsitelink
+    class="filter-option"
+    [class.selected]="selectedOption === ''"
+    [href]="baseUrlAll() ? baseUrlAll() : baseUrl() ? baseUrl() : '#'"
+    (click)="selectOption('', $event)"
+  >
+    TODAS
+  </a>
+
+  @if (options().length > 1) {
+    @for (option of options(); track option) {
+      @if (!buttonMode()) {
+        <a
+          [id]="option"
+          rdsitelink
+          class="filter-option"
+          [class.selected]="selectedOption === option"
+          [href]="baseUrl() ? baseUrl() + option.toLowerCase() : '#'"
+          (click)="selectOption(option, $event)"
+        >
+          {{ option }}
+        </a>
+      } @else {
+        <button type="button" [id]="option" class="filter-option" [class.selected]="selectedOption === option" (click)="selectOption(option, $event)">
+          {{ option }}
+        </button>
+      }
+    }
+  }
+</div>