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

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

@@ -0,0 +1,261 @@
+import { Component, input, output, inject, computed, forwardRef, model } from '@angular/core';
+import { CommonModule } 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 { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
+import { formsSizes, TextOverflow } from '@rededor/site-front-end-lib/cura/forms';
+import { RadioSize, RadioPosition, RadioBackground, RadioStatus, RadioChangeEvent } from './cura-radio.definitions';
+
+@Component({
+  selector: 'cura-radio',
+  imports: [CommonModule, CuraLabelComponent, CuraParagraphComponent],
+  templateUrl: './cura-radio.component.html',
+  styleUrls: ['./cura-radio.component.scss'],
+  host: {
+    role: 'radio',
+    '[attr.aria-checked]': 'checked()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.aria-required]': 'required()',
+    '[attr.aria-invalid]': 'status() === "error"',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CuraRadioComponent),
+      multi: true,
+    },
+  ],
+})
+export class CuraRadioComponent implements ControlValueAccessor {
+  private curaApi: CuraApiService = inject(CuraApiService);
+
+  /**
+   * Reflects the checked state of the radio button.
+   */
+  checked = model<boolean>(false);
+
+  /**
+   * Status of the radio button.
+   */
+  status = input<RadioStatus>('default');
+
+  /**
+   * Reflects the disabled state of the radio button.
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Reflects the required state of the radio button.
+   */
+  required = input<boolean>(false);
+
+  /**
+   * Text label associated with the radio button.
+   */
+  label = input<string>('');
+
+  /**
+   * Specifies the tabindex of the radio button.
+   */
+  ontabindex = input<number>(0);
+
+  /**
+   * Position of the label relative to the radio button.
+   */
+  position = input<RadioPosition>('left');
+
+  /**
+   * Value associated with the radio button.
+   */
+  value = model<string>('');
+
+  /**
+   * Name attribute of the radio button.
+   */
+  name = input<string>('');
+
+  /**
+   * Background theme of the radio button.
+   */
+  background = input<RadioBackground>('light');
+
+  /**
+   * Size of the radio button.
+   */
+  size = input<RadioSize>('medium');
+
+  /**
+   * Color theme of the radio button.
+   */
+  color = input<string>('accent');
+
+  /**
+   * When true, renders the radio button as a square instead of a circle.
+   */
+  isSquare = input<boolean>(false);
+
+  /**
+   * Controls how the label text should handle overflow.
+   * - `'none'`: No overflow handling; the label displays normally.
+   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+   * - `string`: Custom overflow handling mode.
+   *
+   * @default 'none'
+   */
+  overflowLabel = input<TextOverflow>('none');
+
+  /**
+   * Controls how the helper text should handle overflow.
+   * - `'none'`: No overflow handling; the label displays normally.
+   * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.
+   * - `string`: Custom overflow handling mode.
+   *
+   * @default 'none'
+   */
+  overflowHelper = input<TextOverflow>('none');
+
+  /**
+   * Change event emitter
+   */
+  onchange = output<RadioChangeEvent>();
+
+  // Form control callbacks
+  private onChange = (value: string) => {};
+  private onTouched = () => {};
+
+  private sizes = {
+    large: { size: 20 },
+    medium: { size: 14 },
+    small: { size: 10 },
+  };
+
+  // Computed signals
+  private colorConfig = computed(() => {
+    if (this.disabled()) {
+      return {
+        label: this.isDarkBackground() ? 'primary-darker' : 'neutral-medium',
+        message: this.isDarkBackground() ? 'primary-darker' : 'neutral-medium',
+      };
+    }
+
+    const darkBackground = this.isDarkBackground();
+    const statusColors = {
+      success: {
+        label: darkBackground ? 'success-lighter' : 'success-darker',
+        message: darkBackground ? 'success-base' : 'success-dark',
+      },
+      error: {
+        label: darkBackground ? 'error-lighter' : 'neutral-darker',
+        message: darkBackground ? 'error-base' : 'error-dark',
+      },
+      default: {
+        label: darkBackground ? 'neutral-white' : 'neutral-black',
+        message: darkBackground ? 'primary-lighter' : 'neutral-dark',
+      },
+    };
+
+    return statusColors[this.status()];
+  });
+
+  labelColor = computed(() => this.colorConfig().label);
+  messageColor = computed(() => this.colorConfig().message);
+  labelSize = computed(() => (this.size() === 'large' ? 'medium' : 'xsmall'));
+  labelClasses = computed(() => {
+    const classes = ['label'];
+    if (this.overflowLabel() === 'single') {
+      classes.push('textoverflow-single');
+    }
+    return classes.join(' ');
+  });
+  messageClasses = computed(() => {
+    const classes = ['message'];
+    if (this.overflowHelper() === 'single') {
+      classes.push('textoverflow-single');
+    }
+    return classes.join(' ');
+  });
+  containerClasses = computed(() => {
+    const classes = ['container'];
+    if (this.checked()) classes.push('checked');
+    if (this.disabled()) classes.push('disabled');
+    if (this.position() === 'right') classes.push('position');
+    if (this.isSquare()) classes.push('square');
+    classes.push(this.status());
+    return classes.join(' ');
+  });
+
+  // Computed signal para styles
+  styles = computed(() => {
+    const sizeConfig = this.sizes[this.size()];
+    const formsSize = formsSizes[this.size()];
+
+    const sizeStyles = {
+      '--size-after': `${sizeConfig.size}px`,
+      '--size': `${formsSize.size}px`,
+      '--gap': `${formsSize.gap}px`,
+    };
+
+    const darkBackground = this.isDarkBackground();
+    const colorValue = this.color();
+
+    const colors = [
+      { name: '--info-base', background: 'info-base' },
+      { name: '--color-light', background: `${colorValue}-light` },
+      { name: '--color-base', background: `${colorValue}-base` },
+      { name: '--color-dark', background: `${colorValue}-dark` },
+      { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+      { name: '--success-lighter', background: 'success-lighter' },
+      { name: '--success-base', background: 'success-base' },
+      { name: '--error-lighter', background: 'error-lighter' },
+      { name: '--error-base', background: 'error-base' },
+      { name: '--primary-base-neutral-medium', background: darkBackground ? 'primary-base' : 'neutral-medium' },
+      { name: '--primary-base-neutral-white', background: darkBackground ? 'primary-base' : 'neutral-white' },
+      { name: '--primary-darker-neutral-white', background: darkBackground ? 'primary-darker' : 'neutral-white' },
+      { name: '--primary-darker-neutral-base', background: darkBackground ? 'primary-darker' : 'neutral-base' },
+      { name: '--primary-base-neutral-base', background: darkBackground ? 'primary-base' : 'neutral-base' },
+      { name: '--primary-base-neutral-dark', background: darkBackground ? 'primary-base' : 'neutral-dark' },
+      { name: '--primary-base-neutral-medium', background: darkBackground ? 'primary-base' : 'neutral-medium' },
+      { name: '--success-base-dark', background: darkBackground ? 'success-base' : 'success-dark' },
+      { name: '--error-base-dark', background: darkBackground ? 'error-base' : 'error-dark' },
+    ];
+
+    const colorStyles: { [key: string]: string } = {};
+    colors.forEach((color) => {
+      if (this.curaApi) {
+        colorStyles[color.name] = this.curaApi.theme.colors.getColor(color.background);
+      }
+    });
+
+    return { ...sizeStyles, ...colorStyles };
+  });
+
+  // ControlValueAccessor implementation
+  writeValue(value: string): void {
+    this.checked.set(value === this.value());
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  private isDarkBackground(): boolean {
+    return this.background() === 'dark';
+  }
+
+  handleClick(): void {
+    if (this.disabled()) return;
+
+    const newCheckedState = !this.checked();
+    this.checked.set(newCheckedState);
+
+    this.onChange(newCheckedState ? this.value() : '');
+    this.onTouched();
+
+    this.onchange.emit({ value: this.value(), checked: newCheckedState });
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * Radio size types
+ */
+export type RadioSize = 'small' | 'medium' | 'large';
+
+/**
+ * Radio position types
+ */
+export type RadioPosition = 'left' | 'right';
+
+/**
+ * Radio background types
+ */
+export type RadioBackground = 'dark' | 'light';
+
+/**
+ * Radio status types
+ */
+export type RadioStatus = 'error' | 'success' | 'default';
+
+/**
+ * Radio configuration interface
+ */
+export interface RadioConfig {
+  checked?: boolean;
+  status?: RadioStatus;
+  disabled?: boolean;
+  required?: boolean;
+  label?: string;
+  tabindex?: number;
+  position?: RadioPosition;
+  value?: string;
+  name?: string;
+  background?: RadioBackground;
+  size?: RadioSize;
+  color?: string;
+  isSquare?: boolean;
+}
+
+/**
+ * Radio change event interface
+ */
+export interface RadioChangeEvent {
+  value: string;
+  checked: boolean;
+}

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

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

package/cura/forms/cura-radio/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-radio/public-api.ts

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

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

@@ -0,0 +1,88 @@
+<div [ngClass]="containerClasses()" [style]="styles()" (mouseenter)="isHovered.set(true)" (mouseleave)="isHovered.set(false)" (click)="handleClick($event)">
+  @if (label()) {
+    <cura-label class="label" weight="bold" [size]="size() === 'large' ? 'small' : 'xsmall'" [color]="labelColor()">
+      {{ label() }}
+      @if (required()) {
+        <span class="required">*</span>
+      }
+    </cura-label>
+  }
+
+  <div
+    [ngClass]="{
+      'cura-input-field': true,
+      open: isOpen(),
+    }"
+  >
+    @if (status() !== 'default' || iconName()) {
+      <cura-icon
+        class="feedback-icon"
+        [name]="currentIconName()"
+        iconset="default"
+        [size]="size() === 'large' ? 20 : 16"
+        [color]="iconColor()"
+        [style]="styles()"
+      >
+      </cura-icon>
+    }
+
+    <input
+      #inputElement
+      type="text"
+      autocomplete="off"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [required]="required()"
+      [readonly]="!searchBehavior()"
+      [value]="textInput()"
+      [attr.id]="name() || null"
+      [attr.name]="name() || null"
+      [attr.aria-required]="required()"
+      [attr.aria-disabled]="disabled()"
+      [attr.aria-invalid]="status() === 'error'"
+      [attr.aria-autocomplete]="searchBehavior() ? 'list' : 'none'"
+      [attr.aria-controls]="listboxId()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-activedescendant]="activeOptionId()"
+      role="combobox"
+      [style]="styles()"
+      (focus)="isFocused.set(true)"
+      (blur)="isFocused.set(false)"
+      (input)="handleInputChange($event)"
+      (keydown)="handleKeyNavigation($event)"
+    />
+
+    <button
+      class="up-down-button"
+      type="button"
+      [attr.aria-label]="isOpen() ? 'Fechar lista de opções' : 'Abrir lista de opções'"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="listboxId()"
+      [disabled]="disabled()"
+      tabindex="-1"
+    >
+      <cura-icon [name]="isOpen() ? 'up' : 'down'" class="up-down-icon" [color]="disabled() ? 'neutral-dark' : 'primary-base'" [size]="16" iconset="default">
+      </cura-icon>
+    </button>
+  </div>
+
+  <cura-label class="helper-text" size="xsmall" [color]="textColor()" [weight]="mode() === 'transparent' ? 'bold' : 'regular'">
+    <ng-content></ng-content>
+  </cura-label>
+
+  @if (isOpen()) {
+    <div
+      [ngClass]="{
+        menu: true,
+        open: isOpen(),
+      }"
+      [style]="{ '--max-height': maxHeight() }"
+      role="listbox"
+      [id]="listboxId()"
+      [attr.aria-label]="'Lista de opções para ' + (label() || 'seleção')"
+      [attr.aria-multiselectable]="false"
+    >
+      <ng-content select="cura-select-option"></ng-content>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,112 @@
+@use '../../scss/mixins/forms.scss' as forms;
+
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--font-family);
+}
+
+.wrapper {
+  width: 100%;
+  user-select: none;
+  text-align: left !important;
+
+  @include forms.cura-label();
+  @include forms.helper-text();
+
+  @include forms.cura-input-field() {
+    .feedback-icon {
+      box-sizing: content-box;
+    }
+
+    .up-down-icon {
+      order: 3;
+      margin-right: 6px;
+      cursor: pointer;
+      pointer-events: all;
+    }
+
+    .up-down-button {
+      background-color: transparent;
+      border: none;
+    }
+
+    input {
+      padding: 0px 12px 0px 8px;
+      cursor: pointer;
+    }
+
+    &.open {
+      border-radius: calc(var(--border-radius, 4px) / 2) calc(var(--border-radius, 4px) / 2) 0 0 !important;
+    }
+  }
+
+  @include forms.cura-input-transparent();
+
+  @include forms.cura-forms-hover();
+  @include forms.cura-forms-focused();
+
+  @include forms.cura-forms-success();
+  @include forms.cura-forms-error();
+
+  @include forms.cura-forms-small() {
+    &.label {
+      .menu {
+        top: 53px;
+      }
+    }
+    .menu {
+      top: 33px;
+    }
+  }
+
+  @include forms.cura-forms-medium() {
+    &.label {
+      .menu {
+        top: 61px;
+      }
+    }
+    .menu {
+      top: 40px;
+    }
+  }
+
+  @include forms.cura-forms-large() {
+    &.label {
+      .menu {
+        top: 69px;
+      }
+    }
+    .menu {
+      top: 47px;
+    }
+  }
+
+  @include forms.cura-forms-disabled();
+}
+
+.required {
+  color: red;
+}
+
+.menu {
+  position: absolute;
+  left: 0;
+  right: -1px;
+  background: #fff;
+  border: 2px solid var(--neutral-light);
+  border-radius: 4px;
+  z-index: 1000;
+  max-height: 285px;
+  overflow: hidden;
+  border-top: transparent;
+  align-items: center;
+
+  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);
+  overflow-y: auto;
+  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+
+  &.open {
+    border-radius: 0 !important;
+  }
+}