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

package/components/filter-letter-and-terms/filter-letter-and-terms.component.scss

@@ -1,98 +0,0 @@
-@use '../../styles/_breakpoints.scss' as breakpoints;
-
-.filter-letter-and-terms {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-  width: 100vw;
-  margin-inline: -5vw;
-  padding-inline: 5vw;
-  padding-block: 12px;
-  overflow-x: scroll;
-
-  @media (hover: none) and (pointer: coarse) {
-    .filter-option {
-      &:hover:not(.selected) {
-        background-color: var(--neutral-pale);
-      }
-
-      &.selected {
-        background-color: var(--color-one-base);
-      }
-
-      &:active:not(.selected) {
-        background-color: var(--neutral-pale);
-      }
-    }
-  }
-
-  @media only screen and (min-width: breakpoints.$breakpoint-medium-large) {
-    flex-wrap: wrap;
-    width: 100%;
-    padding: 12px 0;
-    margin: 0;
-    overflow-x: auto;
-  }
-
-  .filter-option {
-    flex: 0 0 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 6px;
-    color: var(--neutral-dark);
-    font-family: var(--font-family);
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 4px;
-    background-color: var(--neutral-pale);
-    border: 1px solid var(--neutral-light);
-    cursor: pointer;
-    text-decoration: none;
-
-    &:hover {
-      color: var(--neutral-purewhite);
-      background-color: var(--color-one-dark);
-    }
-
-    &.selected {
-      color: var(--neutral-purewhite);
-      background-color: var(--color-one-base);
-
-      &:not(.selected) {
-        background-color: var(--neutral-pale);
-        border-color: var(--neutral-light);
-      }
-
-      &:focus {
-        outline: 2px solid var(--color-one-light);
-      }
-    }
-  }
-
-  &.starTheme {
-    .filter-option {
-      border-radius: unset;
-      color: var(--color-one-base);
-      background-color: var(--neutral-purewhite);
-      border: 1px solid var(--color-one-base);
-
-      &:hover {
-        color: var(--neutral-purewhite);
-        background-color: var(--color-one-dark);
-      }
-
-      &.selected {
-        color: var(--neutral-purewhite);
-        background-color: var(--color-one-base);
-
-        &:not(.selected) {
-          background-color: var(--neutral-purewhite);
-          border-color: var(--color-one-base);
-        }
-      }
-    }
-  }
-}

package/components/filter-letter-and-terms/filter-letter-and-terms.component.spec.ts

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

package/components/filter-letter-and-terms/filter-letter-and-terms.component.ts

@@ -1,87 +0,0 @@
-import { AfterViewInit, Component, HostBinding, Input, PLATFORM_ID, DOCUMENT, input, output, inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-@Component({
-  selector: 'rdsite-filter-letter-and-terms',
-  imports: [],
-  templateUrl: './filter-letter-and-terms.component.html',
-  styleUrl: './filter-letter-and-terms.component.scss',
-})
-export class FilterLetterAndTermsComponent implements AfterViewInit {
-  private readonly curaApiService = inject(CuraApiService);
-  private document = inject<Document>(DOCUMENT);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  readonly options = input<string[]>([]);
-  readonly baseUrl = input<string>('');
-  readonly baseUrlAll = input<string>('');
-  readonly enableScroll = input(false);
-  readonly buttonMode = input(false);
-  readonly isStarTheme = input(false);
-
-  private isFirstScroll = true;
-  private _selectedOption: string = '';
-
-  @Input()
-  set selectedOption(value: string) {
-    if (this._selectedOption === value) return;
-    this._selectedOption = value;
-    if (this.enableScroll() && !this.isFirstScroll) {
-      this.scrollToSelectedOption(value);
-    }
-  }
-
-  get selectedOption(): string {
-    return this._selectedOption;
-  }
-
-  readonly optionSelected = output<string>();
-
-  @HostBinding('style') get style() {
-    return {
-      '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-      '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
-      '--neutral-pale': this.curaApiService.theme.colors.getColor('neutral-pale'),
-      '--neutral-light': this.curaApiService.theme.colors.getColor('neutral-light'),
-      '--neutral-dark': this.curaApiService.theme.colors.getColor('neutral-dark'),
-      '--neutral-black': this.curaApiService.theme.colors.getColor('neutral-black'),
-      '--color-one-light': this.curaApiService.theme.colors.getColor('primary-light'),
-      '--color-one-base': this.curaApiService.theme.colors.getColor('primary-base'),
-      '--color-one-dark': this.curaApiService.theme.colors.getColor('primary-dark'),
-      '--color-one-darker': this.curaApiService.theme.colors.getColor('primary-darker'),
-    };
-  }
-
-  ngAfterViewInit() {
-    if (this.selectedOption) {
-      setTimeout(() => {
-        this.scrollToSelectedOption(this.selectedOption);
-        this.isFirstScroll = false;
-      }, 100);
-    }
-  }
-
-  selectOption(option: string, event: Event): void {
-    event.preventDefault();
-    if (this._selectedOption !== option) {
-      this._selectedOption = option;
-      this.optionSelected.emit(option);
-      this.scrollToSelectedOption(option);
-    }
-  }
-
-  scrollToSelectedOption(value: string) {
-    if (isPlatformBrowser(this.platformId)) {
-      const elementId = value || 'todas';
-      const selectedElement = elementId === 'todas' ? this.document.getElementById('todas') : this.document.getElementById(value);
-      if (selectedElement) {
-        selectedElement.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          block: 'nearest',
-        });
-      }
-    }
-  }
-}

package/components/filter-letter-and-terms/index.ts

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

package/components/filter-letter-and-terms/ng-package.json

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

package/components/filter-letter-and-terms/public-api.ts

@@ -1 +0,0 @@
-export * from './filter-letter-and-terms.component';

package/components/filters/filter-generic/USAGE.md

@@ -1,147 +0,0 @@
-# Componente de Filtro - Genérico
-
-## 📌 Visão Geral
-
-Componente Angular reutilizável para criação de interfaces de filtro complexas com múltiplos tipos de controles.
-
-## Uso básico no template
-
-<rdsite-filter-generic
-[sections]="filterSections"
-(filterChange)="onFilterChange($event)"
-
-> </rdsite-filter-generic>
-
-## Configuração das seções
-
-# Você precisa definir um array de FilterSection para configurar as seções do filtro:
-
-```typescript
-filterSections: FilterSection[] = [
-  {
-    type: 'input',
-    config: {
-      control: new FormControl(''),
-      placeholder: 'Pesquisar unidade',
-      name: 'unidade'
-    }
-  },
-  {
-    type: 'select',
-    config: {
-      control: new FormControl(''),
-      label: 'Estado',
-      placeholder: 'Selecione um estado',
-      options: [
-        { value: 'SP', label: 'São Paulo' },
-        { value: 'RJ', label: 'Rio de Janeiro' }
-      ],
-      includeDefaultOption: true
-    }
-  },
-  {
-    type: 'checkbox-group',
-    config: {
-      control: new FormControl([]),
-      title: 'Cobertura',
-      options: [
-        { value: '1', label: 'Odontológico', checked: false },
-        { value: '2', label: 'Hospitalar', checked: false }
-      ]
-    }
-  }
-];
-```
-
-## Parâmetros
-
-# Input
-
-| Parâmetro                        | Tipo              | Padrão          | Descrição                                                 |
-| -------------------------------- | ----------------- | --------------- | --------------------------------------------------------- |
-| `sections`                       | `FilterSection[]` | `[]`            | Array de configurações das seções do filtro               |
-| `withContainerStyle`             | `boolean`         | `true`          | Se true, aplica estilos de container (borda, fundo, etc.) |
-| `showClearButton`                | `boolean`         | `true`          | Mostra o botão "Limpar todos os filtros"                  |
-| `showApplyButton`                | `boolean`         | `true`          | Mostra o botão "Filtrar"                                  |
-| `showCloseButton`                | `boolean`         | `false`         | Mostra o botão "Fechar"                                   |
-| `disableButtonsWithoutSelection` | `boolean`         | `false`         | Desabilita os botões quando não há seleção                |
-| `showBadge`                      | `boolean`         | `true`          | Mostra o badge com contagem de filtros selecionados       |
-| `showToggleIcon`                 | `boolean`         | `true`          | Mostra o ícone para expandir/recolher o filtro            |
-| `isFilterOpen`                   | `boolean`         | `true`          | Estado inicial do filtro (aberto/fechado)                 |
-| `mobileBehavior`                 | `boolean`         | `false`         | Ativa comportamentos específicos para mobile              |
-| `forceCollapsed`                 | `boolean`         | `false`         | Força o filtro a ficar recolhido em mobile                |
-| `emitOnReset`                    | `boolean`         | `false`         | Se true, emite evento ao resetar os filtros               |
-| `textTitle`                      | `string`          | `'Filtrar por'` | Título do componente                                      |
-
-# Output
-
-| Evento             | Tipo                                  | Descrição                                  |
-| ------------------ | ------------------------------------- | ------------------------------------------ |
-| `filterChange`     | `FilterPlanosConveniosChange \| null` | Emitido quando os filtros são aplicados    |
-| `closeModal`       | `boolean`                             | Emitido quando o filtro é fechado          |
-| `openMobileFilter` | `void`                                | Emitido quando o filtro é aberto em mobile |
-
-## Tipos de Seções
-
-```typescript
-
-# Input
-
-{
-  type: 'input',
-  config: {
-    control: FormControl,
-    placeholder?: string,
-    name?: string,
-    iconName?: string
-  }
-
-}
-
-# Select
-
-{
-  type: 'select',
-  config: {
-    control: FormControl,
-    label?: string,
-    placeholder?: string,
-    options: Array<{ value: any, label: string }>,
-    includeDefaultOption?: boolean,
-    defaultOptionText?: string
-  }
-}
-
-# Checkbox Group
-
-{
-  type: 'checkbox-group',
-  config: {
-    control: FormControl,
-    title?: string,
-    subtitle?: string,
-    description?: string,
-    options: Array<{ value: any, label: string, checked: boolean }>
-  }
-}
-
-# Radio Group
-
-{
-  type: 'radio-group',
-  config: {
-    control: FormControl,
-    name?: string,
-    options: Array<{ value: any, label: string }>
-  }
-}
-
-# Custom
-
-{
-  type: 'custom',
-  config: {
-    template: TemplateRef<any>
-  }
-}
-```

package/components/filters/filter-generic/filter-generic.component.html

@@ -1,174 +0,0 @@
-<div
-  class="filter-generic"
-  [ngClass]="{ 'container-style': withContainerStyle(), 'clickable-mobile': shouldHandleMobileClick() }"
-  aria-label="Filtros"
-  (click)="handleMobileClick()"
->
-  <div class="filter-header-container" [ngClass]="{ 'no-padding': !isFilterOpen(), hidden: !isFilterOpen() }">
-    <div class="filter-title-wrapper">
-      <cura-label size="medium" level="4" color="neutral-black" weight="regular" marginBlock="0" lineHeight="16px">
-        {{ textTitle() }}
-      </cura-label>
-
-      @if (showBadge()) {
-        <cura-badge-counter
-          [type]="'solid'"
-          [color]="hasSelection() ? 'primary' : 'neutral'"
-          [number]="selectedFiltersCount()"
-          class="filter-badge"
-        ></cura-badge-counter>
-      }
-    </div>
-
-    @if (showToggleIcon()) {
-      <cura-button-transparent
-        size="small"
-        fontColor="dark"
-        color="primary"
-        textAlign="center"
-        (click)="toggleFilter()"
-        [attr.aria-expanded]="isFilterOpen()"
-        [ariaLabel]="isFilterOpen() ? 'Fechar filtros' : 'Abrir filtros'"
-      >
-        <cura-icon [name]="isFilterOpen() ? 'up' : 'down'" size="16" class="filter-icon" color="primary-dark"></cura-icon>
-      </cura-button-transparent>
-    }
-  </div>
-
-  <div class="filter-content" [class.hidden]="!isFilterOpen() || (forceCollapsed() && isMobile())">
-    @for (section of sections(); track section.type) {
-      @if (section.visible !== false) {
-        <div class="filter-section">
-          @switch (section.type) {
-            @case ('input') {
-              <cura-input-text
-                [placeholder]="section.config.placeholder || ''"
-                [name]="section.config.name || ''"
-                [iconName]="section.config.iconName || ''"
-                [value]="section.config.control.value"
-                [style.--border-radius]="isStarTheme() ? '0px' : isMaternityStarTheme() ? '2rem' : '4px'"
-                (valueChange)="handleInputChange($event, section.config.control)"
-              ></cura-input-text>
-            }
-            @case ('select') {
-              <cura-select
-                [label]="section.config.label || ''"
-                [placeholder]="section.config.placeholder || ''"
-                [value]="section.config.control.value"
-                [style.--border-radius]="isStarTheme() ? '0px' : isMaternityStarTheme() ? '2rem' : '4px'"
-                (selected)="handleSelectChange($event, section.config.control)"
-              >
-                @if (section.config.includeDefaultOption) {
-                  <cura-select-option [value]="''">{{ section.config.defaultOptionText || 'Faça a sua Seleção' }}</cura-select-option>
-                }
-                @for (option of section.config.options || []; track option?.value) {
-                  <cura-select-option [value]="option?.value">{{ option?.label }}</cura-select-option>
-                }
-              </cura-select>
-            }
-            @case ('checkbox-group') {
-              @if (section.config.title) {
-                <div class="filter-header">
-                  <cura-icon name="filter" size="20" color="primary-dark"></cura-icon>
-                  <cura-heading size="xsmall" [level]="5" weight="bold" color="neutral-black" marginBlock="0" lineHeight="16px">
-                    {{ section.config.title }}
-                  </cura-heading>
-                </div>
-              }
-
-              @if (section.config.subtitle) {
-                <div class="filter-subtitle">
-                  <cura-heading size="xsmall" weight="bold" color="neutral-black" marginBlock="0">
-                    {{ section.config.subtitle }}
-                  </cura-heading>
-                </div>
-              }
-
-              @if (section.config.description) {
-                <div class="filter-description">
-                  <cura-paragraph size="xsmall" color="neutral-dark" marginBlock="0">
-                    {{ section.config.description }}
-                  </cura-paragraph>
-                </div>
-              }
-
-              <div class="filter-checkboxes" [class.scrollable]="hasScroll(section)">
-                @for (option of section.config.options || []; track option.value) {
-                  <cura-checkbox
-                    color="primary"
-                    size="small"
-                    iconColor="light"
-                    [name]="option.label"
-                    [label]="option.label"
-                    [value]="option.value"
-                    [checked]="option.checked || false"
-                    [style.--border-radius]="isStarTheme() ? '0px' : '4px'"
-                    (onchange)="handleCheckboxChange($event, section.config.options)"
-                  ></cura-checkbox>
-                }
-              </div>
-            }
-            @case ('radio-group') {
-              <div class="filter-radios" [class.scrollable]="hasScroll(section)">
-                @for (option of section.config.options || []; track option?.value) {
-                  <cura-radio
-                    [name]="section.config.name || 'radio-group'"
-                    [label]="option.label"
-                    [value]="option.value"
-                    [checked]="getRadioGroupValue(section.config.control) === option.value"
-                    (onchange)="handleRadioChange($event, section.config.control)"
-                  ></cura-radio>
-                }
-              </div>
-            }
-            @case ('custom') {
-              <ng-container *ngTemplateOutlet="section.config.template"></ng-container>
-            }
-          }
-        </div>
-      }
-    }
-  </div>
-
-  <div class="filter-actions" [class.hidden]="!isFilterOpen() || (forceCollapsed() && isMobile())">
-    <div class="main-actions">
-      @if (showClearButton()) {
-        <cura-button-transparent
-          size="small"
-          fontColor="dark"
-          color="primary"
-          textAlign="center"
-          [disabled]="disableButtons() || !hasSelection()"
-          (click)="reset()"
-        >
-          <span>Limpar todos os filtros</span>
-        </cura-button-transparent>
-      }
-
-      @if (showApplyButton()) {
-        <cura-button
-          size="medium"
-          fontColor="light"
-          color="primary"
-          textAlign="center"
-          (click)="filter()"
-          [style.--border-radius]="isStarTheme() ? '0px' : isMaternityStarTheme() ? '2rem' : '4px'"
-          [disabled]="disableButtons() || !hasSelection()"
-          class="filter-button"
-        >
-          Filtrar
-        </cura-button>
-      }
-    </div>
-
-    @if (showCloseButton()) {
-      <div class="divider-strong"></div>
-      <div class="close-action-wrapper">
-        <div class="close-action" (click)="close()">
-          <cura-icon name="close" color="error-dark" size="small"></cura-icon>
-          <cura-button-transparent type="button" color="error" target="_self"> Fechar </cura-button-transparent>
-        </div>
-      </div>
-    }
-  </div>
-</div>