@ardium-ui/ui 3.3.0 → 3.4.2

package/lib/inputs/digit-input/digit-input.component.d.ts

@@ -1,15 +1,25 @@
-import { AfterViewInit, ElementRef, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { _FormFieldComponentBase } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from '../../types/theming.types';
 import { ArdDigitInputDefaults } from './digit-input.defaults';
-import { DigitInputConfig, DigitInputShape } from './digit-input.types';
+import { DigitInputAutoFillParseFn, DigitInputConfig, DigitInputShape, DigitInputTransform } from './digit-input.types';
 import { DigitInputModelHost } from './digit-input.utils';
 import * as i0 from "@angular/core";
-export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, DigitInputModelHost, OnInit, AfterViewInit {
+export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase implements ControlValueAccessor, DigitInputModelHost, OnInit, AfterViewInit, OnDestroy {
     protected readonly _DEFAULTS: ArdDigitInputDefaults;
     constructor(defaults: ArdDigitInputDefaults);
+    private readonly _autoFillMonitor;
     readonly inputs: import("@angular/core").Signal<readonly ElementRef<HTMLInputElement>[]>;
+    readonly inputAttrs: import("@angular/core").InputSignal<Record<string, any>>;
+    private _setInputAttributes;
+    readonly autoFillParseFn: import("@angular/core").InputSignal<DigitInputAutoFillParseFn>;
+    readonly isAutofilled: import("@angular/core").WritableSignal<boolean>;
+    private readonly _wasAutofillValueRead;
+    private _autoFillSubs;
+    private _subscribeToAutoFillOnInputs;
+    private _unsubscribeFromAutoFill;
+    ngOnDestroy(): void;
     private readonly model;
     readonly appearance: import("@angular/core").InputSignal<FormElementAppearance>;
     readonly variant: import("@angular/core").InputSignal<FormElementVariant>;
@@ -18,6 +28,7 @@ export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase i
     readonly ngClasses: import("@angular/core").Signal<string>;
     readonly config: import("@angular/core").InputSignalWithTransform<void, DigitInputConfig>;
     readonly configArrayData: import("@angular/core").Signal<import("./digit-input.utils").DigitInputConfigData[]>;
+    readonly transform: import("@angular/core").InputSignal<DigitInputTransform>;
     private _oldConfigArrayDataLength;
     readonly configArrayDataEffect: import("@angular/core").EffectRef;
     ngOnInit(): void;
@@ -38,6 +49,7 @@ export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase i
     readonly blurIndexEvent: import("@angular/core").OutputEmitterRef<number>;
     onPaste(event: ClipboardEvent, index: number): void;
     onInput(event: Event, index: number): void;
+    private _handleMultiDigitChange;
     private _updateSingleInputValue;
     focusByIndex(index: number): boolean;
     focusByIndex(index: number, tryFocusingNext: boolean, direction: 1 | -1): boolean;
@@ -46,5 +58,5 @@ export declare class ArdiumDigitInputComponent extends _FormFieldComponentBase i
     protected _emitChange(): void;
     onKeydown(event: KeyboardEvent, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDigitInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDigitInputComponent, "ard-digit-input", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "outputAsString": { "alias": "outputAsString"; "required": false; "isSignal": true; }; "outputControlValueAccessorOnFinish": { "alias": "outputControlValueAccessorOnFinish"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "finishedValue": "finishedValue"; "focusIndexEvent": "focusIndex"; "blurIndexEvent": "blurIndex"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ArdiumDigitInputComponent, "ard-digit-input", never, { "inputAttrs": { "alias": "inputAttrs"; "required": false; "isSignal": true; }; "autoFillParseFn": { "alias": "autoFillParseFn"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "outputAsString": { "alias": "outputAsString"; "required": false; "isSignal": true; }; "outputControlValueAccessorOnFinish": { "alias": "outputControlValueAccessorOnFinish"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "finishedValue": "finishedValue"; "focusIndexEvent": "focusIndex"; "blurIndexEvent": "blurIndex"; }, never, never, false, never>;
 }

package/lib/inputs/digit-input/digit-input.defaults.d.ts

@@ -1,13 +1,16 @@
 import { InjectionToken, Provider } from '@angular/core';
 import { _FormFieldComponentDefaults } from '../../_internal/form-field-component';
 import { FormElementAppearance, FormElementVariant } from './../../types/theming.types';
-import { DigitInputShape } from './digit-input.types';
+import { DigitInputAutoFillParseFn, DigitInputShape, DigitInputTransform } from './digit-input.types';
 export interface ArdDigitInputDefaults extends _FormFieldComponentDefaults {
     appearance: FormElementAppearance;
     variant: FormElementVariant;
     shape: DigitInputShape;
     compact: boolean;
     outputAsString: boolean;
+    transform: DigitInputTransform;
+    inputAttrs: Record<string, any>;
+    autoFillParseFn: DigitInputAutoFillParseFn;
 }
 export declare const ARD_DIGIT_INPUT_DEFAULTS: InjectionToken<ArdDigitInputDefaults>;
 export declare function provideDigitInputDefaults(config: Partial<ArdDigitInputDefaults>): Provider;

package/lib/inputs/digit-input/digit-input.model.d.ts

@@ -15,8 +15,10 @@ export declare class DigitInputModel {
     private _updateInputElements;
     setConfig(config: DigitInputConfig): void;
     private _setConfig;
+    resetInputValue(index: number): void;
     validateInputAndSetValue(input: string, index: number): null | {
         wasChanged: boolean;
+        wasValidChar: boolean;
         resultChar: string | null;
     };
     validateValueAndUpdate(): void;

package/lib/inputs/digit-input/digit-input.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./digit-input.component";
 import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/text-field";
 export declare class ArdiumDigitInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumDigitInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDigitInputModule, [typeof i1.ArdiumDigitInputComponent], [typeof i2.CommonModule], [typeof i1.ArdiumDigitInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArdiumDigitInputModule, [typeof i1.ArdiumDigitInputComponent], [typeof i2.CommonModule, typeof i3.CdkAutofill], [typeof i1.ArdiumDigitInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArdiumDigitInputModule>;
 }

package/lib/inputs/digit-input/digit-input.types.d.ts

@@ -15,9 +15,10 @@ export declare const DigitInputPrimitiveOption: {
     readonly Special: "special";
 };
 export type DigitInputPrimitiveOption = (typeof DigitInputPrimitiveOption)[keyof typeof DigitInputPrimitiveOption];
+export type DigitInputTransform = TransformType | ((char: string) => string) | null;
 export interface DigitInputAcceptObject {
     accept: string | RegExp | ((char: string, charsBefore: string) => boolean);
-    transform?: TransformType | ((char: string) => string) | null;
+    transform?: DigitInputTransform;
     readonly?: boolean;
     placeholder?: string;
 }
@@ -26,3 +27,4 @@ export interface DigitInputStaticObject {
 }
 export type DigitInputOption = DigitInputAcceptObject | DigitInputStaticObject;
 export type DigitInputConfig = (DigitInputPrimitiveOption | DigitInputOption)[] | string | number;
+export type DigitInputAutoFillParseFn = (autoFill: string) => string;

package/lib/inputs/digit-input/digit-input.utils.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, Signal } from '@angular/core';
+import { DigitInputTransform } from './digit-input.types';
 export interface DigitInputConfigData {
     type: DigitInputConfigDataType;
     char?: string;
@@ -9,6 +10,7 @@ export interface DigitInputConfigData {
 export interface DigitInputModelHost {
     readonly inputs: Signal<readonly ElementRef<HTMLInputElement>[]>;
     readonly outputAsString: Signal<boolean>;
+    readonly transform: Signal<DigitInputTransform>;
 }
 export declare const DigitInputConfigDataType: {
     readonly Input: "input";

package/lib/slider/range-slider/range-slider.component.d.ts

@@ -26,7 +26,7 @@ export declare class ArdiumRangeSliderComponent extends _AbstractSlider<SliderRa
     onTrackHitboxPointerDown(event: MouseEvent | TouchEvent): void;
     onPointerMove(event: MouseEvent | TouchEvent): void;
     protected _percentValueToValue(percent: number, handleId: number): SliderRange;
-    readonly currentHandle: import("@angular/core").WritableSignal<1 | 2 | null>;
+    readonly currentHandle: import("@angular/core").WritableSignal<2 | 1 | null>;
     onHandleFocus(event: FocusEvent, handleId: 1 | 2): void;
     onBlur(event: FocusEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumRangeSliderComponent, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "3.3.0",
+  "version": "3.4.2",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",

package/prebuilt-themes/default/inputs/digit-input.css

@@ -59,6 +59,7 @@ ard-digit-input {
   height: 100%;
   box-sizing: border-box;
   text-align: center;
+  color: var(--ard-text);
   caret-color: var(--ard-text3);
   background: var(--ard-appearance-background);
   border: var(--ard-appearance-border);

package/prebuilt-themes/default/inputs/digit-input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EAEE;EACA;;ACgBA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AD3CF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,aE3BE;EF4BF;EACA;EACA;EACA;;AAEA;EACE,OElCA;EFmCA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEA;EACE;;AAMJ;EACE,cE2BO;;AFvBT;EACE,kBEVK;EFWL,cELM;;AFSV;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA","file":"digit-input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/default/_mixins.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EAEE;EACA;;ACgBA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AD3CF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OE7BC;EF8BD,aE5BE;EF6BF;EACA;EACA;EACA;;AAEA;EACE,OEnCA;EFoCA;;AAGF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAIF;EACE;;AAIF;EACE;;AAEA;EACE;;AAMJ;EACE,cE0BO;;AFtBT;EACE,kBEXK;EFYL,cENM;;AFUV;EACE;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA","file":"digit-input.css"}

package/themes/default/inputs/digit-input.scss

@@ -34,6 +34,7 @@ ard-digit-input {
       height: 100%;
       box-sizing: border-box;
       text-align: center;
+      color: ARD.$text;
       caret-color: ARD.$text3;
       background: var(--ard-appearance-background);
       border: var(--ard-appearance-border);

package/themes/default/inputs/file-input.scss

@@ -1,79 +1,79 @@
-@use './shared' as inputMixin;
-@use '../mixins' as defaultMixins;
-@use '../clear-button' as CB;
-@use '../coloring' as CM;
-@use '../../variables' as ARD;
-
-.ard-file-input-form-field-frame {
-  .ard-form-field-overlay {
-    display: none;
-  }
-}
-.ard-file-input {
-  @include CM.typeColors();
-  @include inputMixin.genericInput();
-  padding: 0 0 0 0.375rem;
-  min-width: 10rem;
-  max-width: 100%;
-  gap: 0.125rem;
-  cursor: default;
-  border-radius: var(--ard-variant-border-radius);
-
-  *:not(button):not(ard-clear-button) {
-    pointer-events: none;
-    user-select: none;
-  }
-
-  &.ard-state-dragover {
-    outline: 2px solid var(--ard-cmpcl--content-light);
-  }
-
-  .ard-file-input__value {
-    font-size: 92%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: 1.25rem;
-  }
-  .ard-browse-button {
-    cursor: pointer;
-    height: calc(100% - 0.25rem);
-    margin: 0.125rem;
-    aspect-ratio: 1;
-    border: none;
-    background: none;
-    padding: 0;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    outline: none;
-
-    .ard-focus-overlay {
-      @include defaultMixins.focus-overlay();
-      background: ARD.$overlay;
-      border-radius: 9999px;
-    }
-    &:hover {
-      .ard-focus-overlay {
-        opacity: 4%;
-      }
-    }
-    &:focus {
-      .ard-focus-overlay {
-        opacity: 8%;
-      }
-    }
-    &:active {
-      .ard-focus-overlay {
-        opacity: 12%;
-      }
-    }
-    &:focus-visible {
-      .ard-focus-overlay {
-        opacity: 16%;
-      }
-    }
-  }
-
-  @include CB.clearButton();
-}
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@use '../coloring' as CM;
+@use '../../variables' as ARD;
+
+.ard-file-input-form-field-frame {
+  .ard-form-field-overlay {
+    display: none;
+  }
+}
+.ard-file-input {
+  @include CM.typeColors();
+  @include inputMixin.genericInput();
+  padding: 0 0 0 0.375rem;
+  min-width: 10rem;
+  max-width: 100%;
+  gap: 0.125rem;
+  cursor: default;
+  border-radius: var(--ard-variant-border-radius);
+
+  *:not(button):not(ard-clear-button) {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &.ard-state-dragover {
+    outline: 2px solid var(--ard-cmpcl--content-light);
+  }
+
+  .ard-file-input__value {
+    font-size: 92%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 1.25rem;
+  }
+  .ard-browse-button {
+    cursor: pointer;
+    height: calc(100% - 0.25rem);
+    margin: 0.125rem;
+    aspect-ratio: 1;
+    border: none;
+    background: none;
+    padding: 0;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    outline: none;
+
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay();
+      background: ARD.$overlay;
+      border-radius: 9999px;
+    }
+    &:hover {
+      .ard-focus-overlay {
+        opacity: 4%;
+      }
+    }
+    &:focus {
+      .ard-focus-overlay {
+        opacity: 8%;
+      }
+    }
+    &:active {
+      .ard-focus-overlay {
+        opacity: 12%;
+      }
+    }
+    &:focus-visible {
+      .ard-focus-overlay {
+        opacity: 16%;
+      }
+    }
+  }
+
+  @include CB.clearButton();
+}

package/themes/default/inputs/input.scss

@@ -1,46 +1,46 @@
-@use './shared' as inputMixin;
-@use '../mixins' as defaultMixins;
-@use '../clear-button' as CB;
-@use '../../variables' as ARD;
-
-.ard-input {
-  @include inputMixin.genericInput();
-  padding: 0 0.375rem;
-  min-width: 10rem;
-  max-width: 100%;
-
-  @include CB.clearButton();
-
-  .ard-autocomplete {
-    opacity: 37.5%;
-  }
-}
-//! suggestions
-.ard-input-suggestions-panel {
-  .ard-option {
-    padding: 0.375rem 0.625rem;
-    font-size: 1rem;
-    color: ARD.$text2;
-    cursor: pointer;
-
-    &.ard-option-highlighted {
-      background: ARD.$darken-overlay-light;
-    }
-
-    &.ard-option-selected {
-      font-weight: 500;
-      background: ARD.$darken-overlay-medium;
-    }
-
-    &.ard-option-disabled {
-      pointer-events: none;
-      opacity: 50%;
-    }
-  }
-  .ard-compact {
-    .ard-option {
-      padding: 0.25rem 0.5rem;
-      font-size: 0.9rem;
-    }
-  }
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@use '../../variables' as ARD;
+
+.ard-input {
+  @include inputMixin.genericInput();
+  padding: 0 0.375rem;
+  min-width: 10rem;
+  max-width: 100%;
+
+  @include CB.clearButton();
+
+  .ard-autocomplete {
+    opacity: 37.5%;
+  }
+}
+//! suggestions
+.ard-input-suggestions-panel {
+  .ard-option {
+    padding: 0.375rem 0.625rem;
+    font-size: 1rem;
+    color: ARD.$text2;
+    cursor: pointer;
+
+    &.ard-option-highlighted {
+      background: ARD.$darken-overlay-light;
+    }
+
+    &.ard-option-selected {
+      font-weight: 500;
+      background: ARD.$darken-overlay-medium;
+    }
+
+    &.ard-option-disabled {
+      pointer-events: none;
+      opacity: 50%;
+    }
+  }
+  .ard-compact {
+    .ard-option {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.9rem;
+    }
+  }
 }

package/themes/default/inputs/simple-input.scss

@@ -1,12 +1,12 @@
-@use './shared' as inputMixin;
-@use '../mixins' as defaultMixins;
-@use '../clear-button' as CB;
-
-.ard-simple-input {
-  @include inputMixin.genericInput();
-  padding: 0 0.375rem;
-  min-width: 10rem;
-  max-width: 100%;
-
-  @include CB.clearButton();
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+
+.ard-simple-input {
+  @include inputMixin.genericInput();
+  padding: 0 0.375rem;
+  min-width: 10rem;
+  max-width: 100%;
+
+  @include CB.clearButton();
 }