@ethlete/components 1.0.0-next.26 → 1.0.0-next.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.26",
+  "version": "1.0.0-next.27",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {

package/types/ethlete-components.d.ts

@@ -1110,7 +1110,7 @@ declare abstract class TextFieldControlDirective implements FormFieldControl {
     hidden: _angular_core.InputSignal<boolean>;
     invalid: _angular_core.InputSignal<boolean>;
     errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
-    required: _angular_core.InputSignal<boolean>;
+    required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     name: _angular_core.InputSignal<string>;
     /**
      * Author-supplied accessible name, forwarded onto the native control. Use this (or an
@@ -1267,7 +1267,7 @@ declare class CascaderDirective<T = unknown> implements FormValueControl<T | T[]
     disabled: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
     /** Multi-select: node activations toggle values instead of committing-and-closing. */
-    multiple: _angular_core.InputSignal<boolean>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     invalid: _angular_core.InputSignal<boolean>;
     errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
     required: _angular_core.InputSignal<boolean>;
@@ -1295,8 +1295,8 @@ declare class CascaderDirective<T = unknown> implements FormValueControl<T | T[]
      * level until it hits the viewport edge.
      */
     maxVisibleColumns: _angular_core.InputSignalWithTransform<number, number>;
-    opened: _angular_core.OutputEmitterRef<void>;
-    closed: _angular_core.OutputEmitterRef<void>;
+    afterOpen: _angular_core.OutputEmitterRef<void>;
+    afterClose: _angular_core.OutputEmitterRef<void>;
     shouldDisplayError: Signal<boolean>;
     /** The committed values, normalized to an array (one entry in single mode, empty for no value). */
     values: Signal<T[]>;
@@ -1479,7 +1479,7 @@ declare class CascaderDirective<T = unknown> implements FormValueControl<T | T[]
     private resolveAnchorElement;
     private handleFrameClick;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CascaderDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CascaderDirective<any>, "[etCascader]", ["etCascader"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "mixed": { "alias": "mixed"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "mixedLabel": { "alias": "mixedLabel"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "selectableLevels": { "alias": "selectableLevels"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "toErrorMessage": { "alias": "toErrorMessage"; "required": false; "isSignal": true; }; "mirrorPanelWidth": { "alias": "mirrorPanelWidth"; "required": false; "isSignal": true; }; "maxVisibleColumns": { "alias": "maxVisibleColumns"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "mixed": "mixedChange"; "touched": "touchedChange"; "open": "openChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CascaderDirective<any>, "[etCascader]", ["etCascader"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "mixed": { "alias": "mixed"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "mixedLabel": { "alias": "mixedLabel"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "selectableLevels": { "alias": "selectableLevels"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "toErrorMessage": { "alias": "toErrorMessage"; "required": false; "isSignal": true; }; "mirrorPanelWidth": { "alias": "mirrorPanelWidth"; "required": false; "isSignal": true; }; "maxVisibleColumns": { "alias": "maxVisibleColumns"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "mixed": "mixedChange"; "touched": "touchedChange"; "open": "openChange"; "afterOpen": "afterOpen"; "afterClose": "afterClose"; }, never, never, true, never>;
 }
 type CascaderSurfaceContext<T = unknown> = {
     $implicit: CascaderDirective<T>;
@@ -1709,7 +1709,7 @@ declare class CascaderComponent {
     /** Whether a breadcrumb's column is currently inside the window (its level is on screen). */
     protected isCrumbCurrent(columnIndex: number): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CascaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CascaderComponent, "et-cascader", never, { "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof CascaderDirective; inputs: { "value": "value"; "mixed": "mixed"; "touched": "touched"; "open": "open"; "dataSource": "dataSource"; "multiple": "multiple"; "selectableLevels": "selectableLevels"; "compareWith": "compareWith"; "toErrorMessage": "toErrorMessage"; "mirrorPanelWidth": "mirrorPanelWidth"; "maxVisibleColumns": "maxVisibleColumns"; "mixedLabel": "mixedLabel"; "placeholder": "placeholder"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; }; outputs: { "valueChange": "valueChange"; "mixedChange": "mixedChange"; "touchedChange": "touchedChange"; "openChange": "openChange"; "opened": "opened"; "closed": "closed"; }; }, { directive: typeof _ethlete_core.ColorInteractiveDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CascaderComponent, "et-cascader", never, { "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "backLabel": { "alias": "backLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof CascaderDirective; inputs: { "value": "value"; "mixed": "mixed"; "touched": "touched"; "open": "open"; "dataSource": "dataSource"; "multiple": "multiple"; "selectableLevels": "selectableLevels"; "compareWith": "compareWith"; "toErrorMessage": "toErrorMessage"; "mirrorPanelWidth": "mirrorPanelWidth"; "maxVisibleColumns": "maxVisibleColumns"; "mixedLabel": "mixedLabel"; "placeholder": "placeholder"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; }; outputs: { "valueChange": "valueChange"; "mixedChange": "mixedChange"; "touchedChange": "touchedChange"; "openChange": "openChange"; "afterOpen": "afterOpen"; "afterClose": "afterClose"; }; }, { directive: typeof _ethlete_core.ColorInteractiveDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const CASCADER_IMPORTS: readonly [typeof CascaderComponent, typeof CascaderPanelComponent, typeof CascaderDirective, typeof CascaderTriggerDirective, typeof CascaderSurfaceDirective, typeof CascaderColumnDirective, typeof CascaderNodeDirective, typeof CascaderSearchDirective, typeof CascaderSearchOptionDirective];
@@ -3325,7 +3325,7 @@ declare class NumberInputComponent {
     private destroyRef;
     private document;
     /** Renders −/+ stepper buttons with press-and-hold auto-repeat. */
-    stepper: _angular_core.InputSignal<boolean>;
+    stepper: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Accessible name of the increment stepper button. */
     incrementLabel: _angular_core.InputSignal<string>;
     /** Accessible name of the decrement stepper button. */
@@ -4492,7 +4492,7 @@ declare class MenuItemDirective {
     private sameElementTrigger;
     elementRef: ElementRef<HTMLElement>;
     private destroyRef;
-    disabled: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     closeOnActivate: _angular_core.InputSignal<boolean | undefined>;
     activate: _angular_core.OutputEmitterRef<MenuItemActivationEvent>;
     /** @internal The menu whose item list this item belongs to. */
@@ -4554,7 +4554,7 @@ declare class MenuSelectionGroupDirective implements MenuSelectionGroupDirective
     private multipleOverride;
     value: _angular_core.ModelSignal<unknown>;
     touched: _angular_core.ModelSignal<boolean>;
-    multipleInput: _angular_core.InputSignal<boolean>;
+    multipleInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignal<boolean>;
     invalid: _angular_core.InputSignal<boolean>;
     errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
@@ -4970,7 +4970,7 @@ declare class OtpInputDirective implements FormValueControl<string>, FormFieldCo
     /** Renders dots instead of the typed characters (PIN entry). */
     masked: _angular_core.InputSignal<boolean>;
     /** Emits once each time the value reaches the full length. */
-    completed: _angular_core.OutputEmitterRef<string>;
+    complete: _angular_core.OutputEmitterRef<string>;
     shouldDisplayError: _angular_core.Signal<boolean>;
     hasValue: _angular_core.Signal<boolean>;
     describedBy: _angular_core.WritableSignal<string | null>;
@@ -5001,7 +5001,7 @@ declare class OtpInputDirective implements FormValueControl<string>, FormFieldCo
     /** @internal Keeps the caret at the end — arrow/Home keys would detach it from the segment display. */
     handleNativeSelectionEvent(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OtpInputDirective, "[etOtpInput]", ["etOtpInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "charset": { "alias": "charset"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OtpInputDirective, "[etOtpInput]", ["etOtpInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "charset": { "alias": "charset"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "complete": "complete"; }, never, never, true, never>;
 }
 
 declare class OtpInputComponent {
@@ -5034,7 +5034,7 @@ declare class OtpInputComponent {
     protected segmentIndexes: _angular_core.Signal<number[]>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "et-otp-input", never, {}, {}, never, ["*", "et-hint"], true, [{ directive: typeof FormFieldDirective; inputs: {}; outputs: {}; }, { directive: typeof OtpInputDirective; inputs: { "value": "value"; "touched": "touched"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; "length": "length"; "charset": "charset"; "masked": "masked"; }; outputs: { "valueChange": "valueChange"; "touchedChange": "touchedChange"; "completed": "completed"; }; }, { directive: typeof _ethlete_core.ProvideColorDirective; inputs: { "etProvideColor": "color"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "et-otp-input", never, {}, {}, never, ["*", "et-hint"], true, [{ directive: typeof FormFieldDirective; inputs: {}; outputs: {}; }, { directive: typeof OtpInputDirective; inputs: { "value": "value"; "touched": "touched"; "disabled": "disabled"; "readonly": "readonly"; "invalid": "invalid"; "errors": "errors"; "required": "required"; "name": "name"; "length": "length"; "charset": "charset"; "masked": "masked"; }; outputs: { "valueChange": "valueChange"; "touchedChange": "touchedChange"; "complete": "complete"; }; }, { directive: typeof _ethlete_core.ProvideColorDirective; inputs: { "etProvideColor": "color"; }; outputs: {}; }]>;
 }
 
 declare const OTP_INPUT_IMPORTS: readonly [typeof OtpInputComponent, typeof OtpInputDirective];
@@ -5586,8 +5586,8 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     mixed: _angular_core.ModelSignal<boolean>;
     touched: _angular_core.ModelSignal<boolean>;
     open: _angular_core.ModelSignal<boolean>;
-    multiple: _angular_core.InputSignal<boolean>;
-    disabled: _angular_core.InputSignal<boolean>;
+    multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly: _angular_core.InputSignal<boolean>;
     invalid: _angular_core.InputSignal<boolean>;
     errors: _angular_core.InputSignal<readonly ValidationError.WithOptionalFieldTree[]>;
@@ -5623,7 +5623,7 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     /** Maximum number of selected values (multi select) — further adds are ignored. */
     maxSelection: _angular_core.InputSignal<number | undefined>;
     /** Renders an "Add new" row in `et-select`'s panel — clicking it emits `addNew`. */
-    allowAddNew: _angular_core.InputSignal<boolean>;
+    allowAddNew: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Async option state — rendered by `et-select` as a loading row inside the panel. */
     loadingInput: _angular_core.InputSignal<boolean>;
     /** Async option state — rendered by `et-select` as an error row inside the panel. */
@@ -5631,13 +5631,13 @@ declare class SelectDirective implements FormValueControl<unknown>, FormFieldCon
     /** Async option state — `et-select` renders a load-more control emitting `loadMore`. */
     hasMoreItemsInput: _angular_core.InputSignal<boolean>;
     /** Whether the panel mirrors the anchor's width. Off for compact triggers (e.g. a country picker). */
-    mirrorPanelWidth: _angular_core.InputSignal<boolean>;
+    mirrorPanelWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Fire-and-forget picker mode (single select): committing an option emits `pickOption`
      * without ever writing `value`, so the select stays empty and can feed an external list
      * without the set-then-clear dance. No effect in multi select.
      */
-    pickOnly: _angular_core.InputSignal<boolean>;
+    pickOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     queryChange: _angular_core.OutputEmitterRef<string>;
     loadMore: _angular_core.OutputEmitterRef<void>;
     /** The user picked the "Add new" row (`allowAddNew`). Emits the current search query for prefilling. */
@@ -5880,13 +5880,13 @@ declare class SelectOptionDirective {
     value: _angular_core.InputSignal<unknown>;
     /** Display label. Falls back to the element's text content rendered on first paint. */
     labelInput: _angular_core.InputSignal<string>;
-    disabled: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Marks the option as the select's "Create …" row for the current `customValueCandidate` —
      * it is excluded from the candidate's duplicate-label check (it would otherwise hide
      * itself, since its label *is* the candidate).
      */
-    customValueOption: _angular_core.InputSignal<boolean>;
+    customValueOption: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private optionId;
     private textLabel;
     label: _angular_core.Signal<string>;
@@ -6253,7 +6253,7 @@ declare class SelectionListDirective implements SelectionListDirectiveBase, Form
      */
     mixed: _angular_core.ModelSignal<boolean>;
     touched: _angular_core.ModelSignal<boolean>;
-    multipleInput: _angular_core.InputSignal<boolean>;
+    multipleInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disabled: _angular_core.InputSignal<boolean>;
     /** View-only: options keep their normal look and focusability but cannot be (de)selected. */
     readonly: _angular_core.InputSignal<boolean>;
@@ -6323,7 +6323,7 @@ declare class SelectionOptionDirective {
     private el;
     value: _angular_core.InputSignal<unknown>;
     checked: _angular_core.ModelSignal<boolean>;
-    disabled: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     effectiveDisabled: _angular_core.Signal<boolean>;
     effectiveReadonly: _angular_core.Signal<boolean>;
     role: _angular_core.Signal<"checkbox" | "radio">;
@@ -6733,7 +6733,7 @@ declare class SwitchDirective implements FormFieldControl {
      */
     indeterminate: _angular_core.ModelSignal<boolean>;
     touched: _angular_core.ModelSignal<boolean>;
-    disabled: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** View-only: keeps the normal look and focusability but blocks toggling (unlike `disabled`). */
     readonly: _angular_core.InputSignal<boolean>;
     invalid: _angular_core.InputSignal<boolean>;
@@ -9239,7 +9239,7 @@ declare class ScrollableSnapDirective {
 
 declare class ScrollableComponent {
     scrollableDir: ScrollableDirective;
-    renderMasks: _angular_core.InputSignal<boolean>;
+    renderMasks: _angular_core.InputSignalWithTransform<boolean, unknown>;
     maskVariant: _angular_core.InputSignal<ScrollableMaskVariant>;
     renderButtons: _angular_core.InputSignal<boolean>;
     buttonPosition: _angular_core.InputSignal<ScrollableButtonPosition>;