yukit-web 0.0.23 → 0.0.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.npm/_cacache/content-v2/sha512/{2e/ff/c6bbe5fd759f3e97724a84703ca512cca7f49b9924651cc9e2f0ad573d1959f0b70c9080aab42e0b51ada45394bf0f4defb48b996d0f59df5f13c06e9e56 → 0a/f4/f46ee944cfa56515f59919c37e36555549b9673a225f9cbb8f10a9c442169efcbee8ae7653b6cb06d383370553ab9ad1a94e7b61260a83938a1620699125} +1 -1
- package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
- package/.npm/_logs/{2026-09-24T13_47_13_614Z-debug-0.log → 2026-09-28T08_26_46_654Z-debug-0.log} +10 -10
- package/.npm/_logs/{2026-09-24T13_47_14_100Z-debug-0.log → 2026-09-28T08_26_47_112Z-debug-0.log} +2 -2
- package/fesm2022/yukit-web.mjs +122 -25
- package/fesm2022/yukit-web.mjs.map +1 -1
- package/package.json +1 -1
- package/types/yukit-web.d.ts +42 -10
package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
|
|
2
|
-
|
|
2
|
+
81b0f5b3da941741f41e06940aed1e58c83a08ef {"key":"make-fetch-happen:request-cache:https://registry.npmjs.org/yukit-web","integrity":"sha512-CvT0bulEz6VlFfWZGcN+NlVVSblnOiJfnLuPEKnEQhae/L7ornZTtssG04M3BVOrmtGpTnthJgqDk4oWIGmRJQ==","time":1790584007042,"size":282420,"metadata":{"time":1790584007027,"url":"https://registry.npmjs.org/yukit-web","reqHeaders":{"accept":"application/json"},"resHeaders":{"cache-control":"public, max-age=300","content-encoding":"gzip","content-type":"application/json","date":"Mon, 28 Sep 2026 08:26:47 GMT","etag":"W/\"59869f745ad95999d2d10e516d921cf9\"","last-modified":"Thu, 24 Sep 2026 13:53:27 GMT","vary":"accept-encoding, accept"},"options":{"compress":true}}}
|
package/.npm/_logs/{2026-09-24T13_47_13_614Z-debug-0.log → 2026-09-28T08_26_46_654Z-debug-0.log}
RENAMED
|
@@ -5,24 +5,24 @@
|
|
|
5
5
|
4 silly config load:file:/builds/yurest/yurest-ui/dist/yukit-web/.npmrc
|
|
6
6
|
5 silly config load:file:/root/.npmrc
|
|
7
7
|
6 silly config load:file:/usr/local/etc/npmrc
|
|
8
|
-
7 verbose title npm view yukit-web@0.0.
|
|
9
|
-
8 verbose argv "view" "yukit-web@0.0.
|
|
10
|
-
9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-
|
|
11
|
-
10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-
|
|
8
|
+
7 verbose title npm view yukit-web@0.0.24 version
|
|
9
|
+
8 verbose argv "view" "yukit-web@0.0.24" "version"
|
|
10
|
+
9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-28T08_26_46_654Z-
|
|
11
|
+
10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-28T08_26_46_654Z-debug-0.log
|
|
12
12
|
11 silly logfile done cleaning log files
|
|
13
|
-
12 http fetch GET 200 https://registry.npmjs.org/yukit-web
|
|
14
|
-
13 verbose stack Error: No match found for version 0.0.
|
|
13
|
+
12 http fetch GET 200 https://registry.npmjs.org/yukit-web 204ms (cache miss)
|
|
14
|
+
13 verbose stack Error: No match found for version 0.0.24
|
|
15
15
|
13 verbose stack at #getData (/usr/local/lib/node_modules/npm/lib/commands/view.js:192:27)
|
|
16
16
|
13 verbose stack at async #viewPackage (/usr/local/lib/node_modules/npm/lib/commands/view.js:112:28)
|
|
17
17
|
13 verbose stack at async View.exec (/usr/local/lib/node_modules/npm/lib/commands/view.js:70:5)
|
|
18
18
|
13 verbose stack at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:207:9)
|
|
19
19
|
13 verbose stack at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5)
|
|
20
20
|
14 verbose statusCode 404
|
|
21
|
-
15 verbose pkgid yukit-web@0.0.
|
|
21
|
+
15 verbose pkgid yukit-web@0.0.24
|
|
22
22
|
16 error code E404
|
|
23
|
-
17 error 404 No match found for version 0.0.
|
|
23
|
+
17 error 404 No match found for version 0.0.24
|
|
24
24
|
18 error 404
|
|
25
|
-
19 error 404 'yukit-web@0.0.
|
|
25
|
+
19 error 404 'yukit-web@0.0.24' is not in this registry.
|
|
26
26
|
20 error 404
|
|
27
27
|
21 error 404 Note that you can also install from a
|
|
28
28
|
22 error 404 tarball, folder, http url, or git url.
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
26 verbose npm v10.9.9
|
|
33
33
|
27 verbose exit 1
|
|
34
34
|
28 verbose code 1
|
|
35
|
-
29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-
|
|
35
|
+
29 error A complete log of this run can be found in: /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-28T08_26_46_654Z-debug-0.log
|
package/.npm/_logs/{2026-09-24T13_47_14_100Z-debug-0.log → 2026-09-28T08_26_47_112Z-debug-0.log}
RENAMED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
6 silly config load:file:/usr/local/etc/npmrc
|
|
8
8
|
7 verbose title npm publish
|
|
9
9
|
8 verbose argv "publish" "--access" "public"
|
|
10
|
-
9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-
|
|
11
|
-
10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-
|
|
10
|
+
9 verbose logfile logs-max:10 dir:/builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-28T08_26_47_112Z-
|
|
11
|
+
10 verbose logfile /builds/yurest/yurest-ui/dist/yukit-web/.npm/_logs/2026-09-28T08_26_47_112Z-debug-0.log
|
|
12
12
|
11 silly logfile done cleaning log files
|
|
13
13
|
12 verbose publish [ '.' ]
|
|
14
14
|
13 silly packumentCache heap:2197815296 maxSize:549453824 maxEntrySize:274726912
|
package/fesm2022/yukit-web.mjs
CHANGED
|
@@ -19,9 +19,11 @@ import { HlmPagination, HlmPaginationContent, HlmPaginationItem, HlmPaginationLi
|
|
|
19
19
|
import * as i1$2 from 'yukit-web/helm/combobox';
|
|
20
20
|
import { HlmComboboxContent, HlmComboboxImports } from 'yukit-web/helm/combobox';
|
|
21
21
|
import { HlmAccordion, HlmAccordionItem, HlmAccordionTrigger, HlmAccordionContent } from 'yukit-web/helm/accordion';
|
|
22
|
+
import { HlmField, HlmFieldDescription } from 'yukit-web/helm/field';
|
|
22
23
|
import { HlmInput } from 'yukit-web/helm/input';
|
|
23
24
|
import * as i1$3 from 'yukit-web/helm/input-group';
|
|
24
25
|
import { HlmInputGroup, HlmInputGroupInput, HlmInputGroupAddon, HlmInputGroupTextarea, HlmInputGroupImports } from 'yukit-web/helm/input-group';
|
|
26
|
+
import { BrnField } from '@spartan-ng/brain/field';
|
|
25
27
|
import { HlmTextarea } from 'yukit-web/helm/textarea';
|
|
26
28
|
import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
|
|
27
29
|
import * as i1$4 from 'yukit-web/helm/input-otp';
|
|
@@ -945,6 +947,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
945
947
|
}] });
|
|
946
948
|
const YuwInputAddonImports = [YuwLeftAddonDirective, YuwRightAddonDirective];
|
|
947
949
|
|
|
950
|
+
/**
|
|
951
|
+
* Resolves the error state and feedback line of a text control's `hlm-field`: the error, or nothing
|
|
952
|
+
* (the template then falls back to the helper text).
|
|
953
|
+
*
|
|
954
|
+
* Sits on the `hlm-field` itself because `hlm-field-description` registers its id with the field
|
|
955
|
+
* through a `host`-scoped injection, so feedback markup has to live in the same template as the
|
|
956
|
+
* field and cannot be moved into a child component.
|
|
957
|
+
*
|
|
958
|
+
* - `errorText`: explicit error copy. Wins over the form's own message, so a consumer can always
|
|
959
|
+
* override it, and is the only source outside forms or for validators that carry no message
|
|
960
|
+
* (e.g. the built-in `Validators.required`, which yields `true`).
|
|
961
|
+
* - `invalid`: the component's own `invalid` input. Held back until the first blur — any `focusout`
|
|
962
|
+
* inside the field, typed into or not — so a pristine field doesn't flag errors while the user is
|
|
963
|
+
* still writing; from then on it applies live.
|
|
964
|
+
* - `forcedInvalid`: `invalid` once blurred; bind it to the control's `forceInvalid`.
|
|
965
|
+
* - `errorMessage`: `errorText`, else the first `message` on the bound control's validation
|
|
966
|
+
* errors — signal forms attach one to every error, reactive validators when they return
|
|
967
|
+
* `{ key: { message } }`.
|
|
968
|
+
* - `showError`: a message exists and the field is in its error state, either the form's (Spartan's
|
|
969
|
+
* `ErrorStateMatcher`: invalid and touched or submitted, already blur-gated by the form) or
|
|
970
|
+
* `forcedInvalid`.
|
|
971
|
+
*/
|
|
972
|
+
class YuwFieldFeedbackDirective {
|
|
973
|
+
constructor() {
|
|
974
|
+
this._field = inject(BrnField, { self: true });
|
|
975
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
976
|
+
this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
977
|
+
this._blurred = signal(false, ...(ngDevMode ? [{ debugName: "_blurred" }] : /* istanbul ignore next */ []));
|
|
978
|
+
this.errorMessage = computed(() => this.errorText() ?? firstErrorMessage(this._field.errors()), ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
979
|
+
this.forcedInvalid = computed(() => this.invalid() && this._blurred(), ...(ngDevMode ? [{ debugName: "forcedInvalid" }] : /* istanbul ignore next */ []));
|
|
980
|
+
this.showError = computed(() => this.errorMessage() !== undefined && (this.forcedInvalid() || !!this._field.controlState()?.spartanInvalid), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
981
|
+
}
|
|
982
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
983
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFieldFeedbackDirective, isStandalone: true, selector: "hlm-field[yuwFieldFeedback]", inputs: { errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "_blurred.set(true)" } }, exportAs: ["yuwFieldFeedback"], ngImport: i0 }); }
|
|
984
|
+
}
|
|
985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFieldFeedbackDirective, decorators: [{
|
|
986
|
+
type: Directive,
|
|
987
|
+
args: [{
|
|
988
|
+
selector: 'hlm-field[yuwFieldFeedback]',
|
|
989
|
+
exportAs: 'yuwFieldFeedback',
|
|
990
|
+
host: {
|
|
991
|
+
'(focusout)': '_blurred.set(true)',
|
|
992
|
+
},
|
|
993
|
+
}]
|
|
994
|
+
}], propDecorators: { errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
|
|
995
|
+
function firstErrorMessage(errors) {
|
|
996
|
+
return Object.values(errors ?? {}).find((error) => typeof error?.message === 'string')?.message;
|
|
997
|
+
}
|
|
998
|
+
|
|
948
999
|
/** Module-level counter backing each instance's stable fallback `id`. */
|
|
949
1000
|
let nextYuwInputId = 0;
|
|
950
1001
|
/**
|
|
@@ -961,7 +1012,11 @@ let nextYuwInputId = 0;
|
|
|
961
1012
|
* - `disabled`: Disables input interaction.
|
|
962
1013
|
* - `readonly`: Makes the field read-only.
|
|
963
1014
|
* - `required`: Marks the field as required.
|
|
964
|
-
* - `invalid`: Forces invalid styling.
|
|
1015
|
+
* - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
|
|
1016
|
+
* - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
|
|
1017
|
+
* - `errorText`: Error shown under the field while it is in its error state (form validation or
|
|
1018
|
+
* `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
|
|
1019
|
+
* reactive forms); required when no such message exists.
|
|
965
1020
|
* - `name`: HTML `name` attribute.
|
|
966
1021
|
* - `autocomplete`: Native `autocomplete` attribute.
|
|
967
1022
|
* - `maxlength`: Hard cap on character count, enforced natively by the browser.
|
|
@@ -987,6 +1042,8 @@ class YuwInputComponent extends YuwValueAccessorBase {
|
|
|
987
1042
|
this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
|
|
988
1043
|
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
989
1044
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1045
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1046
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
990
1047
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
991
1048
|
this.inputmode = input(undefined, ...(ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []));
|
|
992
1049
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -1018,14 +1075,22 @@ class YuwInputComponent extends YuwValueAccessorBase {
|
|
|
1018
1075
|
this._commit(event.target.value);
|
|
1019
1076
|
}
|
|
1020
1077
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1021
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasAddons()) {\n
|
|
1078
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputComponent, isStandalone: true, selector: "yuw-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"inline-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <input\n hlmInput\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1022
1079
|
}
|
|
1023
1080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputComponent, decorators: [{
|
|
1024
1081
|
type: Component,
|
|
1025
|
-
args: [{ selector: 'yuw-input', imports: [
|
|
1082
|
+
args: [{ selector: 'yuw-input', imports: [
|
|
1083
|
+
HlmField,
|
|
1084
|
+
HlmFieldDescription,
|
|
1085
|
+
YuwFieldFeedbackDirective,
|
|
1086
|
+
HlmInput,
|
|
1087
|
+
HlmInputGroup,
|
|
1088
|
+
HlmInputGroupInput,
|
|
1089
|
+
HlmInputGroupAddon,
|
|
1090
|
+
], providers: [provideValueAccessor(YuwInputComponent)], host: {
|
|
1026
1091
|
class: 'contents',
|
|
1027
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (_hasAddons()) {\n
|
|
1028
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1092
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"inline-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <input\n hlmInput\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [type]=\"type()\"\n [attr.inputmode]=\"inputmode()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1093
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1029
1094
|
|
|
1030
1095
|
let nextYuwTextareaId = 0;
|
|
1031
1096
|
/**
|
|
@@ -1037,7 +1102,11 @@ let nextYuwTextareaId = 0;
|
|
|
1037
1102
|
* - `disabled`: Disables input interaction.
|
|
1038
1103
|
* - `readonly`: Makes the field read-only.
|
|
1039
1104
|
* - `required`: Marks the field as required.
|
|
1040
|
-
* - `invalid`: Forces invalid styling.
|
|
1105
|
+
* - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
|
|
1106
|
+
* - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
|
|
1107
|
+
* - `errorText`: Error shown under the field while it is in its error state (form validation or
|
|
1108
|
+
* `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
|
|
1109
|
+
* reactive forms); required when no such message exists.
|
|
1041
1110
|
* - `name`: HTML `name` attribute.
|
|
1042
1111
|
* - `autocomplete`: Native `autocomplete` attribute.
|
|
1043
1112
|
* - `rows`: Fallback visible height in lines where `field-sizing` is unsupported; ignored otherwise.
|
|
@@ -1061,6 +1130,8 @@ class YuwTextareaComponent extends YuwValueAccessorBase {
|
|
|
1061
1130
|
this._rightAddons = contentChildren(YuwRightAddonDirective, ...(ngDevMode ? [{ debugName: "_rightAddons" }] : /* istanbul ignore next */ []));
|
|
1062
1131
|
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1063
1132
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1133
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1134
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1064
1135
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1065
1136
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1066
1137
|
this.maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
|
|
@@ -1090,14 +1161,22 @@ class YuwTextareaComponent extends YuwValueAccessorBase {
|
|
|
1090
1161
|
this._commit(event.target.value);
|
|
1091
1162
|
}
|
|
1092
1163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1093
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n
|
|
1164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwTextareaComponent, isStandalone: true, selector: "yuw-textarea", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwTextareaComponent)], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }, { propertyName: "_rightAddons", predicate: YuwRightAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"block-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <textarea\n hlmInputGroupTextarea\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"block-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <textarea\n hlmTextarea\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmTextarea, selector: "[hlmTextarea]" }, { kind: "directive", type: HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: HlmInputGroupTextarea, selector: "textarea[hlmInputGroupTextarea]" }, { kind: "directive", type: HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1094
1165
|
}
|
|
1095
1166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwTextareaComponent, decorators: [{
|
|
1096
1167
|
type: Component,
|
|
1097
|
-
args: [{ selector: 'yuw-textarea', imports: [
|
|
1168
|
+
args: [{ selector: 'yuw-textarea', imports: [
|
|
1169
|
+
HlmField,
|
|
1170
|
+
HlmFieldDescription,
|
|
1171
|
+
YuwFieldFeedbackDirective,
|
|
1172
|
+
HlmTextarea,
|
|
1173
|
+
HlmInputGroup,
|
|
1174
|
+
HlmInputGroupTextarea,
|
|
1175
|
+
HlmInputGroupAddon,
|
|
1176
|
+
], providers: [provideValueAccessor(YuwTextareaComponent)], host: {
|
|
1098
1177
|
class: 'contents',
|
|
1099
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n@if (_hasAddons()) {\n
|
|
1100
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1178
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- The control is repeated in both branches on purpose: a shared ng-template cannot express it,\n because the two variants differ in a statically-matched directive (hlmInputGroupTextarea vs\n hlmTextarea) and Angular resolves directives at compile time \u2014 a single template would drag the\n group's reset classes into the bare case (or vice versa). Keep the binding lists in sync. -->\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n @if (_hasAddons()) {\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"block-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <textarea\n hlmInputGroupTextarea\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n\n @if (_hasRightAddon()) {\n <hlm-input-group-addon align=\"block-end\">\n <ng-content select=\"yuw-right-addon\" />\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n } @else {\n <textarea\n hlmTextarea\n [class]=\"_classes()\"\n [id]=\"_inputId()\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.rows]=\"rows()\"\n [attr.maxlength]=\"maxlength()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n ></textarea>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1179
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], _rightAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwRightAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1101
1180
|
|
|
1102
1181
|
/**
|
|
1103
1182
|
* Class map for the collapsible wrapper of `yuw-search-input`.
|
|
@@ -1272,7 +1351,11 @@ let nextYuwSearchInputId = 0;
|
|
|
1272
1351
|
* - `disabled`: Disables input interaction.
|
|
1273
1352
|
* - `readonly`: Makes the field read-only.
|
|
1274
1353
|
* - `required`: Marks the field as required.
|
|
1275
|
-
* - `invalid`: Forces invalid styling.
|
|
1354
|
+
* - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
|
|
1355
|
+
* - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
|
|
1356
|
+
* - `errorText`: Error shown under the field while it is in its error state (form validation or
|
|
1357
|
+
* `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
|
|
1358
|
+
* reactive forms); required when no such message exists.
|
|
1276
1359
|
* - `name`: HTML `name` attribute.
|
|
1277
1360
|
* - `autocomplete`: Native `autocomplete` attribute.
|
|
1278
1361
|
* - `placeholder`: Hint text shown inside the empty field.
|
|
@@ -1327,8 +1410,10 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1327
1410
|
this.clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1328
1411
|
this.collapseFrom = input(undefined, ...(ngDevMode ? [{ debugName: "collapseFrom" }] : /* istanbul ignore next */ []));
|
|
1329
1412
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1413
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1330
1414
|
this.expandAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "expandAriaLabel" }] : /* istanbul ignore next */ []));
|
|
1331
1415
|
this.expandedWidth = input('16rem', ...(ngDevMode ? [{ debugName: "expandedWidth" }] : /* istanbul ignore next */ []));
|
|
1416
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1332
1417
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1333
1418
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1334
1419
|
this.name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
@@ -1416,14 +1501,14 @@ class YuwSearchInputComponent extends YuwValueAccessorBase {
|
|
|
1416
1501
|
this.searched.emit(next);
|
|
1417
1502
|
}
|
|
1418
1503
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n
|
|
1504
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwSearchInputComponent, isStandalone: true, selector: "yuw-search-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseFrom: { classPropertyName: "collapseFrom", publicName: "collapseFrom", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandedWidth: { classPropertyName: "expandedWidth", publicName: "expandedWidth", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", committed: "committed", searched: "searched" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], viewQueries: [{ propertyName: "_input", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n <hlm-input-group [class]=\"_classes()\">\n <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n @if (_showExpandButton()) {\n <button\n hlmInputGroupButton\n size=\"icon-sm\"\n [class]=\"_expandButtonClasses()\"\n [attr.aria-label]=\"expandAriaLabel()\"\n [attr.aria-expanded]=\"false\"\n (focus)=\"onExpandFocus($event)\"\n (click)=\"onExpand()\"\n >\n <ng-icon name=\"lucideSearch\" />\n </button>\n } @else {\n <ng-icon name=\"lucideSearch\" />\n }\n </hlm-input-group-addon>\n\n <input\n #searchInput\n hlmInputGroupInput\n [class]=\"_fieldClasses()\"\n [id]=\"_inputId()\"\n type=\"text\"\n inputmode=\"search\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.tabindex]=\"expanded() ? null : -1\"\n [attr.aria-hidden]=\"expanded() ? null : true\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (blur)=\"onBlur()\"\n />\n\n @if (_showClear()) {\n <hlm-input-group-addon align=\"inline-end\">\n <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n <ng-icon name=\"lucideX\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n </div>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1420
1505
|
}
|
|
1421
1506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwSearchInputComponent, decorators: [{
|
|
1422
1507
|
type: Component,
|
|
1423
|
-
args: [{ selector: 'yuw-search-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
|
|
1508
|
+
args: [{ selector: 'yuw-search-input', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, ...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwSearchInputComponent), provideIcons({ lucideSearch, lucideX })], host: {
|
|
1424
1509
|
class: 'contents',
|
|
1425
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n
|
|
1426
|
-
}], propDecorators: { _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
1510
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <div [class]=\"_wrapperClasses()\" [style.max-width]=\"_wrapperMaxWidth()\">\n <hlm-input-group [class]=\"_classes()\">\n <hlm-input-group-addon align=\"inline-start\" [class]=\"_iconClasses()\">\n @if (_showExpandButton()) {\n <button\n hlmInputGroupButton\n size=\"icon-sm\"\n [class]=\"_expandButtonClasses()\"\n [attr.aria-label]=\"expandAriaLabel()\"\n [attr.aria-expanded]=\"false\"\n (focus)=\"onExpandFocus($event)\"\n (click)=\"onExpand()\"\n >\n <ng-icon name=\"lucideSearch\" />\n </button>\n } @else {\n <ng-icon name=\"lucideSearch\" />\n }\n </hlm-input-group-addon>\n\n <input\n #searchInput\n hlmInputGroupInput\n [class]=\"_fieldClasses()\"\n [id]=\"_inputId()\"\n type=\"text\"\n inputmode=\"search\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.tabindex]=\"expanded() ? null : -1\"\n [attr.aria-hidden]=\"expanded() ? null : true\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n (keydown.escape)=\"onEscape()\"\n (blur)=\"onBlur()\"\n />\n\n @if (_showClear()) {\n <hlm-input-group-addon align=\"inline-end\">\n <button hlmInputGroupButton size=\"icon-xs\" [attr.aria-label]=\"clearAriaLabel()\" (click)=\"onClear()\">\n <ng-icon name=\"lucideX\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n </div>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1511
|
+
}], propDecorators: { _input: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], collapseFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseFrom", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], expandedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedWidth", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
1427
1512
|
|
|
1428
1513
|
/** Lookup replacing the branch, keyed by `` `${boolean}` `` so a boolean signal indexes it
|
|
1429
1514
|
* directly (`STATES[`${masked()}`]`) with no ternary. Adding a third state (a "peek while held"
|
|
@@ -1445,7 +1530,11 @@ let nextYuwPasswordInputId = 0;
|
|
|
1445
1530
|
* - `disabled`: Disables input interaction.
|
|
1446
1531
|
* - `readonly`: Makes the field read-only.
|
|
1447
1532
|
* - `required`: Marks the field as required.
|
|
1448
|
-
* - `invalid`: Forces invalid styling.
|
|
1533
|
+
* - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
|
|
1534
|
+
* - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
|
|
1535
|
+
* - `errorText`: Error shown under the field while it is in its error state (form validation or
|
|
1536
|
+
* `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
|
|
1537
|
+
* reactive forms); required when no such message exists.
|
|
1449
1538
|
* - `name`: HTML `name` attribute.
|
|
1450
1539
|
* - `autocomplete`: Native `autocomplete` attribute (e.g. `'current-password'`, `'new-password'`).
|
|
1451
1540
|
* - `placeholder`: Hint text shown inside the empty field.
|
|
@@ -1468,6 +1557,8 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1468
1557
|
this._leftAddons = contentChildren(YuwLeftAddonDirective, ...(ngDevMode ? [{ debugName: "_leftAddons" }] : /* istanbul ignore next */ []));
|
|
1469
1558
|
this.autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
1470
1559
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1560
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1561
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1471
1562
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1472
1563
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1473
1564
|
this.masked = model(true, ...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
|
|
@@ -1500,14 +1591,14 @@ class YuwPasswordInputComponent extends YuwValueAccessorBase {
|
|
|
1500
1591
|
this.masked.update((masked) => !masked);
|
|
1501
1592
|
}
|
|
1502
1593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-input-group [class]=\"_classes()\">\n
|
|
1594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwPasswordInputComponent, isStandalone: true, selector: "yuw-password-input", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, revealAriaLabel: { classPropertyName: "revealAriaLabel", publicName: "revealAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { masked: "maskedChange", value: "valueChange", committed: "committed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], queries: [{ propertyName: "_leftAddons", predicate: YuwLeftAddonDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"_reveal().inputType\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (revealAriaLabel(); as label) {\n <hlm-input-group-addon align=\"inline-end\">\n <button\n hlmInputGroupButton\n size=\"icon-xs\"\n [disabled]=\"_disabled()\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"!_reveal().struck\"\n (click)=\"onToggleReveal()\"\n >\n <ng-icon [name]=\"_reveal().icon\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: i1$3.HlmInputGroup, selector: "[hlmInputGroup],hlm-input-group" }, { kind: "directive", type: i1$3.HlmInputGroupAddon, selector: "[hlmInputGroupAddon],hlm-input-group-addon", inputs: ["align"] }, { kind: "directive", type: i1$3.HlmInputGroupButton, selector: "button[hlmInputGroupButton]", inputs: ["size", "type"] }, { kind: "directive", type: i1$3.HlmInputGroupInput, selector: "input[hlmInputGroupInput]" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1504
1595
|
}
|
|
1505
1596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwPasswordInputComponent, decorators: [{
|
|
1506
1597
|
type: Component,
|
|
1507
|
-
args: [{ selector: 'yuw-password-input', imports: [...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
|
|
1598
|
+
args: [{ selector: 'yuw-password-input', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, ...HlmInputGroupImports, NgIcon], providers: [provideValueAccessor(YuwPasswordInputComponent), provideIcons({ lucideEye, lucideEyeOff })], host: {
|
|
1508
1599
|
class: 'contents',
|
|
1509
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-input-group [class]=\"_classes()\">\n
|
|
1510
|
-
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1600
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <hlm-input-group [class]=\"_classes()\">\n @if (_hasLeftAddon()) {\n <hlm-input-group-addon align=\"inline-start\">\n <ng-content select=\"yuw-left-addon\" />\n </hlm-input-group-addon>\n }\n\n <input\n hlmInputGroupInput\n [id]=\"_inputId()\"\n [type]=\"_reveal().inputType\"\n [value]=\"value()\"\n [disabled]=\"_disabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.placeholder]=\"placeholder()\"\n (input)=\"onInput($event)\"\n (change)=\"onChange()\"\n (blur)=\"_onBlur()\"\n />\n\n @if (revealAriaLabel(); as label) {\n <hlm-input-group-addon align=\"inline-end\">\n <button\n hlmInputGroupButton\n size=\"icon-xs\"\n [disabled]=\"_disabled()\"\n [attr.aria-label]=\"label\"\n [attr.aria-pressed]=\"!_reveal().struck\"\n (click)=\"onToggleReveal()\"\n >\n <ng-icon [name]=\"_reveal().icon\" />\n </button>\n </hlm-input-group-addon>\n }\n </hlm-input-group>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1601
|
+
}], propDecorators: { _leftAddons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwLeftAddonDirective), { isSignal: true }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }, { type: i0.Output, args: ["maskedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], revealAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], committed: [{ type: i0.Output, args: ["committed"] }] } });
|
|
1511
1602
|
|
|
1512
1603
|
/**
|
|
1513
1604
|
* Cell size for `<yuw-input-otp>`, applied to the container and reaching each
|
|
@@ -1575,7 +1666,11 @@ let nextYuwInputOtpId = 0;
|
|
|
1575
1666
|
* - `mode`: Virtual-keyboard hint (`'numeric'`, `'text'`). Default is `'numeric'`.
|
|
1576
1667
|
* - `disabled`: Disables input interaction.
|
|
1577
1668
|
* - `size`: Cell size, matching the `<yuw-button>` of the same name.
|
|
1578
|
-
* - `invalid`: Forces invalid styling.
|
|
1669
|
+
* - `invalid`: Forces invalid styling. Applied from the first blur on, so a pristine field is not flagged while typing.
|
|
1670
|
+
* - `helperText`: Hint shown under the field. Replaced by the error while one is displayed.
|
|
1671
|
+
* - `errorText`: Error shown under the field while it is in its error state (form validation or
|
|
1672
|
+
* `invalid`). Overrides the `message` carried by the bound control's validation errors (signal or
|
|
1673
|
+
* reactive forms); required when no such message exists.
|
|
1579
1674
|
* - `autofocus`: Focuses the field on init. Appropriate on dedicated verification screens.
|
|
1580
1675
|
* - `transformPaste`: Normalizes pasted text before it fills the slots.
|
|
1581
1676
|
* - `class`: Extra classes merged onto the OTP container.
|
|
@@ -1594,7 +1689,9 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
|
|
|
1594
1689
|
super(...arguments);
|
|
1595
1690
|
this.autofocus = input(false, { ...(ngDevMode ? { debugName: "autofocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1596
1691
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1692
|
+
this.errorText = input(undefined, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
|
|
1597
1693
|
this.groupSizes = input([6], ...(ngDevMode ? [{ debugName: "groupSizes" }] : /* istanbul ignore next */ []));
|
|
1694
|
+
this.helperText = input(undefined, ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
1598
1695
|
this.inputId = input(undefined, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
1599
1696
|
this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1600
1697
|
this.mode = input('numeric', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
@@ -1617,14 +1714,14 @@ class YuwInputOtpComponent extends YuwValueAccessorBase {
|
|
|
1617
1714
|
this._commit(next);
|
|
1618
1715
|
}
|
|
1619
1716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<brn-input-otp\n
|
|
1717
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputOtpComponent, isStandalone: true, selector: "yuw-input-otp", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, groupSizes: { classPropertyName: "groupSizes", publicName: "groupSizes", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, transformPaste: { classPropertyName: "transformPaste", publicName: "transformPaste", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", completed: "completed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputOtpComponent)], usesInheritance: true, ngImport: i0, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <brn-input-otp\n hlmInputOtp\n [class]=\"_classes()\"\n [inputId]=\"_inputId()\"\n [length]=\"_length()\"\n [value]=\"value()\"\n [inputMode]=\"mode()\"\n [disabled]=\"_disabled()\"\n [autofocus]=\"autofocus()\"\n [transformPaste]=\"transformPaste()\"\n inputAutocomplete=\"one-time-code\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n (completed)=\"completed.emit($event)\"\n >\n @for (group of _groups(); track $index) {\n @if (group.precededBySeparator) {\n <hlm-input-otp-separator />\n }\n\n <hlm-input-otp-group>\n @for (index of group.indices; track index) {\n <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n }\n </hlm-input-otp-group>\n }\n </brn-input-otp>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "component", type: BrnInputOtp, selector: "brn-input-otp", inputs: ["hostStyles", "inputId", "inputAutocomplete", "inputStyles", "containerStyles", "disabled", "length", "inputMode", "inputClass", "autofocus", "transformPaste", "value"], outputs: ["valueChange", "completed"] }, { kind: "directive", type: i1$4.HlmInputOtp, selector: "brn-input-otp[hlmInputOtp], brn-input-otp[hlm]" }, { kind: "directive", type: i1$4.HlmInputOtpGroup, selector: "[hlmInputOtpGroup],hlm-input-otp-group" }, { kind: "component", type: i1$4.HlmInputOtpSeparator, selector: "hlm-input-otp-separator" }, { kind: "component", type: i1$4.HlmInputOtpSlot, selector: "hlm-input-otp-slot", inputs: ["index", "forceInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1621
1718
|
}
|
|
1622
1719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputOtpComponent, decorators: [{
|
|
1623
1720
|
type: Component,
|
|
1624
|
-
args: [{ selector: 'yuw-input-otp', imports: [BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
|
|
1721
|
+
args: [{ selector: 'yuw-input-otp', imports: [HlmField, HlmFieldDescription, YuwFieldFeedbackDirective, BrnInputOtp, ...HlmInputOtpImports], providers: [provideValueAccessor(YuwInputOtpComponent)], host: {
|
|
1625
1722
|
class: 'contents',
|
|
1626
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<brn-input-otp\n
|
|
1627
|
-
}], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1723
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"w-fit min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <brn-input-otp\n hlmInputOtp\n [class]=\"_classes()\"\n [inputId]=\"_inputId()\"\n [length]=\"_length()\"\n [value]=\"value()\"\n [inputMode]=\"mode()\"\n [disabled]=\"_disabled()\"\n [autofocus]=\"autofocus()\"\n [transformPaste]=\"transformPaste()\"\n inputAutocomplete=\"one-time-code\"\n (valueChange)=\"onValueChange($event)\"\n (focusout)=\"_onBlur()\"\n (completed)=\"completed.emit($event)\"\n >\n @for (group of _groups(); track $index) {\n @if (group.precededBySeparator) {\n <hlm-input-otp-separator />\n }\n\n <hlm-input-otp-group>\n @for (index of group.indices; track index) {\n <hlm-input-otp-slot [index]=\"index\" [forceInvalid]=\"feedback.forcedInvalid()\" />\n }\n </hlm-input-otp-group>\n }\n </brn-input-otp>\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1724
|
+
}], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], groupSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSizes", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], transformPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "transformPaste", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1628
1725
|
|
|
1629
1726
|
/**
|
|
1630
1727
|
* Form label directive applied directly to a native `<label>` element.
|