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

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

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

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

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

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

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

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

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

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

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

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