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

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

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

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

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

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

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

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

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

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

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

package/components/error/error.component.html

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

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

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

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

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

package/components/error/ng-package.json

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

package/components/error/public-api.ts

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

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

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