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

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

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

@@ -0,0 +1,34 @@
+/**
+ * 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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * 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

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

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

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

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

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

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

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