yukit-web 0.0.23 → 0.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yukit-web",
   "description": "Angular UI component library for Yurest web applications.",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "author": {
     "name": "Yurest Solutions",
     "email": "develop@yurest.com"

package/types/yukit-web.d.ts

@@ -132,6 +132,8 @@ interface YuwTextFieldContract {
     readonly readonly: InputSignalWithTransform<boolean, unknown>;
     readonly required: InputSignalWithTransform<boolean, unknown>;
     readonly invalid: InputSignalWithTransform<boolean, unknown>;
+    readonly helperText: InputSignal<string | undefined>;
+    readonly errorText: InputSignal<string | undefined>;
     readonly name: InputSignal<string | undefined>;
     readonly autocomplete: InputSignal<string | undefined>;
 }
@@ -678,7 +680,11 @@ declare const YuwAccordionImports: readonly [typeof YuwAccordion, typeof YuwAcco
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `maxlength`: Hard cap on character count, enforced natively by the browser.
@@ -702,6 +708,8 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     private readonly _rightAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly inputmode: _angular_core.InputSignal<YuwInputModeDto | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -726,7 +734,7 @@ declare class YuwInputComponent extends YuwValueAccessorBase<string> implements
     protected onChange(): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputComponent, "yuw-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
 }
 
 /**
@@ -754,7 +762,11 @@ declare const YuwInputAddonImports: readonly [typeof YuwLeftAddonDirective, type
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
@@ -776,6 +788,8 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
     private readonly _rightAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly maxlength: _angular_core.InputSignal<number | undefined>;
@@ -798,7 +812,7 @@ declare class YuwTextareaComponent extends YuwValueAccessorBase<string> implemen
     protected onChange(): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwTextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTextareaComponent, "yuw-textarea", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwTextareaComponent, "yuw-textarea", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; }, ["_leftAddons", "_rightAddons"], ["yuw-left-addon", "yuw-right-addon"], true, never>;
 }
 
 /**
@@ -818,7 +832,11 @@ type YuwSearchInputCollapseFromDto = 'left' | 'right';
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute.
  * - `placeholder`: Hint text shown inside the empty field.
@@ -871,8 +889,10 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     readonly clearAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly collapseFrom: _angular_core.InputSignal<YuwSearchInputCollapseFromDto | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly expandAriaLabel: _angular_core.InputSignal<string | undefined>;
     readonly expandedWidth: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly name: _angular_core.InputSignal<string | undefined>;
@@ -921,7 +941,7 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
     protected onExpandFocus(event: FocusEvent): void;
     protected onInput(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwSearchInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "searched": "searched"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwSearchInputComponent, "yuw-search-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "clearAriaLabel": { "alias": "clearAriaLabel"; "required": false; "isSignal": true; }; "collapseFrom": { "alias": "collapseFrom"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "expandAriaLabel": { "alias": "expandAriaLabel"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "committed": "committed"; "searched": "searched"; }, never, never, true, never>;
 }
 
 /**
@@ -934,7 +954,11 @@ declare class YuwSearchInputComponent extends YuwValueAccessorBase<string> imple
  * - `disabled`: Disables input interaction.
  * - `readonly`: Makes the field read-only.
  * - `required`: Marks the field as required.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `name`: HTML `name` attribute.
  * - `autocomplete`: Native `autocomplete` attribute (e.g. `'current-password'`, `'new-password'`).
  * - `placeholder`: Hint text shown inside the empty field.
@@ -955,6 +979,8 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     private readonly _leftAddons;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly masked: _angular_core.ModelSignal<boolean>;
@@ -978,7 +1004,7 @@ declare class YuwPasswordInputComponent extends YuwValueAccessorBase<string> imp
     protected onInput(event: Event): void;
     protected onToggleReveal(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwPasswordInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "masked": "maskedChange"; "value": "valueChange"; "committed": "committed"; }, ["_leftAddons"], ["yuw-left-addon"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwPasswordInputComponent, "yuw-password-input", never, { "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "masked": { "alias": "masked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "revealAriaLabel": { "alias": "revealAriaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "masked": "maskedChange"; "value": "valueChange"; "committed": "committed"; }, ["_leftAddons"], ["yuw-left-addon"], true, never>;
 }
 
 /**
@@ -1010,7 +1036,11 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
  * - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
  * - `disabled`: Disables input interaction.
  * - `size`: Cell size, matching the `<yuw-button>` of the same name.
- * - `invalid`: Forces invalid styling.
+ * - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
+ * - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
+ * - `errorText`: Error shown under the field while it is in its error state (form validation or
+ *   `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
+ *   reactive forms); required when no such message exists.
  * - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
  * - `transformPaste`: Normalizes pasted text before it fills the slots.
  * - `class`: Extra classes merged onto the OTP container.
@@ -1027,7 +1057,9 @@ type YuwInputOtpModeDto = 'numeric' | 'text';
 declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     readonly autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly errorText: _angular_core.InputSignal<string | undefined>;
     readonly groupSizes: _angular_core.InputSignal<readonly number[]>;
+    readonly helperText: _angular_core.InputSignal<string | undefined>;
     readonly inputId: _angular_core.InputSignal<string | undefined>;
     readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly mode: _angular_core.InputSignal<YuwInputOtpModeDto>;
@@ -1045,7 +1077,7 @@ declare class YuwInputOtpComponent extends YuwValueAccessorBase<string> {
     protected _emptyValue(): string;
     protected onValueChange(next: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuwInputOtpComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuwInputOtpComponent, "yuw-input-otp", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "groupSizes": { "alias": "groupSizes"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "transformPaste": { "alias": "transformPaste"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
 }
 
 /**