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

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

@@ -0,0 +1,53 @@
+@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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,112 @@
+@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

@@ -0,0 +1,259 @@
+@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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,107 @@
+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

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

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

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

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

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