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

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

@@ -1,100 +0,0 @@
-@use '../../../styles/_breakpoints.scss' as breakpoints;
-
-:host {
-  display: block;
-  width: 100%;
-  height: auto;
-  border-radius: 12px;
-  border: 2px solid var(--neutral-base);
-  background: var(--neutral-purewhite);
-
-  .card-header {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas:
-      'badge . icon'
-      'label . icon'
-      'link . icon';
-    width: 100%;
-    height: auto;
-    padding: 20px;
-    cursor: pointer;
-
-    .card-link {
-      grid-area: link;
-      font-family: var(--font-family);
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 19px;
-      letter-spacing: 0.28px;
-      text-decoration-line: underline;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      gap: 8px;
-      margin-top: 4px;
-
-      @media screen and (min-width: breakpoints.$breakpoint-medium-large) {
-        font-size: 16px;
-        line-height: 23px;
-        letter-spacing: 0.32px;
-      }
-    }
-
-    cura-badge-pill {
-      grid-area: badge;
-      margin-bottom: 4px;
-    }
-
-    > cura-icon {
-      grid-area: icon;
-      margin-left: 16px;
-    }
-
-    &.noBadge {
-      grid-template-areas:
-        'label . icon'
-        'link . icon';
-    }
-  }
-
-  .card-content {
-    overflow: hidden;
-    max-height: 0;
-    transition: all 0.25s ease;
-    transform: translateZ(0);
-
-    &.opened {
-      max-height: fit-content;
-      transition: 0.5s ease 0.14s;
-    }
-  }
-
-  &.disabled {
-    .card-header {
-      grid-template-areas:
-        'label'
-        'link';
-      cursor: default;
-
-      cura-badge-pill,
-      > cura-icon {
-        display: none;
-      }
-    }
-  }
-
-  &.starTheme {
-    border-radius: unset;
-    border: unset;
-    border-bottom: 2px solid var(--accent-light);
-  }
-
-  &.maternityStarTheme {
-    border-radius: 12px;
-    border: unset;
-    border-bottom: unset;
-    box-shadow: 0 1px 4px 0 rgba(38, 38, 38, 0.16);
-  }
-}

package/components/cards/expandable-card/expandable-card.component.spec.ts

@@ -1,27 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { ExpandableCardComponent } from './expandable-card.component';
-
-describe('ExpandableCardComponent', () => {
-  let component: ExpandableCardComponent;
-  let fixture: ComponentFixture<ExpandableCardComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ExpandableCardComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExpandableCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,60 +0,0 @@
-import { Component, HostBinding, OnChanges, input, model, output, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { 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 { CuraBadgePillComponent } from '@rededor/site-front-end-lib/cura/badges/cura-badge-pill';
-
-@Component({
-  selector: 'rdsite-expandable-card',
-  imports: [CommonModule, RdsiteLinkDirective, CuraIconComponent, CuraBadgePillComponent],
-  templateUrl: './expandable-card.component.html',
-  styleUrls: ['./expandable-card.component.scss'],
-})
-export class ExpandableCardComponent {
-  private readonly curaApiService = inject(CuraApiService);
-
-  opened = model(false);
-  readonly label = input<string>('');
-  readonly link = input<string>('');
-  readonly badgeLabel = input<string>('');
-  readonly openIcon = input<string>('plus');
-  readonly closeIcon = input<string>('minus');
-  readonly disabled = input(false);
-  readonly isStarTheme = input(false);
-  readonly isMaternityStarTheme = input(false);
-
-  readonly toggle = output<boolean>();
-
-  @HostBinding('style') styleBinding = {
-    '--neutral-light': this.curaApiService.theme.colors.getColor('neutral-light'),
-    '--neutral-base': this.curaApiService.theme.colors.getColor('neutral-base'),
-    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
-    '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black'),
-    '--primary-dark': this.curaApiService.theme.colors.getColor('primary-dark'),
-    '--primary-base': this.curaApiService.theme.colors.getColor('primary-base'),
-    '--primary-lighter': this.curaApiService.theme.colors.getColor('primary-lighter'),
-    '--accent-light': this.curaApiService.theme.colors.getColor('accent-light'),
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-  };
-
-  @HostBinding('class')
-  get classes(): string {
-    const classes = [];
-    if (this.disabled()) {
-      classes.push('disabled');
-    }
-    if (this.isStarTheme()) {
-      classes.push('starTheme');
-    }
-    if (this.isMaternityStarTheme()) {
-      classes.push('maternityStarTheme');
-    }
-    return classes.join(' ');
-  }
-
-  toggleCard() {
-    this.opened.set(!this.opened());
-    this.toggle.emit(this.opened());
-  }
-}

package/components/cards/index.ts

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

package/components/cards/ng-package.json

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

package/components/cards/public-api.ts

@@ -1,3 +0,0 @@
-export * from './card-unidade-planos-convenios/card-unidade-planos-convenios.component';
-export * from './expandable-card/expandable-card.component';
-export * from './testimonial-card/testimonial-card.component';

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

@@ -1,41 +0,0 @@
-@if ((image() || getVideoId()) && text()) {
-  @switch (type()) {
-    @case ('image') {
-      @if (image()) {
-        <rdsite-image
-          [imageWebpSrc]="image()?.webp_sizes?.['rdsl-card-unidades']"
-          [imageDefaultSrc]="image()?.sizes?.['rdsl-card-unidades']"
-          [mimeType]="image()?.mime_type"
-          [alt]="image()?.alt"
-        >
-        </rdsite-image>
-      }
-    }
-    @case ('video') {
-      @if (getVideoId() && platformBrowser()) {
-        <youtube-player #youtubePlayer [videoId]="getVideoId()" [disablePlaceholder]="true"></youtube-player>
-      }
-    }
-  }
-
-  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="26" viewBox="0 0 32 26" fill="none">
-    <path
-      d="M14.375 3.3125C12.9062 4.15625 11.7188 4.89062 10.8125 5.51562C9.90625 6.10938 8.98438 6.90625 8.04688 7.90625C7.17188 8.84375 6.5 9.82812 6.03125 10.8594C5.5625 11.8906 5.23438 13.2188 5.04688 14.8438H7.29688C9.23438 14.8438 10.75 15.3281 11.8438 16.2969C12.9688 17.2344 13.5312 18.625 13.5312 20.4688C13.5312 21.7812 13.0312 23.0156 12.0312 24.1719C11.0625 25.2969 9.71875 25.8594 8 25.8594C5.3125 25.8594 3.39062 24.9844 2.23438 23.2344C1.07812 21.4531 0.5 19.125 0.5 16.25C0.5 14.2188 0.9375 12.375 1.8125 10.7188C2.6875 9.03125 3.75 7.53125 5 6.21875C6.28125 4.875 7.64062 3.73438 9.07812 2.79688C10.5156 1.85938 11.7188 1.09375 12.6875 0.5L14.375 3.3125ZM31.7188 3.3125C30.25 4.15625 29.0625 4.89062 28.1562 5.51562C27.25 6.10938 26.3281 6.90625 25.3906 7.90625C24.4844 8.875 23.7969 9.875 23.3281 10.9062C22.8906 11.9062 22.5781 13.2188 22.3906 14.8438H24.6406C26.5781 14.8438 28.0938 15.3281 29.1875 16.2969C30.3125 17.2344 30.875 18.625 30.875 20.4688C30.875 21.7812 30.375 23.0156 29.375 24.1719C28.4062 25.2969 27.0625 25.8594 25.3438 25.8594C22.6562 25.8594 20.7344 24.9844 19.5781 23.2344C18.4219 21.4531 17.8438 19.125 17.8438 16.25C17.8438 14.2188 18.2812 12.375 19.1562 10.7188C20.0312 9.03125 21.0938 7.53125 22.3438 6.21875C23.625 4.875 24.9844 3.73438 26.4219 2.79688C27.8594 1.85938 29.0625 1.09375 30.0312 0.5L31.7188 3.3125Z"
-      fill="#202122"
-    />
-  </svg>
-
-  <div class="testimonials-text">
-    <q class="quote" [innerHTML]="text()" (click)="stopVideo()"></q>
-
-    @if (author()) {
-      <span class="author">{{ author() }}</span>
-    }
-
-    @if (position()) {
-      <span class="position">
-        {{ position() }}
-      </span>
-    }
-  </div>
-}

package/components/cards/testimonial-card/testimonial-card.component.scss

@@ -1,96 +0,0 @@
-@use '../../../styles/_breakpoints.scss' as breakpoints;
-
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  width: 100%;
-  height: auto;
-  padding: 28px;
-  border-radius: 3px;
-  background-color: #f7f5f0;
-
-  @media screen and (min-width: breakpoints.$breakpoint-medium) {
-    flex-direction: row;
-    justify-content: center;
-    gap: 12px;
-    background: linear-gradient(to right, white 102px, #f7f5f0 0);
-  }
-
-  rdsite-image,
-  youtube-player {
-    border-radius: 3px 50px 3px 3px;
-
-    @media screen and (min-width: breakpoints.$breakpoint-medium) {
-      flex: 1 1 50%;
-    }
-  }
-
-  rdsite-image {
-    aspect-ratio: 1.35;
-
-    @media screen and (min-width: breakpoints.$breakpoint-small) {
-      aspect-ratio: 1.78;
-    }
-  }
-
-  youtube-player {
-    overflow: hidden;
-    aspect-ratio: 1.35;
-
-    @media screen and (min-width: breakpoints.$breakpoint-small) {
-      aspect-ratio: unset;
-    }
-
-    ::ng-deep > div {
-      width: 100%;
-      height: 100%;
-    }
-    ::ng-deep iframe {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  svg {
-    margin-top: 24px;
-  }
-
-  .testimonials-text {
-    flex: 1 1 50%;
-    display: flex;
-    flex-direction: column;
-
-    * {
-      font-family: var(--font-family);
-    }
-
-    .quote {
-      color: var(--color-one-darker);
-      font-size: 17px;
-      font-weight: 400;
-      line-height: 150%;
-      margin-bottom: 15px;
-
-      @media screen and (min-width: breakpoints.$breakpoint-medium) {
-        font-size: 19px;
-        margin-bottom: 44px;
-        margin-top: 44px;
-      }
-    }
-
-    .author,
-    .position {
-      color: var(--neutral-black);
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 135%;
-      letter-spacing: 0.48px;
-
-      @media screen and (min-width: breakpoints.$breakpoint-medium) {
-        font-size: 14px;
-        letter-spacing: 0.56px;
-      }
-    }
-  }
-}

package/components/cards/testimonial-card/testimonial-card.component.spec.ts

@@ -1,27 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TestimonialCardComponent } from './testimonial-card.component';
-
-describe('TestimonialCardComponent', () => {
-  let component: TestimonialCardComponent;
-  let fixture: ComponentFixture<TestimonialCardComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [TestimonialCardComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TestimonialCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/components/cards/testimonial-card/testimonial-card.component.ts

@@ -1,65 +0,0 @@
-import { Component, HostBinding, input, OnDestroy, OnInit, PLATFORM_ID, signal, viewChild, inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { YouTubePlayer, YouTubePlayerModule } from '@angular/youtube-player';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { YoutubeService } from '@rededor/site-front-end-lib/services/youtube';
-import { ImageComponent } from '@rededor/site-front-end-lib/components/image';
-
-@Component({
-  selector: 'rdsite-testimonial-card',
-  imports: [ImageComponent, YouTubePlayerModule],
-  templateUrl: './testimonial-card.component.html',
-  styleUrls: ['./testimonial-card.component.scss'],
-})
-export class TestimonialCardComponent implements OnInit, OnDestroy {
-  private readonly curaApiService = inject(CuraApiService);
-  private readonly youtubeService = inject(YoutubeService);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  type = input('image');
-  image = input<any | null>(null);
-  videoUrl = input('');
-  text = input('');
-  author = input('');
-  position = input('');
-
-  videoId = signal<string | null>('');
-
-  platformBrowser = signal<any | null>(null);
-
-  readonly youtubePlayer = viewChild.required<YouTubePlayer>('youtubePlayer');
-
-  @HostBinding('style') styleBinding = {
-    '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black'),
-    '--color-one-darker': this.curaApiService.theme.colors.getColor('primary-darker'),
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-  };
-
-  constructor() {
-    this.youtubeService.setScript();
-  }
-
-  ngOnInit(): void {
-    this.platformBrowser.set(isPlatformBrowser(this.platformId));
-
-    if (this.type() === 'video' && this.videoUrl()) {
-      this.getVideoId();
-    }
-  }
-
-  getVideoId(): string {
-    const params = new URLSearchParams(this.videoUrl().split('?')[1]);
-    return params.get('v') || '';
-  }
-
-  stopVideo(): void {
-    const youtubePlayer = this.youtubePlayer();
-    if (this.getVideoId() && youtubePlayer) {
-      youtubePlayer.stopVideo();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.youtubeService.removeScript();
-  }
-}

package/components/carousels/index.ts

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

package/components/carousels/ng-package.json

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

package/components/carousels/public-api.ts

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

package/components/carousels/testimonials-carousel/testimonials-carousel.component.html

@@ -1,30 +0,0 @@
-@if (title()) {
-  <h3 class="testimonials-carousel-title">{{ title() }}</h3>
-}
-
-<ngu-carousel #carouselTestimonialsEl [inputs]="carouselTestimonialsConfig()!" [dataSource]="items()" (onMove)="stopVideos()">
-  <ngu-item *nguCarouselDef="let item">
-    <rdsite-testimonial-card
-      #testimonialCard
-      [type]="item.type"
-      [image]="item.image"
-      [videoUrl]="item.video_url"
-      [text]="item.text"
-      [author]="item.author"
-      [position]="item.role"
-    >
-    </rdsite-testimonial-card>
-  </ngu-item>
-</ngu-carousel>
-
-<div class="testimonials-carousel-controls">
-  <cura-icon name="arrowLeftCircle" size="40" color="primary-base" (click)="prevSlide()"></cura-icon>
-
-  <cura-icon name="arrowRightCircle" size="40" color="primary-base" (click)="nextSlide()"></cura-icon>
-
-  <ul>
-    @for (item of carouselTestimonials().pointNumbers(); track i; let i = $index) {
-      <li [class.active]="i === carouselTestimonials().activePoint()" (click)="moveTo(i)"></li>
-    }
-  </ul>
-</div>

package/components/carousels/testimonials-carousel/testimonials-carousel.component.scss

@@ -1,91 +0,0 @@
-@use '../../../styles/_breakpoints.scss' as breakpoints;
-
-:host {
-  display: block;
-
-  @media screen and (min-width: breakpoints.$breakpoint-medium) {
-    background-color: var(--neutral-purewhite);
-  }
-
-  .testimonials-carousel-title {
-    color: var(--neutral-black);
-    font-family: var(--font-family);
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 130%;
-    margin-bottom: 16px;
-
-    @media screen and (min-width: breakpoints.$breakpoint-medium) {
-      font-size: 28px;
-      margin-bottom: 48px;
-    }
-  }
-
-  ngu-carousel {
-    background-color: #f7f5f0;
-  }
-
-  ngu-item {
-    @media screen and (min-width: breakpoints.$breakpoint-medium) {
-      background: linear-gradient(to right, var(--neutral-purewhite) 102px, #f7f5f0 0);
-    }
-
-    rdsite-testimonial-card {
-      height: 100%;
-    }
-  }
-
-  .testimonials-carousel-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 0 48px 28px;
-    background-color: #f7f5f0;
-
-    @media screen and (min-width: breakpoints.$breakpoint-medium) {
-      padding: 48px 0 0 0;
-      background-color: transparent;
-    }
-
-    cura-icon {
-      display: none;
-
-      @media screen and (min-width: breakpoints.$breakpoint-medium) {
-        display: block;
-        cursor: pointer;
-
-        &:nth-of-type(1) {
-          margin-left: 48px;
-        }
-
-        &:nth-of-type(2) {
-          margin-right: 48px;
-        }
-      }
-    }
-
-    ul {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 8px;
-
-      @media screen and (min-width: breakpoints.$breakpoint-medium) {
-        display: none;
-      }
-
-      li {
-        background-color: transparent;
-        width: 11px;
-        height: 11px;
-        border: 2px solid var(--neutral-black);
-        border-radius: 50%;
-        list-style-type: none;
-
-        &.active {
-          background-color: var(--neutral-black);
-        }
-      }
-    }
-  }
-}

package/components/carousels/testimonials-carousel/testimonials-carousel.component.spec.ts

@@ -1,27 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { TestimonialsCarouselComponent } from './testimonials-carousel.component';
-
-describe('TestimonialsCarouselComponent', () => {
-  let component: TestimonialsCarouselComponent;
-  let fixture: ComponentFixture<TestimonialsCarouselComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [TestimonialsCarouselComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TestimonialsCarouselComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/components/carousels/testimonials-carousel/testimonials-carousel.component.ts

@@ -1,73 +0,0 @@
-import { Component, HostBinding, input, OnInit, viewChild, viewChildren, inject } from '@angular/core';
-import { NguCarousel, NguCarouselDefDirective, NguItemComponent } from '@ngu/carousel';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { NguCarouselService } from '@rededor/site-front-end-lib/services/ngu-carousel';
-import { TestimonialCardComponent } from '@rededor/site-front-end-lib/components/cards';
-import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-
-@Component({
-  selector: 'rdsite-testimonials-carousel',
-  imports: [NguCarousel, NguItemComponent, NguCarouselDefDirective, TestimonialCardComponent, CuraIconComponent],
-  templateUrl: './testimonials-carousel.component.html',
-  styleUrls: ['./testimonials-carousel.component.scss'],
-})
-export class TestimonialsCarouselComponent implements OnInit {
-  private readonly curaApiService = inject(CuraApiService);
-  private nguService = inject(NguCarouselService);
-
-  title = input('');
-  items = input<any[] | null>([]);
-
-  carouselTestimonialsConfig: any = this.nguService.customCarouselConfig({
-    grid: { xs: 1, sm: 1, md: 1, lg: 1.1, all: 0 },
-    gridBreakpoints: { sm: 360, md: 768, lg: 1024, xl: 1920 },
-    loop: true,
-    interval: {
-      timing: 600000,
-      initialDelay: 600000,
-    },
-  });
-
-  readonly carouselTestimonials = viewChild.required<NguCarousel<any[]>>('carouselTestimonialsEl');
-  readonly testimonialCards = viewChildren<TestimonialCardComponent>('testimonialCard');
-
-  @HostBinding('style') styleBinding = {
-    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
-    '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black'),
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-  };
-
-  ngOnInit() {
-    this.carouselTestimonialsConfig.set(
-      this.nguService.customCarouselConfig({
-        grid: { xs: 1, sm: 1, md: 1, lg: 1.1, all: 0 },
-        gridBreakpoints: { sm: 360, md: 768, lg: 1024, xl: 1920 },
-        loop: true,
-        interval: {
-          timing: 600000,
-          initialDelay: 600000,
-        },
-      }),
-    );
-  }
-
-  nextSlide(): void {
-    this.nguService.scrollRight(this.carouselTestimonials());
-  }
-
-  prevSlide(): void {
-    this.nguService.scrollLeft(this.carouselTestimonials());
-  }
-
-  moveTo(pointerNumber: number): void {
-    this.nguService.moveTo(this.carouselTestimonials(), pointerNumber);
-  }
-
-  stopVideos(): void {
-    this.testimonialCards().forEach((card) => {
-      if (card.type() === 'video') {
-        card.stopVideo();
-      }
-    });
-  }
-}