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

package/components/section-navigation/section-navigation.component.scss

@@ -0,0 +1,50 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+@use '../../styles/_mixins.scss' as mixins;
+
+.rdsite-section-navigation {
+  width: 100%;
+  position: sticky;
+  left: 0;
+  z-index: 1000;
+  background-color: var(--neutral-purewhite);
+  border-bottom: 1px solid #b7b7b7;
+  box-shadow: 0px 4px 8px 0px var(--neutral-black);
+  padding-top: 10px;
+
+  * {
+    font-family: var(--font-family);
+  }
+}
+
+.rdsite-section-navigation-menu {
+  @include mixins.rdsite-container;
+  display: flex;
+
+  @media only screen and (max-width: breakpoints.$breakpoint-large) {
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  li > a {
+    text-decoration: none;
+    padding: 12px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--neutral-dark);
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 158px;
+
+    @media only screen and (max-width: breakpoints.$breakpoint-large) {
+      max-width: 135px;
+    }
+
+    &.active {
+      border-radius: 4px 4px 0 0 !important;
+      background-color: var(--color-base);
+      color: var(--neutral-purewhite);
+    }
+  }
+}

package/components/section-navigation/section-navigation.component.spec.ts

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

package/components/section-navigation/section-navigation.component.ts

@@ -0,0 +1,159 @@
+import {
+  Component,
+  Input,
+  signal,
+  effect,
+  OnInit,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  OnDestroy,
+  input,
+  output,
+  viewChild,
+  viewChildren,
+  inject,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RdsiteLinkDirective, SectionNavigationData, SectionNavigationConfig } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { BehaviorSubject, debounceTime, Subscription } from 'rxjs';
+import { Router } from '@angular/router';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'nav[rdsite-section-navigation]',
+  imports: [CommonModule, RdsiteLinkDirective],
+  templateUrl: './section-navigation.component.html',
+  styleUrls: ['./section-navigation.component.scss'],
+})
+export class SectionNavigationComponent implements OnInit, OnDestroy {
+  private curaApiService = inject(CuraApiService);
+  private router = inject(Router);
+
+  readonly sections = signal<SectionNavigationData[]>([]);
+  readonly config = signal<SectionNavigationConfig | undefined>(undefined);
+  readonly activeSection = signal<string>('');
+
+  isMobile: boolean = window.innerWidth < 768;
+
+  scrollToMenuAnchorSubscription: Subscription | null = null;
+  scrollToMenuAnchorSubject: BehaviorSubject<string> = new BehaviorSubject('');
+
+  readonly containerEl = viewChild.required<ElementRef<HTMLDivElement>>('containerEl');
+  readonly anchorsEl = viewChildren<ElementRef<HTMLAnchorElement>>('anchorEl');
+
+  @HostListener('window:resize')
+  onWindowResize(): void {
+    this.isMobile = window.innerWidth < 768;
+  }
+
+  @HostListener('window:scroll')
+  onWindowScroll(): void {
+    this.windowScroll();
+  }
+  readonly padding = input(0);
+  readonly headerClass = input('.page-header');
+
+  @Input({ required: true })
+  set navigationSections(value: SectionNavigationData[]) {
+    if (!value?.length) {
+      throw new Error('O SectionNavigationComponent requer pelo menos uma seção.');
+    }
+    this.sections.set(value);
+
+    if (!this.activeSection()) {
+      this.activeSection.set(value[0].id);
+    }
+  }
+
+  @Input()
+  set navigationConfig(value: SectionNavigationConfig) {
+    this.config.set(value);
+  }
+
+  readonly ariaLabel = input('Navegação da página');
+  readonly anchorAdjustment = input(0);
+
+  readonly sectionChange = output<SectionNavigationData>();
+
+  @HostBinding('style') styleBinding = {
+    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+    '--neutral-dark': this.curaApiService.theme.colors.getColor('neutral-dark'),
+    '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black', 0.16),
+    '--color-base': this.curaApiService.theme.colors.getColor('primary-base'),
+    '--font-size': this.curaApiService.theme.fonts.getSize(),
+    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+  };
+
+  readonly navigationMenu = viewChild.required<ElementRef<HTMLUListElement>>('navigationMenu');
+
+  constructor() {
+    effect(() => {
+      const sections = this.sections();
+      if (sections.length && !this.activeSection()) {
+        this.activeSection.set(sections[0].id);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    const sections = this.sections();
+    if (!sections.length) {
+      throw new Error('O SectionNavigationComponent requer pelo menos uma seção.');
+    }
+
+    if (!this.activeSection()) {
+      this.activeSection.set(sections[0].id);
+    }
+
+    // Usado para evitar multiplos calculos desnecessários enquanto scrolla
+    const TIME_TO_AVOID_UNECESSARY_CALCULATIONS = 50;
+    this.scrollToMenuAnchorSubscription = this.scrollToMenuAnchorSubject.pipe(debounceTime(TIME_TO_AVOID_UNECESSARY_CALCULATIONS)).subscribe((anchorId) => {
+      this.scrollToMenuAnchor(anchorId);
+    });
+  }
+
+  private windowScroll(): void {
+    const navHeight = document.querySelector<HTMLElement>('.rdsite-section-navigation')?.getBoundingClientRect().top || 0;
+    const pageHeaderHeight = document.querySelector<HTMLElement>(this.headerClass())?.getBoundingClientRect().top || 0;
+    let selectedIndex = -1;
+    this.sections()?.forEach((section, index) => {
+      const menuTop = document.querySelector<HTMLElement>(`#${section.id}`)?.getBoundingClientRect().top || 0;
+      if (menuTop) {
+        const calc = window.scrollY - menuTop + navHeight + pageHeaderHeight + this.padding();
+        if (calc >= 0) {
+          selectedIndex = index;
+          if (this.sections()?.[selectedIndex]) {
+            this.activeSection.set(this.sections()?.[selectedIndex]?.id);
+          }
+        }
+      }
+    });
+
+    if (this.sections()?.[selectedIndex]) {
+      this.scrollToMenuAnchorSubject.next(this.sections()?.[selectedIndex]?.id);
+    }
+  }
+
+  scrollToMenuAnchor(anchorId: string): void {
+    const anchor = this.anchorsEl().find((anchor) => anchor.nativeElement.id == `anchor-${anchorId}`);
+    if (!anchor) return;
+    const distanceFromTheCenterOfTheAnchor = (anchor.nativeElement.offsetLeft + anchor.nativeElement.offsetLeft + anchor?.nativeElement.offsetWidth) / 2;
+    const containerEl = this.containerEl();
+    const centerOfContainerEl = containerEl?.nativeElement.clientWidth / 2;
+    const left = distanceFromTheCenterOfTheAnchor - centerOfContainerEl;
+    containerEl.nativeElement.scrollTo({
+      left: left,
+      behavior: 'smooth',
+    });
+  }
+
+  getPath(sectionId: string): string {
+    return `${this.router.url}#${sectionId}`;
+  }
+
+  ngOnDestroy(): void {
+    this.scrollToMenuAnchorSubscription?.unsubscribe();
+  }
+}

package/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.html

@@ -0,0 +1,8 @@
+@if (ctas().length) {
+  @for (cta of ctas(); track cta.text) {
+    <a [href]="cta.url" rdsitelink (click)="sideCtaBottomItemClicked($event)">
+      <cura-icon [name]="cta.icon" size="20" color="neutral-black"></cura-icon>
+      <span>{{ cta.text }}</span>
+    </a>
+  }
+}

package/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.scss

@@ -0,0 +1,56 @@
+@use '../../../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  background-color: var(--bg-color);
+
+  * {
+    font-family: var(--font-family);
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 0;
+    gap: 12px;
+    padding: 0px 10px;
+    background-color: var(--bg-cta-color);
+    color: var(--font-color);
+    transition: background-color 0.25s linear !important;
+    text-decoration: none;
+    font-weight: 500;
+
+    span {
+      color: var(--font-color);
+    }
+
+    cura-icon {
+      --color: var(--font-color) !important;
+    }
+
+    &:hover {
+      background-color: var(--bg-cta-hover-color);
+      color: var(--font-color) !important;
+    }
+
+    &:active {
+      background-color: var(--bg-cta-active-color);
+      color: var(--font-color) !important;
+    }
+  }
+}
+
+@media only screen and (min-width: breakpoints.$breakpoint-medium) {
+  :host {
+    width: 448px;
+
+    a {
+      gap: 16px;
+      padding: 0px 16px;
+    }
+  }
+}

package/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.spec.ts

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

package/components/side-ctas/components/side-ctas-bottom/side-ctas-bottom.component.ts

@@ -0,0 +1,31 @@
+import { Component, HostBinding, output, inject, input } from '@angular/core';
+import { RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { SideCta } from '../../models/SideCta.model';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-side-ctas-bottom',
+  imports: [RdsiteLinkDirective, CuraIconComponent],
+  templateUrl: './side-ctas-bottom.component.html',
+  styleUrl: './side-ctas-bottom.component.scss',
+})
+export class SideCtasBottomComponent {
+  private curaApiService = inject(CuraApiService);
+
+  readonly ctas = input<SideCta[]>([]);
+  readonly sideCtaBottomItemClick = output<Event>();
+
+  @HostBinding('style') style = {
+    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+    '--font-color': this.curaApiService.theme.colors.getColor('neutral-black'),
+    '--bg-color': this.curaApiService.theme.colors.getColor('primary-dark'),
+    '--bg-cta-color': this.curaApiService.theme.colors.getColor('accent-base'),
+    '--bg-cta-hover-color': this.curaApiService.theme.colors.getColor('accent-dark'),
+    '--bg-cta-active-color': this.curaApiService.theme.colors.getColor('accent-darker'),
+  };
+
+  sideCtaBottomItemClicked(event: Event) {
+    this.sideCtaBottomItemClick.emit(event);
+  }
+}

package/components/side-ctas/components/side-ctas-right-bottom/side-ctas-right-bottom.component.html

@@ -0,0 +1,11 @@
+@if (link() && imgUrl()) {
+  <rdsite-whatsapp
+    [link]="link()"
+    [imgUrl]="imgUrl()"
+    [text]="text()"
+    [bgColor]="bgColor()"
+    [bgHover]="bgHover()"
+    [borderTop]="borderTop()"
+    (whatsappClick)="whatsappClicked($event)"
+  ></rdsite-whatsapp>
+}

package/components/side-ctas/components/side-ctas-right-bottom/side-ctas-right-bottom.component.spec.ts

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

package/components/side-ctas/components/side-ctas-right-bottom/side-ctas-right-bottom.component.ts

@@ -0,0 +1,23 @@
+import { Component, input, output } from '@angular/core';
+import { WhatsappComponent } from '@rededor/site-front-end-lib/components/whatsapp';
+
+@Component({
+  selector: 'rdsite-side-ctas-right-bottom',
+  imports: [WhatsappComponent],
+  templateUrl: './side-ctas-right-bottom.component.html',
+  styleUrl: './side-ctas-right-bottom.component.scss',
+})
+export class SideCtasRightBottomComponent {
+  readonly link = input<string>('');
+  readonly imgUrl = input<string>('');
+  readonly text = input<string>('');
+  readonly bgColor = input<string>('#1DCD52');
+  readonly bgHover = input<string>('#016720');
+  readonly borderTop = input<boolean>(false);
+
+  readonly sideCtaRightBottomItemClick = output<Event>();
+
+  whatsappClicked(event: Event) {
+    this.sideCtaRightBottomItemClick.emit(event);
+  }
+}

package/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.html

@@ -0,0 +1,10 @@
+@if (ctas().length) {
+  @for (cta of ctas(); track cta.text) {
+    <a class="right-middle-cta" [href]="cta.url" rdsitelink (click)="sideCtaRightMiddleItemClicked($event)">
+      <div class="right-middle-cta-icon">
+        <cura-icon [name]="cta.icon" size="24" color="neutral-purewhite"></cura-icon>
+      </div>
+      <span>{{ cta.text }}</span>
+    </a>
+  }
+}

package/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.scss

@@ -0,0 +1,54 @@
+@use '../../../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: none;
+  gap: 16px;
+  padding: 0px 8px;
+
+  * {
+    font-family: var(--font-family);
+  }
+
+  .right-middle-cta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    text-decoration: none;
+    font-weight: 500;
+
+    &-icon {
+      width: 36px;
+      height: 36px;
+      background-color: var(--icon-bg-color);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    span {
+      text-align: center;
+      color: var(--font-color);
+      font-size: 12px;
+      line-height: 135%;
+      letter-spacing: 0.72px;
+    }
+
+    &:hover span {
+      color: var(--font-hover) !important;
+    }
+
+    &:active span {
+      color: var(--font-active) !important;
+    }
+  }
+}
+
+@media only screen and (min-width: breakpoints.$breakpoint-medium) {
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.spec.ts

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

package/components/side-ctas/components/side-ctas-right-middle/side-ctas-right-middle.component.ts

@@ -0,0 +1,30 @@
+import { Component, HostBinding, output, inject, input } from '@angular/core';
+import { RdsiteLinkDirective } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { SideCta } from '../../models/SideCta.model';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-side-ctas-right-middle',
+  imports: [RdsiteLinkDirective, CuraIconComponent],
+  templateUrl: './side-ctas-right-middle.component.html',
+  styleUrl: './side-ctas-right-middle.component.scss',
+})
+export class SideCtasRightMiddleComponent {
+  private curaApiService = inject(CuraApiService);
+
+  readonly ctas = input<SideCta[]>([]);
+  readonly sideCtaRightMiddleItemClick = output<Event>();
+
+  @HostBinding('style') style = {
+    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+    '--icon-bg-color': this.curaApiService.theme.colors.getColor('primary-base'),
+    '--font-color': this.curaApiService.theme.colors.getColor('primary-lighter'),
+    '--font-hover': this.curaApiService.theme.colors.getColor('neutral-white'),
+    '--font-active': this.curaApiService.theme.colors.getColor('primary-light'),
+  };
+
+  sideCtaRightMiddleItemClicked(event: Event) {
+    this.sideCtaRightMiddleItemClick.emit(event);
+  }
+}

package/components/side-ctas/components/side-ctas-right-top/side-ctas-right-top.component.html

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

package/components/side-ctas/components/side-ctas-right-top/side-ctas-right-top.component.scss

@@ -0,0 +1,11 @@
+@use '../../../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  display: none;
+}
+
+@media only screen and (min-width: breakpoints.$breakpoint-medium) {
+  :host {
+    display: block;
+  }
+}

package/components/side-ctas/components/side-ctas-right-top/side-ctas-right-top.component.spec.ts

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

package/components/side-ctas/components/side-ctas-right-top/side-ctas-right-top.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'rdsite-side-ctas-right-top',
+  imports: [],
+  templateUrl: './side-ctas-right-top.component.html',
+  styleUrl: './side-ctas-right-top.component.scss',
+})
+export class SideCtasRightTopComponent {}

package/components/side-ctas/index.ts

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

package/components/side-ctas/models/SideCta.model.ts

@@ -0,0 +1,5 @@
+export interface SideCta {
+  text: string;
+  icon: string;
+  url: string;
+}

package/components/side-ctas/ng-package.json

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

package/components/side-ctas/public-api.ts

@@ -0,0 +1,6 @@
+export * from './side-ctas.component';
+export * from './components/side-ctas-bottom/side-ctas-bottom.component';
+export * from './components/side-ctas-right-bottom/side-ctas-right-bottom.component';
+export * from './components/side-ctas-right-middle/side-ctas-right-middle.component';
+export * from './components/side-ctas-right-top/side-ctas-right-top.component';
+export * from './models/SideCta.model';

package/components/side-ctas/side-ctas.component.html

@@ -0,0 +1,28 @@
+<div
+  class="rdsite-side-ctas-right"
+  [ngStyle]="{
+    display: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? 'flex' : 'none',
+  }"
+>
+  <div #rightTop class="rdsite-side-ctas-right-top">
+    <ng-content select="rdsite-side-ctas-right-top"></ng-content>
+  </div>
+  <div #rightMiddle class="rdsite-side-ctas-right-middle">
+    <ng-content select="rdsite-side-ctas-right-middle"></ng-content>
+  </div>
+  <div #rightBottom class="rdsite-side-ctas-right-bottom">
+    <ng-content select="rdsite-side-ctas-right-bottom"></ng-content>
+  </div>
+</div>
+
+<div
+  class="rdsite-side-ctas-bottom"
+  [ngStyle]="{
+    display: bottom?.children?.length ? 'flex' : 'none',
+    paddingRight: rightTop?.children?.length || rightMiddle?.children?.length || rightBottom?.children?.length ? '88px' : '0px',
+  }"
+>
+  <div #bottom class="rdsite-side-ctas-bottom-container">
+    <ng-content select="rdsite-side-ctas-bottom"></ng-content>
+  </div>
+</div>