@vallift/ngl 22.0.18 → 22.0.20

package/fesm2022/vallift-ngl.mjs

@@ -3906,13 +3906,13 @@ class BaseOverlayComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col min-h-0 max-h-[80vh] rounded-3xl overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container shrink-0 border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-overlay', imports: [
                         NgClass
-                    ], standalone: true, template: "<div class=\"base-overlay flex flex-col min-h-0 max-h-[80vh] rounded-3xl overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container shrink-0 border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n" }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
@@ -3990,11 +3990,11 @@ class ResponsiveHelperComponent {
         this.screenWidth.set(this.document.documentElement.clientWidth);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResponsiveHelperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n  <div\n    class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ResponsiveHelperComponent, isStandalone: true, selector: "app-responsive-helper", host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "@if (config.enableDevTools) {\n  <div\n    class=\"align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResponsiveHelperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-responsive-helper', standalone: true, imports: [], template: "@if (config.enableDevTools) {\n  <div\n    class=\"fixed bottom-5 left-5 align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n" }]
+            args: [{ selector: 'app-responsive-helper', standalone: true, imports: [], template: "@if (config.enableDevTools) {\n  <div\n    class=\"align-middle font-medium sm:block space-x-2 select-none pointer-events-none\">\n    <div\n      class=\"hidden sm:inline-flex sm:flex-col py-1 px-3 bg-black bg-opacity-50 text-white rounded-md text-caption pointer-events-none\">\n      <!--      <span class=\"block sm:hidden\">mob</span>-->\n      <span class=\"hidden sm:block md:hidden\">sm</span>\n      <span class=\"hidden md:block lg:hidden\">md</span>\n      <span class=\"hidden lg:block xl:hidden\">lg</span>\n      <span class=\"hidden xl:block 2xl:hidden\">xl</span>\n      <span class=\"hidden 2xl:block\">2xl</span>\n    </div>\n\n    <span\n      class=\"text-caption py-1 px-3 bg-black text-white rounded-md bg-opacity-50 select-none pointer-events-none\">{{ screenWidth() }}\n      px</span>\n  </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -7286,15 +7286,13 @@ class BaseSignalInput {
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     inputId = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
-    showInlineError = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showInlineError" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseSignalInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseSignalInput, isStandalone: true, selector: "lib-base-signal-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExternalLabel: { classPropertyName: "showExternalLabel", publicName: "showExternalLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "showRequired", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, showInlineError: { classPropertyName: "showInlineError", publicName: "showInlineError", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  @if (label() && showExternalLabel()) {\n    <label\n      class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n      [class.text-role-disabled]=\"disabled()\"\n      [attr.for]=\"inputId()\">\n      <span>{{ label() }}</span>\n      @if (showRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n      @if (hint()) {\n        <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n      }\n    </label>\n  }\n\n  <ng-content select=\"[input]\"></ng-content>\n\n  @if (showInlineError() && showError()) {\n    <div\n      class=\"mt-2 grid grid-rows-[1fr] transition-[grid-template-rows,margin-top] duration-300 ease-in-out\">\n      <p\n        class=\"min-h-0 overflow-hidden text-caption text-error transition-[opacity,transform] duration-300 ease-in-out opacity-100 translate-y-0\"\n        role=\"alert\">\n        {{ errorMessage() ?? '' }}\n      </p>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseSignalInput, isStandalone: true, selector: "lib-base-signal-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExternalLabel: { classPropertyName: "showExternalLabel", publicName: "showExternalLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequired: { classPropertyName: "showRequired", publicName: "showRequired", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col\">\n  @if (label() && showExternalLabel()) {\n    <label\n      class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n      [class.text-role-disabled]=\"disabled()\"\n      [attr.for]=\"inputId()\">\n      <span>{{ label() }}</span>\n      @if (showRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n      @if (hint()) {\n        <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n      }\n    </label>\n  }\n\n  <ng-content select=\"[input]\"></ng-content>\n\n  <div\n    class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n    [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n    <p\n      class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n      [class.opacity-0]=\"!showError()\"\n      [class.opacity-100]=\"showError()\"\n      [class.-translate-y-1]=\"!showError()\"\n      [class.translate-y-0]=\"showError()\"\n      [attr.role]=\"showError() ? 'alert' : null\"\n      [attr.aria-hidden]=\"!showError()\">\n      {{ showError() ? (errorMessage() ?? '') : '' }}\n    </p>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseSignalInput, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-base-signal-input', imports: [HintIcon], template: "<div class=\"flex flex-col\">\n  @if (label() && showExternalLabel()) {\n    <label\n      class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n      [class.text-role-disabled]=\"disabled()\"\n      [attr.for]=\"inputId()\">\n      <span>{{ label() }}</span>\n      @if (showRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n      @if (hint()) {\n        <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n      }\n    </label>\n  }\n\n  <ng-content select=\"[input]\"></ng-content>\n\n  @if (showInlineError() && showError()) {\n    <div\n      class=\"mt-2 grid grid-rows-[1fr] transition-[grid-template-rows,margin-top] duration-300 ease-in-out\">\n      <p\n        class=\"min-h-0 overflow-hidden text-caption text-error transition-[opacity,transform] duration-300 ease-in-out opacity-100 translate-y-0\"\n        role=\"alert\">\n        {{ errorMessage() ?? '' }}\n      </p>\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExternalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExternalLabel", required: false }] }], showRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequired", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], showInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInlineError", required: false }] }] } });
+            args: [{ selector: 'lib-base-signal-input', imports: [NgClass, HintIcon], template: "<div class=\"flex flex-col\">\n  @if (label() && showExternalLabel()) {\n    <label\n      class=\"text-body2 mb-2.5 flex items-center gap-0.5\"\n      [class.text-role-disabled]=\"disabled()\"\n      [attr.for]=\"inputId()\">\n      <span>{{ label() }}</span>\n      @if (showRequired()) {\n        <span class=\"text-error\" aria-hidden=\"true\">*</span>\n      }\n      @if (hint()) {\n        <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n      }\n    </label>\n  }\n\n  <ng-content select=\"[input]\"></ng-content>\n\n  <div\n    class=\"grid transition-[grid-template-rows,margin-top] duration-300 ease-in-out\"\n    [ngClass]=\"showError() ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr] mt-0'\">\n    <p\n      class=\"overflow-hidden min-h-0 text-caption text-error transition-[opacity,transform] duration-300 ease-in-out\"\n      [class.opacity-0]=\"!showError()\"\n      [class.opacity-100]=\"showError()\"\n      [class.-translate-y-1]=\"!showError()\"\n      [class.translate-y-0]=\"showError()\"\n      [attr.role]=\"showError() ? 'alert' : null\"\n      [attr.aria-hidden]=\"!showError()\">\n      {{ showError() ? (errorMessage() ?? '') : '' }}\n    </p>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExternalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExternalLabel", required: false }] }], showRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequired", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 const IN_FIELD_HINT_ICON_SIZE = 14;
 function usesInFieldLabel(appearance) {
@@ -7777,7 +7775,7 @@ class SignalTextField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -8098,7 +8096,7 @@ class SignalNumberField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -8876,7 +8874,7 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -9031,7 +9029,7 @@ class SignalTextarea extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -9138,7 +9136,7 @@ class SignalCheckbox extends BaseFormControl {
         this.valueChange.emit(nextValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalCheckbox, isStandalone: true, selector: "lib-signal-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"checkboxId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"checkboxId()\">\n      <input\n        #checkboxRef\n        type=\"checkbox\"\n        class=\"sr-only\"\n        [id]=\"checkboxId()\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isActive() && !showError()\"\n        [class.bg-surface-primary]=\"isActive() && !showError()\"\n        [class.border-default]=\"!isActive() && !showError()\"\n        [class.border-error]=\"showError()\"\n        [class.group-hover:border-primary-hover]=\"!disabled() && !showError()\"\n        [class.group-hover:shadow-sm]=\"!disabled()\"\n        [class.group-hover:scale-105]=\"!disabled()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n          [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n            clip-rule=\"evenodd\" />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isIndeterminate()\"\n          [class.opacity-100]=\"isIndeterminate()\">\n          <path\n            d=\"M4 10h12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalCheckbox, isStandalone: true, selector: "lib-signal-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indeterminate: "indeterminateChange", valueChange: "valueChange" }, viewQueries: [{ propertyName: "checkboxRef", first: true, predicate: ["checkboxRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"checkboxId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"checkboxId()\">\n      <input\n        #checkboxRef\n        type=\"checkbox\"\n        class=\"sr-only\"\n        [id]=\"checkboxId()\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isActive() && !showError()\"\n        [class.bg-surface-primary]=\"isActive() && !showError()\"\n        [class.border-default]=\"!isActive() && !showError()\"\n        [class.border-error]=\"showError()\"\n        [class.group-hover:border-primary-hover]=\"!disabled() && !showError()\"\n        [class.group-hover:shadow-sm]=\"!disabled()\"\n        [class.group-hover:scale-105]=\"!disabled()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n          [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n            clip-rule=\"evenodd\" />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isIndeterminate()\"\n          [class.opacity-100]=\"isIndeterminate()\">\n          <path\n            d=\"M4 10h12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalCheckbox, decorators: [{
             type: Component,
@@ -9282,7 +9280,7 @@ class SignalRadio extends BaseFormControl {
         this.valueChange.emit(selected);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadio, isStandalone: true, selector: "lib-signal-radio", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n  [showError]=\"!inGroup() && showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"effectiveDisabled()\"\n  [inputId]=\"radioId()\">\n\n  <div\n    input\n    class=\"group flex items-center gap-3\"\n    [class.w-full]=\"!inGroup()\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!effectiveDisabled()\"\n      [class.cursor-not-allowed]=\"effectiveDisabled()\"\n      [class.opacity-70]=\"effectiveDisabled()\"\n      [for]=\"radioId()\">\n      <input\n        type=\"radio\"\n        class=\"sr-only\"\n        [id]=\"radioId()\"\n        [name]=\"effectiveGroupName()\"\n        [checked]=\"isSelected()\"\n        [disabled]=\"effectiveDisabled()\"\n        [attr.aria-checked]=\"isSelected()\"\n        [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"effectiveShowError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n        [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n        [class.border-error]=\"effectiveShowError()\"\n        [class.group-hover:border-primary-hover]=\"!effectiveDisabled() && !effectiveShowError()\"\n        [class.group-hover:shadow-sm]=\"!effectiveDisabled()\"\n        [class.group-hover:scale-105]=\"!effectiveDisabled()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n        [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n        <div\n          class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n          [class]=\"dotSizeClasses()\"\n          [class.opacity-0]=\"!isSelected()\"\n          [class.opacity-100]=\"isSelected()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (!inGroup() && showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadio, isStandalone: true, selector: "lib-signal-radio", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n  [showError]=\"!inGroup() && showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"effectiveDisabled()\"\n  [inputId]=\"radioId()\">\n\n  <div\n    input\n    class=\"group flex items-center gap-3\"\n    [class.w-full]=\"!inGroup()\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!effectiveDisabled()\"\n      [class.cursor-not-allowed]=\"effectiveDisabled()\"\n      [class.opacity-70]=\"effectiveDisabled()\"\n      [for]=\"radioId()\">\n      <input\n        type=\"radio\"\n        class=\"sr-only\"\n        [id]=\"radioId()\"\n        [name]=\"effectiveGroupName()\"\n        [checked]=\"isSelected()\"\n        [disabled]=\"effectiveDisabled()\"\n        [attr.aria-checked]=\"isSelected()\"\n        [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"effectiveShowError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n        [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n        [class.border-error]=\"effectiveShowError()\"\n        [class.group-hover:border-primary-hover]=\"!effectiveDisabled() && !effectiveShowError()\"\n        [class.group-hover:shadow-sm]=\"!effectiveDisabled()\"\n        [class.group-hover:scale-105]=\"!effectiveDisabled()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n        [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n        <div\n          class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n          [class]=\"dotSizeClasses()\"\n          [class.opacity-0]=\"!isSelected()\"\n          [class.opacity-100]=\"isSelected()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (!inGroup() && showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadio, decorators: [{
             type: Component,
@@ -9336,7 +9334,7 @@ class SignalRadioGroup extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadioGroup, isStandalone: true, selector: "lib-signal-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"groupLabelId()\">\n\n  <div\n    input\n    role=\"radiogroup\"\n    [class]=\"orientationClasses()\"\n    [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n    [attr.aria-invalid]=\"showError() || null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @if (hasOptions()) {\n      @for (option of options(); track option.value) {\n        <lib-signal-radio\n          [optionValue]=\"option.value\"\n          [label]=\"option.label\"\n          [hint]=\"option.hint ?? ''\"\n          [size]=\"size()\"\n          [disabled]=\"disabled() || !!option.disabled\" />\n      }\n    } @else {\n      <ng-content />\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", "showInlineError"] }, { kind: "component", type: SignalRadio, selector: "lib-signal-radio", inputs: ["groupName", "optionValue", "label", "hint", "id", "size"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadioGroup, isStandalone: true, selector: "lib-signal-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"groupLabelId()\">\n\n  <div\n    input\n    role=\"radiogroup\"\n    [class]=\"orientationClasses()\"\n    [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n    [attr.aria-invalid]=\"showError() || null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @if (hasOptions()) {\n      @for (option of options(); track option.value) {\n        <lib-signal-radio\n          [optionValue]=\"option.value\"\n          [label]=\"option.label\"\n          [hint]=\"option.hint ?? ''\"\n          [size]=\"size()\"\n          [disabled]=\"disabled() || !!option.disabled\" />\n      }\n    } @else {\n      <ng-content />\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: SignalRadio, selector: "lib-signal-radio", inputs: ["groupName", "optionValue", "label", "hint", "id", "size"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadioGroup, decorators: [{
             type: Component,
@@ -9353,8 +9351,6 @@ class SignalSwitch extends BaseFormControl {
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    showInlineError = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showInlineError" }] : /* istanbul ignore next */ []));
     valueChange = output();
     instanceId = ++nextSwitchId;
     switchId = computed(() => this.id() ?? `signal-switch-${this.instanceId}`, /* @ts-ignore */
@@ -9432,12 +9428,12 @@ class SignalSwitch extends BaseFormControl {
         this.valueChange.emit(nextValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showInlineError: { classPropertyName: "showInlineError", publicName: "showInlineError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [showInlineError]=\"showInlineError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [showInlineError]=\"showInlineError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInlineError", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+            args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 function getPathValue(obj, path) {
     if (obj == null || !path) {
@@ -10009,7 +10005,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -10613,7 +10609,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -11540,7 +11536,7 @@ class SignalDateField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -12420,7 +12416,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -13160,7 +13156,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
         }
     }
     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 }, 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", "showInlineError"] }, { 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,
@@ -13508,7 +13504,7 @@ class SignalOtpField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, decorators: [{
             type: Component,
@@ -13717,7 +13713,7 @@ class SignalRating extends BaseFormControl {
         this.valueChange.emit(clamped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRating, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRating, isStandalone: true, selector: "lib-signal-rating", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxStars: { classPropertyName: "maxStars", publicName: "maxStars", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"ratingId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <div\n      [id]=\"ratingId()\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [class]=\"sliderClasses()\"\n      [class.ring-4]=\"isFocused()\"\n      [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n      [class.ring-error-subtle]=\"isFocused() && showError()\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"value() ?? 0\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [attr.aria-readonly]=\"readonly() || null\"\n      [attr.aria-required]=\"showRequiredIndicator() || null\"\n      [attr.aria-invalid]=\"showError() || null\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      (mousemove)=\"onRowMouseMove($event)\"\n      (mouseleave)=\"onRowMouseLeave()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\">\n      @for (starIndex of starIndices(); track starIndex) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n          [class.hover:scale-110]=\"isInteractive()\"\n          [disabled]=\"!isInteractive()\"\n          (click)=\"onStarClick($event, starIndex)\">\n          @switch (getStarFillFor(starIndex)) {\n            @case ('full') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-primary\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n            @case ('half') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <defs>\n                  <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n                    <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n                  </clipPath>\n                </defs>\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-role-placeholder\" />\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-primary\"\n                  [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n              </svg>\n            }\n            @default {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-role-placeholder\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n          }\n        </button>\n      }\n    </div>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <span [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRating, isStandalone: true, selector: "lib-signal-rating", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxStars: { classPropertyName: "maxStars", publicName: "maxStars", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"ratingId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <div\n      [id]=\"ratingId()\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [class]=\"sliderClasses()\"\n      [class.ring-4]=\"isFocused()\"\n      [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n      [class.ring-error-subtle]=\"isFocused() && showError()\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"value() ?? 0\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [attr.aria-readonly]=\"readonly() || null\"\n      [attr.aria-required]=\"showRequiredIndicator() || null\"\n      [attr.aria-invalid]=\"showError() || null\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      (mousemove)=\"onRowMouseMove($event)\"\n      (mouseleave)=\"onRowMouseLeave()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\">\n      @for (starIndex of starIndices(); track starIndex) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n          [class.hover:scale-110]=\"isInteractive()\"\n          [disabled]=\"!isInteractive()\"\n          (click)=\"onStarClick($event, starIndex)\">\n          @switch (getStarFillFor(starIndex)) {\n            @case ('full') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-primary\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n            @case ('half') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <defs>\n                  <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n                    <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n                  </clipPath>\n                </defs>\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-role-placeholder\" />\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-primary\"\n                  [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n              </svg>\n            }\n            @default {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-role-placeholder\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n          }\n        </button>\n      }\n    </div>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <span [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRating, decorators: [{
             type: Component,
@@ -13925,7 +13921,7 @@ class SignalSlider extends BaseFormControl {
         this.valueChange.emit(snapped);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.width.%]=\"visualPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"visualPercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\"\n        [style.left.%]=\"visualPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayValue()\"\n        [attr.aria-valuetext]=\"ariaValueText()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayValue() }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.width.%]=\"visualPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"visualPercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\"\n        [style.left.%]=\"visualPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayValue()\"\n        [attr.aria-valuetext]=\"ariaValueText()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayValue() }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSlider, decorators: [{
             type: Component,
@@ -14204,7 +14200,7 @@ class SignalRangeSlider extends BaseFormControl {
         this.valueChange.emit(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRangeSlider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      role=\"group\"\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [attr.aria-label]=\"label() || 'Range slider'\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.left.%]=\"visualStartPercent()\"\n          [style.width.%]=\"visualActiveWidthPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"bubblePercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n        [class.z-20]=\"activeThumb() === 'start'\"\n        [style.left.%]=\"visualStartPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"visualDisplayRange().end\"\n        [attr.aria-valuenow]=\"visualDisplayRange().start\"\n        [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n        (focus)=\"onThumbFocus('start')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n        [class.z-20]=\"activeThumb() === 'end'\"\n        [style.left.%]=\"visualEndPercent()\"\n        [attr.aria-valuemin]=\"visualDisplayRange().start\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayRange().end\"\n        [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n        (focus)=\"onThumbFocus('end')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId", "showInlineError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      role=\"group\"\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [attr.aria-label]=\"label() || 'Range slider'\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.left.%]=\"visualStartPercent()\"\n          [style.width.%]=\"visualActiveWidthPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"bubblePercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n        [class.z-20]=\"activeThumb() === 'start'\"\n        [style.left.%]=\"visualStartPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"visualDisplayRange().end\"\n        [attr.aria-valuenow]=\"visualDisplayRange().start\"\n        [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n        (focus)=\"onThumbFocus('start')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n        [class.z-20]=\"activeThumb() === 'end'\"\n        [style.left.%]=\"visualEndPercent()\"\n        [attr.aria-valuemin]=\"visualDisplayRange().start\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayRange().end\"\n        [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n        (focus)=\"onThumbFocus('end')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRangeSlider, decorators: [{
             type: Component,