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

package/components/header/components/side/header-side-menu/header-side-menu.component.html

@@ -1,32 +0,0 @@
-<div class="sl-hdr-side" [ngClass]="{ active: headerService.showSideMenu() }">
-  <div class="side-menu">
-    <div class="side-menu-close">
-      <button type="button" aria-label="Fechar menu lateral" (click)="headerService.toggleShowSideMenu()">
-        <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-          <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#close'"></use>
-        </svg>
-      </button>
-    </div>
-
-    @if (sideMenuGeoloc()) {
-      <ng-container *ngTemplateOutlet="sideMenuGeoloc()"></ng-container>
-    }
-
-    <nav>
-      <ul class="side-menu-content">
-        @for (sideMenuGroup of sideMenuGroups(); track $index; let firstGroup = $first; let lastGroup = $last) {
-          @for (sideMenuItem of sideMenuGroup; track sideMenuItem.title; let lastItem = $last) {
-            <li
-              sl-hdr-side-item
-              [item]="sideMenuItem"
-              [fontSize]="firstGroup ? 16 : 14"
-              [altStyle]="lastGroup"
-              [ngStyle]="{ 'margin-bottom': lastItem ? '12px' : '0px' }"
-            ></li>
-          }
-        }
-      </ul>
-    </nav>
-  </div>
-</div>
-<rdsite-overlay class="side-menu-overlay" [ngClass]="{ active: headerService.showSideMenu() }" (overlayClick)="overlayClick()"></rdsite-overlay>

package/components/header/components/side/header-side-menu/header-side-menu.component.scss

@@ -1,81 +0,0 @@
-@use '../../../../../styles/_breakpoints.scss' as breakpoints;
-
-.sl-hdr-side {
-  display: block;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  z-index: -1;
-  overflow: hidden;
-  pointer-events: none;
-  transition: z-index 0.3s ease-out;
-
-  &.active {
-    z-index: 3004;
-    pointer-events: auto;
-    .side-menu {
-      transform: translate(0);
-    }
-  }
-}
-
-.side-menu {
-  transition: transform 0.3s ease-out;
-  transform: translate(100%);
-  width: 320px;
-  height: 100vh;
-  overflow: auto;
-  background-color: var(--hdr-side-bg-color);
-
-  &-close {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 8px 20px;
-
-    button {
-      padding: 12px;
-      background-color: transparent;
-      cursor: pointer;
-
-      svg {
-        cursor: pointer;
-        stroke: var(--hdr-side-color);
-      }
-    }
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    padding: 2px 30px 64px 32px;
-
-    ul {
-      list-style-type: none;
-    }
-  }
-}
-
-.side-menu-overlay {
-  top: 0px;
-  right: 0px;
-  z-index: -1;
-  width: 100vw;
-  height: 100vh;
-  transition: all 0.3s ease-out;
-  opacity: 0;
-  background-color: var(--hdr-over-bg-color);
-  pointer-events: none;
-
-  &.active {
-    z-index: 999;
-    opacity: 0.9;
-    pointer-events: all;
-  }
-}
-
-@media only screen and (min-width: breakpoints.$breakpoint-xsmall) {
-  .side-menu {
-    width: 340px;
-  }
-}

package/components/header/components/side/header-side-menu/header-side-menu.component.spec.ts

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

package/components/header/components/side/header-side-menu/header-side-menu.component.ts

@@ -1,29 +0,0 @@
-import { Component, computed, inject, input, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HeaderService } from '@rededor/site-front-end-lib/components/header/services';
-import { HeaderSideMenuItemComponent } from '../header-side-menu-item/header-side-menu-item.component';
-import { MenuItem } from '@rededor/site-front-end-lib/core';
-import { OverlayComponent } from '@rededor/site-front-end-lib/components/overlay';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'div[sl-hdr-side]',
-  imports: [CommonModule, OverlayComponent, HeaderSideMenuItemComponent],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './header-side-menu.component.html',
-  styleUrl: './header-side-menu.component.scss',
-})
-export class HeaderSideMenuComponent {
-  headerService = inject(HeaderService);
-  private curaApiService = inject(CuraApiService);
-
-  sideMenuGroups = input<MenuItem[][]>([]);
-  sideMenuGeoloc = input<TemplateRef<any> | null>(null);
-
-  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
-
-  overlayClick() {
-    this.headerService.toggleShowSideMenu(false);
-  }
-}

package/components/header/components/side/header-side-menu-item/header-side-menu-item.component.html

@@ -1,26 +0,0 @@
-@if (item()) {
-  <div class="sl-hdr-side-item" [ngClass]="{ active: item().active, alt: altStyle() }" (click)="toggleList($event, item, false)">
-    <a [href]="item().url" rdsitelink (click)="toggleList($event, item, !item().children?.length || !!item().url); headerSideMenuItemClicked($event)">
-      <span>{{ item().title }}</span>
-      @if (!item().children?.length) {
-        <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-          <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#right'"></use>
-        </svg>
-      }
-    </a>
-
-    @if (item().children?.length) {
-      <svg width="20" height="20" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
-        <use [attr.xlink:href]="assetsPath() + '/icons/iconset-default.svg#' + (item().active ? 'up' : 'down')"></use>
-      </svg>
-    }
-  </div>
-
-  @if (item().children?.length) {
-    <ul class="sl-hdr-side-item-list" [ngClass]="{ active: item().active }">
-      @for (child of item().children; track child.title) {
-        <li sl-hdr-side-item [item]="child" [fontSize]="fontSize()" [altStyle]="altStyle()" (headerSideMenuItemClick)="headerSideMenuItemClicked($event)"></li>
-      }
-    </ul>
-  }
-}

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

@@ -1,104 +0,0 @@
-.sl-hdr-side-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 0px 4px 0px;
-  min-height: 44px;
-  background-color: transparent;
-  width: 100%;
-  cursor: pointer;
-  border-bottom: solid 1px var(--hdr-side-border-bottom, rgb(0, 61, 165));
-
-  svg {
-    stroke: var(--hdr-side-color);
-    flex-shrink: 0;
-  }
-
-  &.active {
-    border-bottom: none;
-
-    a {
-      text-decoration: none;
-      span {
-        color: var(--hdr-side-open-color, rgb(68, 142, 205));
-      }
-    }
-
-    svg {
-      stroke: var(--hdr-side-open-color);
-    }
-  }
-
-  a {
-    text-align: left;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-
-    span {
-      font-size: var(--side-menu-item-font-size, 16px);
-      font-weight: 300;
-      color: var(--hdr-side-color);
-    }
-
-    svg {
-      stroke: var(--hdr-side-alt-color);
-    }
-  }
-
-  &:hover {
-    a span {
-      color: var(--hdr-side-hover);
-    }
-    svg {
-      stroke: var(--hdr-side-hover) !important;
-    }
-  }
-
-  &:active {
-    a span {
-      color: var(--hdr-side-active);
-    }
-    svg {
-      stroke: var(--hdr-side-active) !important;
-    }
-  }
-
-  &.alt {
-    a span {
-      color: var(--hdr-side-alt-color);
-    }
-
-    svg {
-      stroke: var(--hdr-side-alt-color);
-    }
-
-    &:hover {
-      a span {
-        color: var(--hdr-side-alt-hover);
-      }
-      svg {
-        stroke: var(--hdr-side-alt-hover) !important;
-      }
-    }
-
-    &:active {
-      a span {
-        color: var(--hdr-side-alt-active);
-      }
-      svg {
-        stroke: var(--hdr-side-alt-active) !important;
-      }
-    }
-  }
-}
-.sl-hdr-side-item-list {
-  padding: 0px 0px 0px 24px;
-  display: none;
-
-  &.active {
-    display: block;
-  }
-}

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

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

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

@@ -1,45 +0,0 @@
-import { Component, computed, HostBinding, inject, input, InputSignal, output, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HeaderService } from '@rededor/site-front-end-lib/components/header/services';
-import { RdsiteLinkDirective, MenuItem } from '@rededor/site-front-end-lib/core';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'li[sl-hdr-side-item]',
-  imports: [CommonModule, RdsiteLinkDirective],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './header-side-menu-item.component.html',
-  styleUrl: './header-side-menu-item.component.scss',
-})
-export class HeaderSideMenuItemComponent {
-  private curaApiService = inject(CuraApiService);
-  headerService = inject(HeaderService);
-
-  item = input.required<MenuItem>();
-  altStyle = input<boolean>(false);
-  fontSize = input<number>(14);
-  headerSideMenuItemClick = output<Event>();
-
-  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
-
-  @HostBinding() get style() {
-    return {
-      '--side-menu-item-font-size': `${this.fontSize()}px`,
-    };
-  }
-
-  overlayClick() {
-    this.headerService.toggleShowSideMenu(false);
-  }
-
-  toggleList(event: Event, sideMenuItem: InputSignal<MenuItem>, canCloseSideMenu: boolean) {
-    event.stopPropagation();
-    sideMenuItem().active = !sideMenuItem().active;
-    if (canCloseSideMenu) return this.headerService.toggleShowSideMenu(false);
-  }
-
-  headerSideMenuItemClicked(event: Event) {
-    this.headerSideMenuItemClick.emit(event);
-  }
-}

package/components/header/components/side/index.ts

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

package/components/header/components/side/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/side/public-api.ts

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

package/components/header/header.component.html

@@ -1,81 +0,0 @@
-<div class="sl-hdr-content" [ngClass]="{ 'show-search': headerService.showSearch() }">
-  @defer (hydrate on hover) {
-    <div sl-hdr-logo [href]="logo().href" [title]="logo().title" [alt]="logo().alt" [src]="logo().src" (click)="overlayClick()"></div>
-  }
-
-  <nav class="sl-hdr-aux" (click)="overlayClick()">
-    <div class="sl-hdr-aux-wrapper">
-      @for (auxMenuGroup of auxMenuGroups(); track $index; let firstGroup = $first; let lastGroup = $last) {
-        @if (firstGroup) {
-          <ul class="sl-hdr-aux-container">
-            @for (auxMenuItem of auxMenuGroup; track auxMenuItem.title) {
-              <li
-                sl-hdr-aux-item
-                [item]="auxMenuItem"
-                (headerAuxMenuItemClick)="headerAuxMenuItemClick.emit($event)"
-                (headerAuxMenuItemDDClick)="headerAuxMenuItemDDClick.emit($event)"
-              ></li>
-            }
-          </ul>
-        } @else if (isDesktop()) {
-          <ul class="sl-hdr-aux-container">
-            @for (auxMenuItem of auxMenuGroup; track auxMenuItem.title) {
-              <li
-                sl-hdr-aux-item
-                [item]="auxMenuItem"
-                [altStyle]="true"
-                (headerAuxMenuItemClick)="headerAuxMenuItemClick.emit($event)"
-                (headerAuxMenuItemDDClick)="headerAuxMenuItemDDClick.emit($event)"
-              ></li>
-            }
-          </ul>
-        }
-      }
-      @if (auxMenuGeoloc()) {
-        <ul class="sl-hdr-aux-container">
-          <ng-container *ngTemplateOutlet="auxMenuGeoloc()"></ng-container>
-        </ul>
-      }
-    </div>
-  </nav>
-
-  @defer (hydrate on hover) {
-    <div sl-hdr-act [loginUrl]="loginUrl()" [showSearch]="showSearch()" [homeUrl]="homeUrl()"></div>
-  }
-
-  <nav class="sl-hdr-main">
-    <ul class="sl-hdr-main-list">
-      @for (mainItem of mainMenu(); track mainItem.title) {
-        @defer (hydrate on hover) {
-          <li sl-hdr-main-item [item]="mainItem" (headerMainMenuCtaDDClick)="headerMainMenuCtaDDClick.emit({ event: $event, item: mainItem })"></li>
-        }
-      }
-    </ul>
-  </nav>
-
-  @defer (hydrate when headerService.showSideMenu()) {
-    <div sl-hdr-side [sideMenuGroups]="sideMenuGroups()" [sideMenuGeoloc]="sideMenuGeoloc()"></div>
-  }
-
-  @if (searchControl()) {
-    @defer (hydrate when headerService.showSearch()) {
-      <rdsite-search
-        class="sl-hdr-search"
-        [searchControl]="searchControl()!"
-        [label]="'O que você procura?'"
-        [debounceTime]="1500"
-        [setFocus]="true"
-        (enterPress)="doSearch($event)"
-      >
-      </rdsite-search>
-    }
-  }
-</div>
-
-@defer (hydrate when headerService.showSearch()) {
-  <rdsite-overlay
-    class="search-overlay"
-    [ngClass]="{ active: headerService.showSearch(), opacity: headerService.showSearchOpacity() }"
-    (overlayClick)="overlayClick()"
-  ></rdsite-overlay>
-}

package/components/header/header.component.scss

@@ -1,171 +0,0 @@
-@use '../../styles/_breakpoints.scss' as breakpoints;
-
-header[sl-hdr] {
-  position: sticky;
-  top: 0px;
-  z-index: 9999;
-
-  display: grid !important;
-  grid-template-areas: '. content .';
-  grid-template-columns: minmax(0px, 1fr) minmax(auto, breakpoints.$breakpoint-large) minmax(0px, 1fr);
-  grid-template-rows: 80px;
-  background-color: var(--hdr-bg-color);
-  height: 80px;
-  box-shadow: 0 1px 4px 0 rgba(38, 38, 38, 0.16);
-
-  * {
-    font-family: var(--font-family) !important;
-  }
-
-  svg {
-    stroke: #fff;
-    stroke-width: 2.1px;
-    fill: none;
-  }
-
-  .sl-hdr-content {
-    grid-area: content;
-    display: grid !important;
-    grid-template-areas:
-      'logo . action'
-      'logo . action'
-      'main main main';
-    grid-template-columns: 144px 1fr auto;
-    grid-template-rows: 36px 44px 0px;
-
-    div[sl-hdr-logo] {
-      grid-area: logo;
-    }
-
-    .sl-hdr-aux {
-      display: none;
-      grid-area: aux;
-      background-color: var(--hdr-aux-bg-color);
-      justify-content: flex-start;
-
-      .sl-hdr-aux-wrapper {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        justify-content: flex-start;
-        gap: 2px;
-
-        ul.sl-hdr-aux-container {
-          display: flex;
-          height: 100%;
-          justify-content: space-around;
-          background-color: var(--hdr-aux-container-bg-color);
-          list-style-type: none;
-          padding: 0 12px;
-          flex-grow: 1;
-        }
-      }
-    }
-
-    div[sl-hdr-act] {
-      grid-area: action;
-      background-color: var(--hdr-act-bg-color);
-    }
-
-    nav.sl-hdr-main {
-      grid-area: main;
-
-      ul.sl-hdr-main-list {
-        list-style-type: none;
-        display: flex;
-        width: 100%;
-        height: 100%;
-        justify-content: flex-start;
-        gap: 8px;
-      }
-    }
-
-    .sl-hdr-search {
-      grid-area: search;
-      display: none;
-      position: relative;
-      z-index: -1;
-      background-color: white;
-      width: 100%;
-      height: 100%;
-    }
-
-    &.show-search {
-      grid-template-areas:
-        'logo . action'
-        'logo . action'
-        'search search search';
-
-      .sl-hdr-main {
-        display: none;
-      }
-      .sl-hdr-search {
-        height: 48px;
-        display: block;
-        z-index: 1000;
-      }
-    }
-  }
-
-  .search-overlay {
-    top: 100%;
-    right: 0px;
-    z-index: -1;
-    width: 100vw;
-    height: calc(100vh - 100%);
-    transition: all 0.3s ease-out;
-    opacity: 0;
-    background-color: var(--hdr-over-bg-color);
-    pointer-events: none;
-
-    &.active {
-      z-index: 999;
-      opacity: 0.9;
-      pointer-events: all;
-    }
-
-    &.opacity {
-      opacity: 1;
-    }
-  }
-}
-
-@media only screen and (min-width: breakpoints.$breakpoint-medium) {
-  header[sl-hdr] {
-    .sl-hdr-content {
-      grid-template-areas:
-        'logo aux action'
-        'logo main main';
-      grid-template-columns: 144px 1fr auto;
-
-      &.show-search {
-        grid-template-areas:
-          'logo aux action'
-          'logo search search';
-
-        .sl-hdr-search {
-          height: auto;
-        }
-      }
-
-      .sl-hdr-aux {
-        display: block;
-      }
-
-      .sl-hdr-main {
-        display: block;
-      }
-    }
-  }
-}
-
-@media only screen and (min-width: breakpoints.$breakpoint-large) {
-  header[sl-hdr] {
-    height: 88px;
-
-    .sl-hdr-content {
-      grid-template-rows: 36px 52px;
-      height: 88px;
-    }
-  }
-}

package/components/header/header.component.spec.ts

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