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

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

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

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

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

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

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

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

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

@@ -1,112 +0,0 @@
-@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;
-  }
-}