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

package/components/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,56 @@
+@if (breadcrumbs().length) {
+  <nav class="breadcrumb" #breadCrumbsElement>
+    <ol>
+      @if (isDesktop() !== null && (isDesktop() || (!mobileBackView() && breadcrumbs().length < 3))) {
+        <ng-container *ngTemplateOutlet="Desktop"></ng-container>
+      } @else if (isDesktop() !== null) {
+        <ng-container *ngTemplateOutlet="Mobile"></ng-container>
+      }
+    </ol>
+  </nav>
+}
+
+<ng-template #Desktop>
+  @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let first = $first; let last = $last; let index = $index) {
+    <li>
+      @if (!last) {
+        <a rdsitelink [href]="getUrl(breadcrumb.url)">
+          @if (first) {
+            <cura-icon name="home" [color]="labelIconColor()" size="16"> </cura-icon>
+          }
+          <span>
+            {{ breadcrumb.label }}
+          </span>
+        </a>
+        <span class="divider">/</span>
+      } @else {
+        <span [class.last-item]="last && !first">
+          {{ breadcrumb.label }}
+        </span>
+      }
+    </li>
+  }
+</ng-template>
+
+<ng-template #Mobile>
+  @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let first = $first; let last = $last; let index = $index) {
+    <li>
+      @if (breadcrumbs().length > 2 && first) {
+        <a rdsitelink [href]="getUrl(breadcrumb.url)">
+          <cura-icon name="home" [color]="labelIconColor()" size="16"> </cura-icon>
+          <span>
+            {{ breadcrumb.label }}
+          </span>
+        </a>
+        <span class="divider">/</span>
+      } @else if (index === breadcrumbs().length - 2) {
+        <cura-icon name="arrowLeft" [color]="labelIconColor()" size="16"></cura-icon>
+        <a rdsitelink [href]="getUrl(breadcrumb.url)">
+          <span>
+            {{ breadcrumb.label }}
+          </span>
+        </a>
+      }
+    </li>
+  }
+</ng-template>

package/components/breadcrumbs/breadcrumbs.component.scss

@@ -0,0 +1,55 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+.breadcrumb {
+  * {
+    font-family: var(--font-family);
+  }
+
+  ol {
+    display: flex;
+
+    li {
+      display: flex;
+      gap: 8px;
+
+      a {
+        color: var(--label-icon-color);
+        display: flex;
+        gap: 4px;
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+          font-size: 12px;
+          font-weight: var(--font-weight, 500);
+          line-height: 16px;
+          letter-spacing: 0.72px;
+        }
+      }
+
+      span.last-item {
+        color: var(--disabled-color);
+        text-decoration: none;
+        pointer-events: none;
+        font-size: 12px;
+        font-weight: var(--font-weight, 500);
+        line-height: 16px;
+        letter-spacing: 0.72px;
+      }
+
+      span.divider,
+      span.back {
+        color: var(--divider-color);
+        padding-right: 8px;
+        font-size: 12px;
+        font-weight: var(--font-weight, 500);
+        line-height: 16px;
+        letter-spacing: 0.72px;
+      }
+
+      span.back {
+        padding: 0;
+      }
+    }
+  }
+}

package/components/breadcrumbs/breadcrumbs.component.spec.ts

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

package/components/breadcrumbs/breadcrumbs.component.ts

@@ -0,0 +1,142 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  PLATFORM_ID,
+  DOCUMENT,
+  HostBinding,
+  input,
+  viewChild,
+  inject,
+  signal,
+  effect,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as he from 'he';
+import { BreadcrumbsItems, RdsiteLinkDirective, BreadcrumbsJsonItem, LIB_CONFIG, LibConfig } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { MediaQueries } from '@rededor/site-front-end-lib/shared';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-breadcrumbs',
+  imports: [CommonModule, RdsiteLinkDirective, CuraIconComponent],
+  templateUrl: './breadcrumbs.component.html',
+  styleUrl: './breadcrumbs.component.scss',
+})
+export class BreadcrumbsComponent implements AfterViewInit, OnDestroy {
+  private curaApiService = inject(CuraApiService);
+  private libConfig = inject<LibConfig>(LIB_CONFIG);
+  private document = inject<Document>(DOCUMENT);
+  private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly labelIconColor = input<string>('neutral-purewhite');
+  readonly fontWeight = input<string>('');
+  readonly breadcrumbs = input<BreadcrumbsItems[]>([]);
+  readonly mobileBackView = input<boolean>(false);
+
+  readonly isDesktop = signal<boolean | null>(null);
+
+  private breadcrumbsJsonTag!: HTMLScriptElement;
+  private readonly breadcrumbsJsonTagId = 'breadcrumbsJSON';
+  private resizeObserver!: ResizeObserver;
+
+  readonly breadCrumbsElement = viewChild.required<ElementRef<HTMLDivElement>>('breadCrumbsElement');
+
+  @HostBinding('style') get hostStyles() {
+    const color = this.labelIconColor();
+    const disabledColor = color?.includes('neutral') ? 'primary-lighter' : 'neutral-dark';
+
+    return {
+      '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+      '--label-icon-color': this.curaApiService.theme.colors.getColor(color),
+      '--divider-color': this.curaApiService.theme.colors.getColor('neutral-light'),
+      '--disabled-color': this.curaApiService.theme.colors.getColor(disabledColor),
+      '--font-weight': this.fontWeight() || null,
+    };
+  }
+
+  constructor() {
+    effect(() => {
+      if (this.breadcrumbs().length) {
+        this.setBreadcrumbsJson(this.breadcrumbs());
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.initViewportDetection();
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver?.disconnect();
+  }
+
+  private initViewportDetection(): void {
+    if (!isPlatformBrowser(this.platformId)) {
+      this.isDesktop.set(true);
+      return;
+    }
+
+    this.checkViewportSize();
+    this.setupResizeObserver();
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.checkViewportSize();
+    });
+
+    this.resizeObserver.observe(document.body);
+  }
+
+  private checkViewportSize(): void {
+    if (!isPlatformBrowser(this.platformId)) return;
+    const newValue = window.innerWidth > MediaQueries.smallBreakpoint;
+    if (this.isDesktop() !== newValue) {
+      this.isDesktop.set(newValue);
+      this.cdr.detectChanges();
+    }
+  }
+
+  getUrl(urls: string[] = []): string {
+    return urls.join('');
+  }
+
+  private setBreadcrumbsJson(items: BreadcrumbsItems[]): void {
+    this.breadcrumbsJsonTag = this.getBreadcrumbsJSONTag();
+    const json = {
+      '@context': 'http://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: this.getJsonBreadcrumbItems(items),
+    };
+    this.breadcrumbsJsonTag.innerHTML = JSON.stringify(json);
+  }
+
+  private getBreadcrumbsJSONTag(): HTMLScriptElement {
+    const existingTag = this.document.getElementById(this.breadcrumbsJsonTagId) as HTMLScriptElement;
+    return existingTag || this.createBreadcrumbsJSONTag();
+  }
+
+  private createBreadcrumbsJSONTag(): HTMLScriptElement {
+    const tag = this.document.createElement('script');
+    tag.id = this.breadcrumbsJsonTagId;
+    tag.type = 'application/ld+json';
+    this.document.head.appendChild(tag);
+    return tag;
+  }
+
+  private getJsonBreadcrumbItems(items: BreadcrumbsItems[]): BreadcrumbsJsonItem[] {
+    return items.map((item, i) => ({
+      '@type': 'ListItem',
+      position: i + 1,
+      item: {
+        '@id': `${this.libConfig.siteUrl.replace(/\/$/, '')}${this.getUrl(item.url)}`,
+        name: he.encode(item.label),
+      },
+    }));
+  }
+}

package/components/breadcrumbs/index.ts

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

package/components/breadcrumbs/ng-package.json

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

package/components/breadcrumbs/public-api.ts

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

package/components/cards/card-unidade-planos-convenios/card-unidade-planos-convenios.component.html

@@ -0,0 +1,91 @@
+<div class="rdsite-card-unidade-planos-convenios">
+  <rdsite-image
+    class="rdsite-card-unidade-planos-convenios-logo"
+    [imageWebpSrc]="logoWebpSrc()"
+    [imageDefaultSrc]="logoDefaultSrc()"
+    [imageSizes]="logoSizes()"
+    [mimeType]="logoMimeType()"
+    [alt]="logoAlt()"
+    [title]="logoTitle()"
+    loading="lazy"
+  ></rdsite-image>
+
+  <div class="rdsite-card-unidade-planos-convenios-heading">
+    @if (title()) {
+      <cura-heading size="small" [level]="2" color="neutral-black" weight="bold" marginBlock="0" lineHeight="150%">
+        {{ title() }}
+      </cura-heading>
+    }
+
+    @if (subtitle()) {
+      <cura-paragraph size="xsmall" color="neutral-dark" weight="bold" marginBlock="0" lineHeight="130%">
+        <span class="cura-paragraph-weight">
+          {{ subtitle() }}
+        </span>
+      </cura-paragraph>
+    }
+  </div>
+
+  <div class="rdsite-card-unidade-planos-convenios-content">
+    @if (coverage()) {
+      <cura-paragraph size="xsmall" color="neutral-black" marginBlock="0" lineHeight="130%">
+        <span class="cura-paragraph-weight">
+          {{ coverage()?.title }}
+        </span>
+      </cura-paragraph>
+
+      @if (coverage()?.list?.length) {
+        <div class="coverage-list">
+          @for (item of coverage()?.list; track item.title) {
+            <cura-badge-pill type="solid" color="success" [disabled]="!item.isCovered" [iconName]="item.isCovered ? 'check' : 'close'">
+              {{ item.title }}
+            </cura-badge-pill>
+          }
+        </div>
+      }
+    }
+
+    @if (address()) {
+      <div class="address">
+        <cura-icon name="geotag" color="neutral-dark" size="20"></cura-icon>
+
+        <cura-paragraph size="xsmall" color="neutral-black" marginBlock="0" lineHeight="130%">
+          <span class="cura-paragraph-weight"> {{ address() }} • </span>
+          <a rdsitelink href="https://www.google.com/maps?q={{ address() }}">Mapa</a>
+        </cura-paragraph>
+      </div>
+    }
+  </div>
+
+  <div class="rdsite-card-unidade-planos-convenios-ctas">
+    @if (cta2() && cta2()?.label && cta2()?.link) {
+      <cura-button
+        type="button"
+        size="medium"
+        iconName="calendar"
+        [fontColor]="isStarTheme() || isMaternityStarTheme() ? 'light' : 'dark'"
+        [color]="isStarTheme() || isMaternityStarTheme() ? 'primary' : 'accent'"
+        [style.--border-radius]="isStarTheme() ? '0px' : isMaternityStarTheme() ? '2rem' : '2px'"
+        rdsitelink
+        [href]="cta2()!.link"
+      >
+        {{ cta2()?.label }}
+      </cura-button>
+    }
+
+    @if (cta1() && cta1()?.label && cta1()?.link) {
+      <cura-button
+        type="button"
+        size="medium"
+        iconName="exam"
+        [fontColor]="isStarTheme() || isMaternityStarTheme() ? 'light' : 'dark'"
+        [color]="isStarTheme() || isMaternityStarTheme() ? 'primary' : 'accent'"
+        [style.--border-radius]="isStarTheme() ? '0px' : isMaternityStarTheme() ? '2rem' : '2px'"
+        rdsitelink
+        [href]="cta1()!.link"
+      >
+        {{ cta1()?.label }}
+      </cura-button>
+    }
+  </div>
+</div>

package/components/cards/card-unidade-planos-convenios/card-unidade-planos-convenios.component.scss

@@ -0,0 +1,143 @@
+@use '../../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: flex;
+  width: 100%;
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid var(--neutral-light, rgb(212, 212, 212));
+  background-color: var(--neutral-purewhite, rgb(255, 255, 255));
+
+  &.starTheme {
+    border-radius: 0px;
+    border-bottom: var(--sizes-stroke-tiny, 1px) solid var(--surfaces-accent-light, #c6a27a);
+  }
+  &.maternityStarTheme {
+    border-radius: 12px;
+  }
+}
+
+.rdsite-card-unidade-planos-convenios {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  grid-template-areas:
+    'logo'
+    'heading'
+    'content'
+    'ctas';
+  gap: 12px 0;
+  width: 100%;
+
+  &-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 2.26;
+  }
+
+  ::ng-deep rdsite-image {
+    grid-area: logo;
+    padding: 16px;
+    background-color: var(--neutral-white);
+    border-radius: 4px;
+
+    picture,
+    picture img {
+      width: 80%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &-heading {
+    grid-area: heading;
+  }
+
+  &-content {
+    grid-area: content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    flex: 3 0 0;
+    width: 100%;
+
+    .address {
+      display: flex;
+      padding: 8px;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      border-radius: 4px;
+      background-color: var(--neutral-white, rgb(246, 246, 246));
+
+      a {
+        color: var(--color-base);
+        font-weight: 500;
+      }
+    }
+
+    .coverage-list {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+  }
+
+  &-ctas {
+    grid-area: ctas;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+    gap: 12px;
+  }
+}
+
+@media screen and (min-width: breakpoints.$breakpoint-medium-large) {
+  .rdsite-card-unidade-planos-convenios {
+    grid-template-rows: auto;
+    grid-template-columns: 152px 1fr auto;
+    grid-template-areas:
+      'logo heading ctas'
+      'content content content';
+    gap: 20px;
+    align-items: flex-start;
+
+    &-logo {
+      aspect-ratio: 1.26;
+    }
+
+    ::ng-deep rdsite-image {
+      picture,
+      picture img {
+        width: 100%;
+      }
+    }
+
+    &-content {
+      gap: 16px;
+
+      .coverage-list {
+        gap: 16px 8px;
+      }
+
+      .address {
+        width: fit-content;
+      }
+    }
+
+    &-ctas {
+      width: 224px;
+    }
+  }
+}
+
+span.cura-paragraph-weight {
+  font-weight: 500;
+}

package/components/cards/card-unidade-planos-convenios/card-unidade-planos-convenios.component.spec.ts

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

package/components/cards/card-unidade-planos-convenios/card-unidade-planos-convenios.component.ts

@@ -0,0 +1,66 @@
+import { Component, HostBinding, input, inject } from '@angular/core';
+import { RdsiteImage, RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { ImageMimeType, UnidadeCoverageType } from '@rededor/site-front-end-lib/enums';
+import { ImageComponent } from '@rededor/site-front-end-lib/components/image';
+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 { CuraBadgePillComponent } from '@rededor/site-front-end-lib/cura/badges/cura-badge-pill';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraButtonComponent } from '@rededor/site-front-end-lib/cura/buttons/cura-button';
+
+@Component({
+  selector: 'rdsite-card-unidade-planos-convenios',
+  imports: [ImageComponent, RdsiteLinkDirective, CuraHeadingComponent, CuraParagraphComponent, CuraBadgePillComponent, CuraIconComponent, CuraButtonComponent],
+  templateUrl: './card-unidade-planos-convenios.component.html',
+  styleUrl: './card-unidade-planos-convenios.component.scss',
+})
+export class CardUnidadePlanosConveniosComponent {
+  private readonly curaApiService = inject(CuraApiService);
+
+  readonly title = input<string>('');
+  readonly subtitle = input<string | undefined>('');
+  readonly coverage = input<{
+    title: UnidadeCoverageType;
+    list?: {
+      title: string;
+      isCovered: boolean;
+    }[];
+  }>();
+  readonly address = input<string | undefined>('');
+  readonly cta1 = input<{
+    label: string;
+    link: string;
+  }>();
+  readonly cta2 = input<{
+    label: string;
+    link: string;
+  }>();
+  readonly isStarTheme = input<boolean>(false);
+  readonly isMaternityStarTheme = input<boolean>(false);
+
+  readonly logoWebpSrc = input<string>('');
+  readonly logoDefaultSrc = input<string>('');
+  readonly logoSizes = input<RdsiteImage[]>([]);
+  readonly logoMimeType = input<ImageMimeType>(ImageMimeType.JPEG);
+  readonly logoAlt = input<string>('');
+  readonly logoTitle = input<string>('');
+
+  @HostBinding('style') styleBinding = {
+    '--neutral-light': this.curaApiService.theme.colors.getColor('neutral-light'),
+    '--neutral-white': this.curaApiService.theme.colors.getColor('neutral-white'),
+    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+    '--color-base': this.curaApiService.theme.colors.getColor('primary-base'),
+  };
+  @HostBinding('class')
+  get classes(): string {
+    const classes = [];
+    if (this.isStarTheme()) {
+      classes.push('starTheme');
+    }
+    if (this.isMaternityStarTheme()) {
+      classes.push('maternityStarTheme');
+    }
+    return classes.join(' ');
+  }
+}

package/components/cards/expandable-card/expandable-card.component.html

@@ -0,0 +1,30 @@
+@if (label()) {
+  <div class="card-header" [ngClass]="{ noBadge: !badgeLabel() }" (click)="toggleCard()">
+    @if (link() && label()) {
+      <a rdsitelink class="card-link" [style.color]="isStarTheme() ? 'var(--primary-base)' : 'var(--primary-dark)'" [href]="link()">
+        {{ label() }}
+        <cura-icon name="arrowRight" [color]="isStarTheme() ? 'primary-base' : 'primary-dark'" size="16"></cura-icon>
+      </a>
+    }
+
+    @if (badgeLabel()) {
+      <cura-badge-pill
+        [style.--color-background]="isStarTheme() ? '#EBE7DE' : isMaternityStarTheme() ? 'var(--secondary-lighter)' : 'var(--primary-light)'"
+        [style.--color-base]="'var(--primary-dark)'"
+        type="solid"
+      >
+        {{ badgeLabel() }}
+      </cura-badge-pill>
+    }
+
+    <cura-icon
+      [name]="opened() ? closeIcon() : openIcon()"
+      [style.--color]="isStarTheme() ? 'var(--primary-base)' : 'var(--primary-dark)'"
+      size="20"
+    ></cura-icon>
+  </div>
+
+  <div class="card-content" [ngClass]="{ opened: opened() }">
+    <ng-content></ng-content>
+  </div>
+}