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

package/cura/forms/cura-select/cura-select.component.ts

@@ -1,459 +0,0 @@
-import {
-  Component,
-  input,
-  output,
-  signal,
-  computed,
-  inject,
-  forwardRef,
-  ElementRef,
-  AfterViewInit,
-  OnDestroy,
-  viewChild,
-  contentChildren,
-  model,
-  effect,
-  PLATFORM_ID,
-} from '@angular/core';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
-import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-import { CuraSelectOptionComponent } from '@rededor/site-front-end-lib/cura/forms/cura-select-option';
-import { SelectMode, SelectSize, SelectStatus, SelectSelectedEvent, SelectSearchEvent } from './cura-select.definitions';
-
-@Component({
-  selector: 'cura-select',
-  imports: [CommonModule, CuraLabelComponent, CuraIconComponent],
-  templateUrl: './cura-select.component.html',
-  styleUrls: ['./cura-select.component.scss'],
-  host: {
-    role: 'combobox',
-    '[attr.aria-label]': 'label()',
-    '[attr.aria-required]': 'required()',
-    '[attr.aria-disabled]': 'disabled()',
-    '[attr.aria-invalid]': 'status() === "error"',
-    '[attr.aria-expanded]': 'isOpen()',
-    '[attr.aria-controls]': 'listboxId()',
-    '[attr.aria-activedescendant]': 'activeOptionId()',
-  },
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CuraSelectComponent),
-      multi: true,
-    },
-  ],
-})
-export class CuraSelectComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
-  private curaApi: CuraApiService = inject(CuraApiService);
-  private elementRef = inject(ElementRef);
-  private platformId = inject(PLATFORM_ID);
-
-  name = input<string>('');
-
-  /**
-   * The label text for the select component
-   */
-  label = input<string>('');
-
-  /**
-   * Placeholder text for the input field
-   */
-  placeholder = input<string>('');
-
-  /**
-   * Current value of the select component
-   */
-  value = model<string | any>('');
-
-  /**
-   * Display mode of the select component
-   */
-  mode = input<SelectMode>('default');
-
-  /**
-   * Size of the select component
-   */
-  size = input<SelectSize>('medium');
-
-  /**
-   * Icon name for the select component
-   */
-  iconName = input<string | undefined>(undefined);
-
-  /**
-   * Status of the select component
-   */
-  status = input<SelectStatus>('default');
-
-  /**
-   * Whether the select component is disabled
-   */
-  disabled = input<boolean>(false);
-
-  /**
-   * Whether the select component is required
-   */
-  required = input<boolean>(false);
-
-  /**
-   * Enable/Disable search at options by term
-   */
-  searchBehavior = input<boolean>(false);
-
-  /**
-   * The search will be sensitive to accents
-   */
-  caseSensitive = input<boolean>(true);
-
-  /**
-   * CSS max-height property for dropdown item.
-   * Can also be used by css property --max-height.
-   * Default: 285px
-   */
-  maxHeight = input<string>('285px');
-
-  /**
-   * Event emitted when an option is selected
-   */
-  selected = output<SelectSelectedEvent>();
-
-  /**
-   * Event emitted when search term changes
-   */
-  searchTermInput = output<SelectSearchEvent>();
-
-  // Internal state signals
-  isHovered = signal<boolean>(false);
-  isFocused = signal<boolean>(false);
-  isOpen = signal<boolean>(false);
-  activeIndex = signal<number>(-1);
-  textInput = signal<string>('');
-
-  // Unique ID for accessibility
-  private componentId = `cura-select-${Math.random().toString(36).substring(2, 8)}`;
-
-  // Form control callbacks
-  private onChange = (value: string) => {};
-  private onTouched = () => {};
-
-  // ViewChild references
-  inputElement = viewChild<ElementRef<HTMLInputElement>>('inputElement');
-  options = contentChildren<CuraSelectOptionComponent>(CuraSelectOptionComponent);
-
-  // Computed signals
-  currentIconName = computed(() => {
-    const iconMap = {
-      default: this.iconName() || '',
-      success: 'checkCircle',
-      error: 'alertCircle',
-    };
-    return iconMap[this.status()];
-  });
-
-  private colorConfig = computed(() => {
-    if (this.disabled()) {
-      return {
-        label: 'neutral-medium',
-        text: 'neutral-medium',
-        icon: 'neutral-medium',
-      };
-    }
-
-    const isStatusDefault = this.status() === 'default';
-    const isHoveredOrFocused = this.isFocused() || this.isHovered();
-
-    return {
-      label: !isStatusDefault || isHoveredOrFocused ? 'neutral-black' : 'neutral-dark',
-      text: this.getTextColor(isHoveredOrFocused, isStatusDefault),
-      icon: this.getTextColor(isHoveredOrFocused, isStatusDefault),
-    };
-  });
-
-  containerClasses = computed(() => {
-    return {
-      wrapper: true,
-      label: !!this.label(),
-      disabled: this.disabled(),
-      transparent: this.mode() === 'transparent',
-      [this.size().toLowerCase()]: true,
-      [this.status().toLowerCase()]: true,
-    };
-  });
-
-  labelColor = computed(() => this.colorConfig().label);
-  textColor = computed(() => this.colorConfig().text);
-  iconColor = computed(() => this.colorConfig().icon);
-
-  // Accessibility computed signals
-  listboxId = computed(() => `${this.componentId}-listbox`);
-  activeOptionId = computed(() => {
-    const activeOption = this.options()?.[this.activeIndex()];
-    return activeOption?.optionId() || '';
-  });
-
-  styles = computed(() => {
-    const { fonts, colors } = this.curaApi?.theme || { fonts: null, colors: null };
-
-    const baseStyles: { [key: string]: string } = {};
-
-    if (fonts) {
-      const fontWeights = fonts.getWeights();
-      baseStyles['--font-weight-medium'] = fontWeights.medium;
-      baseStyles['--font-weight-bold'] = fontWeights.bold;
-      baseStyles['--font-weight-regular'] = fontWeights.regular;
-      baseStyles['--font-color'] = fonts.getColor();
-      baseStyles['--font-family'] = fonts.getFamily();
-      baseStyles['--font-size'] = fonts.getSize();
-    }
-
-    if (colors) {
-      const colorKeys = [
-        'primary-base',
-        'neutral-purewhite',
-        'neutral-white',
-        'neutral-black',
-        'neutral-medium',
-        'neutral-light',
-        'neutral-base',
-        'neutral-dark',
-        'success-dark',
-        'success-darker',
-        'success-lighter',
-        'error-lighter',
-        'error-dark',
-        'error-darker',
-        'error-base',
-        'info-base',
-      ];
-
-      colorKeys.forEach((key) => {
-        baseStyles[`--${key}`] = colors.getColor(key);
-      });
-    }
-
-    return baseStyles;
-  });
-
-  constructor() {
-    effect(() => {
-      this.updateOptionHighlights(this.activeIndex());
-    });
-
-    effect(() => {
-      if (!this.options() || this.options().length === 0) return;
-
-      const selectedOption = this.options().find((option) => option.selected());
-      if (selectedOption && selectedOption.value() !== this.value()) {
-        this.handleOptionSelected(selectedOption);
-      }
-    });
-  }
-
-  ngAfterViewInit() {
-    this.initializeOptions();
-    this.addOutsideClickListener();
-  }
-
-  ngOnDestroy() {
-    if (isPlatformBrowser(this.platformId)) {
-      this.removeOutsideClickListener();
-    }
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: string): void {
-    this.value.set(value);
-    if (!this.options) return;
-
-    const option = this.options().find((opt) => opt.value() === value);
-    if (option) {
-      this.textInput.set(option.elementRef?.nativeElement?.textContent || '');
-    }
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  private getTextColor(isHoveredOrFocused: boolean, isStatusDefault: boolean): string {
-    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';
-    if (this.status() === 'success') return 'success-dark';
-    if (this.status() === 'error') return 'error-dark';
-    return 'neutral-dark';
-  }
-
-  private initializeOptions() {
-    if (!this.options()) return;
-
-    this.options().forEach((option) => {
-      option.size.set(this.size());
-      option.active.set(false);
-      option.visible.set(true);
-
-      const isSelected = this.value() === option.value();
-      option.selected.set(isSelected);
-      if (isSelected) {
-        this.value.set(option.value());
-        this.textInput.update((value) => option.elementRef?.nativeElement?.textContent || value);
-      }
-    });
-  }
-
-  private handleOptionSelected(selectedOption: CuraSelectOptionComponent) {
-    const value = selectedOption.value();
-    this.value.set(value);
-
-    const optionText = selectedOption.elementRef?.nativeElement?.textContent || '';
-    if (this.textInput() !== optionText) {
-      this.onChange(value);
-      this.textInput.set(optionText);
-      this.isOpen.set(false);
-      this.filterOptions(optionText);
-      this.selected.emit({ value });
-    }
-  }
-
-  private clearSelectedAttributes() {
-    if (!this.options()) return;
-
-    this.options().forEach((option) => {
-      option.selected.set(false);
-    });
-  }
-
-  private removeAccents(str: string): string {
-    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-  }
-
-  private filterOptions(searchTerm: string) {
-    if (!this.searchBehavior()) {
-      return;
-    }
-
-    this.searchTermInput.emit({ searchTerm });
-
-    let processedSearchTerm = searchTerm;
-    if (!this.caseSensitive()) {
-      processedSearchTerm = this.removeAccents(searchTerm).toLowerCase();
-    }
-
-    this.options().forEach((option) => {
-      let optionText = option.elementRef?.nativeElement?.textContent || '';
-      if (!this.caseSensitive()) {
-        optionText = this.removeAccents(optionText.toLowerCase());
-      }
-
-      const isVisible = optionText.includes(processedSearchTerm);
-      option.visible.set(isVisible);
-      option.elementRef.nativeElement.style.display = isVisible ? 'block' : 'none';
-    });
-  }
-
-  // Event handlers
-  handleKeyNavigation(event: KeyboardEvent) {
-    const { code: keyCode } = event;
-
-    if (!this.isOpen() && keyCode === 'ArrowDown') {
-      this.isOpen.set(true);
-      this.activeIndex.set(0);
-      return;
-    }
-
-    if (keyCode === 'ArrowDown') {
-      event.preventDefault();
-      this.updateActiveIndex(1);
-    }
-
-    if (keyCode === 'ArrowUp') {
-      event.preventDefault();
-      this.updateActiveIndex(-1);
-    }
-
-    if (keyCode === 'Enter' || keyCode === 'Space') {
-      this.options()?.[this.activeIndex()]?.elementRef?.nativeElement?.click();
-    }
-
-    if (keyCode === 'Escape') {
-      this.isOpen.set(false);
-    }
-  }
-
-  private updateActiveIndex(direction: number) {
-    const visibleOptions = this.options();
-    if (!visibleOptions || visibleOptions.length === 0) return;
-
-    this.activeIndex.update((index) => (index + direction + visibleOptions.length) % visibleOptions.length);
-  }
-
-  handleInputChange(event: Event) {
-    const value = (event.target as HTMLInputElement).value;
-    this.textInput.set(value);
-    this.isOpen.set(value.length > 0);
-    this.onChange(value);
-    this.filterOptions(value);
-  }
-
-  handleClick(event: MouseEvent) {
-    if (this.disabled()) {
-      event.preventDefault();
-      return;
-    }
-
-    const target = event.target as HTMLElement;
-
-    // Procura pelo elemento cura-select-option mais próximo
-    const optionElement = target.closest('cura-select-option') as HTMLElement;
-
-    if (optionElement) {
-      this.clearSelectedAttributes();
-      const clickedOption = this.options()?.find((option) => option.elementRef?.nativeElement === optionElement);
-      if (clickedOption) {
-        clickedOption.selected.set(true);
-      }
-      return;
-    }
-
-    this.isOpen.update((value) => !value);
-  }
-
-  private updateOptionHighlights(newActiveIndex: number): void {
-    this.options().forEach((option, index) => {
-      option.active.set(index === newActiveIndex);
-    });
-  }
-
-  /**
-   * Controla o clique fora do componente
-   */
-  private addOutsideClickListener(): void {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-    document.addEventListener('click', this.handleClickOutside);
-  }
-
-  private removeOutsideClickListener(): void {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-    document.removeEventListener('click', this.handleClickOutside);
-  }
-
-  private handleClickOutside = (event: MouseEvent): void => {
-    if (!isPlatformBrowser(this.platformId)) {
-      return;
-    }
-
-    const clickedOutside = !this.elementRef.nativeElement.contains(event.target as Node);
-    if (clickedOutside && this.isOpen()) {
-      this.isOpen.set(false);
-    }
-  };
-}

package/cura/forms/cura-select/cura-select.definitions.ts

@@ -1,34 +0,0 @@
-/**
- * Display mode options for the select component
- */
-export type SelectMode = 'default' | 'transparent';
-
-/**
- * Size options for the select component
- */
-export type SelectSize = 'small' | 'medium' | 'large';
-
-/**
- * Status options for the select component
- */
-export type SelectStatus = 'success' | 'error' | 'default';
-
-/**
- * Event payload emitted when an option is selected
- */
-export interface SelectSelectedEvent {
-  /**
-   * The value of the selected option
-   */
-  value: string;
-}
-
-/**
- * Event payload emitted when search term changes
- */
-export interface SelectSearchEvent {
-  /**
-   * The search term entered by the user
-   */
-  searchTerm: string;
-}

package/cura/forms/cura-select/index.ts

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

package/cura/forms/cura-select/ng-package.json

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

package/cura/forms/cura-select/public-api.ts

@@ -1,2 +0,0 @@
-export * from './cura-select.component';
-export * from './cura-select.definitions';

package/cura/forms/cura-select-option/cura-select-option.component.html

@@ -1,9 +0,0 @@
-<div [class]="classes()" [style]="styles()" [hidden]="!visible()">
-  <cura-label [color]="selected() ? 'primary-base' : 'neutral-black'" [size]="internalSize().label" marginBlock="0">
-    <ng-content></ng-content>
-  </cura-label>
-
-  @if (selected()) {
-    <cura-icon name="check" [size]="internalSize().icon" color="primary-base"> </cura-icon>
-  }
-</div>

package/cura/forms/cura-select-option/cura-select-option.component.scss

@@ -1,33 +0,0 @@
-:host {
-  display: block;
-}
-
-.item {
-  display: flex;
-  padding: 12px 8px;
-  cursor: pointer;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  background: var(--neutral-purewhite);
-
-  &.selected {
-    background-color: var(--primary-lighter-50);
-    border-bottom: 1px solid var(--primary-light);
-  }
-
-  &:hover:not(.selected) {
-    background: var(--neutral-white);
-    border-bottom: 1px solid var(--neutral-light);
-  }
-
-  &.active {
-    background: var(--neutral-white) !important;
-    border-bottom: 1px solid var(--neutral-light);
-  }
-
-  &.selected.active {
-    background-color: var(--primary-lighter-50) !important;
-    box-shadow: none;
-  }
-}

package/cura/forms/cura-select-option/cura-select-option.component.ts

@@ -1,93 +0,0 @@
-import { Component, input, computed, inject, model, ElementRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
-import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-import { SelectOptionSize, SelectOptionSizeConfig } from './cura-select-option.definitions';
-
-@Component({
-  selector: 'cura-select-option',
-  imports: [CommonModule, CuraLabelComponent, CuraIconComponent],
-  templateUrl: './cura-select-option.component.html',
-  styleUrls: ['./cura-select-option.component.scss'],
-  host: {
-    role: 'option',
-    '[attr.aria-selected]': 'selected()',
-    '[attr.id]': 'optionId()',
-    '[attr.aria-disabled]': 'false',
-  },
-})
-export class CuraSelectOptionComponent {
-  private curaApi: CuraApiService = inject(CuraApiService);
-  public elementRef = inject(ElementRef);
-
-  /**
-   * Value associated with the select option
-   */
-  value = input<string | any>('');
-
-  /**
-   * Whether the option is selected
-   */
-  selected = model<boolean>(false);
-
-  /**
-   * Whether the option is active (highlighted)
-   */
-  active = model<boolean>(false);
-
-  /**
-   * Size of the select option
-   */
-  size = model<SelectOptionSize>('small');
-
-  /**
-   * Whether the option is visible (for search filtering)
-   */
-  visible = model<boolean>(true);
-
-  /**
-   * Unique ID for the option (for accessibility)
-   */
-  private componentId = `cura-select-option-${Math.random().toString(36).substring(2, 8)}`;
-
-  // Computed signals
-  optionId = computed(() => this.componentId);
-
-  internalSize = computed(() => {
-    const sizeMap: { [key in SelectOptionSize]: SelectOptionSizeConfig } = {
-      large: { label: 'medium', icon: 20 },
-      medium: { label: 'small', icon: 16 },
-      small: { label: 'xsmall', icon: 'micro' },
-      xsmall: { label: 'xsmall', icon: 'micro' },
-    };
-    return sizeMap[this.size()] || sizeMap['medium'];
-  });
-
-  styles = computed(() => {
-    const colors = [
-      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },
-      { name: '--primary-light', theme: 'primary-light' },
-      { name: '--neutral-light', theme: 'neutral-light' },
-      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },
-    ];
-
-    const colorStyles: { [key: string]: string } = {};
-    colors.forEach((color) => {
-      if (this.curaApi) {
-        colorStyles[color.name] = this.curaApi.theme.colors.getColor(color.theme, color.opacity);
-      }
-    });
-
-    return { ...colorStyles };
-  });
-
-  classes = computed(() => {
-    const classes = ['item'];
-
-    if (this.selected()) classes.push('selected');
-    if (this.active()) classes.push('active');
-
-    return classes.join(' ');
-  });
-}

package/cura/forms/cura-select-option/cura-select-option.definitions.ts

@@ -1,12 +0,0 @@
-/**
- * Size options for the select option component
- */
-export type SelectOptionSize = 'xsmall' | 'small' | 'medium' | 'large';
-
-/**
- * Interface for size mapping configuration
- */
-export interface SelectOptionSizeConfig {
-  label: 'xsmall' | 'small' | 'medium';
-  icon: number | string;
-}

package/cura/forms/cura-select-option/index.ts

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

package/cura/forms/cura-select-option/ng-package.json

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

package/cura/forms/cura-select-option/public-api.ts

@@ -1,2 +0,0 @@
-export * from './cura-select-option.component';
-export * from './cura-select-option.definitions';

package/cura/forms/cura-select-state/cura-select-state.component.html

@@ -1,14 +0,0 @@
-<cura-select
-  [label]="label()"
-  [placeholder]="placeholder()"
-  [required]="required()"
-  [disabled]="disabled()"
-  [size]="size()"
-  [status]="status()"
-  [(value)]="value"
-  (selected)="handleSelected($event)"
->
-  @for (state of states(); track state.value) {
-    <cura-select-option [value]="state.value">{{ state.label }}</cura-select-option>
-  }
-</cura-select>