@vallift/ngl 22.0.56 → 22.0.58
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
CHANGED
|
@@ -3708,28 +3708,46 @@ function isFloatingOutlineFloated(appearance, isFocused, value) {
|
|
|
3708
3708
|
function getDisabledWrapperClasses() {
|
|
3709
3709
|
return 'bg-surface-disabled border border-disabled cursor-not-allowed';
|
|
3710
3710
|
}
|
|
3711
|
-
function getAppearanceWrapperClasses(appearance, isFocused, disabled = false) {
|
|
3711
|
+
function getAppearanceWrapperClasses(appearance, isFocused, disabled = false, customFill = false) {
|
|
3712
3712
|
if (disabled) {
|
|
3713
3713
|
return getDisabledWrapperClasses();
|
|
3714
3714
|
}
|
|
3715
|
+
const fillBg = customFill
|
|
3716
|
+
? ''
|
|
3717
|
+
: appearance === 'fill'
|
|
3718
|
+
? 'bg-page-secondary'
|
|
3719
|
+
: appearance === 'ghost' ||
|
|
3720
|
+
appearance === 'floating' ||
|
|
3721
|
+
appearance === 'ifta' ||
|
|
3722
|
+
appearance === 'floatingOutline' ||
|
|
3723
|
+
appearance === 'outline'
|
|
3724
|
+
? 'bg-transparent'
|
|
3725
|
+
: 'bg-transparent';
|
|
3715
3726
|
switch (appearance) {
|
|
3716
3727
|
case 'fill':
|
|
3717
|
-
return
|
|
3718
|
-
|
|
3719
|
-
|
|
3728
|
+
return [
|
|
3729
|
+
fillBg,
|
|
3730
|
+
isFocused
|
|
3731
|
+
? 'border border-container hover:border-primary-hover border-primary ring-4 ring-primary-subtle'
|
|
3732
|
+
: 'border border-container hover:border-primary-hover',
|
|
3733
|
+
]
|
|
3734
|
+
.filter(Boolean)
|
|
3735
|
+
.join(' ');
|
|
3720
3736
|
case 'ghost':
|
|
3721
|
-
return '
|
|
3737
|
+
return [fillBg, 'border border-transparent'].filter(Boolean).join(' ');
|
|
3722
3738
|
case 'floating':
|
|
3723
3739
|
case 'ifta':
|
|
3724
3740
|
case 'floatingOutline':
|
|
3725
3741
|
case 'outline':
|
|
3726
|
-
return isFocused
|
|
3727
|
-
? 'bg-transparent border border-primary ring-4 ring-primary-subtle'
|
|
3728
|
-
: 'bg-transparent border border-default hover:border-primary-hover';
|
|
3729
3742
|
default:
|
|
3730
|
-
return
|
|
3731
|
-
|
|
3732
|
-
|
|
3743
|
+
return [
|
|
3744
|
+
fillBg,
|
|
3745
|
+
isFocused
|
|
3746
|
+
? 'border border-primary ring-4 ring-primary-subtle'
|
|
3747
|
+
: 'border border-default hover:border-primary-hover',
|
|
3748
|
+
]
|
|
3749
|
+
.filter(Boolean)
|
|
3750
|
+
.join(' ');
|
|
3733
3751
|
}
|
|
3734
3752
|
}
|
|
3735
3753
|
function getWrapperHeightClasses(appearance, size) {
|
|
@@ -4019,12 +4037,15 @@ class BaseSignalTextInputControl extends BaseFormControl {
|
|
|
4019
4037
|
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
4020
4038
|
size = input(this.nglConfig?.input?.size ?? DEFAULT_NGL_INPUT_CONFIG.size, /* @ts-ignore */
|
|
4021
4039
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
4040
|
+
/** Optional CSS color for the control surface (e.g. `#ffffff`). Overrides appearance bg classes. */
|
|
4041
|
+
fillColor = input(null, /* @ts-ignore */
|
|
4042
|
+
...(ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []));
|
|
4022
4043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalTextInputControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
4023
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: BaseSignalTextInputControl, isStandalone: true, inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
4044
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: BaseSignalTextInputControl, isStandalone: true, inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fillColor: { classPropertyName: "fillColor", publicName: "fillColor", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
|
|
4024
4045
|
}
|
|
4025
4046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseSignalTextInputControl, decorators: [{
|
|
4026
4047
|
type: Directive
|
|
4027
|
-
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
4048
|
+
}], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillColor", required: false }] }] } });
|
|
4028
4049
|
|
|
4029
4050
|
let nextInputId = 0;
|
|
4030
4051
|
class SignalTextField extends BaseSignalTextInputControl {
|
|
@@ -4109,7 +4130,7 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
4109
4130
|
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
4110
4131
|
hasAbsoluteClear = computed(() => this.showClear() && !this.hasPostfixText(), /* @ts-ignore */
|
|
4111
4132
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
4112
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled()), /* @ts-ignore */
|
|
4133
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
4113
4134
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
4114
4135
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
4115
4136
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -4173,11 +4194,11 @@ class SignalTextField extends BaseSignalTextInputControl {
|
|
|
4173
4194
|
}
|
|
4174
4195
|
}
|
|
4175
4196
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
4197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
4177
4198
|
}
|
|
4178
4199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextField, decorators: [{
|
|
4179
4200
|
type: Component,
|
|
4180
|
-
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" }]
|
|
4201
|
+
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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
4181
4202
|
}], 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: [{
|
|
4182
4203
|
type: ViewChild,
|
|
4183
4204
|
args: ['inputRef']
|
|
@@ -8475,7 +8496,7 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
8475
8496
|
return 'numeric';
|
|
8476
8497
|
}, /* @ts-ignore */
|
|
8477
8498
|
...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
|
|
8478
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled()), /* @ts-ignore */
|
|
8499
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
8479
8500
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
8480
8501
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
8481
8502
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -8562,13 +8583,13 @@ class SignalNumberField extends BaseSignalTextInputControl {
|
|
|
8562
8583
|
}
|
|
8563
8584
|
}
|
|
8564
8585
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
8586
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
8566
8587
|
}
|
|
8567
8588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalNumberField, decorators: [{
|
|
8568
8589
|
type: Component,
|
|
8569
8590
|
args: [{ selector: 'lib-signal-number-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon], host: {
|
|
8570
8591
|
'[class.hide-number-spin]': 'hideSpinButtons()',
|
|
8571
|
-
}, 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"] }]
|
|
8592
|
+
}, 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 [style.background-color]=\"fillColor() || null\">\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"] }]
|
|
8572
8593
|
}], 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: [{
|
|
8573
8594
|
type: ViewChild,
|
|
8574
8595
|
args: ['inputRef']
|
|
@@ -9156,7 +9177,7 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
|
|
|
9156
9177
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
9157
9178
|
activeMask = computed(() => this.selectedCountry().mask ?? '', /* @ts-ignore */
|
|
9158
9179
|
...(ngDevMode ? [{ debugName: "activeMask" }] : /* istanbul ignore next */ []));
|
|
9159
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isCountryPickerOpen(), this.disabled()), /* @ts-ignore */
|
|
9180
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isCountryPickerOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
9160
9181
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
9161
9182
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
9162
9183
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -9339,7 +9360,7 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
|
|
|
9339
9360
|
}
|
|
9340
9361
|
}
|
|
9341
9362
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
9363
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
9343
9364
|
}
|
|
9344
9365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalPhoneNumberField, decorators: [{
|
|
9345
9366
|
type: Component,
|
|
@@ -9349,7 +9370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
9349
9370
|
HintIcon,
|
|
9350
9371
|
NgxMaskDirective,
|
|
9351
9372
|
SignalPhoneCountryPanelComponent,
|
|
9352
|
-
], 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" }]
|
|
9373
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
9353
9374
|
}], 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: [{
|
|
9354
9375
|
type: ViewChild,
|
|
9355
9376
|
args: ['inputRef']
|
|
@@ -9437,7 +9458,7 @@ class SignalTextarea extends BaseSignalTextInputControl {
|
|
|
9437
9458
|
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
9438
9459
|
showClear = computed(() => this.showClearButton() && this.hasValue() && !this.readonly() && !this.disabled(), /* @ts-ignore */
|
|
9439
9460
|
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
9440
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled()), /* @ts-ignore */
|
|
9461
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
9441
9462
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
9442
9463
|
textareaSizeClasses = computed(() => getTextareaSizeClasses(this.appearance(), this.size(), this.isFocused(), this.value()), /* @ts-ignore */
|
|
9443
9464
|
...(ngDevMode ? [{ debugName: "textareaSizeClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -9492,11 +9513,11 @@ class SignalTextarea extends BaseSignalTextInputControl {
|
|
|
9492
9513
|
}
|
|
9493
9514
|
}
|
|
9494
9515
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
9495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
9516
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
9496
9517
|
}
|
|
9497
9518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTextarea, decorators: [{
|
|
9498
9519
|
type: Component,
|
|
9499
|
-
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" }]
|
|
9520
|
+
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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
9500
9521
|
}], 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: [{
|
|
9501
9522
|
type: ViewChild,
|
|
9502
9523
|
args: ['textareaRef']
|
|
@@ -10286,7 +10307,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
10286
10307
|
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
10287
10308
|
hasAbsoluteClear = computed(() => this.showClear() && !this.hasPostfixText(), /* @ts-ignore */
|
|
10288
10309
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
10289
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled()), /* @ts-ignore */
|
|
10310
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
10290
10311
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
10291
10312
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
10292
10313
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -10497,7 +10518,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
|
|
|
10497
10518
|
}
|
|
10498
10519
|
}
|
|
10499
10520
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
10521
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
10501
10522
|
}
|
|
10502
10523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDropdown, decorators: [{
|
|
10503
10524
|
type: Component,
|
|
@@ -10507,7 +10528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
10507
10528
|
CdkConnectedOverlay,
|
|
10508
10529
|
HintIcon,
|
|
10509
10530
|
SignalDropdownPanelComponent,
|
|
10510
|
-
], 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" }]
|
|
10531
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
10511
10532
|
}], 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: [{
|
|
10512
10533
|
type: ViewChild,
|
|
10513
10534
|
args: ['triggerButton']
|
|
@@ -10863,7 +10884,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
10863
10884
|
...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
|
|
10864
10885
|
hasAbsoluteClear = computed(() => this.showClear() && !this.hasPostfixText(), /* @ts-ignore */
|
|
10865
10886
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
10866
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled()), /* @ts-ignore */
|
|
10887
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
10867
10888
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
10868
10889
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
10869
10890
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -11105,7 +11126,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
|
|
|
11105
11126
|
}
|
|
11106
11127
|
}
|
|
11107
11128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
11129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
11109
11130
|
}
|
|
11110
11131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalMultiSelectDropdown, decorators: [{
|
|
11111
11132
|
type: Component,
|
|
@@ -11115,7 +11136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
11115
11136
|
CdkConnectedOverlay,
|
|
11116
11137
|
HintIcon,
|
|
11117
11138
|
SignalMultiSelectDropdownPanelComponent,
|
|
11118
|
-
], 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" }]
|
|
11139
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
11119
11140
|
}], 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: [{
|
|
11120
11141
|
type: ViewChild,
|
|
11121
11142
|
args: ['triggerButton']
|
|
@@ -11842,7 +11863,7 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
11842
11863
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
11843
11864
|
hasCalendarIconInset = computed(() => this.showCalendarIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
11844
11865
|
...(ngDevMode ? [{ debugName: "hasCalendarIconInset" }] : /* istanbul ignore next */ []));
|
|
11845
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled()), /* @ts-ignore */
|
|
11866
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
11846
11867
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
11847
11868
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
11848
11869
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -12043,7 +12064,7 @@ class SignalDateField extends BaseSignalTextInputControl {
|
|
|
12043
12064
|
}
|
|
12044
12065
|
}
|
|
12045
12066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
12067
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
12047
12068
|
}
|
|
12048
12069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateField, decorators: [{
|
|
12049
12070
|
type: Component,
|
|
@@ -12053,7 +12074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12053
12074
|
CdkConnectedOverlay,
|
|
12054
12075
|
HintIcon,
|
|
12055
12076
|
SignalDateFieldPanelComponent,
|
|
12056
|
-
], 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"] }]
|
|
12077
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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"] }]
|
|
12057
12078
|
}], 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: [{
|
|
12058
12079
|
type: ViewChild,
|
|
12059
12080
|
args: ['inputRef']
|
|
@@ -12725,7 +12746,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12725
12746
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
12726
12747
|
hasCalendarIconInset = computed(() => this.showCalendarIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
12727
12748
|
...(ngDevMode ? [{ debugName: "hasCalendarIconInset" }] : /* istanbul ignore next */ []));
|
|
12728
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled()), /* @ts-ignore */
|
|
12749
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
12729
12750
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
12730
12751
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
12731
12752
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -12937,7 +12958,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
|
|
|
12937
12958
|
}
|
|
12938
12959
|
}
|
|
12939
12960
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12940
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
12961
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
12941
12962
|
}
|
|
12942
12963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalDateRangeField, decorators: [{
|
|
12943
12964
|
type: Component,
|
|
@@ -12948,7 +12969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
12948
12969
|
HintIcon,
|
|
12949
12970
|
NgxMaskDirective,
|
|
12950
12971
|
SignalDateRangeFieldPanelComponent,
|
|
12951
|
-
], 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" }]
|
|
12972
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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" }]
|
|
12952
12973
|
}], 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: [{
|
|
12953
12974
|
type: ViewChild,
|
|
12954
12975
|
args: ['inputRef']
|
|
@@ -13492,7 +13513,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
13492
13513
|
...(ngDevMode ? [{ debugName: "hasAbsoluteClear" }] : /* istanbul ignore next */ []));
|
|
13493
13514
|
hasClockIconInset = computed(() => this.showClockIcon() && !this.hasPostfixText(), /* @ts-ignore */
|
|
13494
13515
|
...(ngDevMode ? [{ debugName: "hasClockIconInset" }] : /* istanbul ignore next */ []));
|
|
13495
|
-
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled()), /* @ts-ignore */
|
|
13516
|
+
appearanceWrapperClasses = computed(() => getAppearanceWrapperClasses(this.appearance(), this.isFocused() || this.isOpen(), this.disabled(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
13496
13517
|
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
13497
13518
|
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
13498
13519
|
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -13709,7 +13730,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
|
|
|
13709
13730
|
}
|
|
13710
13731
|
}
|
|
13711
13732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13712
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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"] }] });
|
|
13733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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 [style.background-color]=\"fillColor() || null\">\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"] }] });
|
|
13713
13734
|
}
|
|
13714
13735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalTimeField, decorators: [{
|
|
13715
13736
|
type: Component,
|
|
@@ -13719,7 +13740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
|
|
|
13719
13740
|
CdkConnectedOverlay,
|
|
13720
13741
|
HintIcon,
|
|
13721
13742
|
SignalTimeFieldPanelComponent,
|
|
13722
|
-
], 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"] }]
|
|
13743
|
+
], 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 [style.background-color]=\"fillColor() || null\">\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"] }]
|
|
13723
13744
|
}], 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: [{
|
|
13724
13745
|
type: ViewChild,
|
|
13725
13746
|
args: ['inputRef']
|
|
@@ -14797,7 +14818,7 @@ class SignalColorField extends BaseSignalTextInputControl {
|
|
|
14797
14818
|
}, /* @ts-ignore */
|
|
14798
14819
|
...(ngDevMode ? [{ debugName: "displayHex" }] : /* istanbul ignore next */ []));
|
|
14799
14820
|
appearanceWrapperClasses = computed(() => {
|
|
14800
|
-
const base = getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled());
|
|
14821
|
+
const base = getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled(), !!this.fillColor()?.trim());
|
|
14801
14822
|
if (this.showError() && !this.disabled()) {
|
|
14802
14823
|
return `${base} border-error ring-4 ring-error-subtle`;
|
|
14803
14824
|
}
|
|
@@ -14833,11 +14854,11 @@ class SignalColorField extends BaseSignalTextInputControl {
|
|
|
14833
14854
|
this.valueChange.emit(nextValue);
|
|
14834
14855
|
}
|
|
14835
14856
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalColorField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14836
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalColorField, isStandalone: true, selector: "lib-signal-color-field", 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 } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputRef"], 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]=\"colorInputId()\">\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.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\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 [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\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]=\"colorInputId()\"\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]=\"colorInputId()\"\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 <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\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"] }] });
|
|
14857
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalColorField, isStandalone: true, selector: "lib-signal-color-field", 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 } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputRef"], 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]=\"colorInputId()\">\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.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\"\n [style.background-color]=\"fillColor() || null\">\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 [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\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]=\"colorInputId()\"\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]=\"colorInputId()\"\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 <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\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"] }] });
|
|
14837
14858
|
}
|
|
14838
14859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalColorField, decorators: [{
|
|
14839
14860
|
type: Component,
|
|
14840
|
-
args: [{ selector: 'lib-signal-color-field', imports: [BaseSignalInput], 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]=\"colorInputId()\">\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.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\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 [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\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]=\"colorInputId()\"\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]=\"colorInputId()\"\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 <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14861
|
+
args: [{ selector: 'lib-signal-color-field', imports: [BaseSignalInput], 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]=\"colorInputId()\">\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.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\"\n [style.background-color]=\"fillColor() || null\">\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 [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\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]=\"colorInputId()\"\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]=\"colorInputId()\"\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 <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14841
14862
|
}], 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 }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], colorInputRef: [{
|
|
14842
14863
|
type: ViewChild,
|
|
14843
14864
|
args: ['colorInputRef']
|
|
@@ -15136,9 +15157,18 @@ const APPEARANCE_CLASSES = {
|
|
|
15136
15157
|
ghost: 'bg-transparent border border-transparent text-primary hover:bg-page-secondary active:bg-surface-primary-subtle',
|
|
15137
15158
|
text: 'bg-transparent border border-transparent text-primary hover:text-primary-hover active:text-primary-active',
|
|
15138
15159
|
};
|
|
15139
|
-
function
|
|
15160
|
+
function stripBackgroundClasses(classes) {
|
|
15161
|
+
return classes
|
|
15162
|
+
.split(/\s+/)
|
|
15163
|
+
.filter((token) => token && !/^(hover:|active:)?bg-/.test(token))
|
|
15164
|
+
.join(' ');
|
|
15165
|
+
}
|
|
15166
|
+
function getSignalButtonClasses(appearance, size, disabled, fullWidth, customFill = false) {
|
|
15140
15167
|
const widthClass = fullWidth ? 'w-full' : '';
|
|
15141
|
-
|
|
15168
|
+
let stateClasses = disabled ? DISABLED_CLASSES : APPEARANCE_CLASSES[appearance];
|
|
15169
|
+
if (customFill && !disabled) {
|
|
15170
|
+
stateClasses = stripBackgroundClasses(stateClasses);
|
|
15171
|
+
}
|
|
15142
15172
|
return `${BASE_CLASSES} ${SIZE_CLASSES[size]} ${stateClasses} ${widthClass}`.trim();
|
|
15143
15173
|
}
|
|
15144
15174
|
function getSignalButtonIconClasses(appearance, disabled) {
|
|
@@ -15181,8 +15211,11 @@ class SignalButton {
|
|
|
15181
15211
|
...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
|
|
15182
15212
|
iconSize = input(18, /* @ts-ignore */
|
|
15183
15213
|
...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
15214
|
+
/** Optional CSS color for the button surface (e.g. `#ffffff`). Overrides appearance bg classes. */
|
|
15215
|
+
fillColor = input(null, /* @ts-ignore */
|
|
15216
|
+
...(ngDevMode ? [{ debugName: "fillColor" }] : /* istanbul ignore next */ []));
|
|
15184
15217
|
clicked = output();
|
|
15185
|
-
buttonClasses = computed(() => getSignalButtonClasses(this.appearance(), this.size(), this.disabled(), this.fullWidth()), /* @ts-ignore */
|
|
15218
|
+
buttonClasses = computed(() => getSignalButtonClasses(this.appearance(), this.size(), this.disabled(), this.fullWidth(), !!this.fillColor()?.trim()), /* @ts-ignore */
|
|
15186
15219
|
...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
|
|
15187
15220
|
iconClasses = computed(() => getSignalButtonIconClasses(this.appearance(), this.disabled()), /* @ts-ignore */
|
|
15188
15221
|
...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
|
|
@@ -15204,12 +15237,12 @@ class SignalButton {
|
|
|
15204
15237
|
this.clicked.emit();
|
|
15205
15238
|
}
|
|
15206
15239
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15207
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalButton, isStandalone: true, selector: "lib-signal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
|
|
15240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SignalButton, isStandalone: true, selector: "lib-signal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, fillColor: { classPropertyName: "fillColor", publicName: "fillColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [style.background-color]=\"disabled() ? null : fillColor() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: SpinnerComponent, selector: "app-spinner", inputs: ["borderColor"] }] });
|
|
15208
15241
|
}
|
|
15209
15242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignalButton, decorators: [{
|
|
15210
15243
|
type: Component,
|
|
15211
|
-
args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n" }]
|
|
15212
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
15244
|
+
args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\n class=\"cursor-pointer\"\n [type]=\"type()\"\n [disabled]=\"disabled() || loading()\"\n [class]=\"buttonClasses()\"\n [style.background-color]=\"disabled() ? null : fillColor() || null\"\n [attr.aria-busy]=\"loading() || null\"\n (click)=\"onClick($event)\">\n @if (iconSrc()) {\n <app-svg-icon\n [src]=\"iconSrc()!\"\n [size]=\"iconSize()\"\n [class]=\"iconClasses() + (loading() ? ' invisible' : '')\" />\n }\n\n <span [class.invisible]=\"loading()\">\n <ng-content />\n </span>\n\n @if (loading()) {\n <app-spinner\n class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\"\n [borderColor]=\"spinnerBorderClass()\" />\n }\n</button>\n" }]
|
|
15245
|
+
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSrc", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], fillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillColor", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
15213
15246
|
|
|
15214
15247
|
class SignalError {
|
|
15215
15248
|
signalFormErrors = inject(SIGNAL_FORM_ERRORS);
|