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

package/components/modal-drawer/modal-drawer.component.ts

@@ -0,0 +1,148 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectorRef, Component, DOCUMENT, HostBinding, HostListener, inject, model, PLATFORM_ID, computed } from '@angular/core';
+import { AbstractModalDrawerComponent, RdsiteModalDrawerComponentStyle } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+
+@Component({
+  selector: 'dialog[rdsite-modal-drawer]#rdsite-modal-drawer',
+  imports: [CommonModule],
+  templateUrl: './modal-drawer.component.html',
+  styleUrl: './modal-drawer.component.scss',
+})
+export class ModalDrawerComponent implements AbstractModalDrawerComponent {
+  private readonly curaApiService = inject(CuraApiService);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly document = inject(DOCUMENT);
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  sheet!: HTMLElement;
+  sheetContents!: HTMLElement;
+  draggableArea!: HTMLElement;
+  sheetHeight!: number;
+  dragPosition!: number;
+  maxHeight = 75; // isso também pode ser controlado pelo service
+
+  closeHeight = this.maxHeight / 1.5;
+
+  rdsiteModalComponentStyle = RdsiteModalDrawerComponentStyle;
+
+  id = model<string>('default');
+  modalContent = model<any>();
+  componentStyle = model<RdsiteModalDrawerComponentStyle>(RdsiteModalDrawerComponentStyle.DEFAULT);
+
+  modal!: HTMLDialogElement;
+
+  public assetsPath = computed(() => this.curaApiService.localAssetsPath());
+
+  @HostBinding('class') get classBinding() {
+    return {
+      'filter-doencas': this.componentStyle() === RdsiteModalDrawerComponentStyle.FILTERDOENCAS,
+    };
+  }
+
+  @HostBinding('style') styleBinding = {
+    '--primary-dark': this.curaApiService.theme.colors.getColor('primary-dark', 0.9),
+    '--primary-base': this.curaApiService.theme.colors.getColor('primary-base'),
+    '--primary-light': this.curaApiService.theme.colors.getColor('primary-light'),
+    '--secondary-base': this.curaApiService.theme.colors.getColor('secondary-base'),
+  };
+
+  ngOnInit() {
+    this.modal = this.document.getElementById('rdsite-modal-drawer') as HTMLDialogElement;
+  }
+
+  ngAfterViewInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.sheet = this.document.querySelector('#sheet')!;
+      this.sheetContents = this.sheet.querySelector('.contents')!;
+      this.draggableArea = this.sheet.querySelector('.draggable-area')!;
+    }
+  }
+
+  setSheetHeight(value: number) {
+    this.sheetHeight = Math.max(0, Math.min(100, value));
+    if (this.sheetHeight > this.maxHeight) {
+      return;
+    }
+    this.sheetContents.style.height = `${this.sheetHeight}vh`;
+  }
+
+  setIsSheetShown(isShown: boolean) {
+    this.sheet.setAttribute('aria-hidden', String(!isShown));
+    if (isPlatformBrowser(this.platformId) && !isShown) {
+      const body = this.document.querySelector('body');
+      if (body) {
+        body.style.overflowY = 'auto';
+      }
+    }
+  }
+
+  openSheet() {
+    if (this.componentStyle() === RdsiteModalDrawerComponentStyle.FORMFALLBACK) {
+      this.maxHeight = 45;
+      this.closeHeight = this.maxHeight / 1.5;
+    }
+    if (isPlatformBrowser(this.platformId)) {
+      const body = this.document.querySelector('body');
+      if (body) {
+        body.style.overflowY = 'hidden';
+        this.cdr.detectChanges();
+        (this.modal as any).showModal();
+        this.setSheetHeight(Math.min(this.maxHeight, (720 / window.innerHeight) * 100));
+        this.setIsSheetShown(true);
+      }
+    }
+  }
+
+  closeSheet() {
+    if (isPlatformBrowser(this.platformId)) {
+      const body = this.document.querySelector('body');
+      if (body) {
+        body.style.overflowY = 'auto';
+        (this.modal as any).close();
+        this.reset();
+        this.setIsSheetShown(false);
+      }
+    }
+  }
+
+  touchPosition(event: any) {
+    return event?.touches ? event.touches[0] : event;
+  }
+
+  @HostListener('touchstart', ['$event'])
+  onDragStart(event: TouchEvent) {
+    this.dragPosition = this.touchPosition(event).pageY;
+    this.sheetContents.classList.add('not-selectable');
+    this.draggableArea.style.cursor = this.document.body.style.cursor = 'grabbing';
+  }
+
+  @HostListener('touchmove', ['$event'])
+  onDragMove(event: TouchEvent) {
+    if (this.dragPosition === undefined) return;
+
+    const y = this.touchPosition(event).pageY;
+    const deltaY = this.dragPosition - y;
+    const deltaHeight = (deltaY / window.innerHeight) * 100;
+
+    this.setSheetHeight(this.sheetHeight + deltaHeight);
+    this.dragPosition = y;
+  }
+
+  @HostListener('touchend', ['$event'])
+  onDragEnd() {
+    this.dragPosition = 0;
+    this.sheetContents.classList.remove('not-selectable');
+    this.draggableArea.style.cursor = this.document.body.style.cursor = '';
+
+    if (this.sheetHeight < this.closeHeight) {
+      this.closeSheet();
+    } else {
+      this.setSheetHeight(this.maxHeight);
+    }
+  }
+
+  public reset() {
+    this.modalContent.set(null as any);
+  }
+}

package/components/modal-drawer/ng-package.json

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

package/components/modal-drawer/public-api.ts

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

package/components/overlay/index.ts

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

package/components/overlay/ng-package.json

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

package/components/overlay/overlay.component.html

@@ -0,0 +1 @@
+<div class="rdsite-overlay" (click)="overlayClicked()"></div>

package/components/overlay/overlay.component.scss

@@ -0,0 +1,13 @@
+:host {
+  position: absolute;
+  z-index: 9999;
+}
+
+.rdsite-overlay {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+}

package/components/overlay/overlay.component.spec.ts

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

package/components/overlay/overlay.component.ts

@@ -0,0 +1,15 @@
+import { Component, output } from '@angular/core';
+
+@Component({
+  selector: 'rdsite-overlay',
+  imports: [],
+  templateUrl: './overlay.component.html',
+  styleUrl: './overlay.component.scss',
+})
+export class OverlayComponent {
+  readonly overlayClick = output<any>();
+
+  overlayClicked() {
+    this.overlayClick.emit(undefined);
+  }
+}

package/components/overlay/public-api.ts

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

package/components/page-header/index.ts

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

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

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

package/components/page-header/page-header.component.html

@@ -0,0 +1,25 @@
+<div class="page-header" [ngClass]="{ 'more-padding': hasPadding(), starTheme: starTheme() }">
+  <div class="page-header-container">
+    @if (breadcrumbs().length) {
+      <rdsite-breadcrumbs [labelIconColor]="breadcrumbsLabelIconColor()" [breadcrumbs]="breadcrumbs()"></rdsite-breadcrumbs>
+    }
+    <div class="page-header-content">
+      @if (imgUrl()) {
+        <rdsite-image [imageDefaultSrc]="imgUrl()" [mimeType]="imgMimeType()" [alt]="imgAlt()" [title]="imgTitle()" loading="eager"></rdsite-image>
+      }
+
+      <div class="page-header-content-info">
+        @if (preTitle()) {
+          <h2>{{ preTitle() }}</h2>
+        }
+        @if (pageTitle()) {
+          <h1>{{ pageTitle() }}</h1>
+        }
+        @if (pageHeaderText()) {
+          <cura-paragraph [color]="starTheme() ? 'neutral-black' : 'neutral-purewhite'" marginBlock="0">{{ pageHeaderText() }}</cura-paragraph>
+        }
+        <ng-content></ng-content>
+      </div>
+    </div>
+  </div>
+</div>

package/components/page-header/page-header.component.scss

@@ -0,0 +1,110 @@
+@use '../../styles/_breakpoints.scss' as breakpoints;
+@use '../../styles/_mixins.scss' as mixins;
+
+.page-header {
+  background-color: var(--bg-color);
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 30px 0;
+    @include mixins.rdsite-container;
+
+    .page-header-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+
+      rdsite-image {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        margin-top: 16px;
+      }
+
+      &-info {
+        flex: 1 0 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+
+        h2 {
+          color: var(--neutral-purewhite);
+          font-family: var(--font-family);
+          font-size: 19px;
+          font-weight: 700;
+          line-height: 28px;
+          letter-spacing: 0;
+          text-transform: uppercase;
+          padding-top: 52px;
+          &::after {
+            content: '';
+            display: block;
+            width: 100%;
+            height: 1px;
+            background-color: var(--primary-lighter);
+            margin: 8px auto 0;
+          }
+        }
+
+        h1 {
+          color: var(--neutral-purewhite);
+          font-family: var(--font-family);
+          font-size: 32px;
+          font-weight: 700;
+          line-height: --fonts-Display-S-lineHeight, 43px;
+          letter-spacing: -1.68px;
+
+          @media screen and (min-width: breakpoints.$breakpoint-small) {
+            font-size: 48px;
+            line-height: 57px;
+            letter-spacing: -1.92px;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (min-width: breakpoints.$breakpoint-small) {
+    .page-header-container {
+      gap: 12px;
+      padding: 50px 0;
+
+      .page-header-content {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 40px;
+
+        rdsite-image {
+          margin-top: 0px;
+        }
+
+        &-info {
+          align-items: flex-start;
+        }
+      }
+    }
+
+    &.more-padding {
+      padding-inline: 102px;
+    }
+  }
+
+  &.starTheme {
+    .page-header-container .page-header-content {
+      &-info {
+        h2 {
+          color: var(--neutral-black);
+          font-weight: 300;
+        }
+        h1 {
+          color: var(--secondary-darker);
+          font-weight: 300;
+        }
+      }
+    }
+  }
+}

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

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

package/components/page-header/page-header.component.ts

@@ -0,0 +1,41 @@
+import { Component, HostBinding, input, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbsItems } from '@rededor/site-front-end-lib/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { BreadcrumbsComponent } from '@rededor/site-front-end-lib/components/breadcrumbs';
+import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
+import { ImageComponent } from '@rededor/site-front-end-lib/components/image';
+
+@Component({
+  selector: 'rdsite-page-header',
+  imports: [CommonModule, BreadcrumbsComponent, CuraParagraphComponent, ImageComponent],
+  templateUrl: './page-header.component.html',
+  styleUrls: ['./page-header.component.scss'],
+})
+export class PageHeaderComponent {
+  private readonly curaApiService = inject(CuraApiService);
+
+  readonly preTitle = input<string>('');
+  readonly pageTitle = input<string>('');
+  readonly pageHeaderText = input<string>('');
+  readonly hasPadding = input<boolean>(false);
+  readonly breadcrumbs = input<BreadcrumbsItems[]>([]);
+  readonly bgColor = input<string>('primary-base');
+  readonly imgUrl = input<string>('');
+  readonly imgMimeType = input<any>('');
+  readonly imgAlt = input<string>('Imagem do header');
+  readonly imgTitle = input<string>('Imagem do header');
+  readonly starTheme = input<boolean>(false);
+  readonly breadcrumbsLabelIconColor = input<string>('neutral-purewhite');
+
+  @HostBinding('style') get style() {
+    return {
+      '--bg-color': this.starTheme() ? '#F7F5F1' : this.curaApiService.theme.colors.getColor(this.bgColor()),
+      '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
+      '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black'),
+      '--primary-lighter': this.curaApiService.theme.colors.getColor('primary-lighter'),
+      '--secondary-darker': this.curaApiService.theme.colors.getColor('secondary-darker'),
+      '--font-family': this.curaApiService.theme.fonts.getFamily(''),
+    };
+  }
+}

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

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

package/components/page-template-fullcontent/index.ts

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

package/components/page-template-fullcontent/ng-package.json

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

package/components/page-template-fullcontent/page-template-fullcontent.component.html

@@ -0,0 +1,37 @@
+@if (isArticle()) {
+  <article class="rdsite-template-content-full">
+    <ng-container *ngTemplateOutlet="mainContent"></ng-container>
+  </article>
+} @else {
+  <section class="rdsite-template-content-full">
+    <ng-container *ngTemplateOutlet="mainContent"></ng-container>
+  </section>
+}
+<ng-template #mainContent>
+  @if (header()) {
+    <header class="rdsite-template-header">
+      <ng-container *ngTemplateOutlet="header()"></ng-container>
+    </header>
+  }
+  @if (beforeContent()) {
+    <div class="rdsite-template-before-content">
+      <ng-container *ngTemplateOutlet="beforeContent()"></ng-container>
+    </div>
+  }
+  @if (pageContent()) {
+    <div class="rdsite-template-container">
+      <section class="rdsite-content-container">
+        <ng-container *ngTemplateOutlet="pageContent()"></ng-container>
+      </section>
+    </div>
+  }
+</ng-template>
+@if (afterContent()?.length) {
+  @for (tpl of afterContent(); track $index) {
+    @if (tpl.show) {
+      <aside class="rdsite-template-after-content">
+        <ng-container *ngTemplateOutlet="tpl.template"></ng-container>
+      </aside>
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+@import '../../styles/breakpoints.scss';
+@import '../../styles/utilities.scss';
+
+section.rdsite-template-content-full,
+article.rdsite-template-content-full {
+  display: grid;
+  grid-template-columns: minmax(5%, 1fr) minmax(auto, 90%) minmax(5%, 1fr);
+  grid-template-rows: auto auto auto auto;
+  grid-template-areas:
+    'pageheader pageheader pageheader'
+    'beforecontent beforecontent beforecontent'
+    '. pagecontent .'
+    'aftercontent aftercontent aftercontent';
+
+  @media screen and (min-width: $breakpoint-medium) {
+    grid-template-columns: minmax(5%, 1fr) minmax(auto, $container-max-width) minmax(5%, 1fr);
+  }
+
+  .rdsite-template-header {
+    grid-area: pageheader;
+  }
+
+  .rdsite-template-before-content {
+    grid-area: beforecontent;
+  }
+
+  .rdsite-template-container {
+    grid-area: pagecontent;
+  }
+
+  .rdsite-template-after-content {
+    grid-area: aftercontent;
+  }
+
+  .rdsite-template-container {
+    .rdsite-content-container {
+      position: relative;
+      max-width: 100%;
+    }
+  }
+}

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

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

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

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

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

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

package/components/page-template-sidebar/ng-package.json

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

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

@@ -0,0 +1,50 @@
+@if (isArticle()) {
+  <article class="rdsite-template-sidebar" [class.reverse]="reverseSidebar()">
+    <ng-container *ngTemplateOutlet="mainContent"></ng-container>
+  </article>
+} @else {
+  <section class="rdsite-template-sidebar" [class.reverse]="reverseSidebar()">
+    <ng-container *ngTemplateOutlet="mainContent"></ng-container>
+  </section>
+}
+<ng-template #mainContent>
+  @if (header()) {
+    <header class="rdsite-template-header">
+      <ng-container *ngTemplateOutlet="header()"></ng-container>
+    </header>
+  }
+  @if (stickyContent()) {
+    <div class="rdsite-template-sticky-content">
+      <ng-container *ngTemplateOutlet="stickyContent()"></ng-container>
+    </div>
+  }
+
+  @if (beforeContent()) {
+    <div class="rdsite-template-before-content">
+      <ng-container *ngTemplateOutlet="beforeContent()"></ng-container>
+    </div>
+  }
+  <div class="rdsite-template-container">
+    @if (content()) {
+      <section class="rdsite-content-container">
+        <ng-container *ngTemplateOutlet="content()"></ng-container>
+      </section>
+    }
+
+    @if (sidebarContent()) {
+      <aside class="rdsite-sidebar-content-container">
+        <ng-container *ngTemplateOutlet="sidebarContent()"></ng-container>
+      </aside>
+    }
+  </div>
+</ng-template>
+
+@if (afterContent()?.length) {
+  @for (tpl of afterContent(); track $index) {
+    @if (tpl.show) {
+      <aside class="rdsite-template-after-content">
+        <ng-container *ngTemplateOutlet="tpl.template"></ng-container>
+      </aside>
+    }
+  }
+}