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

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

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

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

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

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

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

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

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

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

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