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

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

@@ -1,284 +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 { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
-import { formsSizes, TextOverflow } from '@rededor/site-front-end-lib/cura/forms';
-import { CheckboxSize, CheckboxPosition, CheckboxBackground, CheckboxIconColor, CheckboxStatus, CheckboxChangeEvent } from './cura-checkbox.definitions';
-
-@Component({
-  selector: 'cura-checkbox',
-  imports: [CommonModule, CuraLabelComponent, CuraParagraphComponent, CuraIconComponent],
-  templateUrl: './cura-checkbox.component.html',
-  styleUrls: ['./cura-checkbox.component.scss'],
-  host: {
-    role: 'checkbox',
-    '[attr.aria-checked]': 'checked()',
-    '[attr.aria-disabled]': 'disabled()',
-    '[attr.aria-required]': 'required()',
-    '[attr.aria-invalid]': 'status() === "error"',
-  },
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CuraCheckboxComponent),
-      multi: true,
-    },
-  ],
-})
-export class CuraCheckboxComponent implements ControlValueAccessor {
-  private curaApi: CuraApiService = inject(CuraApiService);
-
-  /**
-   * When true, suppresses rendering of the check/indeterminate icon.
-   */
-  disableCheckIcon = input<boolean>(false);
-  /**
-   * Reflects the checked state of the checkbox.
-   * Using model for two-way binding and form control integration.
-   */
-  checked = model<boolean>(false);
-
-  /**
-   * Reflects the indeterminate state of the checkbox.
-   * Using model for two-way binding and form control integration.
-   */
-  indeterminate = model<boolean>(false);
-
-  /**
-   * Status of the checkbox.
-   */
-  status = input<CheckboxStatus>('default');
-
-  /**
-   * Reflects the disabled state of the checkbox.
-   */
-  disabled = input<boolean>(false);
-
-  /**
-   * Reflects the required state of the checkbox.
-   */
-  required = input<boolean>(false);
-
-  /**
-   * Text label associated with the checkbox.
-   */
-  label = input<string>('');
-
-  /**
-   * Specifies the tabindex of the checkbox.
-   */
-  ontabindex = input<number>(0);
-
-  /**
-   * Position of the label relative to the checkbox.
-   */
-  position = input<CheckboxPosition>('left');
-
-  /**
-   * Value associated with the checkbox.
-   */
-  value = model<string | any>('');
-
-  /**
-   * Name attribute of the checkbox.
-   */
-  name = input<string>('');
-
-  /**
-   * Size of the checkbox.
-   */
-  size = input<CheckboxSize>('medium');
-
-  /**
-   * Background theme of the checkbox.
-   */
-  background = input<CheckboxBackground>('light');
-
-  /**
-   * Icon color theme of the checkbox.
-   */
-  iconColor = input<CheckboxIconColor>('dark');
-
-  /**
-   * Color theme of the checkbox.
-   */
-  color = input<string>('accent');
-
-  /**
-   * 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<CheckboxChangeEvent>();
-
-  // Form control callbacks
-  private onChange = (value: boolean) => {};
-  private onTouched = () => {};
-
-  styles = computed(() => {
-    const formsSize = formsSizes[this.size()];
-
-    const sizeStyles = {
-      '--size': `${formsSize.size}px`,
-      '--gap': `${formsSize.gap}px`,
-    };
-
-    const isDark = this.isDarkBackground();
-    const colorPrefix = this.color();
-
-    const colors = [
-      { name: '--color-base', background: `${colorPrefix}-base` },
-      { name: '--color-lighter', background: `${colorPrefix}-lighter` },
-      { name: '--color-light', background: `${colorPrefix}-light` },
-      { name: '--color-dark', background: `${colorPrefix}-dark` },
-      { name: '--info-base', background: 'info-base' },
-      { name: '--error-base', background: 'error-base' },
-      { name: '--success-lighter', background: 'success-lighter' },
-      { name: '--success-base', background: 'success-base' },
-      { name: '--success-dark', background: 'success-dark' },
-      { name: '--error-lighter', background: 'error-lighter' },
-      { name: '--neutral-black', background: 'neutral-black' },
-      { name: '--primary-base-neutral-white', background: isDark ? 'primary-base' : 'neutral-white' },
-      { name: '--neutral-base-neutral-medium', background: isDark ? 'neutral-base' : 'neutral-medium' },
-      { name: '--neutral-black-neutral-purewhite', background: isDark ? 'neutral-black' : 'neutral-purewhite' },
-      { name: '--neutral-black-neutral-white', background: isDark ? 'neutral-black' : 'neutral-white' },
-      { name: '--neutral-darker-neutral-base', background: isDark ? 'neutral-darker' : 'neutral-base' },
-      { name: '--neutral-base-neutral-base', background: isDark ? 'primary-base' : 'neutral-base' },
-      { name: '--neutral-purewhite-neutral-dark', background: isDark ? 'neutral-purewhite' : 'neutral-dark' },
-      { name: '--primary-base-neutral-medium', background: isDark ? 'primary-base' : 'neutral-medium' },
-      { name: '--success-base-lighter', background: isDark ? 'success-base' : 'success-lighter' },
-      { name: '--success-dark-base', background: isDark ? 'success-dark' : 'success-base' },
-      { name: '--error-base-lighter', background: isDark ? 'error-base' : 'error-lighter' },
-      { name: '--error-dark-base', background: isDark ? 'error-dark' : 'error-base' },
-    ];
-
-    const colorStyles: { [key: string]: string } = {};
-    colors.forEach((color) => {
-      if (this.curaApi) {
-        colorStyles[color.name] = this.curaApi.theme.colors.getColor(color.background);
-      }
-    });
-
-    const fontFamily = this.curaApi.theme.fonts.getFamily();
-
-    return { ...sizeStyles, ...colorStyles, '--font-family': fontFamily };
-  });
-
-  private colorConfig = computed(() => {
-    if (this.disabled()) {
-      return {
-        icon: this.iconColor() === 'dark' ? 'neutral-dark' : 'neutral-purewhite',
-        label: 'neutral-dark',
-        message: 'neutral-dark',
-      };
-    }
-
-    const darkBackground = this.isDarkBackground();
-    const darkIconColor = this.isDarkIconColor();
-
-    const statusColors = {
-      success: {
-        icon: 'success-dark',
-        label: darkBackground ? 'success-lighter' : 'success-darker',
-        message: darkBackground ? 'success-base' : 'success-dark',
-      },
-      error: {
-        icon: 'error-dark',
-        label: darkBackground ? 'error-lighter' : 'neutral-darker',
-        message: darkBackground ? 'error-base' : 'error-dark',
-      },
-      default: {
-        icon: darkIconColor ? 'neutral-black' : 'neutral-purewhite',
-        label: darkBackground ? 'neutral-white' : 'neutral-black',
-        message: darkBackground ? 'primary-lighter' : 'neutral-dark',
-      },
-    };
-
-    return statusColors[this.status()];
-  });
-
-  iconName = computed(() => (this.indeterminate() ? 'minus' : 'check'));
-  iconSizeValue = computed(() => (this.size() === 'large' ? 20 : 'micro'));
-  iconColorValue = computed(() => this.colorConfig().icon);
-
-  labelSize = computed(() => (this.size() === 'large' ? 'medium' : 'xsmall'));
-  labelClasses = computed(() => 'label' + (this.overflowLabel() === 'single' ? ' textoverflow-single' : ''));
-  labelColor = computed(() => this.colorConfig().label);
-
-  messageClasses = computed(() => 'message' + (this.overflowHelper() === 'single' ? ' textoverflow-single' : ''));
-  messageColor = computed(() => this.colorConfig().message);
-
-  // ControlValueAccessor implementation
-  writeValue(value: boolean): void {
-    this.checked.set(value ?? false);
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  private isDarkBackground(): boolean {
-    return this.background() === 'dark';
-  }
-
-  private isDarkIconColor(): boolean {
-    return this.iconColor() === 'dark';
-  }
-
-  containerClasses = computed(() => {
-    const classes = ['container'];
-
-    if (this.checked()) classes.push('checked');
-    if (this.disabled()) classes.push('disabled');
-    if (this.background() === 'dark') classes.push('dark');
-    if (this.indeterminate()) classes.push('indeterminate');
-    if (this.position() === 'right') classes.push('position');
-    classes.push(this.status());
-
-    return classes.join(' ');
-  });
-
-  handleClick(): void {
-    if (this.disabled()) return;
-
-    this.indeterminate.set(false);
-
-    const newCheckedState = !this.checked();
-    this.checked.set(newCheckedState);
-
-    // Notify form control
-    this.onChange(newCheckedState);
-    this.onTouched();
-
-    this.onchange.emit({
-      value: this.value(),
-      checked: newCheckedState,
-      indeterminate: false,
-    });
-  }
-}

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

@@ -1,44 +0,0 @@
-/**
- * Size options for the checkbox component
- */
-export type CheckboxSize = 'small' | 'medium' | 'large';
-
-/**
- * Position options for the label relative to the checkbox
- */
-export type CheckboxPosition = 'left' | 'right';
-
-/**
- * Background theme options for the checkbox
- */
-export type CheckboxBackground = 'dark' | 'light';
-
-/**
- * Icon color theme options for the checkbox
- */
-export type CheckboxIconColor = 'dark' | 'light';
-
-/**
- * Status options for the checkbox
- */
-export type CheckboxStatus = 'default' | 'success' | 'error';
-
-/**
- * Event payload emitted when checkbox state changes
- */
-export interface CheckboxChangeEvent {
-  /**
-   * The value associated with the checkbox
-   */
-  value: string;
-
-  /**
-   * Whether the checkbox is checked
-   */
-  checked: boolean;
-
-  /**
-   * Whether the checkbox is in indeterminate state
-   */
-  indeterminate: boolean;
-}

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

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

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

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

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

@@ -1,18 +0,0 @@
-export const formsSizes = {
-  large: {
-    size: 32,
-    gap: 16,
-  },
-  medium: {
-    size: 24,
-    gap: 12,
-  },
-  small: {
-    size: 20,
-    gap: 8,
-  },
-};
-
-export type LabelSize = 'medium' | 'large' | 'small' | 'xsmall';
-export type LabelWeight = 'regular' | 'bold';
-export type TextOverflow = 'none' | 'single';

package/cura/forms/cura-input-text/cura-input-text.component.html

@@ -1,65 +0,0 @@
-<div class="cura-input-group" [ngClass]="classes()" [style]="styles()" (mouseenter)="handleMouseEnter()" (mouseleave)="handleMouseLeave()">
-  <div class="input-wrapper">
-    @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 class="cura-input-field" [style]="styles()">
-      @if (iconConfig().icon) {
-        <div class="feedback-icon" [style]="styles()">
-          <cura-icon [name]="iconConfig().icon!.name" iconset="default" [size]="iconConfig().size" [color]="iconConfig().icon!.color"> </cura-icon>
-        </div>
-      }
-
-      <input
-        #inputElement
-        [attr.id]="name() || null"
-        [attr.name]="name() || null"
-        [type]="type()"
-        [placeholder]="placeholder()"
-        [disabled]="disabled() || isLoading()"
-        [required]="required()"
-        [readonly]="readOnly()"
-        [attr.maxlength]="maxlength()"
-        [(ngModel)]="value"
-        [attr.inputmode]="maskPreset() ? 'tel' : inputMode()"
-        [autocomplete]="autocomplete()"
-        [ngClass]="classes()"
-        [style]="styles()"
-        (focus)="handleInputFocus()"
-        (blur)="handleInputBlur()"
-        (input)="handleInputChange($event)"
-        (keydown)="handleKeyDown($event)"
-      />
-
-      @if (shouldShowClearButton()) {
-        <cura-icon
-          [size]="size() === 'large' || mode() === 'transparent' ? 20 : 16"
-          color="primary-base"
-          name="closeCircle"
-          iconset="default"
-          class="clear-button"
-          (click)="handleClearInput()"
-        >
-        </cura-icon>
-      }
-
-      @if (isLoading()) {
-        <cura-loader-circle [size]="size() === 'large' ? 'medium' : 'small'" color="primary-base"> </cura-loader-circle>
-      }
-    </div>
-
-    @if (helperText()) {
-      <div [style]="styles()" class="helper-text" part="cura-input-text-helper">
-        <cura-label size="xsmall" lineHeight="xsmall" [color]="helperText().color">
-          <ng-content></ng-content>
-        </cura-label>
-      </div>
-    }
-  </div>
-</div>

package/cura/forms/cura-input-text/cura-input-text.component.scss

@@ -1,165 +0,0 @@
-@use '../../scss/mixins/forms.scss' as forms;
-
-:host {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.required {
-  color: var(--error-base);
-}
-
-.cura-input-group {
-  width: 100%;
-  font-family: var(--font-family);
-  text-align: left !important;
-
-  .helper-text {
-    margin-top: 8px;
-    color: var(--neutral-dark);
-  }
-  @include forms.cura-label;
-
-  @include forms.cura-input-field(40px, 14px) {
-    cura-loader-circle {
-      margin: 0px 12px;
-    }
-    .feedback-icon {
-      padding-left: 12px;
-      padding-top: 6px;
-    }
-
-    .clear-button {
-      margin-right: 12px;
-      cursor: pointer;
-    }
-  }
-  @include forms.helper-text();
-  @include forms.cura-forms-success;
-  @include forms.cura-forms-error;
-  @include forms.cura-forms-hover;
-  @include forms.cura-forms-focused;
-  @include forms.cura-forms-loading;
-  @include forms.cura-forms-readonly;
-  @include forms.cura-forms-small;
-  @include forms.cura-forms-medium;
-  @include forms.cura-forms-large;
-  @include forms.cura-forms-disabled;
-
-  @include forms.cura-input-transparent {
-    &.transparent {
-      display: flex;
-      background-color: transparent;
-      padding: 0px;
-      justify-content: start;
-      align-items: center;
-      max-height: 80px;
-      gap: 4px;
-
-      .input-wrapper {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-        justify-content: start;
-      }
-      cura-label {
-        margin-bottom: 4px;
-        --color-body: var(--neutral-dark) !important;
-      }
-
-      &.error {
-        cura-label {
-          --color-body: var(--neutral-black) !important;
-        }
-      }
-
-      @include forms.cura-input-field() {
-        background-color: transparent !important;
-        border: none !important;
-        border-radius: var(--border-radius, 0) !important;
-        height: 27px;
-        overflow: hidden;
-
-        input {
-          order: 1;
-          color: var(--neutral-black) !important;
-          font-size: 16px;
-          font-weight: var(--font-weight-bold) !important;
-          padding: 0;
-        }
-
-        input::placeholder {
-          color: var(--neutral-black);
-        }
-        .clear-button {
-          order: 2;
-          cursor: pointer;
-
-          margin: 0 20px 0 0;
-          padding: 0;
-        }
-
-        .feedback-icon {
-          padding: 6px 0 0 0;
-        }
-
-        cura-loader-circle {
-          order: 2;
-          margin: 0 20px 0 0;
-        }
-      }
-    }
-  }
-
-  &.error {
-    @include forms.cura-input-field() {
-      input {
-        color: var(--error-darker) !important;
-      }
-
-      input::placeholder {
-        color: var(--error-darker) !important;
-      }
-    }
-
-    @include forms.cura-forms-small;
-    @include forms.cura-forms-medium;
-    @include forms.cura-forms-large;
-
-    &:not(.transparent).large {
-      @include forms.cura-input-field(44px, 16px) {
-        border: 2px solid var(--error-dark) !important;
-        background-color: var(--error-lighter) !important;
-      }
-    }
-  }
-
-  &.success {
-    @include forms.cura-input-field() {
-      input {
-        color: var(--success-darker) !important;
-      }
-
-      input::placeholder {
-        color: var(--success-darker) !important;
-      }
-    }
-    @include forms.cura-forms-small;
-    @include forms.cura-forms-medium;
-    @include forms.cura-forms-large;
-
-    &:not(.transparent).large {
-      @include forms.cura-input-field(44px, 16px) {
-        border: 2px solid var(--success-dark) !important;
-        background-color: var(--success-lighter) !important;
-      }
-    }
-  }
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}