@vallift/ngl 22.0.4 → 22.0.6

package/fesm2022/vallift-ngl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, DOCUMENT, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, EnvironmentInjector, ApplicationRef, Injector, createComponent, Inject, Pipe, ViewContainerRef, ContentChildren, ChangeDetectionStrategy, effect, viewChild, DestroyRef, ViewChildren, makeEnvironmentProviders, PLATFORM_ID, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, DOCUMENT, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, EnvironmentInjector, ApplicationRef, Injector, createComponent, Inject, Pipe, ViewContainerRef, ContentChildren, ChangeDetectionStrategy, effect, viewChild, DestroyRef, ViewChildren, resource, makeEnvironmentProviders, PLATFORM_ID, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { retry, throwError, Subject, debounceTime, of, fromEvent, filter as filter$1, take, combineLatest } from 'rxjs';
@@ -17,7 +17,15 @@ import { NgxMaskDirective, provideEnvironmentNgxMask } from 'ngx-mask';
 import * as i2 from '@angular/platform-browser';
 import { isValidDate } from 'rxjs/internal/util/isDate';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { validateAsync, validate, required, min, max } from '@angular/forms/signals';
 
+const DEFAULT_NGL_INPUT_CONFIG = {
+    appearance: 'outline',
+    size: 'md',
+};
+const DEFAULT_NGL_BUTTON_CONFIG = {
+    size: 'md',
+};
 const NGL_CONFIG = new InjectionToken('NGL_CONFIG');
 
 class BaseApiService {
@@ -7462,7 +7470,52 @@ function getFloatingOutlineLabelClasses(size, hasAbsolutePrefixIcon) {
     peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:bg-page`;
 }
 
-function defaultMessageForKind(kind, error) {
+const defaultSignalFormErrors = {
+    required: () => 'Required',
+    email: () => 'Enter a valid email address',
+    minLength: (error) => {
+        const minLength = error.minLength;
+        return minLength != null
+            ? `Minimum ${minLength} characters required`
+            : 'Minimum characters required';
+    },
+    maxLength: (error) => {
+        const maxLength = error.maxLength;
+        return maxLength != null
+            ? `Maximum ${maxLength} characters allowed`
+            : 'Maximum characters allowed';
+    },
+    pattern: () => 'Invalid value',
+    min: (error) => {
+        const minValue = error.min;
+        return minValue != null ? `Minimum ${minValue} required` : 'Minimum value required';
+    },
+    max: (error) => {
+        const maxValue = error.max;
+        return maxValue != null ? `Maximum ${maxValue} allowed` : 'Maximum value allowed';
+    },
+    minDate: () => 'Date is too early',
+    maxDate: () => 'Date is too late',
+    invalidDate: () => 'Invalid date',
+    invalidDateRange: () => 'End date must be on or after the start date',
+    matchFields: () => 'Values do not match',
+    phone: () => 'Enter a valid phone number',
+    integerOnly: () => 'Must be a whole number',
+    unique: () => 'Value is already taken',
+};
+const SIGNAL_FORM_ERRORS = new InjectionToken('SIGNAL_FORM_ERRORS', {
+    providedIn: 'root',
+    factory: () => defaultSignalFormErrors,
+});
+
+function defaultMessageForKind(kind, error, customMessages) {
+    const resolver = customMessages[kind];
+    if (resolver) {
+        const resolved = resolver(error);
+        if (resolved) {
+            return resolved;
+        }
+    }
     switch (kind) {
         case 'required':
             return 'Required';
@@ -7482,11 +7535,35 @@ function defaultMessageForKind(kind, error) {
         }
         case 'pattern':
             return 'Invalid value';
+        case 'min': {
+            const minValue = error.min;
+            return minValue != null ? `Minimum ${minValue} required` : 'Minimum value required';
+        }
+        case 'max': {
+            const maxValue = error.max;
+            return maxValue != null ? `Maximum ${maxValue} allowed` : 'Maximum value allowed';
+        }
+        case 'minDate':
+            return 'Date is too early';
+        case 'maxDate':
+            return 'Date is too late';
+        case 'invalidDate':
+            return 'Invalid date';
+        case 'invalidDateRange':
+            return 'End date must be on or after the start date';
+        case 'matchFields':
+            return 'Values do not match';
+        case 'phone':
+            return 'Enter a valid phone number';
+        case 'integerOnly':
+            return 'Must be a whole number';
+        case 'unique':
+            return 'Value is already taken';
         default:
             return 'Invalid value';
     }
 }
-function getSignalValidationErrorMessage(errors) {
+function getSignalValidationErrorMessage(errors, customMessages = defaultSignalFormErrors) {
     if (!errors.length) {
         return null;
     }
@@ -7494,13 +7571,11 @@ function getSignalValidationErrorMessage(errors) {
     if (error.message) {
         return error.message;
     }
-    // if (customMessages[error.kind]) {
-    //   return customMessages[error.kind];
-    // }
-    return defaultMessageForKind(error.kind, error);
+    return defaultMessageForKind(error.kind, error, customMessages);
 }
 
 class BaseFormControl {
+    signalFormErrors = inject(SIGNAL_FORM_ERRORS);
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     errors = input([], /* @ts-ignore */
@@ -7519,7 +7594,7 @@ class BaseFormControl {
     ...(ngDevMode ? [{ debugName: "showRequiredIndicator" }] : /* istanbul ignore next */ []));
     showError = computed(() => this.invalid() && this.touched(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
-    errorMessage = computed(() => getSignalValidationErrorMessage(this.errors()), /* @ts-ignore */
+    errorMessage = computed(() => getSignalValidationErrorMessage(this.errors(), this.signalFormErrors), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     setValue(value) {
         if (this.disabled()) {
@@ -7543,8 +7618,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Directive
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
 
+class BaseSignalTextInputControl extends BaseFormControl {
+    nglConfig = inject(NGL_CONFIG, { optional: true });
+    appearance = input(this.nglConfig?.input?.appearance ?? DEFAULT_NGL_INPUT_CONFIG.appearance, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input(this.nglConfig?.input?.size ?? DEFAULT_NGL_INPUT_CONFIG.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseSignalTextInputControl, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseSignalTextInputControl, decorators: [{
+            type: Directive
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 let nextInputId = 0;
-class SignalTextField extends BaseFormControl {
+class SignalTextField extends BaseSignalTextInputControl {
     // Label & content
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -7558,11 +7646,6 @@ class SignalTextField extends BaseFormControl {
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     maskPattern = input(null, { ...(ngDevMode ? { debugName: "maskPattern" } : /* istanbul ignore next */ {}), alias: 'mask' });
-    // Appearance
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     // Adornments
     prefixText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
@@ -7689,12 +7772,12 @@ class SignalTextField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextField, isStandalone: true, selector: "lib-signal-text-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextField, decorators: [{
             type: Component,
             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=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }] } });
@@ -7842,17 +7925,13 @@ function commitNumberValue(value, min, max, step) {
 }
 
 let nextNumberFieldId = 0;
-class SignalNumberField extends BaseFormControl {
+class SignalNumberField extends BaseSignalTextInputControl {
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     prefixText = input('', /* @ts-ignore */
@@ -8014,14 +8093,14 @@ class SignalNumberField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalNumberField, isStandalone: true, selector: "lib-signal-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalNumberField, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-number-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon], host: {
                         '[class.hide-number-spin]': 'hideSpinButtons()',
                     }, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"] }]
-        }], 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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }] } });
@@ -8538,7 +8617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], propDecorators: { countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], selectedCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountry", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], listboxLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "listboxLabelledBy", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], countrySelected: [{ type: i0.Output, args: ["countrySelected"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], searchField: [{ type: i0.ViewChild, args: ['searchField', { isSignal: true }] }] } });
 
 let nextPhoneFieldId = 0;
-class SignalPhoneNumberField extends BaseFormControl {
+class SignalPhoneNumberField extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     label = input('', /* @ts-ignore */
@@ -8547,10 +8626,6 @@ class SignalPhoneNumberField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     phoneNumbers = input(phoneNumbersAll, /* @ts-ignore */
@@ -8796,7 +8871,7 @@ class SignalPhoneNumberField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalPhoneNumberField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalPhoneNumberField, isStandalone: true, selector: "lib-signal-phone-number-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalPhoneNumberField, decorators: [{
             type: Component,
@@ -8807,7 +8882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         NgxMaskDirective,
                         SignalPhoneCountryPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], 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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], countryButton: [{
@@ -8844,7 +8919,7 @@ function getAbsoluteTrailingTopClasses(size) {
 }
 
 let nextTextareaId = 0;
-class SignalTextarea extends BaseFormControl {
+class SignalTextarea extends BaseSignalTextInputControl {
     // Label & content
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -8859,11 +8934,6 @@ class SignalTextarea extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     resize = input('vertical', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
-    // Appearance
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     // Native HTML attributes
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
@@ -8956,12 +9026,12 @@ class SignalTextarea extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextarea, isStandalone: true, selector: "lib-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTextarea, isStandalone: true, selector: "lib-signal-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextarea, decorators: [{
             type: Component,
             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" }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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: [{
                 type: ViewChild,
                 args: ['textareaRef']
             }] } });
@@ -9597,7 +9667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 let nextDropdownId = 0;
-class SignalDropdown extends BaseFormControl {
+class SignalDropdown extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     overlayService = inject(OverlayService);
@@ -9623,11 +9693,6 @@ class SignalDropdown extends BaseFormControl {
     // Input configuration
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    // Appearance
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     // Adornments
     prefixText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
@@ -9937,7 +10002,7 @@ class SignalDropdown extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDropdown, isStandalone: true, selector: "lib-signal-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDropdown, decorators: [{
             type: Component,
@@ -9948,7 +10013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         SignalDropdownPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['triggerButton']
             }], dropdownButton: [{
@@ -10155,7 +10220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 let nextMultiSelectDropdownId = 0;
-class SignalMultiSelectDropdown extends BaseFormControl {
+class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     overlayService = inject(OverlayService);
@@ -10181,11 +10246,6 @@ class SignalMultiSelectDropdown extends BaseFormControl {
     // Input configuration
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    // Appearance
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     selectionDisplay = input('count', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionDisplay" }] : /* istanbul ignore next */ []));
     selectedCountLabel = input('selected', /* @ts-ignore */
@@ -10546,7 +10606,7 @@ class SignalMultiSelectDropdown extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalMultiSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalMultiSelectDropdown, isStandalone: true, selector: "lib-signal-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, valuePath: { classPropertyName: "valuePath", publicName: "valuePath", isSignal: true, isRequired: false, transformFunction: null }, displayPath: { classPropertyName: "displayPath", publicName: "displayPath", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalMultiSelectDropdown, decorators: [{
             type: Component,
@@ -10557,7 +10617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         SignalMultiSelectDropdownPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['triggerButton']
             }], dropdownButton: [{
@@ -11153,7 +11213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 let nextDateFieldId = 0;
-class SignalDateField extends BaseFormControl {
+class SignalDateField extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     overlayService = inject(OverlayService);
@@ -11166,10 +11226,6 @@ class SignalDateField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     dateFormat = input('mmddyyyy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     showCalendarIcon = input(true, /* @ts-ignore */
@@ -11477,7 +11533,7 @@ class SignalDateField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateField, isStandalone: true, selector: "lib-signal-date-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateField, decorators: [{
             type: Component,
@@ -11488,7 +11544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         SignalDateFieldPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"] }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -12036,7 +12092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 let nextDateRangeFieldId = 0;
-class SignalDateRangeField extends BaseFormControl {
+class SignalDateRangeField extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     overlayService = inject(OverlayService);
@@ -12049,10 +12105,6 @@ class SignalDateRangeField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     dateFormat = input('mmddyyyy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     showCalendarIcon = input(true, /* @ts-ignore */
@@ -12361,7 +12413,7 @@ class SignalDateRangeField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateRangeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalDateRangeField, isStandalone: true, selector: "lib-signal-date-range-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateRangeField, decorators: [{
             type: Component,
@@ -12373,7 +12425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         NgxMaskDirective,
                         SignalDateRangeFieldPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -12787,7 +12839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }] });
 
 let nextTimeFieldId = 0;
-class SignalTimeField extends BaseFormControl {
+class SignalTimeField extends BaseSignalTextInputControl {
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     overlayService = inject(OverlayService);
@@ -12800,10 +12852,6 @@ class SignalTimeField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     readonly = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    appearance = input('outline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     timeFormat = input('12h', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
     showClockIcon = input(true, /* @ts-ignore */
@@ -13105,7 +13153,7 @@ class SignalTimeField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalTimeField, isStandalone: true, selector: "lib-signal-time-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTimeField, decorators: [{
             type: Component,
@@ -13116,7 +13164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         SignalTimeFieldPanelComponent,
                     ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"] }]
-        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], 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: [{
+        }], 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -14159,6 +14207,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 args: ['trackRef']
             }] } });
 
+function signalValidationError(kind, message) {
+    return { kind, message };
+}
+
+const DEFAULT_TAKEN_MESSAGE = 'Username is already taken';
+const DEFAULT_ERROR_MESSAGE = 'Could not verify username availability';
+function isUsernameTaken(username, takenUsernames) {
+    const normalized = username.trim().toLowerCase();
+    return takenUsernames.some((name) => name.toLowerCase() === normalized);
+}
+function uniqueUsername(path, config) {
+    const takenUsernames = config?.takenUsernames ?? ['admin', 'root', 'test'];
+    const checkDelayMs = config?.checkDelayMs ?? 300;
+    const debounceMs = config?.debounceMs ?? 400;
+    validateAsync(path, {
+        params: ({ value }) => value()?.trim() ?? '',
+        debounce: debounceMs,
+        when: ({ value }) => !!value()?.trim(),
+        factory: (params) => resource({
+            params: () => params(),
+            loader: async ({ params: username }) => {
+                if (!username) {
+                    return { taken: false };
+                }
+                await new Promise((resolve) => setTimeout(resolve, checkDelayMs));
+                return { taken: isUsernameTaken(username, takenUsernames) };
+            },
+        }),
+        onSuccess: (result) => {
+            if (!result?.taken) {
+                return undefined;
+            }
+            return signalValidationError('unique', config?.message ?? DEFAULT_TAKEN_MESSAGE);
+        },
+        onError: () => signalValidationError('unique', DEFAULT_ERROR_MESSAGE),
+    });
+}
+
+const DEFAULT_MESSAGE$4 = 'Values do not match';
+function matchFieldsValidator(otherPath, config) {
+    return ({ value, valueOf }) => {
+        const current = value();
+        const other = valueOf(otherPath);
+        if (current === other) {
+            return undefined;
+        }
+        return signalValidationError('matchFields', config?.message ?? DEFAULT_MESSAGE$4);
+    };
+}
+function matchFields(path, otherPath, config) {
+    validate(path, matchFieldsValidator(otherPath, config));
+}
+function requiredWhen(path, when, config) {
+    required(path, {
+        message: config?.message ?? 'Required',
+        when,
+    });
+}
+
+const REGEX_WITH_SLASHES = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
+const REGEX_WITHOUT_SLASHES = /^(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{4}$/;
+const DEFAULT_FORMAT_MESSAGE = 'Invalid date format. Use mm/dd/yyyy or mmddyyyy.';
+const DEFAULT_INVALID_MESSAGE = 'Invalid date. Make sure the day, month, and year are correct.';
+function isValidCalendarDate(year, month, day) {
+    const date = new Date(year, month - 1, day);
+    return (date.getFullYear() === year && date.getMonth() + 1 === month && date.getDate() === day);
+}
+function validateMmddyyyyDateValue(value) {
+    if (!value) {
+        return null;
+    }
+    if (REGEX_WITH_SLASHES.test(value)) {
+        const [month, day, year] = value.split('/').map(Number);
+        return isValidCalendarDate(year, month, day) ? null : DEFAULT_INVALID_MESSAGE;
+    }
+    if (REGEX_WITHOUT_SLASHES.test(value)) {
+        const month = Number(value.substring(0, 2));
+        const day = Number(value.substring(2, 4));
+        const year = Number(value.substring(4, 8));
+        return isValidCalendarDate(year, month, day) ? null : DEFAULT_INVALID_MESSAGE;
+    }
+    return DEFAULT_FORMAT_MESSAGE;
+}
+function mmddyyyyDateValidator(config) {
+    return ({ value }) => {
+        const errorMessage = validateMmddyyyyDateValue(value());
+        if (!errorMessage) {
+            return undefined;
+        }
+        return signalValidationError('invalidDate', config?.message ?? errorMessage);
+    };
+}
+function mmddyyyyDate(path, config) {
+    validate(path, mmddyyyyDateValidator(config));
+}
+function mmddyyyyDateAsync(path, config) {
+    const debounceMs = config?.debounceMs ?? 500;
+    validateAsync(path, {
+        params: ({ value }) => value(),
+        debounce: debounceMs,
+        factory: (params) => resource({
+            params: () => params(),
+            loader: async ({ params: dateValue }) => {
+                if (!dateValue) {
+                    return null;
+                }
+                await new Promise((resolve) => setTimeout(resolve, debounceMs));
+                return validateMmddyyyyDateValue(dateValue);
+            },
+        }),
+        onSuccess: (errorMessage) => {
+            if (!errorMessage) {
+                return undefined;
+            }
+            return signalValidationError('invalidDate', config?.message ?? errorMessage);
+        },
+        onError: () => signalValidationError('invalidDate', config?.message ?? DEFAULT_INVALID_MESSAGE),
+    });
+}
+
+const DEFAULT_INTEGER_MESSAGE = 'Must be a whole number';
+function integerOnlyValidator(config) {
+    return ({ value }) => {
+        const current = value();
+        if (current == null) {
+            return undefined;
+        }
+        return Number.isInteger(current)
+            ? undefined
+            : signalValidationError('integerOnly', config?.message ?? DEFAULT_INTEGER_MESSAGE);
+    };
+}
+function integerOnly(path, config) {
+    validate(path, integerOnlyValidator(config));
+}
+function numberRange(path, minValue, maxValue, config) {
+    min(path, minValue, {
+        message: config?.minMessage ??
+            (typeof minValue === 'number' ? `Minimum ${minValue} required` : 'Minimum value required'),
+    });
+    max(path, maxValue, {
+        message: config?.maxMessage ??
+            (typeof maxValue === 'number' ? `Maximum ${maxValue} allowed` : 'Maximum value allowed'),
+    });
+}
+
+const DEFAULT_MESSAGE$3 = 'Date must be in the future.';
+function startOfToday$1() {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return today;
+}
+function createOnlyFutureDateValidator(config) {
+    return ({ value }) => {
+        const date = value();
+        if (!date) {
+            return undefined;
+        }
+        return date > startOfToday$1()
+            ? undefined
+            : signalValidationError('invalidDate', config?.message ?? DEFAULT_MESSAGE$3);
+    };
+}
+function onlyFutureDate(path, config) {
+    validate(path, createOnlyFutureDateValidator(config));
+}
+
+const DEFAULT_MESSAGE$2 = 'Date must be in the past.';
+function startOfToday() {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return today;
+}
+function createOnlyPastDateValidator(config) {
+    return ({ value }) => {
+        const date = value();
+        if (!date) {
+            return undefined;
+        }
+        return date < startOfToday()
+            ? undefined
+            : signalValidationError('invalidDate', config?.message ?? DEFAULT_MESSAGE$2);
+    };
+}
+function onlyPastDate(path, config) {
+    validate(path, createOnlyPastDateValidator(config));
+}
+
+const E164_PATTERN = /^\+[1-9]\d{6,14}$/;
+const DEFAULT_MESSAGE$1 = 'Enter a valid phone number';
+function phoneNumberValidator(config) {
+    return ({ value }) => {
+        const phoneValue = value()?.trim() ?? '';
+        if (!phoneValue) {
+            return undefined;
+        }
+        if (!E164_PATTERN.test(phoneValue)) {
+            return signalValidationError('phone', config?.message ?? DEFAULT_MESSAGE$1);
+        }
+        const parsed = parseE164(phoneValue, DEFAULT_PHONE_COUNTRIES);
+        if (!parsed) {
+            return signalValidationError('phone', config?.message ?? DEFAULT_MESSAGE$1);
+        }
+        const nationalDigits = extractDigits(parsed.nationalDigits);
+        const minNationalDigits = config?.minNationalDigits ?? 4;
+        const maxNationalLength = getMaxNationalLength(parsed.country);
+        if (nationalDigits.length < minNationalDigits) {
+            return signalValidationError('phone', config?.message ?? DEFAULT_MESSAGE$1);
+        }
+        if (maxNationalLength != null && nationalDigits.length > maxNationalLength) {
+            return signalValidationError('phone', config?.message ?? DEFAULT_MESSAGE$1);
+        }
+        return undefined;
+    };
+}
+function phoneNumber(path, config) {
+    validate(path, phoneNumberValidator(config));
+}
+
+const DEFAULT_MESSAGE = 'End date must be on or after the start date.';
+function validateDateRangeValidator(config) {
+    return ({ value }) => {
+        const range = value();
+        if (!range?.startDate || !range?.endDate) {
+            return undefined;
+        }
+        return range.startDate <= range.endDate
+            ? undefined
+            : signalValidationError('invalidDateRange', config?.message ?? DEFAULT_MESSAGE);
+    };
+}
+function validateDateRange(path, config) {
+    validate(path, validateDateRangeValidator(config));
+}
+
+const SignalFormValidators = {
+    matchFields,
+    requiredWhen,
+    onlyPastDate,
+    onlyFutureDate,
+    mmddyyyyDate,
+    mmddyyyyDateAsync,
+    validateDateRange,
+    phoneNumber,
+    integerOnly,
+    numberRange,
+    uniqueUsername,
+    matchFieldsValidator,
+    createOnlyPastDateValidator,
+    createOnlyFutureDateValidator,
+    mmddyyyyDateValidator,
+    validateDateRangeValidator,
+    phoneNumberValidator,
+    integerOnlyValidator,
+    signalValidationError,
+    validateMmddyyyyDateValue,
+};
+
 function validateSignalForm(signalForm) {
     const root = signalForm();
     root.markAsTouched();
@@ -14170,7 +14476,11 @@ function validateSignalForm(signalForm) {
 }
 
 class SignalFormDirective {
+    formElement = inject((ElementRef));
     fieldTree = input.required({ ...(ngDevMode ? { debugName: "fieldTree" } : /* istanbul ignore next */ {}), alias: 'signalForm' });
+    requestSubmit() {
+        this.formElement.nativeElement.requestSubmit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: SignalFormDirective, isStandalone: true, selector: "form[signalForm]", inputs: { fieldTree: { classPropertyName: "fieldTree", publicName: "signalForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
@@ -14222,11 +14532,12 @@ function getSignalButtonSpinnerBorderClass(appearance, disabled) {
 
 class SignalButton {
     parentSignalForm = inject(SignalFormDirective, { optional: true });
+    nglConfig = inject(NGL_CONFIG, { optional: true });
     type = input('button', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     appearance = input('primary', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
+    size = input(this.nglConfig?.button?.size ?? DEFAULT_NGL_BUTTON_CONFIG.size, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -14251,21 +14562,28 @@ class SignalButton {
             event.stopPropagation();
             return;
         }
-        if (this.type() === 'submit' && this.parentSignalForm) {
-            if (!validateSignalForm(this.parentSignalForm.fieldTree())) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
+        if (this.type() === 'submit') {
+            event.preventDefault();
+            if (this.parentSignalForm) {
+                if (!validateSignalForm(this.parentSignalForm.fieldTree())) {
+                    event.stopPropagation();
+                    return;
+                }
             }
+            this.clicked.emit();
+            if (this.parentSignalForm) {
+                this.parentSignalForm.requestSubmit();
+            }
+            return;
         }
         this.clicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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  [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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalButton, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-button', imports: [AppSvgIconComponent, SpinnerComponent], template: "<button\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" }]
+            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" }]
         }], 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"] }] } });
 
 class DateUtils {
@@ -14483,13 +14801,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], ctorParameters: () => [] });
 
 function provideNglConfig(config) {
-    return makeEnvironmentProviders([
+    const fullConfig = {
+        ...config,
+        input: { ...DEFAULT_NGL_INPUT_CONFIG, ...config.input },
+        button: { ...DEFAULT_NGL_BUTTON_CONFIG, ...config.button },
+    };
+    const providers = [
         provideEnvironmentNgxMask(),
         {
             provide: NGL_CONFIG,
-            useValue: config,
+            useValue: fullConfig,
         },
-    ]);
+    ];
+    if (config.formErrors) {
+        providers.push({
+            provide: SIGNAL_FORM_ERRORS,
+            useValue: { ...defaultSignalFormErrors, ...config.formErrors },
+        });
+    }
+    return makeEnvironmentProviders(providers);
 }
 
 class ThemeService {
@@ -14567,5 +14897,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalFormDirective, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map