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

package/components/page-template-sidebar/page-template-sidebar.component.scss

@@ -0,0 +1,80 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+article.rdsite-template-sidebar,
+section.rdsite-template-sidebar {
+  display: grid;
+  grid-template-rows: auto auto auto auto;
+  grid-template-columns: minmax(5%, 1fr) minmax(auto, 90%) minmax(5%, 1fr);
+  grid-template-areas:
+    'header header header'
+    'stickycontent stickycontent stickycontent'
+    'beforecontent beforecontent beforecontent'
+    '. pagecontent .';
+
+  @media screen and (min-width: breakpoints.$breakpoint-medium) {
+    grid-template-columns: minmax(5%, 1fr) minmax(auto, breakpoints.$breakpoint-large) minmax(5%, 1fr);
+  }
+
+  .rdsite-template-header {
+    grid-area: header;
+  }
+
+  .rdsite-template-sticky-content {
+    grid-area: stickycontent;
+  }
+
+  .rdsite-template-before-content {
+    grid-area: beforecontent;
+  }
+
+  .rdsite-template-container {
+    grid-area: pagecontent;
+  }
+
+  .rdsite-template-sticky-content {
+    position: sticky;
+    top: 0px;
+    z-index: 3002;
+  }
+
+  .rdsite-template-container {
+    display: grid;
+    position: relative;
+    width: 100%;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'content'
+      'sidebarcontent';
+
+    @media screen and (min-width: breakpoints.$breakpoint-medium) {
+      grid-template-rows: 1fr;
+      grid-template-columns: 3fr 20px 1fr;
+      grid-template-areas: 'content . sidebarcontent';
+    }
+
+    section.rdsite-content-container {
+      grid-area: content;
+      position: relative;
+      max-width: 100%;
+    }
+
+    aside.rdsite-sidebar-content-container {
+      grid-area: sidebarcontent;
+      position: relative;
+      z-index: 3001;
+    }
+  }
+  &.reverse {
+    .rdsite-template-container {
+      grid-template-areas:
+        'sidebarcontent'
+        'content';
+
+      @media screen and (min-width: breakpoints.$breakpoint-medium) {
+        grid-template-columns: 1fr 48px 3fr;
+        grid-template-areas: 'sidebarcontent . content';
+      }
+    }
+  }
+}

package/components/page-template-sidebar/page-template-sidebar.component.spec.ts

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

package/components/page-template-sidebar/page-template-sidebar.component.ts

@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common';
+import { Component, TemplateRef, input } from '@angular/core';
+
+@Component({
+  selector: 'rdsite-page-template-sidebar',
+  imports: [CommonModule],
+  templateUrl: './page-template-sidebar.component.html',
+  styleUrl: './page-template-sidebar.component.scss',
+})
+export class PageTemplateSidebarComponent {
+  readonly header = input<TemplateRef<any> | null>(null);
+  readonly stickyContent = input<TemplateRef<any> | null>(null);
+  readonly beforeContent = input<TemplateRef<any> | null>(null);
+  readonly content = input<TemplateRef<any> | null>(null);
+  readonly afterContent = input<
+    | {
+        template: TemplateRef<any>;
+        show: boolean;
+      }[]
+    | null
+  >(null);
+  readonly sidebarContent = input<TemplateRef<any> | null>(null);
+  readonly isArticle = input(false);
+  readonly reverseSidebar = input(false);
+}

package/components/page-template-sidebar/public-api.ts

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

package/components/pagination/index.ts

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

package/components/pagination/ng-package.json

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

package/components/pagination/pagination.component.html

@@ -0,0 +1,53 @@
+<div
+  class="rdsite-pagination"
+  [ngClass]="{ 'rdsite-container': containerClass, 'dark-mode': darkMode() }"
+  [style]="customStyle()"
+  data-testid="_rdsite-rdsite-pagination"
+>
+  @if (totalPages() && totalPages() > 1) {
+    <nav class="rdsite-pagination-nav" aria-label="Pagination nav">
+      <button (click)="prev()" type="button" title="Página anterior" class="button-link" [attr.disabled]="activePage() === 1 ? true : null">
+        <cura-icon
+          name="arrowLeftCircle"
+          size="24"
+          [color]="activePage() === 1 ? (darkMode() ? 'primary-base' : 'neutral-dark') : darkMode() ? 'neutral-purewhite' : 'primary-base'"
+        >
+        </cura-icon>
+      </button>
+
+      <span>Página {{ activePage() }} - {{ totalPages() }}</span>
+
+      <button (click)="next()" type="button" title="Próxima página" class="button-link" [attr.disabled]="activePage() === totalPages() ? true : null">
+        <cura-icon
+          name="arrowRightCircle"
+          size="24"
+          [color]="activePage() === totalPages() ? (darkMode() ? 'primary-base' : 'neutral-dark') : darkMode() ? 'neutral-purewhite' : 'primary-base'"
+        >
+        </cura-icon>
+      </button>
+    </nav>
+  }
+
+  @if (perPageOptions().length) {
+    <div class="rdsite-pagination-pp-options" data-testid="_rdsite-rdsite-pagination-pp-options">
+      <span>Resultados por página</span>
+
+      <div class="rdsite-pagination-pp-options-controls" data-testid="_rdsite-rdsite-pagination-pp-options-controls">
+        @for (option of perPageOptions(); let i = $index; track option) {
+          <button
+            type="button"
+            (click)="perPageChange.emit(option)"
+            [attr.disabled]="option === perPage() ? true : null"
+            title="Exibir {{ option }} resultados por página."
+            class="button-link"
+          >
+            {{ option }}
+            @if (i < perPageOptions().length - 1) {
+              <span class="bar">|</span>
+            }
+          </button>
+        }
+      </div>
+    </div>
+  }
+</div>

package/components/pagination/pagination.component.scss

@@ -0,0 +1,124 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  width: 100%;
+  * {
+    font-family: var(--font-family);
+  }
+}
+
+.rdsite-pagination {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  overflow: hidden;
+
+  &-pp-options,
+  &-nav {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    align-items: center;
+    width: 100%;
+    padding: 16px;
+
+    button[class*='-link'],
+    span {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 13px;
+      height: auto;
+      padding: 0;
+      background-color: transparent;
+      letter-spacing: 0.72px;
+    }
+
+    button[class*='-link'] {
+      color: var(--primary-base);
+      cursor: pointer;
+    }
+
+    button[class*='-link']:disabled,
+    span {
+      color: var(--neutral-dark);
+      background-color: transparent;
+      pointer-events: none;
+    }
+
+    span.bar {
+      margin: 0 20px;
+      color: var(--neutral-light);
+    }
+  }
+
+  &-pp-options {
+    > span {
+      display: inline;
+      margin-right: 18px;
+    }
+
+    &-controls {
+      text-wrap: nowrap;
+    }
+  }
+
+  nav.rdsite-pagination-nav {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    align-items: center;
+    width: 100%;
+    border-top: 1px dashed var(--neutral-light);
+
+    span {
+      margin: 0 44px;
+    }
+  }
+
+  @media screen and (min-width: breakpoints.$breakpoint-medium) {
+    flex-direction: row;
+    justify-content: space-between;
+
+    &-pp-options,
+    nav.rdsite-pagination-nav {
+      width: auto;
+      border-top: none;
+    }
+
+    &-pp-options {
+      > span {
+        margin-right: 44px;
+      }
+    }
+  }
+
+  &.dark-mode {
+    .rdsite-pagination {
+      &-pp-options,
+      &-nav {
+        button[class*='-link'] {
+          color: var(--neutral-purewhite);
+        }
+
+        button[class*='-link']:disabled {
+          color: var(--primary-base);
+        }
+
+        span {
+          color: var(--neutral-purewhite);
+        }
+
+        span.bar {
+          margin: 0 20px;
+          color: var(--primary-base);
+        }
+      }
+
+      &-nav {
+        border-top: 1px dashed var(--primary-base);
+      }
+    }
+  }
+}

package/components/pagination/pagination.component.spec.ts

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

package/components/pagination/pagination.component.ts

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, input, output, inject } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+
+@Component({
+  selector: 'rdsite-pagination',
+  imports: [CommonModule, CuraIconComponent],
+  templateUrl: './pagination.component.html',
+  styleUrl: './pagination.component.scss',
+})
+export class PaginationComponent {
+  private readonly curaApiService = inject(CuraApiService);
+
+  readonly totalPages = input.required<number>();
+  readonly activePage = input.required<number>();
+  readonly perPage = input<number>(10);
+  readonly perPageOptions = input([10, 30, 50]);
+  readonly customStyle = input<{
+    [key: string]: string;
+  }>({});
+  readonly containerClass = input(true);
+  readonly darkMode = input(false);
+
+  readonly pageChange = output<number>();
+  readonly perPageChange = output<number>();
+
+  @HostBinding('style') styleBinding = {
+    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+    '--primary-base': this.curaApiService.theme.colors.getColor('primary-base'),
+    '--primary-lighter': this.curaApiService.theme.colors.getColor('primary-lighter'),
+    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+    '--neutral-light': this.curaApiService.theme.colors.getColor('neutral-light'),
+    '--neutral-dark': this.curaApiService.theme.colors.getColor('neutral-dark'),
+  };
+
+  next() {
+    if (this.activePage() < this.totalPages()) {
+      this.pageChange.emit(this.activePage() + 1);
+    }
+  }
+
+  prev() {
+    if (this.activePage() > 1) {
+      this.pageChange.emit(this.activePage() - 1);
+    }
+  }
+}

package/components/pagination/public-api.ts

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

package/components/search/index.ts

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

package/components/search/ng-package.json

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

package/components/search/public-api.ts

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

package/components/search/search.component.html

@@ -0,0 +1,32 @@
+<div class="rdsite-search-control" [ngClass]="{ disabled: !enable || !searchControl().enabled, focus: focus }">
+  <label class="label-hidden">{{ label() }}</label>
+  <input
+    #searchInput
+    class="rdsite-search-control-input"
+    [type]="'text'"
+    name="term"
+    autocomplete="off"
+    [placeholder]="label()"
+    [formControl]="searchControl()"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+    (keyup.enter)="onSubmit($event)"
+    enterkeyhint="search"
+    (search)="onSubmit($event)"
+  />
+
+  <div class="rdsite-search-control-icon">
+    <cura-icon
+      name="closeCircle"
+      size="20"
+      color="primary-base"
+      (click)="clean()"
+      class="close"
+      [ngClass]="{ active: (searchControl().value || canClean()) && !loading() }"
+    ></cura-icon>
+    <cura-icon name="search" size="20" color="primary-base" (click)="onSubmitByClick()" class="search" [ngClass]="{ active: !loading() }"></cura-icon>
+    @if (loading()) {
+      <cura-loader-circle color="primary" size="small"></cura-loader-circle>
+    }
+  </div>
+</div>

package/components/search/search.component.scss

@@ -0,0 +1,59 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+
+:host {
+  background-color: white;
+  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+  height: 100%;
+  width: 100%;
+  max-width: 100vw;
+
+  .rdsite-search-control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+
+    &-input {
+      flex-grow: 1;
+      padding: 0px 8px 0px 0px;
+      color: var(--color);
+      font-size: 16px !important;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+
+      cura-icon {
+        cursor: pointer;
+        visibility: hidden;
+
+        &.active {
+          visibility: unset;
+        }
+      }
+    }
+  }
+
+  @media only screen and (min-width: breakpoints.$breakpoint-medium) {
+    .rdsite-search-control {
+      padding: 0px 40px 0px 20px;
+    }
+  }
+}
+
+.label-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/components/search/search.component.spec.ts

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

package/components/search/search.component.ts

@@ -0,0 +1,122 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, HostBinding, OnDestroy, OnInit, PLATFORM_ID, input, output, viewChild, inject, effect } from '@angular/core';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { DeviceDetectorService } from 'ngx-device-detector';
+import { debounceTime, Subscription } from 'rxjs';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraLoaderCircleComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-circle';
+
+@Component({
+  selector: 'rdsite-search',
+  imports: [CommonModule, ReactiveFormsModule, CuraIconComponent, CuraLoaderCircleComponent],
+  templateUrl: './search.component.html',
+  styleUrl: './search.component.scss',
+})
+export class SearchComponent implements OnInit, OnDestroy, AfterViewInit {
+  private deviceService = inject(DeviceDetectorService);
+  private curaApiService = inject(CuraApiService);
+  private platformId = inject(PLATFORM_ID);
+
+  readonly searchControl = input(new UntypedFormControl(''));
+  readonly showSearchButtonMobile = input(true);
+  readonly debounceTime = input(300);
+  readonly label = input<string>('');
+  readonly canClean = input(false);
+  readonly controlBlur = output();
+  readonly controlFocus = output();
+  readonly controlReset = output();
+  readonly termChange = output<string>();
+  readonly enterPress = output<string>();
+
+  readonly enable = input(true);
+  readonly loading = input(false);
+
+  readonly setFocus = input(false);
+  focus = false;
+
+  controlSubscription: Subscription | null = null;
+
+  readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
+
+  @HostBinding('style') style = {
+    '--color': this.curaApiService.theme.colors.getColor('neutral-black'),
+  };
+
+  constructor() {
+    effect(() => {
+      this.setControlState();
+    });
+  }
+
+  ngAfterViewInit(): void {
+    if (this.setFocus()) this.setInitialFocus();
+  }
+
+  ngOnInit() {
+    this.controlSubscription = this.searchControl()
+      .valueChanges.pipe(debounceTime(this.debounceTime()))
+      .subscribe((term) => this.onChange(term));
+  }
+
+  setInitialFocus() {
+    if (isPlatformBrowser(this.platformId)) {
+      // Usar setTimeout para evitar mudanças de expressão após verificação
+      setTimeout(() => {
+        this.searchInput()?.nativeElement?.focus();
+        this.onFocus();
+      }, 10);
+    }
+  }
+
+  onChange(term: string) {
+    this.termChange.emit(term);
+  }
+
+  onFocus() {
+    this.focus = true;
+    this.controlFocus.emit();
+  }
+
+  onBlur() {
+    this.focus = false;
+    this.controlBlur.emit();
+  }
+
+  onSubmit($event: any) {
+    if (this.searchControl().value) {
+      this.enterPress.emit($event.target.value);
+      if (this.deviceService.isMobile() && this.showSearchButtonMobile()) {
+        this.focus = false;
+        $event.target.blur();
+      }
+    }
+  }
+
+  onSubmitByClick() {
+    const searchControl = this.searchControl();
+    if (searchControl.value) {
+      this.enterPress.emit(searchControl.value);
+      if (this.deviceService.isMobile() && this.showSearchButtonMobile()) {
+        this.focus = false;
+      }
+    }
+  }
+
+  setControlState() {
+    if (this.enable()) {
+      this.searchControl().enable();
+    } else {
+      this.searchControl().disable();
+    }
+  }
+
+  clean() {
+    this.searchControl().setValue('');
+    this.controlReset.emit();
+  }
+
+  ngOnDestroy() {
+    this.controlSubscription?.unsubscribe();
+  }
+}

package/components/section-navigation/index.ts

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+<nav class="rdsite-section-navigation" [attr.aria-label]="ariaLabel()" [style.top.px]="config()?.offsetTop || 0">
+  <ul #containerEl class="rdsite-section-navigation-menu" role="menubar">
+    @for (section of sections(); track section.id) {
+      @if (section.title) {
+        <li role="none">
+          <a
+            #anchorEl
+            id="anchor-{{ section.id }}"
+            role="menuitem"
+            [href]="getPath(section.id)"
+            rdsitelink
+            [anchorAdjustment]="anchorAdjustment()"
+            [attr.aria-current]="activeSection() === section.id ? 'page' : null"
+            [attr.aria-label]="'Navegar para ' + section.title"
+            [ngClass]="{ active: activeSection() === section.id }"
+          >
+            {{ section.title }}
+          </a>
+        </li>
+      }
+    }
+  </ul>
+</nav>