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

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

@@ -1,62 +0,0 @@
-@use '../../styles/_breakpoints.scss' as breakpoints;
-
-$header-height: 80px;
-$side-width: 88px;
-$bottom-ctas-height: 88px;
-
-:host {
-  position: sticky;
-  bottom: 0px;
-  right: 0px;
-  display: block;
-  z-index: 3003;
-  pointer-events: none;
-  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
-    margin-top: -$bottom-ctas-height;
-  }
-}
-
-.rdsite-side-ctas-right {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-  height: min-content;
-  width: $side-width;
-  background-color: var(--color-right);
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  pointer-events: auto;
-
-  &-middle {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-  }
-}
-
-.rdsite-side-ctas-bottom {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: $side-width;
-  background-color: transparent;
-  height: $bottom-ctas-height;
-
-  &-container {
-    pointer-events: auto;
-    width: 100%;
-  }
-}
-
-@media only screen and (min-width: breakpoints.$breakpoint-medium) {
-  .rdsite-side-ctas-right {
-    height: calc(100vh - $header-height);
-  }
-
-  .rdsite-side-ctas-bottom-container {
-    width: fit-content;
-    gap: 10px;
-  }
-}

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

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

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

@@ -1,17 +0,0 @@
-import { Component, HostBinding, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  selector: 'rdsite-side-ctas',
-  imports: [CommonModule],
-  templateUrl: './side-ctas.component.html',
-  styleUrl: './side-ctas.component.scss',
-})
-export class SideCtasComponent {
-  private curaApiService = inject(CuraApiService);
-
-  @HostBinding('style') style = {
-    '--color-right': this.curaApiService.theme.colors.getColor('primary-darker'),
-  };
-}

package/components/sidebar-navigation/index.ts

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

package/components/sidebar-navigation/ng-package.json

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

package/components/sidebar-navigation/public-api.ts

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

package/components/sidebar-navigation/sidebar-navigation.component.html

@@ -1,42 +0,0 @@
-<nav class="rdsite-sidebar-navigation" [class.starTheme]="isStarTheme()" [attr.aria-label]="ariaLabel()" [style.top.px]="config()?.offsetTop || 0">
-  <cura-card
-    class="only-mobile"
-    [type]="isStarTheme() ? 'transparent' : 'solid'"
-    [hasPadding]="isStarTheme() ? false : true"
-    marginBlock="8px"
-    [hasShadow]="false"
-    type="solid"
-    colorMode="light"
-    target="_self"
-  >
-    @if (title()) {
-      <cura-paragraph size="small" color="neutral-black" marginBlock="8px">
-        <b>{{ title() }}</b>
-      </cura-paragraph>
-    }
-    <ul role="menubar">
-      @for (section of sections(); track section.id) {
-        <li role="none">
-          <cura-paragraph size="xsmall" marginBlock="8px" [color]="activeSection() === section.id ? 'neutral-black' : 'primary-base'">
-            <a
-              #anchorEl
-              id="anchor-{{ section.id }}"
-              class="rdsite-sidebar-link"
-              role="menuitem"
-              [href]="getPath(section.id)"
-              (click)="onSectionClick({ id: section.id, title: section.title })"
-              rdsitelink
-              [anchorAdjustment]="anchorAdjustment() || defaultAnchorAdjustment()"
-              [attr.aria-current]="activeSection() === section.id ? 'page' : null"
-              [attr.aria-label]="'Navegar para ' + section.title"
-            >
-              <b>
-                {{ section.title }}
-              </b>
-            </a>
-          </cura-paragraph>
-        </li>
-      }
-    </ul>
-  </cura-card>
-</nav>

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

@@ -1,25 +0,0 @@
-nav {
-  * {
-    font-family: var(--font-family);
-  }
-  ul {
-    display: flex;
-    flex-direction: column;
-    padding-right: 20px;
-
-    li {
-      width: 100%;
-      cura-paragraph,
-      a {
-        text-align: left;
-      }
-      a {
-        color: unset;
-        text-decoration: none;
-      }
-    }
-  }
-  &.starTheme {
-    border-right: 1px solid var(--primary-base);
-  }
-}

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

@@ -1,122 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  signal,
-  HostListener,
-  HostBinding,
-  inject,
-  input,
-  output,
-  viewChildren,
-  DOCUMENT,
-  PLATFORM_ID,
-  AfterViewInit,
-} from '@angular/core';
-import { RdsiteLinkDirective, SectionNavigationConfig, SectionNavigationData } from '@rededor/site-front-end-lib/core';
-import { CuraCardComponent } from '@rededor/site-front-end-lib/cura/cards/cura-card';
-import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { Router } from '@angular/router';
-import { isPlatformBrowser, Location } from '@angular/common';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'nav[rdsite-sidebar-navigation]',
-  imports: [RdsiteLinkDirective, CuraCardComponent, CuraParagraphComponent],
-  templateUrl: './sidebar-navigation.component.html',
-  styleUrl: './sidebar-navigation.component.scss',
-})
-export class SidebarNavigationComponent implements AfterViewInit {
-  private readonly curaApiService = inject(CuraApiService);
-  private router = inject(Router);
-  private location = inject(Location);
-  private platformId = inject(PLATFORM_ID);
-  private document = inject<Document>(DOCUMENT);
-
-  readonly sections = signal<SectionNavigationData[]>([]);
-  readonly config = signal<SectionNavigationConfig | undefined>(undefined);
-  readonly activeSection = signal<string>('');
-  public selectedIndex = signal<number>(0);
-  public defaultAnchorAdjustment = signal(0);
-  readonly isStarTheme = input(false);
-
-  private menuHeaderHeight = 0;
-
-  readonly anchorAdjustment = input(0);
-  readonly title = input('Nesta página');
-  readonly ariaLabel = input('Navegação da página');
-  readonly padding = input(-50);
-
-  @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 anchorsEl = viewChildren<ElementRef<HTMLAnchorElement>>('anchorEl');
-  readonly sectionChange = output<SectionNavigationData>();
-
-  @HostListener('window:scroll')
-  onWindowScroll(): void {
-    this.windowScroll();
-  }
-
-  @HostBinding('style') styleBinding = {
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-    '--primary-base': this.curaApiService.theme.colors.getColor('primary-base'),
-  };
-
-  ngAfterViewInit(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      setTimeout(() => {
-        this.menuHeaderHeight = this.document.querySelector<HTMLElement>('header[sl-hdr]')?.offsetHeight || 0;
-        this.defaultAnchorAdjustment.set(this.menuHeaderHeight + (this.padding() - 1));
-      }, 200);
-    }
-  }
-
-  private windowScroll(): void {
-    this.selectedIndex.set(-1);
-
-    this.sections()?.forEach((section, index) => {
-      const element = document.querySelector<HTMLElement>(`#${section.id}`);
-      if (!element) return;
-
-      const elementTop = element.getBoundingClientRect().top + window.scrollY;
-      const currentScroll = window.scrollY + this.menuHeaderHeight + this.padding();
-      if (currentScroll >= elementTop) {
-        this.selectedIndex.set(index);
-        if (this.sections()?.[this.selectedIndex()]) {
-          this.activeSection.set(this.sections()?.[this.selectedIndex()]?.id);
-        }
-      }
-    });
-  }
-
-  getBasePath(): string {
-    const base = this.location.prepareExternalUrl('');
-    const normalized = base.replace(/\/$/, '');
-
-    return normalized === '' || normalized === '/' ? '' : normalized;
-  }
-
-  getPath(sectionId: string): string {
-    return `${this.getBasePath()}${this.router.url}#${sectionId}`;
-  }
-
-  onSectionClick(event: SectionNavigationData) {
-    this.sectionChange.emit(event);
-  }
-}

package/components/sticky-navigation/index.ts

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

package/components/sticky-navigation/ng-package.json

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

package/components/sticky-navigation/public-api.ts

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

package/components/sticky-navigation/sticky-navigation.component.html

@@ -1,39 +0,0 @@
-<nav class="rdsite-sticky-navigation" [attr.aria-label]="ariaLabel()" [style.top.px]="config()?.offsetTop || 0">
-  @if (title()) {
-    <div class="title-bar" (click)="toggleOpen()" [attr.aria-expanded]="isOpen()" role="button" tabindex="0" (keydown.enter)="toggleOpen()">
-      <cura-paragraph size="small" [color]="isOpen() ? 'neutraldark' : 'primary-base'" marginBlock="8px">
-        <b>{{ title() }}</b>
-      </cura-paragraph>
-      <cura-icon [name]="isOpen() ? 'up' : 'down'" size="16" [color]="isOpen() ? 'neutraldark' : 'primary-base'"></cura-icon>
-    </div>
-    @if (sections().length && !isOpen()) {
-      <cura-paragraph size="xsmall" marginBlock="8px" color="neutral-black">
-        <b>{{ sections()[selectedIndex()].title }}</b>
-      </cura-paragraph>
-    }
-  }
-
-  @if (isOpen()) {
-    <ul class="menu" [class.open]="isOpen()" role="menubar">
-      @for (section of sections(); track section.id) {
-        <li role="none">
-          <cura-paragraph size="xsmall" marginBlock="8px" [color]="activeSection() === section.id ? 'neutral-black' : 'primary-base'">
-            <a
-              id="anchor-{{ section.id }}"
-              class="rdsite-sticky-link"
-              role="menuitem"
-              [href]="getPath(section.id)"
-              rdsitelink
-              (click)="onSectionClick({ id: section.id, title: section.title })"
-              [anchorAdjustment]="anchorAdjustment() || defaultAnchorAdjustment()"
-              [attr.aria-current]="activeSection() === section.id ? 'page' : null"
-              [attr.aria-label]="'Navegar para ' + section.title"
-            >
-              <b>{{ section.title }}</b>
-            </a>
-          </cura-paragraph>
-        </li>
-      }
-    </ul>
-  }
-</nav>

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

@@ -1,48 +0,0 @@
-nav {
-  border-radius: 2px;
-  background: var(--neutral-purewhite);
-  box-shadow: 0 1px 4px 0 rgba(38, 38, 38, 0.16);
-  padding: 8px 20px;
-  * {
-    font-family: var(--font-family);
-  }
-
-  .title-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  ul.menu {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    max-height: 0;
-    opacity: 0;
-    transform: scaleY(0);
-    transform-origin: top;
-    transition:
-      max-height 0.3s ease,
-      transform 0.3s ease,
-      opacity 0.3s ease;
-
-    &.open {
-      max-height: fit-content;
-      transform: scaleY(1);
-      opacity: 1;
-    }
-
-    li {
-      width: 100%;
-      cura-paragraph,
-      a {
-        text-align: left;
-      }
-      a {
-        color: unset;
-        text-decoration: none;
-      }
-    }
-  }
-}

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

@@ -1,134 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  Input,
-  signal,
-  HostListener,
-  HostBinding,
-  inject,
-  input,
-  output,
-  viewChildren,
-  PLATFORM_ID,
-  DOCUMENT,
-  AfterViewInit,
-} from '@angular/core';
-import { RdsiteLinkDirective, SectionNavigationConfig, SectionNavigationData } from '@rededor/site-front-end-lib/core';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
-import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-import { Router } from '@angular/router';
-import { isPlatformBrowser, Location } from '@angular/common';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'nav[rdsite-sticky-navigation]',
-  imports: [RdsiteLinkDirective, CuraParagraphComponent, CuraIconComponent],
-  templateUrl: './sticky-navigation.component.html',
-  styleUrl: './sticky-navigation.component.scss',
-})
-export class StickyNavigationComponent implements AfterViewInit {
-  private curaApiService = inject(CuraApiService);
-  private router = inject(Router);
-  private location = inject(Location);
-  private platformId = inject(PLATFORM_ID);
-  private document = inject<Document>(DOCUMENT);
-
-  public readonly sections = signal<SectionNavigationData[]>([]);
-  readonly config = signal<SectionNavigationConfig | undefined>(undefined);
-  readonly activeSection = signal<string>('');
-  readonly isOpen = signal<boolean>(false);
-  public selectedIndex = signal<number>(0);
-  public defaultAnchorAdjustment = signal(0);
-
-  private menuHeaderHeight = 0;
-  private menuStickyClosedHeight = 0;
-
-  readonly anchorAdjustment = input(0);
-  readonly title = input('Nesta página');
-  readonly ariaLabel = input('Navegação da página');
-  readonly padding = input(20);
-
-  @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 anchorsEl = viewChildren<ElementRef<HTMLAnchorElement>>('anchorEl');
-  readonly sectionChange = output<SectionNavigationData>();
-
-  @HostListener('window:scroll')
-  onWindowScroll(): void {
-    this.windowScroll();
-  }
-
-  @HostBinding('style') styleBinding = {
-    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-  };
-
-  ngAfterViewInit(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      setTimeout(() => {
-        this.menuHeaderHeight = this.document.querySelector<HTMLElement>('header[sl-hdr]')?.offsetHeight || 0;
-        this.menuStickyClosedHeight = this.document.querySelector<HTMLElement>('nav[rdsite-sticky-navigation]')?.offsetHeight || 0;
-      }, 200);
-    }
-  }
-
-  private windowScroll(): void {
-    this.sections()?.forEach((section, index) => {
-      const element = this.document.querySelector<HTMLElement>(`#${section.id}`);
-      if (!element) return;
-
-      const elementTop = element.getBoundingClientRect().top + window.scrollY;
-      const currentScroll = window.scrollY + this.menuHeaderHeight + this.menuStickyClosedHeight + this.padding();
-
-      if (currentScroll >= elementTop) {
-        this.selectedIndex.set(index);
-        if (this.sections()?.[this.selectedIndex()]) {
-          this.activeSection.set(this.sections()?.[this.selectedIndex()]?.id);
-        }
-      }
-    });
-  }
-
-  getBasePath(): string {
-    const base = this.location.prepareExternalUrl('');
-    const normalized = base.replace(/\/$/, '');
-
-    return normalized === '' || normalized === '/' ? '' : normalized;
-  }
-
-  getPath(sectionId: string): string {
-    return `${this.getBasePath()}${this.router.url}#${sectionId}`;
-  }
-
-  onSectionClick(event: SectionNavigationData) {
-    this.sectionChange.emit(event);
-    this.isOpen.update((value) => !value);
-  }
-
-  toggleOpen(): void {
-    this.isOpen.update((value) => !value);
-    if (isPlatformBrowser(this.platformId) && this.isOpen() && !this.anchorAdjustment()) {
-      setTimeout(() => {
-        // Utilizo o timeout para pegar a altura do elemento depois dele aberto
-        const menuStickyOpenedHeight = this.document.querySelector<HTMLElement>('nav[rdsite-sticky-navigation]')?.offsetHeight || 0;
-        this.defaultAnchorAdjustment.set(menuStickyOpenedHeight + this.menuHeaderHeight);
-      }, 100);
-    }
-  }
-}

package/components/whatsapp/index.ts

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

package/components/whatsapp/ng-package.json

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

package/components/whatsapp/public-api.ts

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

package/components/whatsapp/whatsapp.component.html

@@ -1,23 +0,0 @@
-@if (link()) {
-  <a
-    class="rdsite-whatsapp"
-    [ngClass]="{ 'border-top': borderTop() }"
-    [href]="link()"
-    rdsitelink
-    (mouseenter)="active = true"
-    (mouseleave)="active = false"
-    (click)="whatsappClicked($event)"
-  >
-    @if (imgUrl()) {
-      <div class="image" [ngStyle]="{ 'background-image': imgUrl() }"></div>
-    }
-    <div class="icon" [ngClass]="{ active: active }">
-      <cura-icon name="whatsapp" size="16" color="neutral-purewhite"></cura-icon>
-    </div>
-
-    <div class="rdsite-whatsapp-animation" [ngClass]="{ active: active }">
-      <cura-icon name="whatsapp" size="16" color="neutral-purewhite"></cura-icon>
-      <span>{{ text() }}</span>
-    </div>
-  </a>
-}