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

package/components/header/components/main/header-main-menu-item/header-main-menu-item.component.scss

@@ -1,53 +0,0 @@
-@use '../../../../../styles/_breakpoints.scss' as breakpoints;
-
-li[sl-hdr-main-item] {
-  display: none;
-  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.sl-hdr-main-item-link {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: var(--hdr-main-color) !important;
-  padding: 0px 8px;
-  border-radius: 4px;
-
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.56px;
-  font-weight: 350;
-  text-align: center;
-  text-decoration: none;
-  font-weight: 500;
-
-  svg {
-    stroke: var(--hdr-main-color-icon) !important;
-  }
-
-  &:hover,
-  &.hover {
-    color: var(--hdr-main-hover) !important;
-    background-color: var(--hdr-main-bg-hover);
-    svg {
-      stroke: var(--hdr-main-hover) !important;
-    }
-  }
-
-  &:active {
-    color: var(--hdr-main-active) !important;
-    svg {
-      stroke: var(--hdr-main-active) !important;
-    }
-  }
-
-  @media only screen and (min-width: breakpoints.$breakpoint-large) {
-    height: 44px;
-    padding: 0px 16px;
-  }
-}

package/components/header/components/main/header-main-menu-item/header-main-menu-item.component.spec.ts

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

package/components/header/components/main/header-main-menu-item/header-main-menu-item.component.ts

@@ -1,88 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, effect, HostListener, inject, input, OnDestroy, output, ViewEncapsulation, viewChild, computed } from '@angular/core';
-import { RdsiteLinkDirective, MenuItem } from '@rededor/site-front-end-lib/core';
-import { HeaderMainMenuItemDropdownComponent } from '../header-main-menu-item-dropdown/header-main-menu-item-dropdown.component';
-import { debounceTime, Subject, Subscription } from 'rxjs';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'li[sl-hdr-main-item]',
-  imports: [CommonModule, RdsiteLinkDirective, HeaderMainMenuItemDropdownComponent],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './header-main-menu-item.component.html',
-  styleUrl: './header-main-menu-item.component.scss',
-})
-export class HeaderMainMenuItemComponent implements OnDestroy {
-  private curaApiService = inject(CuraApiService);
-
-  item = input.required<MenuItem>();
-  headerMainMenuItemClick = output<Event>();
-  headerMainMenuItemDDClick = output<Event>();
-  headerMainMenuHighlightDDClick = output<Event>();
-  headerMainMenuCtaDDClick = output<Event>();
-
-  isMenuHover: boolean = false;
-  isDropdownHover: boolean = false;
-
-  dropdownOpen$: Subject<boolean> = new Subject();
-  dropdownSubscription: Subscription | null = null;
-
-  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
-
-  readonly dropdownComponent = viewChild(HeaderMainMenuItemDropdownComponent);
-
-  @HostListener('mouseover')
-  onMouseOver() {
-    this.btnHoverChange(true);
-  }
-
-  @HostListener('mouseleave')
-  onMouseLeave() {
-    this.btnHoverChange(false);
-  }
-
-  constructor() {
-    effect(() => {
-      if (!this.dropdownComponent()?.opened()) {
-        this.isMenuHover = false;
-        this.isDropdownHover = false;
-      }
-    });
-
-    const timeToDebounce = 50;
-    this.dropdownSubscription = this.dropdownOpen$.pipe(debounceTime(timeToDebounce)).subscribe((open) => {
-      this.dropdownComponent()?.opened?.set(open);
-    });
-  }
-
-  headerMainMenuItemClicked(event: Event) {
-    this.headerMainMenuItemClick.emit(event);
-  }
-
-  headerMainMenuItemDDClicked(event: Event) {
-    this.headerMainMenuItemDDClick.emit(event);
-  }
-
-  headerMainMenuHighlightDDClicked(event: Event) {
-    this.headerMainMenuHighlightDDClick.emit(event);
-  }
-
-  headerMainMenuCtaDDClicked(event: Event) {
-    this.headerMainMenuCtaDDClick.emit(event);
-  }
-
-  btnHoverChange(value: boolean) {
-    this.isMenuHover = value;
-    this.dropdownOpen$.next(this.isMenuHover || this.isDropdownHover);
-  }
-
-  dropdownHoverChange(value: boolean) {
-    this.isDropdownHover = value;
-    this.dropdownOpen$.next(this.isMenuHover || this.isDropdownHover);
-  }
-
-  ngOnDestroy(): void {
-    this.dropdownSubscription?.unsubscribe();
-  }
-}

package/components/header/components/main/header-main-menu-item-dropdown/header-main-menu-item-dropdown.component.html

@@ -1,112 +0,0 @@
-@if (item()) {
-  <div class="sl-hdr-main-item-dropdown">
-    <div class="info">
-      <p class="info-title">
-        {{ item().title }}
-      </p>
-
-      <p class="info-description">
-        {{ item().description }}
-      </p>
-    </div>
-
-    <nav class="links-lv2">
-      <ul class="links-lv2-content">
-        @for (itemLv2 of item().children; track itemLv2.title) {
-          <li>
-            <a
-              class="link lv2"
-              [ngClass]="{ active: itemLv2.active }"
-              [href]="itemLv2.url"
-              rdsitelink
-              (click)="closeDropdown(); headerMainMenuItemDDClicked($event)"
-              (mouseenter)="lv2ItemHoverChange(true, itemLv2, item().children)"
-              (mouseleave)="lv2ItemHoverChange(false, itemLv2, item().children)"
-            >
-              {{ itemLv2.title }}
-              @if (itemLv2?.children?.length) {
-                <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-                  <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#arrowRightCircle'"></use>
-                </svg>
-              }
-            </a>
-          </li>
-        }
-      </ul>
-      @if (selectedLv2Item?.children?.length) {
-        <nav class="links-lv3" (mouseenter)="lv3ContainerHoverChange(true, item().children)" (mouseleave)="lv3ContainerHoverChange(false, item().children)">
-          <ul class="links-lv3-content">
-            @for (itemLv3 of selectedLv2Item?.children; track itemLv3.title) {
-              <li>
-                <a
-                  class="link lv3"
-                  [ngClass]="{ active: itemLv3.active }"
-                  [href]="itemLv3.url"
-                  rdsitelink
-                  (click)="closeDropdown(); headerMainMenuItemDDClicked($event)"
-                  (mouseenter)="lv3ItemHoverChange(true, itemLv3, selectedLv2Item?.children)"
-                  (mouseleave)="lv3ItemHoverChange(false, itemLv3, selectedLv2Item?.children)"
-                >
-                  {{ itemLv3.title }}
-                  @if (itemLv3?.children?.length) {
-                    <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-                      <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#arrowRightCircle'"></use>
-                    </svg>
-                  }
-                </a>
-              </li>
-            }
-          </ul>
-
-          @if (selectedLv3Item?.children?.length) {
-            <nav
-              class="links-lv4"
-              (mouseenter)="lv4ContainerHoverChange(true, selectedLv2Item?.children)"
-              (mouseleave)="lv4ContainerHoverChange(false, selectedLv2Item?.children)"
-            >
-              <ul class="links-lv4-content">
-                @for (itemLv4 of selectedLv3Item?.children; track itemLv4.title) {
-                  <li>
-                    <a class="link lv4" [href]="itemLv4.url" rdsitelink (click)="closeDropdown(); headerMainMenuItemDDClicked($event)">
-                      {{ itemLv4.title }}
-                    </a>
-                  </li>
-                }
-              </ul>
-            </nav>
-          }
-        </nav>
-      }
-    </nav>
-
-    <div class="ctas-container">
-      <div class="highlights">
-        @for (destaque of item().itens_destaque; track destaque.titulo) {
-          <div class="highlight">
-            <a [href]="destaque.link" rdsitelink (click)="closeDropdown(); headerMainMenuHighlightDDClicked($event)">
-              <img
-                loading="lazy"
-                fetchpriority="low"
-                [src]="destaque.imagem?.webp_url || destaque.imagem?.url"
-                [alt]="destaque.imagem?.alt || destaque.titulo"
-              />
-              <span class="highlight-title">{{ destaque.titulo }}</span>
-            </a>
-            <span class="highlight-description">{{ destaque.descricao }}</span>
-          </div>
-        }
-      </div>
-
-      <div class="ctas">
-        @for (cta of item().ctas; track cta.titulo) {
-          <a [href]="cta.link" rdsitelink (click)="closeDropdown(); headerMainMenuCtaDDClicked($event)">
-            <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-              <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#' + cta.icone"></use>
-            </svg>
-            {{ cta.titulo }}
-          </a>
-        }
-      </div>
-    </div>
-  </div>
-}

package/components/header/components/main/header-main-menu-item-dropdown/header-main-menu-item-dropdown.component.scss

@@ -1,259 +0,0 @@
-@use '../../../../../styles/_breakpoints.scss' as breakpoints;
-
-div[sl-hdr-main-item-dropdown] {
-  display: grid;
-  grid: '. content .';
-  grid-template-columns: minmax(0px, auto) minmax(auto, 1366px) minmax(0px, auto);
-
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 0px;
-  z-index: 1;
-  width: 100vw;
-  max-height: calc(100vh - 80px);
-  background-color: var(--hdr-main-dd-bg-color);
-  box-shadow: 4px 4px 12px -5px #000;
-  padding: 40px;
-
-  @media only screen and (min-width: breakpoints.$breakpoint-large) {
-    max-height: calc(100vh - 88px);
-  }
-}
-
-.sl-hdr-main-item-dropdown {
-  grid-area: content;
-  display: grid;
-  grid-template-columns: minmax(23%, 264px) auto minmax(24%, 225px) auto 47%;
-  grid-template-areas: 'info . links . ctas';
-  max-width: breakpoints.$breakpoint-large;
-  overflow: auto;
-
-  .info {
-    grid-area: info;
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 0;
-
-    p {
-      color: var(--hdr-main-dd-info-color);
-    }
-
-    p.info-title {
-      font-size: 28px;
-      line-height: 36px;
-      letter-spacing: 0px;
-      padding-bottom: 15px;
-    }
-
-    p.info-description {
-      font-size: 16px;
-      line-height: 23px;
-      letter-spacing: 0.32px;
-    }
-  }
-
-  nav svg {
-    stroke: var(--hdr-main-dd-icon-color);
-    flex: 0 0 20px;
-  }
-
-  .links-lv2 {
-    position: relative;
-
-    grid-area: links;
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 0;
-
-    .links-lv2-content {
-      display: flex;
-      flex-direction: column;
-      overflow: auto;
-      max-height: calc(100vh - 88px - 80px); // 88 header 80 padding
-      height: fit-content;
-      background-color: var(--hdr-main-dd-lv2-content-bg);
-      gap: 2px;
-      list-style-type: none;
-    }
-
-    .link {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 40px;
-      padding: 12px;
-      text-decoration: none;
-      font-weight: 500;
-
-      font-size: 14px;
-      line-height: 16px;
-      letter-spacing: 0.56px;
-
-      &.lv2 {
-        background-color: var(--hdr-main-dd-lv2-bg);
-        color: var(--hdr-main-dd-alt-color);
-      }
-
-      &.lv3 {
-        background-color: var(--hdr-main-dd-lv3-bg);
-        color: var(--hdr-main-dd-color);
-      }
-
-      &.lv4 {
-        background-color: var(--hdr-main-dd-lv4-bg);
-        color: var(--hdr-main-dd-color);
-
-        &:hover {
-          color: var(--hdr-main-dd-alt-color);
-        }
-      }
-
-      &.active {
-        font-size: 14px;
-        color: var(--hdr-main-dd-color);
-
-        svg {
-          stroke: var(--hdr-main-dd-icon-color-hover);
-        }
-
-        &.lv2 {
-          background-color: var(--hdr-main-dd-lv3-bg);
-        }
-
-        &.lv3 {
-          background-color: var(--hdr-main-dd-lv4-bg);
-        }
-      }
-    }
-
-    .links-lv3 {
-      position: absolute;
-      top: 0;
-      left: 99%;
-      width: 100%;
-      height: 100%;
-      background-color: var(--hdr-main-dd-lv3-bg);
-      border-radius: 4px;
-
-      .links-lv3-content {
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        max-height: 100%;
-        padding: 12px 0px 0px 12px;
-        list-style-type: none;
-      }
-
-      .links-lv4 {
-        position: absolute;
-        top: 0;
-        left: 99%;
-        width: 100%;
-        height: 100%;
-        background-color: var(--hdr-main-dd-lv4-bg);
-        border-radius: 4px;
-
-        .links-lv4-content {
-          display: flex;
-          flex-direction: column;
-          overflow: auto;
-          max-height: 100%;
-          padding: 12px 0px 0px 12px;
-          list-style-type: none;
-        }
-      }
-    }
-  }
-
-  .ctas-container {
-    grid-area: ctas;
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    gap: 48px;
-
-    .highlights {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 16px;
-
-      .highlight {
-        flex: 1 1 0px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-
-        a {
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          overflow: hidden;
-          text-decoration: none;
-
-          img {
-            width: 100%;
-            height: 108px;
-            object-fit: cover;
-            transition: all 0.2s linear;
-          }
-
-          .highlight-title {
-            font-size: 19px;
-            line-height: 28px;
-            letter-spacing: 0px;
-            color: var(--hdr-main-dd-hl-title-color);
-            font-weight: 500;
-          }
-
-          &:hover {
-            img {
-              scale: 1.05;
-            }
-
-            .highlight-title {
-              color: var(--hdr-main-dd-hl-title-hover);
-            }
-          }
-        }
-
-        .highlight-description {
-          font-size: 14px;
-          line-height: 19px;
-          letter-spacing: 0.56px;
-          color: var(--hdr-main-dd-hl-desc-color);
-          font-weight: 300;
-        }
-      }
-    }
-
-    .ctas {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 16px;
-
-      a {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 16px;
-        padding: 24px 16px;
-        background-color: var(--hdr-main-dd-cta-bg);
-        border-radius: 4px;
-        text-decoration: none;
-        font-weight: 500;
-        text-align: center;
-        font-size: 16px;
-        line-height: 20px;
-        letter-spacing: 0.32px;
-        color: var(--hdr-main-dd-cta-color);
-        border: 1px solid var(--hdr-main-dd-cta-border-color);
-
-        svg {
-          stroke: var(--hdr-main-dd-cta-color);
-        }
-      }
-    }
-  }
-}

package/components/header/components/main/header-main-menu-item-dropdown/header-main-menu-item-dropdown.component.spec.ts

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

package/components/header/components/main/header-main-menu-item-dropdown/header-main-menu-item-dropdown.component.ts

@@ -1,107 +0,0 @@
-import { ChangeDetectorRef, Component, computed, inject, input, OnDestroy, output, signal, ViewEncapsulation } from '@angular/core';
-import { RdsiteLinkDirective, MenuItem } from '@rededor/site-front-end-lib/core';
-import { debounceTime, Subject, Subscription } from 'rxjs';
-import { CommonModule } from '@angular/common';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'div[sl-hdr-main-item-dropdown]',
-  imports: [CommonModule, RdsiteLinkDirective],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './header-main-menu-item-dropdown.component.html',
-  styleUrl: './header-main-menu-item-dropdown.component.scss',
-})
-export class HeaderMainMenuItemDropdownComponent implements OnDestroy {
-  private cdr = inject(ChangeDetectorRef);
-  private curaApiService = inject(CuraApiService);
-
-  item = input.required<MenuItem>();
-  headerMainMenuItemDDClick = output<Event>();
-  headerMainMenuHighlightDDClick = output<Event>();
-  headerMainMenuCtaDDClick = output<Event>();
-
-  // Também é controlado pelo HeaderMainMenuItemComponent
-  opened = signal(false);
-
-  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
-
-  selectedLv2Item: MenuItem | null = null;
-  selectedLv3Item: MenuItem | null = null;
-  lv2Item$ = new Subject<{ item: MenuItem | null; list: MenuItem[] }>();
-  lv3Item$ = new Subject<{ item: MenuItem | null; list: MenuItem[] }>();
-  lv2ItemSubscription: Subscription | null = null;
-  lv3ItemSubscription: Subscription | null = null;
-
-  isLv2ItemHover: boolean = false;
-  isLv3ContainerHover: boolean = false;
-  isLv3ItemHover: boolean = false;
-  isLv4ContainerHover: boolean = false;
-
-  constructor() {
-    const timeToDebounce = 50;
-
-    this.lv2ItemSubscription = this.lv2Item$.pipe(debounceTime(timeToDebounce)).subscribe(({ item, list }) => {
-      if (!this.isLv2ItemHover && !this.isLv3ContainerHover && !this.isLv3ItemHover && !this.isLv4ContainerHover) {
-        list.forEach((i) => (i.active = false));
-        this.selectedLv2Item = null;
-      } else {
-        list.forEach((i) => (i.active = i.title == item?.title));
-        this.selectedLv2Item = item;
-      }
-      this.cdr.detectChanges();
-    });
-
-    this.lv3ItemSubscription = this.lv3Item$.pipe(debounceTime(timeToDebounce)).subscribe(({ item, list }) => {
-      if (!this.isLv3ItemHover && !this.isLv4ContainerHover) {
-        list.forEach((i) => (i.active = false));
-        this.selectedLv3Item = null;
-      } else {
-        list.forEach((i) => (i.active = i.title == item?.title));
-        this.selectedLv3Item = item;
-      }
-      this.cdr.detectChanges();
-    });
-  }
-
-  lv2ItemHoverChange(value: boolean, lv2Item: MenuItem, lv2List: MenuItem[] = []) {
-    this.isLv2ItemHover = value;
-    this.lv2Item$.next({ item: lv2Item, list: lv2List });
-  }
-
-  lv3ContainerHoverChange(value: boolean, lv2List: MenuItem[] = []) {
-    this.isLv3ContainerHover = value;
-    this.lv2Item$.next({ item: this.selectedLv2Item, list: lv2List });
-  }
-
-  lv3ItemHoverChange(value: boolean, lv3Item: MenuItem, lv3List: MenuItem[] = []) {
-    this.isLv3ItemHover = value;
-    this.lv3Item$.next({ item: lv3Item, list: lv3List });
-  }
-
-  lv4ContainerHoverChange(value: boolean, lv3List: MenuItem[] = []) {
-    this.isLv4ContainerHover = value;
-    this.lv3Item$.next({ item: this.selectedLv3Item, list: lv3List });
-  }
-
-  closeDropdown() {
-    this.opened.set(false);
-  }
-
-  headerMainMenuItemDDClicked(event: Event) {
-    this.headerMainMenuItemDDClick.emit(event);
-  }
-
-  headerMainMenuHighlightDDClicked(event: Event) {
-    this.headerMainMenuHighlightDDClick.emit(event);
-  }
-
-  headerMainMenuCtaDDClicked(event: Event) {
-    this.headerMainMenuCtaDDClick.emit(event);
-  }
-
-  ngOnDestroy(): void {
-    this.lv2ItemSubscription?.unsubscribe();
-    this.lv3ItemSubscription?.unsubscribe();
-  }
-}

package/components/header/components/main/index.ts

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

package/components/header/components/main/ng-package.json

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

package/components/header/components/main/public-api.ts

@@ -1,2 +0,0 @@
-export * from './header-main-menu-item/header-main-menu-item.component';
-export * from './header-main-menu-item-dropdown/header-main-menu-item-dropdown.component';