@vallift/ngl 22.0.20 → 22.0.22
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/fesm2022/vallift-ngl.mjs +197 -83
- package/fesm2022/vallift-ngl.mjs.map +1 -1
- package/package.json +1 -1
- package/types/vallift-ngl.d.ts +54 -31
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -7469,6 +7469,22 @@ function getFloatingOutlineLabelClasses(size, hasAbsolutePrefixIcon) {
|
|
|
7469
7469
|
peer-[:not(:placeholder-shown)]:scale-90 peer-[:not(:placeholder-shown)]:text-caption
|
|
7470
7470
|
peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:bg-page`;
|
|
7471
7471
|
}
|
|
7472
|
+
function getPrefixTextAdornmentClasses(enableBackground, appearance) {
|
|
7473
|
+
const base = 'flex shrink-0 items-center self-stretch whitespace-nowrap px-3 text-role-caption';
|
|
7474
|
+
const backgroundClasses = enableBackground
|
|
7475
|
+
? 'border-r border-default bg-page-secondary'
|
|
7476
|
+
: '';
|
|
7477
|
+
const roundedClasses = enableBackground && appearance === 'floatingOutline' ? 'rounded-l-xl' : '';
|
|
7478
|
+
return [base, backgroundClasses, roundedClasses].filter(Boolean).join(' ');
|
|
7479
|
+
}
|
|
7480
|
+
function getPostfixTextAdornmentClasses(enableBackground, appearance) {
|
|
7481
|
+
const base = 'flex shrink-0 items-center self-stretch whitespace-nowrap px-3 text-role-caption';
|
|
7482
|
+
const backgroundClasses = enableBackground
|
|
7483
|
+
? 'border-l border-default bg-page-secondary'
|
|
7484
|
+
: '';
|
|
7485
|
+
const roundedClasses = enableBackground && appearance === 'floatingOutline' ? 'rounded-r-xl' : '';
|
|
7486
|
+
return [base, backgroundClasses, roundedClasses].filter(Boolean).join(' ');
|
|
7487
|
+
}
|
|
7472
7488
|
|
|
7473
7489
|
const defaultSignalFormErrors = {
|
|
7474
7490
|
required: () => 'Required',
|
|
@@ -7585,6 +7601,8 @@ class BaseFormControl {
|
|
|
7585
7601
|
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
7586
7602
|
disabled = input(false, /* @ts-ignore */
|
|
7587
7603
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
7604
|
+
readonly = input(false, /* @ts-ignore */
|
|
7605
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
7588
7606
|
invalid = input(false, /* @ts-ignore */
|
|
7589
7607
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
7590
7608
|
required = input(false, /* @ts-ignore */
|
|
@@ -7600,7 +7618,7 @@ class BaseFormControl {
|
|
|
7600
7618
|
errorMessage = computed(() => getSignalValidationErrorMessage(this.errors(), this.signalFormErrors), /* @ts-ignore */
|
|
7601
7619
|
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
7602
7620
|
setValue(value) {
|
|
7603
|
-
if (this.disabled()) {
|
|
7621
|
+
if (this.disabled() || this.readonly()) {
|
|
7604
7622
|
return;
|
|
7605
7623
|
}
|
|
7606
7624
|
this.value.set(value);
|
|
@@ -7615,11 +7633,11 @@ class BaseFormControl {
|
|
|
7615
7633
|
}
|
|
7616
7634
|
}
|
|
7617
7635
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7618
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", isFocused: "isFocusedChange" }, ngImport: i0 });
|
|
7636
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", isFocused: "isFocusedChange" }, ngImport: i0 });
|
|
7619
7637
|
}
|
|
7620
7638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, decorators: [{
|
|
7621
7639
|
type: Directive
|
|
7622
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
|
|
7640
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
|
|
7623
7641
|
|
|
7624
7642
|
class BaseSignalTextInputControl extends BaseFormControl {
|
|
7625
7643
|
nglConfig = inject(NGL_CONFIG, { optional: true });
|
|
@@ -7646,8 +7664,6 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
7646
7664
|
// Input configuration
|
|
7647
7665
|
inputType = input('text', /* @ts-ignore */
|
|
7648
7666
|
...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
|
|
7649
|
-
readonly = input(false, /* @ts-ignore */
|
|
7650
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
7651
7667
|
maskPattern = input(null, { ...(ngDevMode ? { debugName: "maskPattern" } : /* istanbul ignore next */ {}), alias: 'mask' });
|
|
7652
7668
|
// Adornments
|
|
7653
7669
|
prefixText = input('', /* @ts-ignore */
|
|
@@ -7658,6 +7674,10 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
7658
7674
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
7659
7675
|
postfixIcon = input(/* @ts-ignore */
|
|
7660
7676
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
7677
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
7678
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
7679
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
7680
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
7661
7681
|
// Native HTML attributes
|
|
7662
7682
|
id = input(/* @ts-ignore */
|
|
7663
7683
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
@@ -7701,6 +7721,10 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
7701
7721
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
7702
7722
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
7703
7723
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
7724
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
7725
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
7726
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
7727
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
7704
7728
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
7705
7729
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
7706
7730
|
hasValue = computed(() => {
|
|
@@ -7775,12 +7799,12 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
7775
7799
|
}
|
|
7776
7800
|
}
|
|
7777
7801
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
7802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
7779
7803
|
}
|
|
7780
7804
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextField, decorators: [{
|
|
7781
7805
|
type: Component,
|
|
7782
|
-
args: [{ selector: 'lib-signal-text-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon, NgxMaskDirective], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n
|
|
7783
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }],
|
|
7806
|
+
args: [{ selector: 'lib-signal-text-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon, NgxMaskDirective], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [type]=\"inputType()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.pattern]=\"pattern()[0]?.source ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
7807
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
7784
7808
|
type: ViewChild,
|
|
7785
7809
|
args: ['inputRef']
|
|
7786
7810
|
}] } });
|
|
@@ -7935,8 +7959,6 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
7935
7959
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
7936
7960
|
hint = input('', /* @ts-ignore */
|
|
7937
7961
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
7938
|
-
readonly = input(false, /* @ts-ignore */
|
|
7939
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
7940
7962
|
prefixText = input('', /* @ts-ignore */
|
|
7941
7963
|
...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
|
|
7942
7964
|
prefixIcon = input(/* @ts-ignore */
|
|
@@ -7945,6 +7967,10 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
7945
7967
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
7946
7968
|
postfixIcon = input(/* @ts-ignore */
|
|
7947
7969
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
7970
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
7971
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
7972
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
7973
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
7948
7974
|
id = input(/* @ts-ignore */
|
|
7949
7975
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
7950
7976
|
fieldName = input(/* @ts-ignore */
|
|
@@ -7989,6 +8015,10 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
7989
8015
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
7990
8016
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
7991
8017
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
8018
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
8019
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
8020
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
8021
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
7992
8022
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
7993
8023
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
7994
8024
|
hasValue = computed(() => this.value() != null, /* @ts-ignore */
|
|
@@ -8096,14 +8126,14 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
8096
8126
|
}
|
|
8097
8127
|
}
|
|
8098
8128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n type=\"number\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"numberInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.min]=\"numberMin() ?? null\"\n [attr.max]=\"numberMax() ?? null\"\n [attr.step]=\"numberStep() ?? null\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
8129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n type=\"number\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"numberInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.min]=\"numberMin() ?? null\"\n [attr.max]=\"numberMax() ?? null\"\n [attr.step]=\"numberStep() ?? null\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
8100
8130
|
}
|
|
8101
8131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalNumberField, decorators: [{
|
|
8102
8132
|
type: Component,
|
|
8103
8133
|
args: [{ selector: 'lib-signal-number-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon], host: {
|
|
8104
8134
|
'[class.hide-number-spin]': 'hideSpinButtons()',
|
|
8105
|
-
}, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n
|
|
8106
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
8135
|
+
}, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n <input\n #inputRef\n class=\"h-full w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n type=\"number\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"numberInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.min]=\"numberMin() ?? null\"\n [attr.max]=\"numberMax() ?? null\"\n [attr.step]=\"numberStep() ?? null\"\n [attr.inputmode]=\"inputMode()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
8136
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], numberMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMin", required: false }] }], numberMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMax", required: false }] }], numberStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberStep", required: false }] }], hideSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSpinButtons", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
8107
8137
|
type: ViewChild,
|
|
8108
8138
|
args: ['inputRef']
|
|
8109
8139
|
}] } });
|
|
@@ -8629,8 +8659,6 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
|
|
|
8629
8659
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
8630
8660
|
hint = input('', /* @ts-ignore */
|
|
8631
8661
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
8632
|
-
readonly = input(false, /* @ts-ignore */
|
|
8633
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
8634
8662
|
phoneNumbers = input(phoneNumbersAll, /* @ts-ignore */
|
|
8635
8663
|
...(ngDevMode ? [{ debugName: "phoneNumbers" }] : /* istanbul ignore next */ []));
|
|
8636
8664
|
defaultCountryId = input('IN', /* @ts-ignore */
|
|
@@ -8874,7 +8902,7 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
|
|
|
8874
8902
|
}
|
|
8875
8903
|
}
|
|
8876
8904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalPhoneNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8877
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled() || readonly()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isCountryPickerOpen()\"\n [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n (click)=\"toggleCountryPicker()\"\n (keydown)=\"onCountryButtonKeyDown($event)\">\n <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n <span>+{{ selectedCountry().dialCode }}</span>\n <span\n class=\"flex items-center justify-center\"\n [class.rotate-180]=\"isCountryPickerOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </button>\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"tel\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [mask]=\"activeMask()\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"nationalInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (hasAbsoluteClear() || showInFieldHint()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"countryButton\"\n [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n (overlayOutsideClick)=\"closeCountryPicker()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-phone-country-panel\n [panelId]=\"countryButtonId() + '-panel'\"\n [countries]=\"countries()\"\n [selectedCountry]=\"selectedCountry()\"\n [iconSize]=\"iconSize()\"\n [panelWidth]=\"countryPanelWidth()\"\n [listboxLabelledBy]=\"countryButtonId()\"\n (countrySelected)=\"onCountrySelected($event)\"\n (dismissed)=\"closeCountryPicker()\" />\n </ng-template>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
|
|
8905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isCountryPickerOpen()\"\n [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n (click)=\"toggleCountryPicker()\"\n (keydown)=\"onCountryButtonKeyDown($event)\">\n <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n <span>+{{ selectedCountry().dialCode }}</span>\n <span\n class=\"flex items-center justify-center\"\n [class.rotate-180]=\"isCountryPickerOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </button>\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"tel\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [mask]=\"activeMask()\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"nationalInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (hasAbsoluteClear() || showInFieldHint()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"countryButton\"\n [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n (overlayOutsideClick)=\"closeCountryPicker()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-phone-country-panel\n [panelId]=\"countryButtonId() + '-panel'\"\n [countries]=\"countries()\"\n [selectedCountry]=\"selectedCountry()\"\n [iconSize]=\"iconSize()\"\n [panelWidth]=\"countryPanelWidth()\"\n [listboxLabelledBy]=\"countryButtonId()\"\n (countrySelected)=\"onCountrySelected($event)\"\n (dismissed)=\"closeCountryPicker()\" />\n </ng-template>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
|
|
8878
8906
|
}
|
|
8879
8907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalPhoneNumberField, decorators: [{
|
|
8880
8908
|
type: Component,
|
|
@@ -8884,8 +8912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
8884
8912
|
HintIcon,
|
|
8885
8913
|
NgxMaskDirective,
|
|
8886
8914
|
SignalPhoneCountryPanelComponent,
|
|
8887
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled()
|
|
8888
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
8915
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <button\n #countryButton\n type=\"button\"\n class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n [id]=\"countryButtonId()\"\n [disabled]=\"disabled()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isCountryPickerOpen()\"\n [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n (click)=\"toggleCountryPicker()\"\n (keydown)=\"onCountryButtonKeyDown($event)\">\n <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n <span>+{{ selectedCountry().dialCode }}</span>\n <span\n class=\"flex items-center justify-center\"\n [class.rotate-180]=\"isCountryPickerOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </button>\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"tel\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [mask]=\"activeMask()\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"nationalInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.inputmode]=\"'tel'\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onKeyDown($event)\">\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (hasAbsoluteClear() || showInFieldHint()) {\n <div\n class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"countryButton\"\n [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n (overlayOutsideClick)=\"closeCountryPicker()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-phone-country-panel\n [panelId]=\"countryButtonId() + '-panel'\"\n [countries]=\"countries()\"\n [selectedCountry]=\"selectedCountry()\"\n [iconSize]=\"iconSize()\"\n [panelWidth]=\"countryPanelWidth()\"\n [listboxLabelledBy]=\"countryButtonId()\"\n (countrySelected)=\"onCountrySelected($event)\"\n (dismissed)=\"closeCountryPicker()\" />\n </ng-template>\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
8916
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], phoneNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumbers", required: false }] }], defaultCountryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountryId", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }], inputRef: [{
|
|
8889
8917
|
type: ViewChild,
|
|
8890
8918
|
args: ['inputRef']
|
|
8891
8919
|
}], countryButton: [{
|
|
@@ -8931,8 +8959,6 @@ class SignalTextarea extends BaseSignalTextInputControl {
|
|
|
8931
8959
|
hint = input('', /* @ts-ignore */
|
|
8932
8960
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
8933
8961
|
// Textarea configuration
|
|
8934
|
-
readonly = input(false, /* @ts-ignore */
|
|
8935
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
8936
8962
|
rows = input(3, /* @ts-ignore */
|
|
8937
8963
|
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
8938
8964
|
resize = input('vertical', /* @ts-ignore */
|
|
@@ -9029,12 +9055,12 @@ class SignalTextarea extends BaseSignalTextInputControl {
|
|
|
9029
9055
|
}
|
|
9030
9056
|
}
|
|
9031
9057
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9032
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextarea, isStandalone: true, selector: "lib-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null },
|
|
9058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextarea, isStandalone: true, selector: "lib-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", clear: "clear", keyDown: "keyDown" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n [class]=\"appearanceWrapperClasses()\">\n <div class=\"relative flex min-w-0 flex-1 items-start\">\n <textarea\n #textareaRef\n class=\"w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [rows]=\"rows()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></textarea>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showInFieldHint() || showClear()) {\n <div\n class=\"absolute right-0 flex items-center gap-0.5\"\n [class]=\"absoluteTrailingTopClasses()\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (showClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9033
9059
|
}
|
|
9034
9060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextarea, decorators: [{
|
|
9035
9061
|
type: Component,
|
|
9036
9062
|
args: [{ selector: 'lib-signal-textarea', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n [class]=\"appearanceWrapperClasses()\">\n <div class=\"relative flex min-w-0 flex-1 items-start\">\n <textarea\n #textareaRef\n class=\"w-full transition\n placeholder:text-role-placeholder\n outline-none\n bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [rows]=\"rows()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.minlength]=\"minLength() ?? null\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (input)=\"updateValue($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></textarea>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showInFieldHint() || showClear()) {\n <div\n class=\"absolute right-0 flex items-center gap-0.5\"\n [class]=\"absoluteTrailingTopClasses()\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\" />\n }\n @if (showClear()) {\n <button\n type=\"button\"\n (click)=\"onClear()\"\n aria-label=\"Clear\"\n class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9037
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
9063
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], textareaRef: [{
|
|
9038
9064
|
type: ViewChild,
|
|
9039
9065
|
args: ['textareaRef']
|
|
9040
9066
|
}] } });
|
|
@@ -9063,6 +9089,8 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9063
9089
|
...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
|
|
9064
9090
|
isActive = computed(() => !!this.isChecked() || this.isIndeterminate(), /* @ts-ignore */
|
|
9065
9091
|
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
9092
|
+
isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
|
|
9093
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
9066
9094
|
boxAppearanceClasses = computed(() => {
|
|
9067
9095
|
const size = this.size() === 'sm' ? 'w-4 h-4' : this.size() === 'lg' ? 'w-6 h-6' : 'w-5 h-5';
|
|
9068
9096
|
return `relative shrink-0 inline-flex items-center justify-center rounded-sm border-2 transition-all duration-200 bg-surface ${size}`;
|
|
@@ -9082,8 +9110,12 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9082
9110
|
labelTextClasses = computed(() => {
|
|
9083
9111
|
const typography = this.size() === 'sm' ? 'text-caption' : this.size() === 'lg' ? 'text-body1' : 'text-body2';
|
|
9084
9112
|
const color = this.disabled() ? 'text-role-disabled' : 'text-role-body';
|
|
9085
|
-
const hover = this.
|
|
9086
|
-
const cursor = this.disabled()
|
|
9113
|
+
const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
|
|
9114
|
+
const cursor = this.disabled()
|
|
9115
|
+
? 'cursor-not-allowed'
|
|
9116
|
+
: this.readonly()
|
|
9117
|
+
? 'cursor-default'
|
|
9118
|
+
: 'cursor-pointer';
|
|
9087
9119
|
return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
|
|
9088
9120
|
}, /* @ts-ignore */
|
|
9089
9121
|
...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -9115,7 +9147,7 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9115
9147
|
}
|
|
9116
9148
|
}
|
|
9117
9149
|
onChange(event) {
|
|
9118
|
-
if (this.
|
|
9150
|
+
if (!this.isInteractive()) {
|
|
9119
9151
|
return;
|
|
9120
9152
|
}
|
|
9121
9153
|
const checked = event.target.checked;
|
|
@@ -9124,7 +9156,7 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9124
9156
|
this.valueChange.emit(checked);
|
|
9125
9157
|
}
|
|
9126
9158
|
onKeyDown(event) {
|
|
9127
|
-
if (event.key !== 'Enter' || this.
|
|
9159
|
+
if (event.key !== 'Enter' || !this.isInteractive()) {
|
|
9128
9160
|
return;
|
|
9129
9161
|
}
|
|
9130
9162
|
event.preventDefault();
|
|
@@ -9136,11 +9168,11 @@ class SignalCheckbox extends BaseFormControl {
|
|
|
9136
9168
|
this.valueChange.emit(nextValue);
|
|
9137
9169
|
}
|
|
9138
9170
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalCheckbox, isStandalone: true, selector: "lib-signal-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"
|
|
9171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalCheckbox, isStandalone: true, selector: "lib-signal-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isIndeterminate()\"\n [class.opacity-100]=\"isIndeterminate()\">\n <path\n d=\"M4 10h12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9140
9172
|
}
|
|
9141
9173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalCheckbox, decorators: [{
|
|
9142
9174
|
type: Component,
|
|
9143
|
-
args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"
|
|
9175
|
+
args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"checkboxId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"checkboxId()\">\n <input\n #checkboxRef\n type=\"checkbox\"\n class=\"sr-only\"\n [id]=\"checkboxId()\"\n [checked]=\"isChecked()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isActive() && !showError()\"\n [class.bg-surface-primary]=\"isActive() && !showError()\"\n [class.border-default]=\"!isActive() && !showError()\"\n [class.border-error]=\"showError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n <path\n fill-rule=\"evenodd\"\n d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n aria-hidden=\"true\"\n class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n [class]=\"checkmarkSizeClasses()\"\n [class.opacity-0]=\"!isIndeterminate()\"\n [class.opacity-100]=\"isIndeterminate()\">\n <path\n d=\"M4 10h12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9144
9176
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], checkboxRef: [{
|
|
9145
9177
|
type: ViewChild,
|
|
9146
9178
|
args: ['checkboxRef']
|
|
@@ -9173,6 +9205,10 @@ class SignalRadio extends BaseFormControl {
|
|
|
9173
9205
|
...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
|
|
9174
9206
|
effectiveDisabled = computed(() => this.inGroup() ? this.group.disabled() || this.disabled() : this.disabled(), /* @ts-ignore */
|
|
9175
9207
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
9208
|
+
effectiveReadonly = computed(() => this.inGroup() ? this.group.readonly() : this.readonly(), /* @ts-ignore */
|
|
9209
|
+
...(ngDevMode ? [{ debugName: "effectiveReadonly" }] : /* istanbul ignore next */ []));
|
|
9210
|
+
isInteractive = computed(() => !this.effectiveDisabled() && !this.effectiveReadonly(), /* @ts-ignore */
|
|
9211
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
9176
9212
|
effectiveGroupName = computed(() => {
|
|
9177
9213
|
if (this.inGroup()) {
|
|
9178
9214
|
return this.group.effectiveGroupName();
|
|
@@ -9218,8 +9254,12 @@ class SignalRadio extends BaseFormControl {
|
|
|
9218
9254
|
? 'text-body1'
|
|
9219
9255
|
: 'text-body2';
|
|
9220
9256
|
const color = this.effectiveDisabled() ? 'text-role-disabled' : 'text-role-body';
|
|
9221
|
-
const hover = this.
|
|
9222
|
-
const cursor = this.effectiveDisabled()
|
|
9257
|
+
const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
|
|
9258
|
+
const cursor = this.effectiveDisabled()
|
|
9259
|
+
? 'cursor-not-allowed'
|
|
9260
|
+
: this.effectiveReadonly()
|
|
9261
|
+
? 'cursor-default'
|
|
9262
|
+
: 'cursor-pointer';
|
|
9223
9263
|
return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
|
|
9224
9264
|
}, /* @ts-ignore */
|
|
9225
9265
|
...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -9235,7 +9275,7 @@ class SignalRadio extends BaseFormControl {
|
|
|
9235
9275
|
}, /* @ts-ignore */
|
|
9236
9276
|
...(ngDevMode ? [{ debugName: "dotSizeClasses" }] : /* istanbul ignore next */ []));
|
|
9237
9277
|
onChange(event) {
|
|
9238
|
-
if (this.
|
|
9278
|
+
if (!this.isInteractive()) {
|
|
9239
9279
|
return;
|
|
9240
9280
|
}
|
|
9241
9281
|
const inputEl = event.target;
|
|
@@ -9245,7 +9285,7 @@ class SignalRadio extends BaseFormControl {
|
|
|
9245
9285
|
this.selectOption();
|
|
9246
9286
|
}
|
|
9247
9287
|
onKeyDown(event) {
|
|
9248
|
-
if ((event.key !== 'Enter' && event.key !== ' ') || this.
|
|
9288
|
+
if ((event.key !== 'Enter' && event.key !== ' ') || !this.isInteractive()) {
|
|
9249
9289
|
return;
|
|
9250
9290
|
}
|
|
9251
9291
|
event.preventDefault();
|
|
@@ -9280,11 +9320,11 @@ class SignalRadio extends BaseFormControl {
|
|
|
9280
9320
|
this.valueChange.emit(selected);
|
|
9281
9321
|
}
|
|
9282
9322
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9283
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadio, isStandalone: true, selector: "lib-signal-radio", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"
|
|
9323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadio, isStandalone: true, selector: "lib-signal-radio", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-readonly]=\"effectiveReadonly() || null\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n <div\n class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n [class]=\"dotSizeClasses()\"\n [class.opacity-0]=\"!isSelected()\"\n [class.opacity-100]=\"isSelected()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (!inGroup() && showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9284
9324
|
}
|
|
9285
9325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadio, decorators: [{
|
|
9286
9326
|
type: Component,
|
|
9287
|
-
args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"
|
|
9327
|
+
args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n [showError]=\"!inGroup() && showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"effectiveDisabled()\"\n [inputId]=\"radioId()\">\n\n <div\n input\n class=\"group flex items-center gap-3\"\n [class.w-full]=\"!inGroup()\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n [class.cursor-not-allowed]=\"effectiveDisabled()\"\n [class.opacity-70]=\"effectiveDisabled()\"\n [for]=\"radioId()\">\n <input\n type=\"radio\"\n class=\"sr-only\"\n [id]=\"radioId()\"\n [name]=\"effectiveGroupName()\"\n [checked]=\"isSelected()\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-readonly]=\"effectiveReadonly() || null\"\n [attr.aria-checked]=\"isSelected()\"\n [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"effectiveShowError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"boxAppearanceClasses()\"\n [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n [class.border-error]=\"effectiveShowError()\"\n [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n [class.group-hover:shadow-sm]=\"isInteractive()\"\n [class.group-hover:scale-105]=\"isInteractive()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n <div\n class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n [class]=\"dotSizeClasses()\"\n [class.opacity-0]=\"!isSelected()\"\n [class.opacity-100]=\"isSelected()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (!inGroup() && showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9288
9328
|
}], propDecorators: { groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
9289
9329
|
|
|
9290
9330
|
let nextGroupId = 0;
|
|
@@ -9314,6 +9354,9 @@ class SignalRadioGroup extends BaseFormControl {
|
|
|
9314
9354
|
...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
|
|
9315
9355
|
showGroupError = this.showError;
|
|
9316
9356
|
setValue(value) {
|
|
9357
|
+
if (this.readonly()) {
|
|
9358
|
+
return;
|
|
9359
|
+
}
|
|
9317
9360
|
super.setValue(value);
|
|
9318
9361
|
}
|
|
9319
9362
|
markOptionFocus() {
|
|
@@ -9357,6 +9400,8 @@ class SignalSwitch extends BaseFormControl {
|
|
|
9357
9400
|
...(ngDevMode ? [{ debugName: "switchId" }] : /* istanbul ignore next */ []));
|
|
9358
9401
|
isOn = computed(() => !!this.value(), /* @ts-ignore */
|
|
9359
9402
|
...(ngDevMode ? [{ debugName: "isOn" }] : /* istanbul ignore next */ []));
|
|
9403
|
+
isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
|
|
9404
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
9360
9405
|
trackClasses = computed(() => {
|
|
9361
9406
|
const size = this.size() === 'sm' ? 'w-8 h-4' : this.size() === 'lg' ? 'w-12 h-6' : 'w-10 h-5';
|
|
9362
9407
|
return `relative shrink-0 inline-flex items-center rounded-full transition-colors duration-200 p-0.5 ${size}`;
|
|
@@ -9403,13 +9448,17 @@ class SignalSwitch extends BaseFormControl {
|
|
|
9403
9448
|
labelTextClasses = computed(() => {
|
|
9404
9449
|
const typography = this.size() === 'sm' ? 'text-caption' : this.size() === 'lg' ? 'text-body1' : 'text-body2';
|
|
9405
9450
|
const color = this.disabled() ? 'text-role-disabled' : 'text-role-body';
|
|
9406
|
-
const hover = this.
|
|
9407
|
-
const cursor = this.disabled()
|
|
9451
|
+
const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
|
|
9452
|
+
const cursor = this.disabled()
|
|
9453
|
+
? 'cursor-not-allowed'
|
|
9454
|
+
: this.readonly()
|
|
9455
|
+
? 'cursor-default'
|
|
9456
|
+
: 'cursor-pointer';
|
|
9408
9457
|
return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
|
|
9409
9458
|
}, /* @ts-ignore */
|
|
9410
9459
|
...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
|
|
9411
9460
|
onChange(event) {
|
|
9412
|
-
if (this.
|
|
9461
|
+
if (!this.isInteractive()) {
|
|
9413
9462
|
return;
|
|
9414
9463
|
}
|
|
9415
9464
|
const checked = event.target.checked;
|
|
@@ -9417,7 +9466,7 @@ class SignalSwitch extends BaseFormControl {
|
|
|
9417
9466
|
this.valueChange.emit(checked);
|
|
9418
9467
|
}
|
|
9419
9468
|
onKeyDown(event) {
|
|
9420
|
-
if ((event.key !== 'Enter' && event.key !== ' ') || this.
|
|
9469
|
+
if ((event.key !== 'Enter' && event.key !== ' ') || !this.isInteractive()) {
|
|
9421
9470
|
return;
|
|
9422
9471
|
}
|
|
9423
9472
|
event.preventDefault();
|
|
@@ -9428,11 +9477,11 @@ class SignalSwitch extends BaseFormControl {
|
|
|
9428
9477
|
this.valueChange.emit(nextValue);
|
|
9429
9478
|
}
|
|
9430
9479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
9432
9481
|
}
|
|
9433
9482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSwitch, decorators: [{
|
|
9434
9483
|
type: Component,
|
|
9435
|
-
args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"!disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9484
|
+
args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"switchId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <label\n class=\"inline-flex shrink-0 items-center select-none\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.opacity-70]=\"disabled()\"\n [for]=\"switchId()\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"sr-only\"\n [id]=\"switchId()\"\n [checked]=\"isOn()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-checked]=\"isOn()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (change)=\"onChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <div\n [class]=\"trackClasses()\"\n [class.bg-page-secondary]=\"!isOn() && !showError()\"\n [class.bg-surface-primary]=\"isOn() && !showError()\"\n [class.bg-surface-error-subtle]=\"showError()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\">\n <div\n [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n </div>\n </label>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
9436
9485
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
9437
9486
|
|
|
9438
9487
|
function getPathValue(obj, path) {
|
|
@@ -9694,8 +9743,6 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
9694
9743
|
noOptionsMessage = input('No options available', /* @ts-ignore */
|
|
9695
9744
|
...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []));
|
|
9696
9745
|
// Input configuration
|
|
9697
|
-
readonly = input(false, /* @ts-ignore */
|
|
9698
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
9699
9746
|
// Adornments
|
|
9700
9747
|
prefixText = input('', /* @ts-ignore */
|
|
9701
9748
|
...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
|
|
@@ -9705,6 +9752,10 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
9705
9752
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
9706
9753
|
postfixIcon = input(/* @ts-ignore */
|
|
9707
9754
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
9755
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
9756
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
9757
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
9758
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
9708
9759
|
// Native HTML attributes
|
|
9709
9760
|
id = input(/* @ts-ignore */
|
|
9710
9761
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
@@ -9760,6 +9811,10 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
9760
9811
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
9761
9812
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
9762
9813
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
9814
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
9815
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
9816
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
9817
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
9763
9818
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
9764
9819
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
9765
9820
|
hasSelection = computed(() => {
|
|
@@ -10005,7 +10060,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
10005
10060
|
}
|
|
10006
10061
|
}
|
|
10007
10062
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10008
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
|
|
10063
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
|
|
10009
10064
|
}
|
|
10010
10065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDropdown, decorators: [{
|
|
10011
10066
|
type: Component,
|
|
@@ -10015,8 +10070,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
10015
10070
|
CdkConnectedOverlay,
|
|
10016
10071
|
HintIcon,
|
|
10017
10072
|
SignalDropdownPanelComponent,
|
|
10018
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
10019
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }],
|
|
10073
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n {{ triggerDisplayText() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedItem]=\"selectedItem()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (itemSelected)=\"onItemSelected($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
10074
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
|
|
10020
10075
|
type: ViewChild,
|
|
10021
10076
|
args: ['triggerButton']
|
|
10022
10077
|
}], dropdownButton: [{
|
|
@@ -10247,8 +10302,6 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
10247
10302
|
noOptionsMessage = input('No options available', /* @ts-ignore */
|
|
10248
10303
|
...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []));
|
|
10249
10304
|
// Input configuration
|
|
10250
|
-
readonly = input(false, /* @ts-ignore */
|
|
10251
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
10252
10305
|
selectionDisplay = input('count', /* @ts-ignore */
|
|
10253
10306
|
...(ngDevMode ? [{ debugName: "selectionDisplay" }] : /* istanbul ignore next */ []));
|
|
10254
10307
|
selectedCountLabel = input('selected', /* @ts-ignore */
|
|
@@ -10268,6 +10321,10 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
10268
10321
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
10269
10322
|
postfixIcon = input(/* @ts-ignore */
|
|
10270
10323
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
10324
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
10325
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
10326
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
10327
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
10271
10328
|
// Native HTML attributes
|
|
10272
10329
|
id = input(/* @ts-ignore */
|
|
10273
10330
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
@@ -10328,6 +10385,10 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
10328
10385
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
10329
10386
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
10330
10387
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
10388
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
10389
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
10390
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
10391
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
10331
10392
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
10332
10393
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
10333
10394
|
hasSelection = computed(() => this.getCurrentValues().length > 0, /* @ts-ignore */
|
|
@@ -10609,7 +10670,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
10609
10670
|
}
|
|
10610
10671
|
}
|
|
10611
10672
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalMultiSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10612
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
|
|
10673
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
|
|
10613
10674
|
}
|
|
10614
10675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalMultiSelectDropdown, decorators: [{
|
|
10615
10676
|
type: Component,
|
|
@@ -10619,8 +10680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
10619
10680
|
CdkConnectedOverlay,
|
|
10620
10681
|
HintIcon,
|
|
10621
10682
|
SignalMultiSelectDropdownPanelComponent,
|
|
10622
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
10623
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }],
|
|
10683
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #dropdownButton\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n #peerInputRef\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"inputId()\"\n [value]=\"peerInputValue()\" />\n }\n\n <button\n #triggerButton\n type=\"button\"\n class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n [class.truncate]=\"selectionDisplay() !== 'chips'\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n [class.text-role-body]=\"hasSelection() && !disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n (click)=\"toggleDropdown()\"\n (focus)=\"onTriggerFocus()\"\n (blur)=\"onTriggerBlur($event)\"\n (keydown)=\"onTriggerKeyDown($event)\">\n @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n {{ triggerDisplayText() }}\n }\n </button>\n\n @if (selectionDisplay() === 'chips' && hasSelection()) {\n <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n @for (item of selectedItems(); track getItemValue(item)) {\n <span\n class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Remove\"\n class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n (click)=\"onRemoveItem(item, $event)\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\">\n <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n </svg>\n </button>\n </span>\n }\n </div>\n }\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggleDropdown()\"\n class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </button>\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n <span\n class=\"flex items-center justify-center p-2 pointer-events-none\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.rotate-180]=\"isOpen()\"\n [class.transition-transform]=\"true\"\n [class.duration-200]=\"true\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n </svg>\n </span>\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\"\n (overlayOutsideClick)=\"closeDropdown()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-multi-select-dropdown-panel\n [items]=\"items()\"\n [valuePath]=\"valuePath()\"\n [displayPath]=\"displayPath()\"\n [displayValue]=\"displayValue()\"\n [noOptionsMessage]=\"noOptionsMessage()\"\n [selectedValues]=\"currentValues()\"\n [showSelectAll]=\"showSelectAll()\"\n [selectAllLabel]=\"selectAllLabel()\"\n [clearAllLabel]=\"clearAllLabel()\"\n [iconSize]=\"iconSize()\"\n [dropdownWidth]=\"dropdownWidth()\"\n [listboxLabelledBy]=\"inputId()\"\n (valueChange)=\"applyValue($event)\"\n (dismissed)=\"closeDropdown()\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
10684
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], selectionDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisplay", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], mobileOkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOkLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
|
|
10624
10685
|
type: ViewChild,
|
|
10625
10686
|
args: ['triggerButton']
|
|
10626
10687
|
}], dropdownButton: [{
|
|
@@ -10913,6 +10974,9 @@ class SignalDatePicker extends BaseFormControl {
|
|
|
10913
10974
|
return isMonthEnabled(month, this.activeYear(), this.constraints());
|
|
10914
10975
|
}
|
|
10915
10976
|
onDaySelected(day) {
|
|
10977
|
+
if (this.readonly() || this.disabled()) {
|
|
10978
|
+
return;
|
|
10979
|
+
}
|
|
10916
10980
|
const selected = new Date(this.activeYear(), this.activeMonth(), day);
|
|
10917
10981
|
this.setValue(selected);
|
|
10918
10982
|
this.dateSelected.emit(selected);
|
|
@@ -11227,8 +11291,6 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
11227
11291
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
11228
11292
|
hint = input('', /* @ts-ignore */
|
|
11229
11293
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
11230
|
-
readonly = input(false, /* @ts-ignore */
|
|
11231
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
11232
11294
|
dateFormat = input('mmddyyyy', /* @ts-ignore */
|
|
11233
11295
|
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
11234
11296
|
showCalendarIcon = input(true, /* @ts-ignore */
|
|
@@ -11243,6 +11305,10 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
11243
11305
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
11244
11306
|
postfixIcon = input(/* @ts-ignore */
|
|
11245
11307
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
11308
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
11309
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
11310
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
11311
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
11246
11312
|
id = input(/* @ts-ignore */
|
|
11247
11313
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
11248
11314
|
fieldName = input(/* @ts-ignore */
|
|
@@ -11321,6 +11387,10 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
11321
11387
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
11322
11388
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
11323
11389
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
11390
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
11391
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
11392
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
11393
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
11324
11394
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
11325
11395
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
11326
11396
|
hasValue = computed(() => this.value() != null, /* @ts-ignore */
|
|
@@ -11536,7 +11606,7 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
11536
11606
|
}
|
|
11537
11607
|
}
|
|
11538
11608
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
11609
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
|
|
11540
11610
|
}
|
|
11541
11611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateField, decorators: [{
|
|
11542
11612
|
type: Component,
|
|
@@ -11546,8 +11616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
11546
11616
|
CdkConnectedOverlay,
|
|
11547
11617
|
HintIcon,
|
|
11548
11618
|
SignalDateFieldPanelComponent,
|
|
11549
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"] }]
|
|
11550
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
11619
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"date\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"dateInputValue()\"\n [min]=\"nativeMinDate()\"\n [max]=\"nativeMaxDate()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-field-panel\n [selectedDate]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateSelected)=\"onDatePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"] }]
|
|
11620
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
11551
11621
|
type: ViewChild,
|
|
11552
11622
|
args: ['inputRef']
|
|
11553
11623
|
}], fieldWrapper: [{
|
|
@@ -11775,6 +11845,9 @@ class SignalDateRangePicker extends BaseFormControl {
|
|
|
11775
11845
|
return isMonthEnabled(month, this.activeYear(), this.constraints());
|
|
11776
11846
|
}
|
|
11777
11847
|
onDaySelected(day) {
|
|
11848
|
+
if (this.readonly() || this.disabled()) {
|
|
11849
|
+
return;
|
|
11850
|
+
}
|
|
11778
11851
|
const selectedDate = new Date(this.activeYear(), this.activeMonth(), day);
|
|
11779
11852
|
const currentStart = this.startDate();
|
|
11780
11853
|
if (!currentStart || selectedDate < currentStart) {
|
|
@@ -11805,6 +11878,9 @@ class SignalDateRangePicker extends BaseFormControl {
|
|
|
11805
11878
|
}
|
|
11806
11879
|
}
|
|
11807
11880
|
clearSelection() {
|
|
11881
|
+
if (this.readonly() || this.disabled()) {
|
|
11882
|
+
return;
|
|
11883
|
+
}
|
|
11808
11884
|
this.startDate.set(null);
|
|
11809
11885
|
this.endDate.set(null);
|
|
11810
11886
|
this.hoveredDate.set(null);
|
|
@@ -12106,8 +12182,6 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12106
12182
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
12107
12183
|
hint = input('', /* @ts-ignore */
|
|
12108
12184
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
12109
|
-
readonly = input(false, /* @ts-ignore */
|
|
12110
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
12111
12185
|
dateFormat = input('mmddyyyy', /* @ts-ignore */
|
|
12112
12186
|
...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
|
|
12113
12187
|
showCalendarIcon = input(true, /* @ts-ignore */
|
|
@@ -12122,6 +12196,10 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12122
12196
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
12123
12197
|
postfixIcon = input(/* @ts-ignore */
|
|
12124
12198
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
12199
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
12200
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
12201
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
12202
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
12125
12203
|
id = input(/* @ts-ignore */
|
|
12126
12204
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
12127
12205
|
fieldName = input(/* @ts-ignore */
|
|
@@ -12190,6 +12268,10 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12190
12268
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
12191
12269
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
12192
12270
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
12271
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
12272
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
12273
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
12274
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
12193
12275
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
12194
12276
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
12195
12277
|
hasValue = computed(() => this.value() != null, /* @ts-ignore */
|
|
@@ -12416,7 +12498,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12416
12498
|
}
|
|
12417
12499
|
}
|
|
12418
12500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateRangeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12419
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
|
|
12501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
|
|
12420
12502
|
}
|
|
12421
12503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateRangeField, decorators: [{
|
|
12422
12504
|
type: Component,
|
|
@@ -12427,8 +12509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
12427
12509
|
HintIcon,
|
|
12428
12510
|
NgxMaskDirective,
|
|
12429
12511
|
SignalDateRangeFieldPanelComponent,
|
|
12430
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
12431
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
12512
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"text\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n mask=\"00/00/0000 - 00/00/0000\"\n [showMaskTyped]=\"isFocused()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n [value]=\"textInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showCalendarIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n (click)=\"openCalendar($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"closeCalendar()\"\n [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-date-range-field-panel\n [selectedRange]=\"value()\"\n [minDate]=\"minDate()\"\n [maxDate]=\"maxDate()\"\n [allowOnlyPast]=\"allowOnlyPast()\"\n [allowOnlyFuture]=\"allowOnlyFuture()\"\n [allowToday]=\"allowToday()\"\n [disabledDays]=\"disabledDays()\"\n [disabledDates]=\"disabledDates()\"\n (dateRangeSelected)=\"onRangePicked($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
12513
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
12432
12514
|
type: ViewChild,
|
|
12433
12515
|
args: ['inputRef']
|
|
12434
12516
|
}], fieldWrapper: [{
|
|
@@ -12643,18 +12725,30 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
12643
12725
|
return formatTimeDigits(this.minutes());
|
|
12644
12726
|
}
|
|
12645
12727
|
onHourUp() {
|
|
12728
|
+
if (this.readonly() || this.disabled()) {
|
|
12729
|
+
return;
|
|
12730
|
+
}
|
|
12646
12731
|
this.hours.update((prev) => stepHourSpinner(prev, 1, this.is24HourFormat()));
|
|
12647
12732
|
this.commitValue();
|
|
12648
12733
|
}
|
|
12649
12734
|
onHourDown() {
|
|
12735
|
+
if (this.readonly() || this.disabled()) {
|
|
12736
|
+
return;
|
|
12737
|
+
}
|
|
12650
12738
|
this.hours.update((prev) => stepHourSpinner(prev, -1, this.is24HourFormat()));
|
|
12651
12739
|
this.commitValue();
|
|
12652
12740
|
}
|
|
12653
12741
|
onMinuteUp() {
|
|
12742
|
+
if (this.readonly() || this.disabled()) {
|
|
12743
|
+
return;
|
|
12744
|
+
}
|
|
12654
12745
|
this.minutes.update((prev) => stepMinuteSpinner(prev, 1));
|
|
12655
12746
|
this.commitValue();
|
|
12656
12747
|
}
|
|
12657
12748
|
onMinuteDown() {
|
|
12749
|
+
if (this.readonly() || this.disabled()) {
|
|
12750
|
+
return;
|
|
12751
|
+
}
|
|
12658
12752
|
this.minutes.update((prev) => stepMinuteSpinner(prev, -1));
|
|
12659
12753
|
this.commitValue();
|
|
12660
12754
|
}
|
|
@@ -12681,6 +12775,9 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
12681
12775
|
}
|
|
12682
12776
|
}
|
|
12683
12777
|
setPeriod(nextPeriod) {
|
|
12778
|
+
if (this.readonly() || this.disabled()) {
|
|
12779
|
+
return;
|
|
12780
|
+
}
|
|
12684
12781
|
if (this.is24HourFormat() || this.period() === nextPeriod) {
|
|
12685
12782
|
return;
|
|
12686
12783
|
}
|
|
@@ -12688,6 +12785,9 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
12688
12785
|
this.commitValue();
|
|
12689
12786
|
}
|
|
12690
12787
|
toggle24HourFormat(enabled) {
|
|
12788
|
+
if (this.readonly() || this.disabled()) {
|
|
12789
|
+
return;
|
|
12790
|
+
}
|
|
12691
12791
|
if (this.is24HourFormat() === enabled) {
|
|
12692
12792
|
return;
|
|
12693
12793
|
}
|
|
@@ -12709,6 +12809,9 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
12709
12809
|
this.commitValue();
|
|
12710
12810
|
}
|
|
12711
12811
|
validateHours(event) {
|
|
12812
|
+
if (this.readonly() || this.disabled()) {
|
|
12813
|
+
return;
|
|
12814
|
+
}
|
|
12712
12815
|
const inputElement = event.target;
|
|
12713
12816
|
const inputHours = parseInt(inputElement.value, 10);
|
|
12714
12817
|
if (Number.isNaN(inputHours)) {
|
|
@@ -12727,6 +12830,9 @@ class SignalTimePicker extends BaseFormControl {
|
|
|
12727
12830
|
inputElement.value = this.formattedHours();
|
|
12728
12831
|
}
|
|
12729
12832
|
validateMinutes(event) {
|
|
12833
|
+
if (this.readonly() || this.disabled()) {
|
|
12834
|
+
return;
|
|
12835
|
+
}
|
|
12730
12836
|
const inputElement = event.target;
|
|
12731
12837
|
const inputMinutes = parseInt(inputElement.value, 10);
|
|
12732
12838
|
if (Number.isNaN(inputMinutes)) {
|
|
@@ -12853,8 +12959,6 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
12853
12959
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
12854
12960
|
hint = input('', /* @ts-ignore */
|
|
12855
12961
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
12856
|
-
readonly = input(false, /* @ts-ignore */
|
|
12857
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
12858
12962
|
timeFormat = input('12h', /* @ts-ignore */
|
|
12859
12963
|
...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
|
|
12860
12964
|
showClockIcon = input(true, /* @ts-ignore */
|
|
@@ -12869,6 +12973,10 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
12869
12973
|
...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
|
|
12870
12974
|
postfixIcon = input(/* @ts-ignore */
|
|
12871
12975
|
...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
|
|
12976
|
+
enablePrefixBackground = input(false, /* @ts-ignore */
|
|
12977
|
+
...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
|
|
12978
|
+
enablePostfixBackground = input(false, /* @ts-ignore */
|
|
12979
|
+
...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
|
|
12872
12980
|
id = input(/* @ts-ignore */
|
|
12873
12981
|
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
12874
12982
|
fieldName = input(/* @ts-ignore */
|
|
@@ -12925,6 +13033,10 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
12925
13033
|
...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
|
|
12926
13034
|
hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
|
|
12927
13035
|
...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
|
|
13036
|
+
prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
|
|
13037
|
+
...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
13038
|
+
postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
|
|
13039
|
+
...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
|
|
12928
13040
|
hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
12929
13041
|
...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
|
|
12930
13042
|
hasValue = computed(() => this.value() != null, /* @ts-ignore */
|
|
@@ -13156,7 +13268,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
13156
13268
|
}
|
|
13157
13269
|
}
|
|
13158
13270
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13159
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
|
|
13271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
|
|
13160
13272
|
}
|
|
13161
13273
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTimeField, decorators: [{
|
|
13162
13274
|
type: Component,
|
|
@@ -13166,8 +13278,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
13166
13278
|
CdkConnectedOverlay,
|
|
13167
13279
|
HintIcon,
|
|
13168
13280
|
SignalTimeFieldPanelComponent,
|
|
13169
|
-
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"] }]
|
|
13170
|
-
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }],
|
|
13281
|
+
], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n #fieldWrapper\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n @if (prefixText()) {\n <div\n [class]=\"prefixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ prefixText() }}\n </div>\n }\n\n @if (prefixIcon() && hasPrefixText()) {\n <div\n class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n [class.text-role-placeholder]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n </div>\n }\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (hasAbsolutePrefixIcon()) {\n <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n class=\"absolute pointer-events-none\"\n [class.ml-3]=\"appearance() !== 'ghost'\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n }\n\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [value]=\"peerInputValue()\" />\n }\n\n <input\n #inputRef\n type=\"time\"\n class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n [class.peer]=\"usesPeerFloatingLabel()\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n [class.text-role-disabled]=\"disabled()\"\n [id]=\"inputId()\"\n [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n [value]=\"timeInputValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"fieldName()\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-haspopup]=\"'dialog'\"\n [attr.aria-expanded]=\"isOpen()\"\n (input)=\"onInputChanged($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onInputBlur($event)\"\n (keydown)=\"onInputKeyDown($event)\" />\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"inputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n @if (showClear() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n\n @if (showInFieldHint() && hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1\"\n [hint]=\"hint()\"\n [size]=\"14\" />\n }\n\n @if (postfixIcon() && hasPostfixText()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n\n @if (hasPostfixText()) {\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n }\n\n @if (postfixText()) {\n <div\n [class]=\"postfixTextAdornmentClasses()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ postfixText() }}\n </div>\n }\n\n @if (!hasPostfixText()) {\n <div\n class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n [class.mr-3]=\"appearance() !== 'ghost'\">\n @if (showInFieldHint() && !hasPostfixText()) {\n <lib-hint-icon\n class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n [hint]=\"hint()\"\n [size]=\"inFieldHintIconSize\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\" />\n }\n @if (hasAbsoluteClear()) {\n <button\n type=\"button\"\n (click)=\"onClear($event)\"\n aria-label=\"Clear\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n <svg\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n </svg>\n </button>\n }\n @if (hasAbsolutePostfixIcon()) {\n <button\n type=\"button\"\n (click)=\"onPostfixIconClick($event)\"\n [disabled]=\"disabled()\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\">\n <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n </button>\n }\n @if (showClockIcon()) {\n <button\n type=\"button\"\n aria-label=\"Open time picker\"\n [disabled]=\"disabled()\"\n (click)=\"openClock($event)\"\n class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n [class.text-role-caption]=\"!disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n [style.width.px]=\"iconSize()\"\n [style.height.px]=\"iconSize()\"\n aria-hidden=\"true\">\n <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n </svg>\n </button>\n }\n </div>\n }\n\n @if (!isMobile()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeClock()\"\n (overlayOutsideClick)=\"closeClock()\"\n [cdkConnectedOverlayPositions]=\"[\n { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n ]\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayOffsetY]=\"10\">\n <lib-signal-time-field-panel\n [selectedTime]=\"value()\"\n [timeFormat]=\"timeFormat()\"\n [okLabel]=\"okLabel()\"\n (confirmed)=\"onTimeConfirmed($event)\" />\n </ng-template>\n }\n </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"] }]
|
|
13282
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showClockIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClockIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
|
|
13171
13283
|
type: ViewChild,
|
|
13172
13284
|
args: ['inputRef']
|
|
13173
13285
|
}], fieldWrapper: [{
|
|
@@ -13231,6 +13343,8 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13231
13343
|
...(ngDevMode ? [{ debugName: "digitIndices" }] : /* istanbul ignore next */ []));
|
|
13232
13344
|
focusedIndex = signal(0, /* @ts-ignore */
|
|
13233
13345
|
...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
13346
|
+
isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
|
|
13347
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
13234
13348
|
digits = signal([], /* @ts-ignore */
|
|
13235
13349
|
...(ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []));
|
|
13236
13350
|
maskedAt = signal([], /* @ts-ignore */
|
|
@@ -13262,6 +13376,9 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13262
13376
|
if (this.disabled()) {
|
|
13263
13377
|
classes.push('bg-surface-disabled border-disabled cursor-not-allowed');
|
|
13264
13378
|
}
|
|
13379
|
+
else if (this.readonly()) {
|
|
13380
|
+
classes.push('border-default cursor-default');
|
|
13381
|
+
}
|
|
13265
13382
|
else if (this.showError()) {
|
|
13266
13383
|
classes.push('border-error');
|
|
13267
13384
|
}
|
|
@@ -13283,6 +13400,9 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13283
13400
|
if (this.disabled()) {
|
|
13284
13401
|
classes.push('cursor-not-allowed');
|
|
13285
13402
|
}
|
|
13403
|
+
else if (this.readonly()) {
|
|
13404
|
+
classes.push('cursor-default');
|
|
13405
|
+
}
|
|
13286
13406
|
else {
|
|
13287
13407
|
classes.push('cursor-text');
|
|
13288
13408
|
}
|
|
@@ -13316,7 +13436,7 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13316
13436
|
this.onBlur();
|
|
13317
13437
|
}
|
|
13318
13438
|
onInput(event, index) {
|
|
13319
|
-
if (this.
|
|
13439
|
+
if (!this.isInteractive()) {
|
|
13320
13440
|
return;
|
|
13321
13441
|
}
|
|
13322
13442
|
const inputEl = event.target;
|
|
@@ -13337,7 +13457,7 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13337
13457
|
}
|
|
13338
13458
|
}
|
|
13339
13459
|
onKeyDown(event, index) {
|
|
13340
|
-
if (this.
|
|
13460
|
+
if (!this.isInteractive()) {
|
|
13341
13461
|
return;
|
|
13342
13462
|
}
|
|
13343
13463
|
if (event.key === 'Backspace') {
|
|
@@ -13382,7 +13502,7 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13382
13502
|
}
|
|
13383
13503
|
}
|
|
13384
13504
|
onPaste(event, index) {
|
|
13385
|
-
if (this.
|
|
13505
|
+
if (!this.isInteractive()) {
|
|
13386
13506
|
return;
|
|
13387
13507
|
}
|
|
13388
13508
|
event.preventDefault();
|
|
@@ -13407,7 +13527,7 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13407
13527
|
this.focusIndex(focusIndex);
|
|
13408
13528
|
}
|
|
13409
13529
|
onCellClick(index) {
|
|
13410
|
-
if (this.
|
|
13530
|
+
if (!this.isInteractive()) {
|
|
13411
13531
|
return;
|
|
13412
13532
|
}
|
|
13413
13533
|
this.focusIndex(index);
|
|
@@ -13504,11 +13624,11 @@ class SignalOtpField extends BaseFormControl {
|
|
|
13504
13624
|
}
|
|
13505
13625
|
}
|
|
13506
13626
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13507
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
13627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
13508
13628
|
}
|
|
13509
13629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, decorators: [{
|
|
13510
13630
|
type: Component,
|
|
13511
|
-
args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n" }]
|
|
13631
|
+
args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"!!label()\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"inputId()\">\n\n <div\n input\n role=\"group\"\n class=\"flex flex-wrap gap-2\"\n [attr.aria-label]=\"label() || 'One-time password'\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\">\n\n @for (index of digitIndices(); track index) {\n <div\n class=\"group\"\n [class]=\"cellClasses(index)\"\n (click)=\"onCellClick(index)\">\n @if (shouldShowOverlay(index)) {\n <span\n class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n aria-hidden=\"true\">\n {{ displayChar(index) }}\n </span>\n }\n\n <input\n #digitInput\n class=\"relative z-10\"\n [class]=\"inputClasses(index)\"\n [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n maxlength=\"1\"\n autocomplete=\"one-time-code\"\n [id]=\"index === 0 ? inputId() : null\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n (input)=\"onInput($event, index)\"\n (keydown)=\"onKeyDown($event, index)\"\n (paste)=\"onPaste($event, index)\"\n (focus)=\"onCellFocus(index)\"\n (blur)=\"onCellBlur()\" />\n </div>\n }\n </div>\n</lib-base-signal-input>\n" }]
|
|
13512
13632
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], maskMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMode", required: false }] }], maskDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDelayMs", required: false }] }], obscureChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureChar", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], digitInputs: [{
|
|
13513
13633
|
type: ViewChildren,
|
|
13514
13634
|
args: ['digitInput']
|
|
@@ -13600,8 +13720,6 @@ class SignalRating extends BaseFormControl {
|
|
|
13600
13720
|
...(ngDevMode ? [{ debugName: "maxStars" }] : /* istanbul ignore next */ []));
|
|
13601
13721
|
allowClear = input(true, /* @ts-ignore */
|
|
13602
13722
|
...(ngDevMode ? [{ debugName: "allowClear" }] : /* istanbul ignore next */ []));
|
|
13603
|
-
readonly = input(false, /* @ts-ignore */
|
|
13604
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
13605
13723
|
valueChange = output();
|
|
13606
13724
|
instanceId = ++nextRatingId;
|
|
13607
13725
|
hoverRating = signal(null, /* @ts-ignore */
|
|
@@ -13713,12 +13831,12 @@ class SignalRating extends BaseFormControl {
|
|
|
13713
13831
|
this.valueChange.emit(clamped);
|
|
13714
13832
|
}
|
|
13715
13833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRating, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
13716
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRating, isStandalone: true, selector: "lib-signal-rating", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxStars: { classPropertyName: "maxStars", publicName: "maxStars", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }
|
|
13834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRating, isStandalone: true, selector: "lib-signal-rating", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxStars: { classPropertyName: "maxStars", publicName: "maxStars", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"ratingId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <div\n [id]=\"ratingId()\"\n role=\"slider\"\n tabindex=\"0\"\n [class]=\"sliderClasses()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"value() ?? 0\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (mousemove)=\"onRowMouseMove($event)\"\n (mouseleave)=\"onRowMouseLeave()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n @for (starIndex of starIndices(); track starIndex) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n [class.hover:scale-110]=\"isInteractive()\"\n [disabled]=\"!isInteractive()\"\n (click)=\"onStarClick($event, starIndex)\">\n @switch (getStarFillFor(starIndex)) {\n @case ('full') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n @case ('half') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <defs>\n <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n </clipPath>\n </defs>\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\" />\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n </svg>\n }\n @default {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n }\n </button>\n }\n </div>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <span [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </span>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
|
|
13717
13835
|
}
|
|
13718
13836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRating, decorators: [{
|
|
13719
13837
|
type: Component,
|
|
13720
13838
|
args: [{ selector: 'lib-signal-rating', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n [showExternalLabel]=\"false\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [inputId]=\"ratingId()\">\n\n <div input class=\"group flex w-full items-center gap-3\">\n <div\n [id]=\"ratingId()\"\n role=\"slider\"\n tabindex=\"0\"\n [class]=\"sliderClasses()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"value() ?? 0\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (mousemove)=\"onRowMouseMove($event)\"\n (mouseleave)=\"onRowMouseLeave()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\">\n @for (starIndex of starIndices(); track starIndex) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n [class.hover:scale-110]=\"isInteractive()\"\n [disabled]=\"!isInteractive()\"\n (click)=\"onStarClick($event, starIndex)\">\n @switch (getStarFillFor(starIndex)) {\n @case ('full') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n @case ('half') {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <defs>\n <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n </clipPath>\n </defs>\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\" />\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n fill=\"currentColor\"\n class=\"text-primary\"\n [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n </svg>\n }\n @default {\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"text-role-placeholder\"\n [attr.width]=\"iconSize()\"\n [attr.height]=\"iconSize()\"\n aria-hidden=\"true\">\n <path\n d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n </svg>\n }\n }\n </button>\n }\n </div>\n\n @if (label()) {\n <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n <span [class]=\"labelTextClasses()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </span>\n\n @if (hint()) {\n <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n }\n </div>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
13721
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxStars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStars", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }],
|
|
13839
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxStars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStars", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
13722
13840
|
|
|
13723
13841
|
let nextSliderId = 0;
|
|
13724
13842
|
class SignalSlider extends BaseFormControl {
|
|
@@ -13737,8 +13855,6 @@ class SignalSlider extends BaseFormControl {
|
|
|
13737
13855
|
...(ngDevMode ? [{ debugName: "sliderMax" }] : /* istanbul ignore next */ []));
|
|
13738
13856
|
sliderStep = input(1, /* @ts-ignore */
|
|
13739
13857
|
...(ngDevMode ? [{ debugName: "sliderStep" }] : /* istanbul ignore next */ []));
|
|
13740
|
-
readonly = input(false, /* @ts-ignore */
|
|
13741
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
13742
13858
|
showValueLabel = input(false, /* @ts-ignore */
|
|
13743
13859
|
...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
|
|
13744
13860
|
showValueBubble = input(true, /* @ts-ignore */
|
|
@@ -13921,12 +14037,12 @@ class SignalSlider extends BaseFormControl {
|
|
|
13921
14037
|
this.valueChange.emit(snapped);
|
|
13922
14038
|
}
|
|
13923
14039
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
13924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null },
|
|
14040
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.width.%]=\"visualPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"visualPercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [style.left.%]=\"visualPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayValue()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayValue() }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
13925
14041
|
}
|
|
13926
14042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSlider, decorators: [{
|
|
13927
14043
|
type: Component,
|
|
13928
14044
|
args: [{ selector: 'lib-signal-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.width.%]=\"visualPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"visualPercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused()\"\n [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && showError()\"\n [style.left.%]=\"visualPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayValue()\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayValue() }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
13929
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }],
|
|
14045
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
|
|
13930
14046
|
type: ViewChild,
|
|
13931
14047
|
args: ['trackRef']
|
|
13932
14048
|
}] } });
|
|
@@ -13948,8 +14064,6 @@ class SignalRangeSlider extends BaseFormControl {
|
|
|
13948
14064
|
...(ngDevMode ? [{ debugName: "sliderMax" }] : /* istanbul ignore next */ []));
|
|
13949
14065
|
sliderStep = input(1, /* @ts-ignore */
|
|
13950
14066
|
...(ngDevMode ? [{ debugName: "sliderStep" }] : /* istanbul ignore next */ []));
|
|
13951
|
-
readonly = input(false, /* @ts-ignore */
|
|
13952
|
-
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
13953
14067
|
showValueLabel = input(false, /* @ts-ignore */
|
|
13954
14068
|
...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
|
|
13955
14069
|
showValueBubble = input(true, /* @ts-ignore */
|
|
@@ -14200,12 +14314,12 @@ class SignalRangeSlider extends BaseFormControl {
|
|
|
14200
14314
|
this.valueChange.emit(next);
|
|
14201
14315
|
}
|
|
14202
14316
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRangeSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null },
|
|
14317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n role=\"group\"\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [attr.aria-label]=\"label() || 'Range slider'\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.left.%]=\"visualStartPercent()\"\n [style.width.%]=\"visualActiveWidthPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"bubblePercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n [class.z-20]=\"activeThumb() === 'start'\"\n [style.left.%]=\"visualStartPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"visualDisplayRange().end\"\n [attr.aria-valuenow]=\"visualDisplayRange().start\"\n [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n [class.z-20]=\"activeThumb() === 'end'\"\n [style.left.%]=\"visualEndPercent()\"\n [attr.aria-valuemin]=\"visualDisplayRange().start\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayRange().end\"\n [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14204
14318
|
}
|
|
14205
14319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRangeSlider, decorators: [{
|
|
14206
14320
|
type: Component,
|
|
14207
14321
|
args: [{ selector: 'lib-signal-range-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"true\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"sliderId()\">\n\n <div input class=\"flex w-full items-center gap-3\">\n <div\n #trackRef\n role=\"group\"\n class=\"relative flex-1 touch-none select-none overflow-visible\"\n [attr.aria-label]=\"label() || 'Range slider'\"\n [attr.aria-valuetext]=\"ariaValueText()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-not-allowed]=\"!isInteractive()\"\n [class.opacity-70]=\"disabled()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <div\n class=\"relative w-full rounded-full bg-page-secondary\"\n [class]=\"trackHeightClass()\">\n <div\n class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.transition-[width]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [style.left.%]=\"visualStartPercent()\"\n [style.width.%]=\"visualActiveWidthPercent()\"></div>\n </div>\n\n @if (showValueBubble()) {\n <div\n class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n [class]=\"bubbleOffsetClass()\"\n [class.transition-none]=\"isDragging()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [style.left.%]=\"bubblePercent()\">\n <div\n class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n [class.opacity-0]=\"!showBubble()\"\n [class.opacity-100]=\"showBubble()\"\n [class.scale-90]=\"!showBubble()\"\n [class.scale-100]=\"showBubble()\"\n [class.translate-y-0.5]=\"!showBubble()\"\n [class.translate-y-0]=\"showBubble()\"\n [attr.aria-hidden]=\"!showBubble()\">\n {{ bubbleDisplayValue() }}\n </div>\n </div>\n }\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n [class.z-20]=\"activeThumb() === 'start'\"\n [style.left.%]=\"visualStartPercent()\"\n [attr.aria-valuemin]=\"effectiveMin()\"\n [attr.aria-valuemax]=\"visualDisplayRange().end\"\n [attr.aria-valuenow]=\"visualDisplayRange().start\"\n [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n (focus)=\"onThumbFocus('start')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n <button\n type=\"button\"\n tabindex=\"0\"\n role=\"slider\"\n aria-hidden=\"false\"\n class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n [class]=\"thumbSizeClass()\"\n [class.transition-[left]]=\"!isDragging()\"\n [class.duration-75]=\"!isDragging()\"\n [class.transition-none]=\"isDragging()\"\n [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n [class.z-20]=\"activeThumb() === 'end'\"\n [style.left.%]=\"visualEndPercent()\"\n [attr.aria-valuemin]=\"visualDisplayRange().start\"\n [attr.aria-valuemax]=\"effectiveMax()\"\n [attr.aria-valuenow]=\"visualDisplayRange().end\"\n [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n [disabled]=\"!isInteractive()\"\n (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n (focus)=\"onThumbFocus('end')\"\n (blur)=\"onThumbBlur($event)\"\n (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n </div>\n\n @if (showValueLabel()) {\n <span\n class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\">\n {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n </span>\n }\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14208
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }],
|
|
14322
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
|
|
14209
14323
|
type: ViewChild,
|
|
14210
14324
|
args: ['trackRef']
|
|
14211
14325
|
}] } });
|