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

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

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

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

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

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

package/components/pagination/index.ts

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

package/components/pagination/ng-package.json

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

package/components/pagination/pagination.component.html

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

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

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

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

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

package/components/search/index.ts

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

package/components/search/ng-package.json

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

package/components/search/public-api.ts

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

package/components/search/search.component.html

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

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

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

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

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

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

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

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

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

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

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