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

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

@@ -1,266 +0,0 @@
-@use '../../../styles/_breakpoints.scss' as breakpoints;
-
-:host {
-  * {
-    font-family: var(--font-family);
-  }
-}
-
-.filter-generic {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-
-  &.clickable-mobile {
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--primary-lighter);
-    }
-  }
-
-  &.container-style {
-    width: 100%;
-    padding: 20px;
-    border-radius: 12px;
-    border: 2px solid var(--neutral-lighter);
-    background-color: var(--neutral-purewhite);
-  }
-
-  cura-loader-circle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-height: 100px;
-  }
-}
-
-.filter-header-container {
-  display: flex;
-  padding-bottom: 12px;
-  align-items: center;
-
-  &.no-padding {
-    padding-bottom: 0;
-  }
-
-  .filter-title-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex: 1 0 0;
-  }
-
-  .filter-badge {
-    display: flex;
-    height: 20px;
-    min-width: 20px;
-    justify-content: center;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .filter-icon {
-    display: block;
-  }
-}
-
-.filter-content,
-.filter-actions {
-  transition: all 0.3s ease;
-
-  &.hidden {
-    display: none;
-    height: 0;
-    overflow: hidden;
-    opacity: 0;
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.filter-section {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  .filter-header {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-  }
-
-  .filter-subtitle {
-    font-weight: 500;
-  }
-
-  .filter-description {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    &::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 1px;
-      background-color: var(--neutral-light);
-      margin-top: 12px;
-      grid-column: 1 / -1;
-    }
-  }
-
-  .filter-checkboxes {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 11px 0px;
-
-    &.scrollable {
-      max-height: 100px;
-      overflow-y: auto;
-      grid-template-columns: 1fr;
-      padding-right: 8px;
-      gap: 12px;
-
-      &::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--neutral-medium);
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background: var(--primary-base);
-      }
-
-      &::-webkit-scrollbar-track {
-        background: var(--neutral-opacity-black);
-      }
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .filter-radios {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    &.scrollable {
-      max-height: 100px;
-      overflow-y: auto;
-      padding-right: 8px;
-      gap: 8px;
-
-      &::-webkit-scrollbar {
-        width: 8px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--neutral-medium);
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background: var(--primary-base);
-      }
-
-      &::-webkit-scrollbar-track {
-        background: var(--neutral-opacity-black);
-      }
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: breakpoints.$breakpoint-medium) {
-  .filter-checkboxes.scrollable,
-  .filter-radios.scrollable {
-    max-height: 100px;
-  }
-
-  .filter-checkboxes::after {
-    display: none;
-    background-color: transparent;
-  }
-}
-
-.filter-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-
-  &::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: linear-gradient(90deg, var(--neutral-light) 75%, transparent 15%);
-    background-size: 10px 1px;
-    background-repeat: repeat-x;
-    margin-bottom: 20px;
-  }
-
-  .main-actions {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-
-  .divider-strong {
-    height: 1px;
-    width: 100%;
-    margin-top: 20px;
-    margin-bottom: 16px;
-    background: linear-gradient(90deg, #e2e2e2 70%, transparent 70%);
-    background-size: 4px 1px;
-    background-repeat: repeat-x;
-  }
-
-  .close-action-wrapper {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .close-action {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-
-    cura-button-transparent {
-      padding: 0;
-      margin: 0;
-      background: transparent;
-      border: none;
-      color: inherit;
-    }
-  }
-
-  cura-button-transparent {
-    display: flex;
-    justify-content: flex-start;
-    text-align: left;
-    flex: 0 1 auto;
-  }
-
-  cura-button {
-    display: flex;
-    justify-content: flex-start;
-    text-align: left;
-    flex: 1 0 auto;
-  }
-}
-
-@media screen and (max-width: breakpoints.$breakpoint-medium) {
-  .filter-checkboxes::after {
-    background-color: transparent;
-  }
-}

package/components/filters/filter-generic/filter-generic.component.spec.ts

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

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

@@ -1,266 +0,0 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { ChangeDetectorRef, Component, HostBinding, OnInit, PLATFORM_ID, input, model, output, inject, computed, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { FilterAction, FilterControlValue, FilterSection, FilterEvent, FilterPlanosConveniosChange } from '@rededor/site-front-end-lib/core';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { CuraBadgeCounterComponent } from '@rededor/site-front-end-lib/cura/badges/cura-badge-counter';
-import { CuraButtonComponent } from '@rededor/site-front-end-lib/cura/buttons/cura-button';
-import { CuraButtonTransparentComponent } from '@rededor/site-front-end-lib/cura/buttons/cura-button-transparent';
-import { CheckboxChangeEvent } from '@rededor/site-front-end-lib/cura/forms/cura-checkbox';
-import { CuraCheckboxComponent } from '@rededor/site-front-end-lib/cura/forms/cura-checkbox';
-import { CuraInputTextComponent } from '@rededor/site-front-end-lib/cura/forms/cura-input-text';
-import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
-import { RadioChangeEvent } from '@rededor/site-front-end-lib/cura/forms/cura-radio';
-import { CuraRadioComponent } from '@rededor/site-front-end-lib/cura/forms/cura-radio';
-import { SelectSelectedEvent } from '@rededor/site-front-end-lib/cura/forms/cura-select';
-import { CuraSelectComponent } from '@rededor/site-front-end-lib/cura/forms/cura-select';
-import { CuraSelectOptionComponent } from '@rededor/site-front-end-lib/cura/forms/cura-select-option';
-import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-import { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';
-import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
-import { MediaQueries } from '@rededor/site-front-end-lib/shared';
-
-@Component({
-  selector: 'rdsite-filter-generic',
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    CuraLabelComponent,
-    CuraBadgeCounterComponent,
-    CuraButtonTransparentComponent,
-    CuraInputTextComponent,
-    CuraIconComponent,
-    CuraSelectComponent,
-    CuraSelectOptionComponent,
-    CuraHeadingComponent,
-    CuraCheckboxComponent,
-    CuraRadioComponent,
-    CuraButtonComponent,
-    CuraParagraphComponent,
-  ],
-  templateUrl: './filter-generic.component.html',
-  styleUrls: ['./filter-generic.component.scss'],
-})
-export class FilterGenericComponent implements OnInit {
-  private readonly curaApiService = inject(CuraApiService);
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  readonly filterChange = output<FilterEvent>();
-  readonly closeModal = output<boolean>();
-  readonly openMobileFilter = output<void>();
-
-  readonly withContainerStyle = input(true);
-  readonly showClearButton = input(true);
-  readonly showApplyButton = input(true);
-  readonly showCloseButton = input(false);
-  readonly disableButtons = input(false);
-  readonly showBadge = input(true);
-  readonly showToggleIcon = input(true);
-  isFilterOpen = model(true);
-  readonly mobileBehavior = input(false);
-  readonly forceCollapsed = input(false);
-  readonly emitOnReset = input(false);
-  readonly textTitle = input('Filtrar por');
-  readonly sections = input<FilterSection[]>([]);
-
-  readonly windowWidth = signal(0);
-
-  readonly isStarTheme = input<boolean>(false);
-  readonly isMaternityStarTheme = input<boolean>(false);
-
-  readonly selectedFiltersCount = computed(() => {
-    return this.sections().reduce((count, section) => {
-      if ((section.type !== 'custom' && !section.config?.control) || (section.type === 'custom' && !section.config?.count)) return count;
-
-      const value = section.config.control?.value || null;
-
-      switch (section.type) {
-        case 'checkbox-group':
-          return count + (Array.isArray(value) ? value.filter((item) => item?.checked).length : 0);
-        case 'radio-group':
-          return count + (value?.value ? 1 : 0);
-        case 'custom':
-          const customCount = section.config.count || 0;
-          return count + customCount;
-        default:
-          return count + (value ? 1 : 0);
-      }
-    }, 0);
-  });
-
-  @HostBinding('style') styleBinding = {
-    '--font-family': this.curaApiService.theme.fonts.getFamily(''),
-    '--neutral-opacity-black': this.curaApiService.theme.colors.getColor('neutral-black', 0.2),
-    '--neutral-dark': this.curaApiService.theme.colors.getColor('neutral-dark'),
-    '--neutral-darker': this.curaApiService.theme.colors.getColor('neutral-darker'),
-    '--neutral-medium': this.curaApiService.theme.colors.getColor('neutral-medium'),
-    '--neutral-light': this.curaApiService.theme.colors.getColor('neutral-light'),
-    '--neutral-lighter': this.curaApiService.theme.colors.getColor('neutral-lighter'),
-    '--neutral-purewhite': this.curaApiService.theme.colors.getColor('neutral-purewhite'),
-    '--primary-base': this.curaApiService.theme.colors.getColor('primary-base'),
-    '--primary-lighter': this.curaApiService.theme.colors.getColor('primary-lighter'),
-  };
-
-  ngOnInit(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      this.windowWidth.set(window.innerWidth);
-    }
-
-    if (this.forceCollapsed() && this.isMobile()) {
-      this.isFilterOpen.set(false);
-    }
-  }
-
-  handleInputChange(event: string | number, control: FormControl): void {
-    control.setValue(event);
-  }
-
-  handleSelectChange({ value }: SelectSelectedEvent, control: FormControl): void {
-    if (value !== undefined) {
-      control.setValue(value);
-    }
-  }
-
-  handleCheckboxChange({ value, checked }: CheckboxChangeEvent, options: any[]): void {
-    const changedOption = options.find((opt) => opt.value === value);
-    if (changedOption) changedOption.checked = checked;
-
-    this.updateCheckboxGroup(options);
-  }
-
-  handleRadioChange({ value }: RadioChangeEvent, control: FormControl): void {
-    const selectedValue = value;
-    control.setValue(control.value?.value === selectedValue ? null : { value: selectedValue });
-  }
-
-  filter(): void {
-    this.emitFilterChange('filter');
-    if (this.mobileBehavior() || this.showCloseButton()) this.close();
-  }
-
-  reset(): void {
-    this.resetAllControls();
-
-    if (this.emitOnReset()) {
-      this.emitFilterChange('reset');
-      this.close();
-    }
-  }
-
-  close(): void {
-    this.closeModal.emit(true);
-  }
-
-  toggleFilter(): void {
-    if (this.mobileBehavior() && this.isMobile()) {
-      this.openMobileFilter.emit(undefined);
-    } else {
-      this.isFilterOpen.set(!this.isFilterOpen());
-    }
-    this.cdr.detectChanges();
-  }
-
-  hasSelection(): boolean {
-    return this.selectedFiltersCount() > 0;
-  }
-
-  readonly isMobile = computed(() => {
-    return this.windowWidth() <= MediaQueries.smallBreakpoint;
-  });
-
-  getRadioGroupValue(control?: FormControl<FilterControlValue>): any {
-    const value = control?.value;
-    return value && typeof value === 'object' && 'value' in value ? value.value : null;
-  }
-
-  hasScroll(section: FilterSection): boolean {
-    switch (section.type) {
-      case 'checkbox-group':
-        return section.config.options && section.config.options.length > 6;
-      case 'radio-group':
-        return section.config.options && section.config.options.length > 6;
-      default:
-        return false;
-    }
-  }
-
-  getSectionClass(section: FilterSection): string {
-    return this.hasScroll(section) ? 'scrollable' : '';
-  }
-
-  shouldHandleMobileClick(): boolean {
-    return this.mobileBehavior() && this.isMobile() && this.forceCollapsed();
-  }
-
-  handleMobileClick(): void {
-    if (this.shouldHandleMobileClick()) {
-      this.openMobileFilter.emit();
-    }
-  }
-
-  private emitFilterChange(action: FilterAction): void {
-    const filterData = this.buildFilterData();
-    const isEmpty = this.isFilterDataEmpty(filterData);
-
-    this.filterChange.emit({
-      data: this.emitOnReset() || !isEmpty ? filterData : null,
-      action: action,
-    });
-  }
-
-  private resetAllControls(): void {
-    this.sections().forEach((section) => {
-      if (!section.config?.control) return;
-
-      if (section.type === 'checkbox-group') {
-        const resetOptions = section?.config?.options?.map((option: any) => ({ ...option, checked: false })) || [];
-        section.config.options = resetOptions;
-        section.config.control.setValue(resetOptions, { emitEvent: false });
-      } else {
-        section.config.control.reset('', { emitEvent: false });
-      }
-    });
-  }
-
-  private updateCheckboxGroup(options: any[]): void {
-    this.sections()
-      .filter((section) => section.type === 'checkbox-group')
-      .forEach((section) => {
-        section.config.options = [...options];
-        section.config.control.setValue([...options]);
-      });
-  }
-
-  private buildFilterData(): FilterPlanosConveniosChange | any {
-    const filterData: FilterPlanosConveniosChange = {
-      unidade: '',
-      estado: '',
-      cobertura: [],
-    };
-
-    this.sections().forEach((section) => {
-      if (!section.config?.control) return;
-
-      const value = section.config.control.value;
-
-      switch (section.type) {
-        case 'input':
-          filterData.unidade = value || '';
-          break;
-        case 'select':
-          filterData.estado = value || '';
-          break;
-        case 'checkbox-group':
-          filterData.cobertura = Array.isArray(value) ? value.filter((item) => item.checked) : [];
-          break;
-      }
-    });
-
-    return filterData;
-  }
-
-  private isFilterDataEmpty(filterData: FilterPlanosConveniosChange): boolean {
-    return Object.values(filterData).every((val) => val === null || val === '' || (Array.isArray(val) && val.length === 0));
-  }
-}

package/components/filters/filter-generic/index.ts

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

package/components/filters/filter-generic/ng-package.json

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

package/components/filters/filter-generic/public-api.ts

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

package/components/filters/filter-planos-convenios/filter-planos-convenios.component.html

@@ -1,76 +0,0 @@
-<div class="filter-planos-convenios" [ngClass]="{ 'container-style': withContainerStyle() }">
-  @if (!isLoading()) {
-    <cura-heading size="small" [level]="4" weight="bold" color="neutral-black" marginBlock="0" lineHeight="16px"> Refine sua busca </cura-heading>
-
-    <div class="filter-planos-convenios-unidade">
-      <cura-input-text
-        placeholder="Nome da unidade"
-        name="unidade-input"
-        iconName="search"
-        autocomplete="off"
-        [value]="unidadeControl().value"
-        (valueChange)="inputTextChange($event)"
-      ></cura-input-text>
-    </div>
-
-    <div class="filter-planos-convenios-estado">
-      @if (estados()) {
-        <cura-select
-          label="Selecione o estado"
-          placeholder="Faça a sua Seleção"
-          mode="default"
-          size="medium"
-          status="default"
-          [value]="estadoControl().value"
-          (selected)="selectChange($event)"
-        >
-          <cura-select-option [value]="''">Faça a sua Seleção</cura-select-option>
-
-          @for (estado of estados() || []; track estado?.value) {
-            <cura-select-option [value]="estado?.value">{{ estado?.label }}</cura-select-option>
-          }
-        </cura-select>
-      }
-    </div>
-
-    <div class="filter-planos-convenios-cobertura">
-      <cura-icon name="filter" size="20" color="info-dark"></cura-icon>
-      <cura-heading size="xsmall" [level]="5" weight="bold" color="neutral-black" marginBlock="0" lineHeight="16px">
-        Filtre pela cobertura do seu plano
-      </cura-heading>
-    </div>
-
-    <div class="filter-planos-convenios-content">
-      <cura-heading size="xsmall" [level]="5" color="neutral-black" marginBlock="0" lineHeight="16px"> Tipos de cobertura </cura-heading>
-      <cura-paragraph size="xsmall" color="neutral-dark" marginBlock="0">
-        Você pode selecionar uma ou mais portas de entrada, de acordo com a cobertura do seu plano.
-      </cura-paragraph>
-    </div>
-
-    <div class="filter-planos-convenios-checkboxes">
-      @for (option of coberturas() || []; track option.value) {
-        <cura-checkbox
-          color="primary"
-          size="small"
-          iconColor="light"
-          [name]="option.label"
-          [label]="option.label"
-          [value]="option.value"
-          [checked]="option.checked"
-          (onchange)="checkboxChange($event)"
-        >
-        </cura-checkbox>
-      }
-    </div>
-
-    <div class="filter-planos-convenios-buttons">
-      <cura-button-transparent size="small" color="primary" fontColor="dark" textAlign="center" (click)="reset()">
-        <span> Limpar todos os filtros </span>
-      </cura-button-transparent>
-
-      <cura-button size="medium" color="primary" fontColor="light" background="light" textAlign="center" (click)="filter()"> Filtrar </cura-button>
-    </div>
-  } @else {
-    <cura-loader-circle color="primary" size="small"> </cura-loader-circle>
-  }
-</div>