@vallift/ngl 22.0.21 → 22.0.23

package/fesm2022/vallift-ngl.mjs

@@ -26,6 +26,13 @@ const DEFAULT_NGL_INPUT_CONFIG = {
 const DEFAULT_NGL_BUTTON_CONFIG = {
     size: 'md',
 };
+const DEFAULT_NGL_LIST_RESPONSE = {
+    data: 'data',
+    totalCount: 'totalCount',
+    pageNumber: 'pageNumber',
+    pageSize: 'pageSize',
+    totalPages: 'totalPages',
+};
 const NGL_CONFIG = new InjectionToken('NGL_CONFIG');
 
 class BaseApiService {
@@ -550,6 +557,48 @@ var RequestState;
 //   }
 // }
 
+function readPath(source, path) {
+    if (source == null || path === '') {
+        return undefined;
+    }
+    return path.split('.').reduce((current, key) => {
+        if (current == null || typeof current !== 'object') {
+            return undefined;
+        }
+        return current[key];
+    }, source);
+}
+function readPathNumber(source, path) {
+    if (path == null) {
+        return undefined;
+    }
+    const paths = Array.isArray(path) ? path : [path];
+    for (const candidate of paths) {
+        const value = readPath(source, candidate);
+        if (value == null || value === '') {
+            continue;
+        }
+        const numberValue = Number(value);
+        if (!Number.isNaN(numberValue)) {
+            return numberValue;
+        }
+    }
+    return undefined;
+}
+function resolveListResponseConfig(partial) {
+    return {
+        ...DEFAULT_NGL_LIST_RESPONSE,
+        ...partial,
+    };
+}
+function getListResponseData(response, config = DEFAULT_NGL_LIST_RESPONSE) {
+    const data = readPath(response, config.data);
+    return Array.isArray(data) ? data : [];
+}
+function getListResponseTotalCount(response, config = DEFAULT_NGL_LIST_RESPONSE) {
+    return readPathNumber(response, config.totalCount) ?? 0;
+}
+
 class PaginationState {
     responseSignal = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "responseSignal" }] : /* istanbul ignore next */ []));
@@ -563,6 +612,7 @@ class PaginationState {
     ...(ngDevMode ? [{ debugName: "errorSignal" }] : /* istanbul ignore next */ []));
     stateSignal = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
+    listResponse;
     response = this.responseSignal.asReadonly();
     loading = this.loadingSignal.asReadonly();
     success = this.successSignal.asReadonly();
@@ -581,6 +631,8 @@ class PaginationState {
     ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     constructor() {
         this.stateSignal.set(RequestState.idle);
+        const nglConfig = inject(NGL_CONFIG, { optional: true });
+        this.listResponse = resolveListResponseConfig(nglConfig?.listResponse);
     }
     notifyLoading() {
         this.loadingSignal.set(true);
@@ -597,22 +649,25 @@ class PaginationState {
         this.failedSignal.set(false);
         this.errorSignal.set(null);
         this.stateSignal.set(RequestState.success);
-        if (Array.isArray(response?.data)) {
-            this.items.update(prev => {
-                return [...prev, ...response.data];
-            });
+        const data = getListResponseData(response, this.listResponse);
+        if (data.length > 0) {
+            this.items.update(prev => [...prev, ...data]);
         }
-        if (response?.pageNumber) {
-            this.pageNumber.set(Number(response.pageNumber));
+        const pageNumber = readPathNumber(response, this.listResponse.pageNumber);
+        if (pageNumber != null) {
+            this.pageNumber.set(pageNumber);
         }
-        if (response?.pageSize) {
-            this.pageSize.set(Number(response.pageSize));
+        const pageSize = readPathNumber(response, this.listResponse.pageSize);
+        if (pageSize != null) {
+            this.pageSize.set(pageSize);
         }
-        if (response?.totalRecords) {
-            this.totalRecords.set(Number(response.totalRecords));
+        const totalRecords = readPathNumber(response, this.listResponse.totalCount);
+        if (totalRecords != null) {
+            this.totalRecords.set(totalRecords);
         }
-        if (response?.totalPages) {
-            this.totalPages.set(response.totalRecords(response.totalPages));
+        const totalPages = readPathNumber(response, this.listResponse.totalPages);
+        if (totalPages != null) {
+            this.totalPages.set(totalPages);
         }
     }
     notifyError(errorMsg) {
@@ -1320,6 +1375,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class BaseTableComponent {
+    nglConfig = inject(NGL_CONFIG, { optional: true });
+    listResponse = resolveListResponseConfig(this.nglConfig?.listResponse);
     pageSize = input(10, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     state = input(/* @ts-ignore */
@@ -1335,8 +1392,14 @@ class BaseTableComponent {
     onPageChange(event) {
         this.pageChange.emit(event);
     }
+    getRows() {
+        return getListResponseData(this.state()?.response(), this.listResponse);
+    }
+    getTotalCount() {
+        return getListResponseTotalCount(this.state()?.response(), this.listResponse);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, isHorizontallyScrollable: { classPropertyName: "isHorizontallyScrollable", publicName: "isHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n", styles: [""], dependencies: [{ kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
@@ -1345,7 +1408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         ShimmerComponent,
                         NgClass,
                         PaginationComponent
-                    ], template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && (state()?.response()?.data ?? []).length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"state()?.response()?.totalCount ?? 0\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n" }]
+                    ], template: "<div class=\"bg-white rounded-lg h-full\">\n  <table class=\"w-full h-full min-w-full bg-white\" [ngClass]=\"isHorizontallyScrollable() ? 'overflow-x-auto' : ''\">\n\n    <!--    Table header-->\n    <thead class=\"sticky top-0 bg-white z-10\">\n    <tr class=\"text-overline text-neutral-500 text-nowrap h-min\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n    <tr>\n      <th colspan=\"100\">\n        <div class=\"border-b border-neutral-200\"></div>\n      </th>\n    </tr>\n    </thead>\n\n    <!--    List Items-->\n    <tbody class=\"h-min\">\n    <ng-content select=\"[body]\"></ng-content>\n    </tbody>\n\n    <!--    Shimmer-->\n    @if (state()?.loading()) {\n      <tbody class=\"bg-white text-center py-14\">\n      <tr>\n        <td colspan=\"100\" class=\"h-min\">\n          <div class=\"flex flex-col gap-10 px-6 py-8\">\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n            <app-shimmer type=\"multiline\"></app-shimmer>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <!--    No Table Indicator-->\n    @if (state()?.success() && getRows().length <= 0) {\n      <tbody>\n      <tr>\n        <td colspan=\"1000\">\n          <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n            <app-no-data-table></app-no-data-table>\n          </div>\n        </td>\n      </tr>\n      </tbody>\n    }\n\n    <tbody class=\"h-full\"></tbody>\n\n\n    <!--    Paginator-->\n    <tbody class=\"bottom-0 sticky\">\n    <tr>\n      <td colspan=\"100\">\n        <div class=\"bg-white w-full\">\n          <app-pagination\n            class=\"w-full\"\n            [pageSize]=\"itemsPerPage()\"\n            [totalItems]=\"getTotalCount()\"\n            (pageChange)=\"onPageChange($event)\">\n          </app-pagination>\n        </div>\n      </td>\n    </tr>\n    </tbody>\n\n  </table>\n</div>\n\n\n<!--Example-->\n<!--    <app-base-table appTableResizableColumns sortableTable [state]=\"driverListState\">-->\n<!--      <ng-container head>-->\n<!--        <th class=\"p-4 text-left\">FULL NAME</th>-->\n<!--        <th class=\"p-4 text-center \">CONTACT</th>-->\n<!--        <th class=\"p-4 text-center \">HIRED DATA</th>-->\n<!--        &lt;!&ndash;        <th class=\"p-4 text-center \">LICENSE EXPIRING</th>&ndash;&gt;-->\n<!--        <th class=\"p-4 text-center \">STATUS</th>-->\n<!--        <th class=\"p-4 text-center \"></th>-->\n<!--      </ng-container>-->\n\n<!--      <ng-container body>-->\n<!--        @for (item of driverListState.response()?.data; track item; ) {-->\n<!--          <tr class=\"border-b border-neutral-100 w-full\">-->\n<!--            <td class=\"px-4 py-2 text-left\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-neutral-800\">{{ item.fullName }}</span>-->\n<!--                <span class=\"text-caption text-neutral-500\">{{ item.code }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 py-2 text-center\">-->\n<!--              <div class=\"flex flex-col gap-2\">-->\n<!--                <span class=\"text-body2 text-info-500\">{{ item.email }}</span>-->\n<!--                <span class=\"text-body2 text-neutral-500\">{{ item.phoneNumber }}</span>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"px-4 text-body2 text-center\">{{ item.hiredDate | date:'MMM d, y' }}</td>-->\n<!--            &lt;!&ndash;            <td class=\"px-4 text-body2 text-center\">{{ item.licenseExpiringDate |date:'MMM d, y h:mm a' }}</td>&ndash;&gt;-->\n<!--            <td class=\"px-4\">-->\n<!--              <div class=\"flex justify-center\">-->\n<!--                <app-driver-status-badge [driver]=\"item\"></app-driver-status-badge>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--            <td class=\"p-4 cursor-pointer items-center\">-->\n<!--              <div class=\"flex justify-center items-center\">-->\n<!--                <app-button (click)=\"onViewDriverClicked(item)\" appearance=\"textType\" textButtonColor=\"text-info-500\">-->\n<!--                  View-->\n<!--                </app-button>-->\n<!--                <app-context-menu-icon></app-context-menu-icon>-->\n<!--              </div>-->\n<!--            </td>-->\n<!--          </tr>-->\n<!--        }-->\n<!--      </ng-container>-->\n<!--    </app-base-table>-->\n" }]
         }], propDecorators: { pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], isHorizontallyScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHorizontallyScrollable", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 class SortableTableDirective {
@@ -2993,6 +3056,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 
 class DataTableComponent extends BaseControlValueAccessorV3 {
     headerComponents;
+    nglConfig = inject(NGL_CONFIG, { optional: true });
+    listResponse = resolveListResponseConfig(this.nglConfig?.listResponse);
     columnDefs = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
     state = input.required(/* @ts-ignore */
@@ -3027,6 +3092,12 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
     paginationEvent;
     tableSortEvent;
     searchText = '';
+    getRows() {
+        return getListResponseData(this.state().response(), this.listResponse);
+    }
+    getTotalCount() {
+        return getListResponseTotalCount(this.state().response(), this.listResponse);
+    }
     ngAfterViewInit() {
         let paginationEvent = {
             pageNumber: 1, pageSize: this.pageSize()
@@ -3213,7 +3284,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                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                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                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                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "size", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -3234,7 +3305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         TextButtonSmall,
                         DynamicRendererComponent,
                         ContextMenuButtonComponent
-                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                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                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
+                    ], template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && getRows().length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if (getRows().length > 0) {\n        <tbody class=\"\">\n          @for (item of getRows(); track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                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                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"getTotalCount()\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n" }]
         }], propDecorators: { headerComponents: [{
                 type: ContentChildren,
                 args: ['filter']
@@ -7469,6 +7540,22 @@ function getFloatingOutlineLabelClasses(size, hasAbsolutePrefixIcon) {
     peer-[:not(:placeholder-shown)]:scale-90 peer-[:not(:placeholder-shown)]:text-caption
     peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:bg-page`;
 }
+function getPrefixTextAdornmentClasses(enableBackground, appearance) {
+    const base = 'flex shrink-0 items-center self-stretch whitespace-nowrap px-3 text-role-caption';
+    const backgroundClasses = enableBackground
+        ? 'border-r border-default bg-page-secondary'
+        : '';
+    const roundedClasses = enableBackground && appearance === 'floatingOutline' ? 'rounded-l-xl' : '';
+    return [base, backgroundClasses, roundedClasses].filter(Boolean).join(' ');
+}
+function getPostfixTextAdornmentClasses(enableBackground, appearance) {
+    const base = 'flex shrink-0 items-center self-stretch whitespace-nowrap px-3 text-role-caption';
+    const backgroundClasses = enableBackground
+        ? 'border-l border-default bg-page-secondary'
+        : '';
+    const roundedClasses = enableBackground && appearance === 'floatingOutline' ? 'rounded-r-xl' : '';
+    return [base, backgroundClasses, roundedClasses].filter(Boolean).join(' ');
+}
 
 const defaultSignalFormErrors = {
     required: () => 'Required',
@@ -7585,6 +7672,8 @@ class BaseFormControl {
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     invalid = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
@@ -7600,7 +7689,7 @@ class BaseFormControl {
     errorMessage = computed(() => getSignalValidationErrorMessage(this.errors(), this.signalFormErrors), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     setValue(value) {
-        if (this.disabled()) {
+        if (this.disabled() || this.readonly()) {
             return;
         }
         this.value.set(value);
@@ -7615,11 +7704,11 @@ class BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", isFocused: "isFocusedChange" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", isFocused: "isFocusedChange" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, decorators: [{
             type: Directive
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
 
 class BaseSignalTextInputControl extends BaseFormControl {
     nglConfig = inject(NGL_CONFIG, { optional: true });
@@ -7646,8 +7735,6 @@ class SignalTextField extends BaseSignalTextInputControl {
     // Input configuration
     inputType = input('text', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     maskPattern = input(null, { ...(ngDevMode ? { debugName: "maskPattern" } : /* istanbul ignore next */ {}), alias: 'mask' });
     // Adornments
     prefixText = input('', /* @ts-ignore */
@@ -7658,6 +7745,10 @@ class SignalTextField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     // Native HTML attributes
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
@@ -7701,6 +7792,10 @@ class SignalTextField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
@@ -7775,12 +7870,12 @@ 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"] }, { 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 }, maskPattern: { classPropertyName: "maskPattern", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextField, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-text-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon, NgxMaskDirective], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
+            args: [{ selector: 'lib-signal-text-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon, NgxMaskDirective], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [type]=\"inputType()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.pattern]=\"pattern()[0]?.source ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], inputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputType", required: false }] }], maskPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }] } });
@@ -7935,8 +8030,6 @@ class SignalNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     prefixText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
     prefixIcon = input(/* @ts-ignore */
@@ -7945,6 +8038,10 @@ class SignalNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     fieldName = input(/* @ts-ignore */
@@ -7989,6 +8086,10 @@ class SignalNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null, /* @ts-ignore */
@@ -8096,14 +8197,14 @@ 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"] }, { 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 }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, numberMin: { classPropertyName: "numberMin", publicName: "numberMin", isSignal: true, isRequired: false, transformFunction: null }, numberMax: { classPropertyName: "numberMax", publicName: "numberMax", isSignal: true, isRequired: false, transformFunction: null }, numberStep: { classPropertyName: "numberStep", publicName: "numberStep", isSignal: true, isRequired: false, transformFunction: null }, hideSpinButtons: { classPropertyName: "hideSpinButtons", publicName: "hideSpinButtons", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", postfixIconClick: "postfixIconClick" }, host: { properties: { "class.hide-number-spin": "hideSpinButtons()" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalNumberField, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-number-field', imports: [AppSvgIconComponent, BaseSignalInput, HintIcon], host: {
                         '[class.hide-number-spin]': 'hideSpinButtons()',
-                    }, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], numberMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMin", required: false }] }], numberMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMax", required: false }] }], numberStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberStep", required: false }] }], hideSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSpinButtons", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
+                    }, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      <input\n        #inputRef\n        class=\"h-full w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        type=\"number\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"numberInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.min]=\"numberMin() ?? null\"\n        [attr.max]=\"numberMax() ?? null\"\n        [attr.step]=\"numberStep() ?? null\"\n        [attr.inputmode]=\"inputMode()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur()\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear()\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (hasAbsolutePostfixIcon() || (showInFieldHint() && !hasPostfixText()) || hasAbsoluteClear()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: [":host(.hide-number-spin) input[type=number]::-webkit-inner-spin-button,:host(.hide-number-spin) input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}:host(.hide-number-spin) input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], numberMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMin", required: false }] }], numberMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberMax", required: false }] }], numberStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberStep", required: false }] }], hideSpinButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSpinButtons", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }] } });
@@ -8629,8 +8730,6 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     phoneNumbers = input(phoneNumbersAll, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "phoneNumbers" }] : /* istanbul ignore next */ []));
     defaultCountryId = input('IN', /* @ts-ignore */
@@ -8874,7 +8973,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"] }, { 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 }, phoneNumbers: { classPropertyName: "phoneNumbers", publicName: "phoneNumbers", isSignal: true, isRequired: false, transformFunction: null }, defaultCountryId: { classPropertyName: "defaultCountryId", publicName: "defaultCountryId", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", enter: "enter", clear: "clear", keyDown: "keyDown", countryChange: "countryChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "countryButton", first: true, predicate: ["countryButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalPhoneCountryPanelComponent, selector: "lib-signal-phone-country-panel", inputs: ["countries", "selectedCountry", "iconSize", "panelWidth", "listboxLabelledBy", "panelId", "noOptionsMessage"], outputs: ["countrySelected", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalPhoneNumberField, decorators: [{
             type: Component,
@@ -8884,8 +8983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         NgxMaskDirective,
                         SignalPhoneCountryPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled() || readonly()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], phoneNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumbers", required: false }] }], defaultCountryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountryId", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }], inputRef: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    <button\n      #countryButton\n      type=\"button\"\n      class=\"flex shrink-0 items-center gap-1 self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption cursor-pointer transition-colors duration-200 ease-in-out hover:bg-page-secondary/80 disabled:cursor-not-allowed\"\n      [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n      [class.text-role-disabled]=\"disabled()\"\n      [class.text-primary]=\"isCountryPickerOpen() && !showError() && !disabled()\"\n      [id]=\"countryButtonId()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-expanded]=\"isCountryPickerOpen()\"\n      [attr.aria-controls]=\"countryButtonId() + '-panel'\"\n      (click)=\"toggleCountryPicker()\"\n      (keydown)=\"onCountryButtonKeyDown($event)\">\n      <span class=\"text-base leading-none\" aria-hidden=\"true\">{{ selectedCountry().flag }}</span>\n      <span>+{{ selectedCountry().dialCode }}</span>\n      <span\n        class=\"flex items-center justify-center\"\n        [class.rotate-180]=\"isCountryPickerOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </button>\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"tel\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [mask]=\"activeMask()\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"nationalInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.inputmode]=\"'tel'\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeyDown($event)\">\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isCountryPickerOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (hasAbsoluteClear() || showInFieldHint()) {\n      <div\n        class=\"absolute inset-y-0 right-0 flex items-center gap-0.5\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"countryButton\"\n      [cdkConnectedOverlayOpen]=\"isCountryPickerOpen()\"\n      (overlayOutsideClick)=\"closeCountryPicker()\"\n      [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n      [cdkConnectedOverlayPositions]=\"[\n        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n      ]\"\n      [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n      [cdkConnectedOverlayOffsetY]=\"10\">\n      <lib-signal-phone-country-panel\n        [panelId]=\"countryButtonId() + '-panel'\"\n        [countries]=\"countries()\"\n        [selectedCountry]=\"selectedCountry()\"\n        [iconSize]=\"iconSize()\"\n        [panelWidth]=\"countryPanelWidth()\"\n        [listboxLabelledBy]=\"countryButtonId()\"\n        (countrySelected)=\"onCountrySelected($event)\"\n        (dismissed)=\"closeCountryPicker()\" />\n    </ng-template>\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], phoneNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumbers", required: false }] }], defaultCountryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountryId", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enter: [{ type: i0.Output, args: ["enter"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], countryButton: [{
@@ -8931,8 +9030,6 @@ class SignalTextarea extends BaseSignalTextInputControl {
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     // Textarea configuration
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     rows = input(3, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     resize = input('vertical', /* @ts-ignore */
@@ -9029,12 +9126,12 @@ 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"] }, { 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 }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", clear: "clear", keyDown: "keyDown" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n    [class]=\"appearanceWrapperClasses()\">\n    <div class=\"relative flex min-w-0 flex-1 items-start\">\n      <textarea\n        #textareaRef\n        class=\"w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [rows]=\"rows()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></textarea>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showInFieldHint() || showClear()) {\n      <div\n        class=\"absolute right-0 flex items-center gap-0.5\"\n        [class]=\"absoluteTrailingTopClasses()\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-textarea', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    class=\"relative flex items-start w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline' && resize() === 'none'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline' || resize() !== 'none'\"\n    [class]=\"appearanceWrapperClasses()\">\n    <div class=\"relative flex min-w-0 flex-1 items-start\">\n      <textarea\n        #textareaRef\n        class=\"w-full transition\n            placeholder:text-role-placeholder\n            outline-none\n            bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"textareaSizeClasses() + ' ' + horizontalPaddingClasses() + ' ' + textareaResizeClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [rows]=\"rows()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.minlength]=\"minLength() ?? null\"\n        [attr.maxlength]=\"maxLength() ?? null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (input)=\"updateValue($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></textarea>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showInFieldHint() || showClear()) {\n      <div\n        class=\"absolute right-0 flex items-center gap-0.5\"\n        [class]=\"absoluteTrailingTopClasses()\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\" />\n        }\n        @if (showClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear()\"\n            aria-label=\"Clear\"\n            class=\"p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], textareaRef: [{
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], textareaRef: [{
                 type: ViewChild,
                 args: ['textareaRef']
             }] } });
@@ -9063,6 +9160,8 @@ class SignalCheckbox extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : /* istanbul ignore next */ []));
     isActive = computed(() => !!this.isChecked() || this.isIndeterminate(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     boxAppearanceClasses = computed(() => {
         const size = this.size() === 'sm' ? 'w-4 h-4' : this.size() === 'lg' ? 'w-6 h-6' : 'w-5 h-5';
         return `relative shrink-0 inline-flex items-center justify-center rounded-sm border-2 transition-all duration-200 bg-surface ${size}`;
@@ -9082,8 +9181,12 @@ class SignalCheckbox extends BaseFormControl {
     labelTextClasses = computed(() => {
         const typography = this.size() === 'sm' ? 'text-caption' : this.size() === 'lg' ? 'text-body1' : 'text-body2';
         const color = this.disabled() ? 'text-role-disabled' : 'text-role-body';
-        const hover = this.disabled() ? '' : ' group-hover:text-primary-hover';
-        const cursor = this.disabled() ? 'cursor-not-allowed' : 'cursor-pointer';
+        const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
+        const cursor = this.disabled()
+            ? 'cursor-not-allowed'
+            : this.readonly()
+                ? 'cursor-default'
+                : 'cursor-pointer';
         return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
@@ -9115,7 +9218,7 @@ class SignalCheckbox extends BaseFormControl {
         }
     }
     onChange(event) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         const checked = event.target.checked;
@@ -9124,7 +9227,7 @@ class SignalCheckbox extends BaseFormControl {
         this.valueChange.emit(checked);
     }
     onKeyDown(event) {
-        if (event.key !== 'Enter' || this.disabled()) {
+        if (event.key !== 'Enter' || !this.isInteractive()) {
             return;
         }
         event.preventDefault();
@@ -9136,11 +9239,11 @@ 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"] }, { 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]=\"isInteractive()\"\n      [class.cursor-default]=\"readonly() && !disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"checkboxId()\">\n      <input\n        #checkboxRef\n        type=\"checkbox\"\n        class=\"sr-only\"\n        [id]=\"checkboxId()\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isActive() && !showError()\"\n        [class.bg-surface-primary]=\"isActive() && !showError()\"\n        [class.border-default]=\"!isActive() && !showError()\"\n        [class.border-error]=\"showError()\"\n        [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n        [class.group-hover:shadow-sm]=\"isInteractive()\"\n        [class.group-hover:scale-105]=\"isInteractive()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n          [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n            clip-rule=\"evenodd\" />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isIndeterminate()\"\n          [class.opacity-100]=\"isIndeterminate()\">\n          <path\n            d=\"M4 10h12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"checkboxId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"checkboxId()\">\n      <input\n        #checkboxRef\n        type=\"checkbox\"\n        class=\"sr-only\"\n        [id]=\"checkboxId()\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isActive() && !showError()\"\n        [class.bg-surface-primary]=\"isActive() && !showError()\"\n        [class.border-default]=\"!isActive() && !showError()\"\n        [class.border-error]=\"showError()\"\n        [class.group-hover:border-primary-hover]=\"!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" }]
+            args: [{ selector: 'lib-signal-checkbox', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"checkboxId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-default]=\"readonly() && !disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"checkboxId()\">\n      <input\n        #checkboxRef\n        type=\"checkbox\"\n        class=\"sr-only\"\n        [id]=\"checkboxId()\"\n        [checked]=\"isChecked()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : isChecked()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isActive() && !showError()\"\n        [class.bg-surface-primary]=\"isActive() && !showError()\"\n        [class.border-default]=\"!isActive() && !showError()\"\n        [class.border-error]=\"showError()\"\n        [class.group-hover:border-primary-hover]=\"isInteractive() && !showError()\"\n        [class.group-hover:shadow-sm]=\"isInteractive()\"\n        [class.group-hover:scale-105]=\"isInteractive()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isChecked() || isIndeterminate()\"\n          [class.opacity-100]=\"isChecked() && !isIndeterminate()\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n            clip-rule=\"evenodd\" />\n        </svg>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          class=\"pointer-events-none absolute text-white transition-opacity duration-200\"\n          [class]=\"checkmarkSizeClasses()\"\n          [class.opacity-0]=\"!isIndeterminate()\"\n          [class.opacity-100]=\"isIndeterminate()\">\n          <path\n            d=\"M4 10h12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"checkboxId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], checkboxRef: [{
                 type: ViewChild,
                 args: ['checkboxRef']
@@ -9173,6 +9276,10 @@ class SignalRadio extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "effectiveValue" }] : /* istanbul ignore next */ []));
     effectiveDisabled = computed(() => this.inGroup() ? this.group.disabled() || this.disabled() : this.disabled(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveReadonly = computed(() => this.inGroup() ? this.group.readonly() : this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveReadonly" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => !this.effectiveDisabled() && !this.effectiveReadonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     effectiveGroupName = computed(() => {
         if (this.inGroup()) {
             return this.group.effectiveGroupName();
@@ -9218,8 +9325,12 @@ class SignalRadio extends BaseFormControl {
                 ? 'text-body1'
                 : 'text-body2';
         const color = this.effectiveDisabled() ? 'text-role-disabled' : 'text-role-body';
-        const hover = this.effectiveDisabled() ? '' : ' group-hover:text-primary-hover';
-        const cursor = this.effectiveDisabled() ? 'cursor-not-allowed' : 'cursor-pointer';
+        const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
+        const cursor = this.effectiveDisabled()
+            ? 'cursor-not-allowed'
+            : this.effectiveReadonly()
+                ? 'cursor-default'
+                : 'cursor-pointer';
         return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
@@ -9235,7 +9346,7 @@ class SignalRadio extends BaseFormControl {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotSizeClasses" }] : /* istanbul ignore next */ []));
     onChange(event) {
-        if (this.effectiveDisabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         const inputEl = event.target;
@@ -9245,7 +9356,7 @@ class SignalRadio extends BaseFormControl {
         this.selectOption();
     }
     onKeyDown(event) {
-        if ((event.key !== 'Enter' && event.key !== ' ') || this.effectiveDisabled()) {
+        if ((event.key !== 'Enter' && event.key !== ' ') || !this.isInteractive()) {
             return;
         }
         event.preventDefault();
@@ -9280,11 +9391,11 @@ 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"] }, { 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]=\"isInteractive()\"\n      [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n      [class.cursor-not-allowed]=\"effectiveDisabled()\"\n      [class.opacity-70]=\"effectiveDisabled()\"\n      [for]=\"radioId()\">\n      <input\n        type=\"radio\"\n        class=\"sr-only\"\n        [id]=\"radioId()\"\n        [name]=\"effectiveGroupName()\"\n        [checked]=\"isSelected()\"\n        [disabled]=\"effectiveDisabled()\"\n        [attr.aria-readonly]=\"effectiveReadonly() || null\"\n        [attr.aria-checked]=\"isSelected()\"\n        [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"effectiveShowError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n        [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n        [class.border-error]=\"effectiveShowError()\"\n        [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n        [class.group-hover:shadow-sm]=\"isInteractive()\"\n        [class.group-hover:scale-105]=\"isInteractive()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n        [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n        <div\n          class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n          [class]=\"dotSizeClasses()\"\n          [class.opacity-0]=\"!isSelected()\"\n          [class.opacity-100]=\"isSelected()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (!inGroup() && showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n  [showError]=\"!inGroup() && showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"effectiveDisabled()\"\n  [inputId]=\"radioId()\">\n\n  <div\n    input\n    class=\"group flex items-center gap-3\"\n    [class.w-full]=\"!inGroup()\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"!effectiveDisabled()\"\n      [class.cursor-not-allowed]=\"effectiveDisabled()\"\n      [class.opacity-70]=\"effectiveDisabled()\"\n      [for]=\"radioId()\">\n      <input\n        type=\"radio\"\n        class=\"sr-only\"\n        [id]=\"radioId()\"\n        [name]=\"effectiveGroupName()\"\n        [checked]=\"isSelected()\"\n        [disabled]=\"effectiveDisabled()\"\n        [attr.aria-checked]=\"isSelected()\"\n        [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"effectiveShowError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n        [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n        [class.border-error]=\"effectiveShowError()\"\n        [class.group-hover:border-primary-hover]=\"!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" }]
+            args: [{ selector: 'lib-signal-radio', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"!inGroup() && showRequiredIndicator()\"\n  [showError]=\"!inGroup() && showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"effectiveDisabled()\"\n  [inputId]=\"radioId()\">\n\n  <div\n    input\n    class=\"group flex items-center gap-3\"\n    [class.w-full]=\"!inGroup()\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-default]=\"effectiveReadonly() && !effectiveDisabled()\"\n      [class.cursor-not-allowed]=\"effectiveDisabled()\"\n      [class.opacity-70]=\"effectiveDisabled()\"\n      [for]=\"radioId()\">\n      <input\n        type=\"radio\"\n        class=\"sr-only\"\n        [id]=\"radioId()\"\n        [name]=\"effectiveGroupName()\"\n        [checked]=\"isSelected()\"\n        [disabled]=\"effectiveDisabled()\"\n        [attr.aria-readonly]=\"effectiveReadonly() || null\"\n        [attr.aria-checked]=\"isSelected()\"\n        [attr.aria-required]=\"!inGroup() && showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"effectiveShowError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"boxAppearanceClasses()\"\n        [class.border-primary]=\"isSelected() && !effectiveShowError()\"\n        [class.border-default]=\"!isSelected() && !effectiveShowError()\"\n        [class.border-error]=\"effectiveShowError()\"\n        [class.group-hover:border-primary-hover]=\"isInteractive() && !effectiveShowError()\"\n        [class.group-hover:shadow-sm]=\"isInteractive()\"\n        [class.group-hover:scale-105]=\"isInteractive()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !effectiveShowError()\"\n        [class.ring-error-subtle]=\"isFocused() && effectiveShowError()\">\n        <div\n          class=\"rounded-full bg-surface-primary transition-opacity duration-200\"\n          [class]=\"dotSizeClasses()\"\n          [class.opacity-0]=\"!isSelected()\"\n          [class.opacity-100]=\"isSelected()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"radioId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (!inGroup() && showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
         }], propDecorators: { groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 let nextGroupId = 0;
@@ -9314,6 +9425,9 @@ class SignalRadioGroup extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
     showGroupError = this.showError;
     setValue(value) {
+        if (this.readonly()) {
+            return;
+        }
         super.setValue(value);
     }
     markOptionFocus() {
@@ -9357,6 +9471,8 @@ class SignalSwitch extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "switchId" }] : /* istanbul ignore next */ []));
     isOn = computed(() => !!this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOn" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     trackClasses = computed(() => {
         const size = this.size() === 'sm' ? 'w-8 h-4' : this.size() === 'lg' ? 'w-12 h-6' : 'w-10 h-5';
         return `relative shrink-0 inline-flex items-center rounded-full transition-colors duration-200 p-0.5 ${size}`;
@@ -9403,13 +9519,17 @@ class SignalSwitch extends BaseFormControl {
     labelTextClasses = computed(() => {
         const typography = this.size() === 'sm' ? 'text-caption' : this.size() === 'lg' ? 'text-body1' : 'text-body2';
         const color = this.disabled() ? 'text-role-disabled' : 'text-role-body';
-        const hover = this.disabled() ? '' : ' group-hover:text-primary-hover';
-        const cursor = this.disabled() ? 'cursor-not-allowed' : 'cursor-pointer';
+        const hover = this.isInteractive() ? ' group-hover:text-primary-hover' : '';
+        const cursor = this.disabled()
+            ? 'cursor-not-allowed'
+            : this.readonly()
+                ? 'cursor-default'
+                : 'cursor-pointer';
         return `${typography} ${color} ${cursor} inline-flex items-center leading-none select-none transition-colors duration-200${hover}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelTextClasses" }] : /* istanbul ignore next */ []));
     onChange(event) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         const checked = event.target.checked;
@@ -9417,7 +9537,7 @@ class SignalSwitch extends BaseFormControl {
         this.valueChange.emit(checked);
     }
     onKeyDown(event) {
-        if ((event.key !== 'Enter' && event.key !== ' ') || this.disabled()) {
+        if ((event.key !== 'Enter' && event.key !== ' ') || !this.isInteractive()) {
             return;
         }
         event.preventDefault();
@@ -9428,11 +9548,11 @@ 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 } }, 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSwitch, isStandalone: true, selector: "lib-signal-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-default]=\"readonly() && !disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }] });
 }
 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  [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" }]
+            args: [{ selector: 'lib-signal-switch', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"switchId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <label\n      class=\"inline-flex shrink-0 items-center select-none\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-default]=\"readonly() && !disabled()\"\n      [class.cursor-not-allowed]=\"disabled()\"\n      [class.opacity-70]=\"disabled()\"\n      [for]=\"switchId()\">\n      <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"sr-only\"\n        [id]=\"switchId()\"\n        [checked]=\"isOn()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-checked]=\"isOn()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        (change)=\"onChange($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\" />\n\n      <div\n        [class]=\"trackClasses()\"\n        [class.bg-page-secondary]=\"!isOn() && !showError()\"\n        [class.bg-surface-primary]=\"isOn() && !showError()\"\n        [class.bg-surface-error-subtle]=\"showError()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\">\n        <div\n          [class]=\"thumbAppearanceClasses() + ' ' + thumbClasses() + ' ' + thumbTranslateClasses()\"></div>\n      </div>\n    </label>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <label [for]=\"switchId()\" [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
         }], 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) {
@@ -9694,8 +9814,6 @@ class SignalDropdown extends BaseSignalTextInputControl {
     noOptionsMessage = input('No options available', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []));
     // Input configuration
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     // Adornments
     prefixText = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "prefixText" }] : /* istanbul ignore next */ []));
@@ -9705,6 +9823,10 @@ class SignalDropdown extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     // Native HTML attributes
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
@@ -9760,6 +9882,10 @@ class SignalDropdown extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasSelection = computed(() => {
@@ -10005,7 +10131,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"] }, { 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 }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDropdownPanelComponent, selector: "lib-signal-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedItem", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["itemSelected", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDropdown, decorators: [{
             type: Component,
@@ -10015,8 +10141,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         CdkConnectedOverlay,
                         HintIcon,
                         SignalDropdownPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"relative h-full w-full text-left transition outline-none bg-transparent border-0 rounded-none truncate\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        {{ triggerDisplayText() }}\n      </button>\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedItem]=\"selectedItem()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (itemSelected)=\"onItemSelected($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
                 type: ViewChild,
                 args: ['triggerButton']
             }], dropdownButton: [{
@@ -10247,8 +10373,6 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     noOptionsMessage = input('No options available', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "noOptionsMessage" }] : /* istanbul ignore next */ []));
     // Input configuration
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     selectionDisplay = input('count', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectionDisplay" }] : /* istanbul ignore next */ []));
     selectedCountLabel = input('selected', /* @ts-ignore */
@@ -10268,6 +10392,10 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     // Native HTML attributes
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
@@ -10328,6 +10456,10 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasSelection = computed(() => this.getCurrentValues().length > 0, /* @ts-ignore */
@@ -10609,7 +10741,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"] }, { 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 }, selectionDisplay: { classPropertyName: "selectionDisplay", publicName: "selectionDisplay", isSignal: true, isRequired: false, transformFunction: null }, selectedCountLabel: { classPropertyName: "selectedCountLabel", publicName: "selectedCountLabel", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, mobileOkLabel: { classPropertyName: "mobileOkLabel", publicName: "mobileOkLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "peerInputRef", first: true, predicate: ["peerInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalMultiSelectDropdownPanelComponent, selector: "lib-signal-multi-select-dropdown-panel", inputs: ["items", "valuePath", "displayPath", "displayValue", "noOptionsMessage", "selectedValues", "showSelectAll", "selectAllLabel", "clearAllLabel", "iconSize", "dropdownWidth", "listboxLabelledBy", "fullWidth"], outputs: ["valueChange", "dismissed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalMultiSelectDropdown, decorators: [{
             type: Component,
@@ -10619,8 +10751,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         CdkConnectedOverlay,
                         HintIcon,
                         SignalMultiSelectDropdownPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectionDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisplay", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], mobileOkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOkLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #dropdownButton\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          #peerInputRef\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [id]=\"inputId()\"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <button\n        #triggerButton\n        type=\"button\"\n        class=\"h-full text-left transition outline-none bg-transparent border-0 rounded-none cursor-pointer\"\n        [class.absolute]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.inset-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.z-0]=\"selectionDisplay() === 'chips' && hasSelection()\"\n        [class.relative]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.w-full]=\"!(selectionDisplay() === 'chips' && hasSelection())\"\n        [class.truncate]=\"selectionDisplay() !== 'chips'\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-placeholder]=\"!hasSelection() && !disabled() && !usesPeerFloatingLabel()\"\n        [class.text-role-body]=\"hasSelection() && !disabled()\"\n        [id]=\"usesPeerFloatingLabel() ? null : inputId()\"\n        [disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [class.cursor-default]=\"readonly() && !disabled()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        (click)=\"toggleDropdown()\"\n        (focus)=\"onTriggerFocus()\"\n        (blur)=\"onTriggerBlur($event)\"\n        (keydown)=\"onTriggerKeyDown($event)\">\n        @if (!(selectionDisplay() === 'chips' && hasSelection())) {\n          {{ triggerDisplayText() }}\n        }\n      </button>\n\n      @if (selectionDisplay() === 'chips' && hasSelection()) {\n        <div class=\"relative z-10 flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5 pointer-events-none\">\n          @for (item of selectedItems(); track getItemValue(item)) {\n            <span\n              class=\"inline-flex max-w-full items-center gap-1 rounded-full bg-page-secondary px-2 py-0.5 text-caption text-role-body\">\n              <span class=\"truncate\">{{ getDisplayString(item) }}</span>\n              <button\n                type=\"button\"\n                tabindex=\"-1\"\n                aria-label=\"Remove\"\n                class=\"pointer-events-auto inline-flex shrink-0 items-center justify-center rounded-full text-role-caption hover:text-primary-hover\"\n                (click)=\"onRemoveItem(item, $event)\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  class=\"h-3.5 w-3.5\"\n                  aria-hidden=\"true\">\n                  <path d=\"M12 2C17.53 2 22 6.47 22 12C22 17.53 17.53 22 12 22C6.47 22 2 17.53 2 12C2 6.47 6.47 2 12 2ZM15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z\" />\n                </svg>\n              </button>\n            </span>\n          }\n        </div>\n      }\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        (click)=\"toggleDropdown()\"\n        class=\"flex shrink-0 items-center justify-center p-2 cursor-pointer\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n    <div\n      class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n      [class.mr-3]=\"appearance() !== 'ghost'\">\n      @if (showInFieldHint() && !hasPostfixText()) {\n        <lib-hint-icon\n          class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n          [hint]=\"hint()\"\n          [size]=\"inFieldHintIconSize\"\n          (click)=\"$event.stopPropagation()\"\n          (mousedown)=\"$event.stopPropagation()\" />\n      }\n      @if (hasAbsoluteClear()) {\n        <button\n          type=\"button\"\n          (click)=\"onClear($event)\"\n          aria-label=\"Clear\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n          <svg\n            fill=\"currentColor\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n          </svg>\n        </button>\n      }\n      @if (hasAbsolutePostfixIcon()) {\n        <button\n          type=\"button\"\n          (click)=\"onPostfixIconClick($event)\"\n          [disabled]=\"disabled()\"\n          class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\">\n          <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n        </button>\n      }\n      <span\n        class=\"flex items-center justify-center p-2 pointer-events-none\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.rotate-180]=\"isOpen()\"\n        [class.transition-transform]=\"true\"\n        [class.duration-200]=\"true\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\" />\n        </svg>\n      </span>\n    </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"dropdownButton\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeDropdown()\"\n        (overlayOutsideClick)=\"closeDropdown()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },\n          { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-multi-select-dropdown-panel\n          [items]=\"items()\"\n          [valuePath]=\"valuePath()\"\n          [displayPath]=\"displayPath()\"\n          [displayValue]=\"displayValue()\"\n          [noOptionsMessage]=\"noOptionsMessage()\"\n          [selectedValues]=\"currentValues()\"\n          [showSelectAll]=\"showSelectAll()\"\n          [selectAllLabel]=\"selectAllLabel()\"\n          [clearAllLabel]=\"clearAllLabel()\"\n          [iconSize]=\"iconSize()\"\n          [dropdownWidth]=\"dropdownWidth()\"\n          [listboxLabelledBy]=\"inputId()\"\n          (valueChange)=\"applyValue($event)\"\n          (dismissed)=\"closeDropdown()\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], valuePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePath", required: false }] }], displayPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPath", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], noOptionsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsMessage", required: false }] }], selectionDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionDisplay", required: false }] }], selectedCountLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountLabel", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], mobileOkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOkLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], triggerButton: [{
                 type: ViewChild,
                 args: ['triggerButton']
             }], dropdownButton: [{
@@ -10913,6 +11045,9 @@ class SignalDatePicker extends BaseFormControl {
         return isMonthEnabled(month, this.activeYear(), this.constraints());
     }
     onDaySelected(day) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         const selected = new Date(this.activeYear(), this.activeMonth(), day);
         this.setValue(selected);
         this.dateSelected.emit(selected);
@@ -11227,8 +11362,6 @@ class SignalDateField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     dateFormat = input('mmddyyyy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     showCalendarIcon = input(true, /* @ts-ignore */
@@ -11243,6 +11376,10 @@ class SignalDateField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     fieldName = input(/* @ts-ignore */
@@ -11321,6 +11458,10 @@ class SignalDateField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null, /* @ts-ignore */
@@ -11536,7 +11677,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"] }, { 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateSelected: "dateSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalDateFieldPanelComponent, selector: "lib-signal-date-field-panel", inputs: ["embedded", "selectedDate", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateField, decorators: [{
             type: Component,
@@ -11546,8 +11687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         CdkConnectedOverlay,
                         HintIcon,
                         SignalDateFieldPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"date\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"dateInputValue()\"\n        [min]=\"nativeMinDate()\"\n        [max]=\"nativeMaxDate()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-field-panel\n          [selectedDate]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateSelected)=\"onDatePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=date]::-webkit-calendar-picker-indicator{display:none}input[type=date]::-moz-calendar-picker-indicator{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -11775,6 +11916,9 @@ class SignalDateRangePicker extends BaseFormControl {
         return isMonthEnabled(month, this.activeYear(), this.constraints());
     }
     onDaySelected(day) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         const selectedDate = new Date(this.activeYear(), this.activeMonth(), day);
         const currentStart = this.startDate();
         if (!currentStart || selectedDate < currentStart) {
@@ -11805,6 +11949,9 @@ class SignalDateRangePicker extends BaseFormControl {
         }
     }
     clearSelection() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         this.startDate.set(null);
         this.endDate.set(null);
         this.hoveredDate.set(null);
@@ -12106,8 +12253,6 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     dateFormat = input('mmddyyyy', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     showCalendarIcon = input(true, /* @ts-ignore */
@@ -12122,6 +12267,10 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     fieldName = input(/* @ts-ignore */
@@ -12190,6 +12339,10 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null, /* @ts-ignore */
@@ -12416,7 +12569,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"] }, { 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showCalendarIcon: { classPropertyName: "showCalendarIcon", publicName: "showCalendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyPast: { classPropertyName: "allowOnlyPast", publicName: "allowOnlyPast", isSignal: true, isRequired: false, transformFunction: null }, allowOnlyFuture: { classPropertyName: "allowOnlyFuture", publicName: "allowOnlyFuture", isSignal: true, isRequired: false, transformFunction: null }, allowToday: { classPropertyName: "allowToday", publicName: "allowToday", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", dateRangeSelected: "dateRangeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: SignalDateRangeFieldPanelComponent, selector: "lib-signal-date-range-field-panel", inputs: ["embedded", "selectedRange", "minDate", "maxDate", "allowOnlyPast", "allowOnlyFuture", "allowToday", "disabledDays", "disabledDates"], outputs: ["dateRangeSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalDateRangeField, decorators: [{
             type: Component,
@@ -12427,8 +12580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         HintIcon,
                         NgxMaskDirective,
                         SignalDateRangeFieldPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"text\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        mask=\"00/00/0000 - 00/00/0000\"\n        [showMaskTyped]=\"isFocused()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : (placeholder() || maskPlaceholder())\"\n        [value]=\"textInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showCalendarIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open calendar\"\n          [disabled]=\"disabled()\"\n          (click)=\"openCalendar($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showCalendarIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open calendar\"\n            [disabled]=\"disabled()\"\n            (click)=\"openCalendar($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        (overlayOutsideClick)=\"closeCalendar()\"\n        [cdkConnectedOverlayBackdropClass]=\"['bg-black', 'bg-opacity-20']\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-date-range-field-panel\n          [selectedRange]=\"value()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [allowOnlyPast]=\"allowOnlyPast()\"\n          [allowOnlyFuture]=\"allowOnlyFuture()\"\n          [allowToday]=\"allowToday()\"\n          [disabledDays]=\"disabledDays()\"\n          [disabledDates]=\"disabledDates()\"\n          (dateRangeSelected)=\"onRangePicked($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showCalendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], allowOnlyPast: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyPast", required: false }] }], allowOnlyFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOnlyFuture", required: false }] }], allowToday: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowToday", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -12643,18 +12796,30 @@ class SignalTimePicker extends BaseFormControl {
         return formatTimeDigits(this.minutes());
     }
     onHourUp() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         this.hours.update((prev) => stepHourSpinner(prev, 1, this.is24HourFormat()));
         this.commitValue();
     }
     onHourDown() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         this.hours.update((prev) => stepHourSpinner(prev, -1, this.is24HourFormat()));
         this.commitValue();
     }
     onMinuteUp() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         this.minutes.update((prev) => stepMinuteSpinner(prev, 1));
         this.commitValue();
     }
     onMinuteDown() {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         this.minutes.update((prev) => stepMinuteSpinner(prev, -1));
         this.commitValue();
     }
@@ -12681,6 +12846,9 @@ class SignalTimePicker extends BaseFormControl {
         }
     }
     setPeriod(nextPeriod) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         if (this.is24HourFormat() || this.period() === nextPeriod) {
             return;
         }
@@ -12688,6 +12856,9 @@ class SignalTimePicker extends BaseFormControl {
         this.commitValue();
     }
     toggle24HourFormat(enabled) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         if (this.is24HourFormat() === enabled) {
             return;
         }
@@ -12709,6 +12880,9 @@ class SignalTimePicker extends BaseFormControl {
         this.commitValue();
     }
     validateHours(event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         const inputElement = event.target;
         const inputHours = parseInt(inputElement.value, 10);
         if (Number.isNaN(inputHours)) {
@@ -12727,6 +12901,9 @@ class SignalTimePicker extends BaseFormControl {
         inputElement.value = this.formattedHours();
     }
     validateMinutes(event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         const inputElement = event.target;
         const inputMinutes = parseInt(inputElement.value, 10);
         if (Number.isNaN(inputMinutes)) {
@@ -12853,8 +13030,6 @@ class SignalTimeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hint = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     timeFormat = input('12h', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
     showClockIcon = input(true, /* @ts-ignore */
@@ -12869,6 +13044,10 @@ class SignalTimeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "postfixText" }] : /* istanbul ignore next */ []));
     postfixIcon = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "postfixIcon" }] : /* istanbul ignore next */ []));
+    enablePrefixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePrefixBackground" }] : /* istanbul ignore next */ []));
+    enablePostfixBackground = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enablePostfixBackground" }] : /* istanbul ignore next */ []));
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     fieldName = input(/* @ts-ignore */
@@ -12925,6 +13104,10 @@ class SignalTimeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hasAbsolutePrefixIcon" }] : /* istanbul ignore next */ []));
     hasPostfixText = computed(() => !!this.postfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasPostfixText" }] : /* istanbul ignore next */ []));
+    prefixTextAdornmentClasses = computed(() => getPrefixTextAdornmentClasses(this.enablePrefixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
+    postfixTextAdornmentClasses = computed(() => getPostfixTextAdornmentClasses(this.enablePostfixBackground(), this.appearance()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "postfixTextAdornmentClasses" }] : /* istanbul ignore next */ []));
     hasAbsolutePostfixIcon = computed(() => !!this.postfixIcon() && !this.hasPostfixText(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasAbsolutePostfixIcon" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null, /* @ts-ignore */
@@ -13156,7 +13339,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"] }, { 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 }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showClockIcon: { classPropertyName: "showClockIcon", publicName: "showClockIcon", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, postfixText: { classPropertyName: "postfixText", publicName: "postfixText", isSignal: true, isRequired: false, transformFunction: null }, postfixIcon: { classPropertyName: "postfixIcon", publicName: "postfixIcon", isSignal: true, isRequired: false, transformFunction: null }, enablePrefixBackground: { classPropertyName: "enablePrefixBackground", publicName: "enablePrefixBackground", isSignal: true, isRequired: false, transformFunction: null }, enablePostfixBackground: { classPropertyName: "enablePostfixBackground", publicName: "enablePostfixBackground", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, debounceValueChange: { classPropertyName: "debounceValueChange", publicName: "debounceValueChange", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobilePresentation: { classPropertyName: "mobilePresentation", publicName: "mobilePresentation", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", timeSelected: "timeSelected", clear: "clear", postfixIconClick: "postfixIconClick" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "fieldWrapper", first: true, predicate: ["fieldWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"], dependencies: [{ kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: HintIcon, selector: "lib-hint-icon", inputs: ["hint", "size"] }, { kind: "component", type: SignalTimeFieldPanelComponent, selector: "lib-signal-time-field-panel", inputs: ["embedded", "selectedTime", "timeFormat", "okLabel", "draftTime"], outputs: ["confirmed", "draftTimeChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalTimeField, decorators: [{
             type: Component,
@@ -13166,8 +13349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         CdkConnectedOverlay,
                         HintIcon,
                         SignalTimeFieldPanelComponent,
-                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-r border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-l-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        class=\"flex shrink-0 items-center self-stretch whitespace-nowrap border-l border-default bg-page-secondary px-3 text-role-caption\"\n        [class.rounded-r-xl]=\"appearance() === 'floatingOutline'\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showClockIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClockIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
+                    ], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    #fieldWrapper\n    input\n    class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n    [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n    [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n    [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n    @if (prefixText()) {\n      <div\n        [class]=\"prefixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ prefixText() }}\n      </div>\n    }\n\n    @if (prefixIcon() && hasPrefixText()) {\n      <div\n        class=\"flex shrink-0 items-center justify-center self-stretch border-default pl-3\"\n        [class.text-role-placeholder]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"></app-svg-icon>\n      </div>\n    }\n\n    <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n      @if (hasAbsolutePrefixIcon()) {\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"prefixIcon()!\"\n                      class=\"absolute pointer-events-none\"\n                      [class.ml-3]=\"appearance() !== 'ghost'\"\n                      [class.text-role-caption]=\"!disabled()\"\n                      [class.text-role-disabled]=\"disabled()\"></app-svg-icon>\n      }\n\n      @if (usesPeerFloatingLabel()) {\n        <input\n          type=\"text\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          readonly\n          class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n          placeholder=\" \"\n          [value]=\"peerInputValue()\" />\n      }\n\n      <input\n        #inputRef\n        type=\"time\"\n        class=\"h-full w-full transition placeholder:text-role-placeholder outline-none bg-transparent border-0 rounded-none\"\n        [class.peer]=\"usesPeerFloatingLabel()\"\n        [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n        [class.placeholder-transparent]=\"usesPeerFloatingLabel()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [id]=\"inputId()\"\n        [placeholder]=\"usesPeerFloatingLabel() ? ' ' : inputPlaceholder()\"\n        [value]=\"timeInputValue()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [attr.name]=\"fieldName()\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-haspopup]=\"'dialog'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        (input)=\"onInputChanged($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onInputKeyDown($event)\" />\n\n      @if (appearance() === 'floating' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'floatingOutline' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"floatingOutlineLabelClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n\n      @if (appearance() === 'ifta' && label()) {\n        <label\n          [attr.for]=\"inputId()\"\n          [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n          [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n          [class.text-error]=\"showError() && !disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </label>\n      }\n    </div>\n\n    @if (showClear() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onClear($event)\"\n        aria-label=\"Clear\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n        <svg\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n          aria-hidden=\"true\">\n          <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n        </svg>\n      </button>\n    }\n\n    @if (showInFieldHint() && hasPostfixText()) {\n      <lib-hint-icon\n        class=\"flex shrink-0 items-center px-1\"\n        [hint]=\"hint()\"\n        [size]=\"14\" />\n    }\n\n    @if (postfixIcon() && hasPostfixText()) {\n      <button\n        type=\"button\"\n        (click)=\"onPostfixIconClick($event)\"\n        [disabled]=\"disabled()\"\n        class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n        [class.text-role-caption]=\"!disabled()\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n        [class.text-error]=\"showError() && !disabled()\">\n        <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n      </button>\n    }\n\n    @if (hasPostfixText()) {\n      @if (showClockIcon()) {\n        <button\n          type=\"button\"\n          aria-label=\"Open time picker\"\n          [disabled]=\"disabled()\"\n          (click)=\"openClock($event)\"\n          class=\"flex shrink-0 items-center justify-center p-2 rounded-full hover:bg-page-secondary cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n          [class.text-role-caption]=\"!disabled()\"\n          [class.text-role-disabled]=\"disabled()\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            [style.width.px]=\"iconSize()\"\n            [style.height.px]=\"iconSize()\"\n            aria-hidden=\"true\">\n            <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n          </svg>\n        </button>\n      }\n    }\n\n    @if (postfixText()) {\n      <div\n        [class]=\"postfixTextAdornmentClasses()\"\n        [class.text-role-disabled]=\"disabled()\">\n        {{ postfixText() }}\n      </div>\n    }\n\n    @if (!hasPostfixText()) {\n      <div\n        class=\"absolute inset-y-0 right-0 z-10 flex items-center gap-0.5 pointer-events-none\"\n        [class.mr-3]=\"appearance() !== 'ghost'\">\n        @if (showInFieldHint() && !hasPostfixText()) {\n          <lib-hint-icon\n            class=\"flex shrink-0 items-center px-1 pointer-events-auto\"\n            [hint]=\"hint()\"\n            [size]=\"inFieldHintIconSize\"\n            (click)=\"$event.stopPropagation()\"\n            (mousedown)=\"$event.stopPropagation()\" />\n        }\n        @if (hasAbsoluteClear()) {\n          <button\n            type=\"button\"\n            (click)=\"onClear($event)\"\n            aria-label=\"Clear\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover text-role-caption\">\n            <svg\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M19,15.59L17.59,17L14,13.41L10.41,17L9,15.59L12.59,12L9,8.41L10.41,7L14,10.59L17.59,7L19,8.41L15.41,12L19,15.59M22,3A2,2 0 0,1 24,5V19A2,2 0 0,1 22,21H7C6.31,21 5.77,20.64 5.41,20.11L0,12L5.41,3.88C5.77,3.35 6.31,3 7,3H22M22,5H7L2.28,12L7,19H22V5Z\" />\n            </svg>\n          </button>\n        }\n        @if (hasAbsolutePostfixIcon()) {\n          <button\n            type=\"button\"\n            (click)=\"onPostfixIconClick($event)\"\n            [disabled]=\"disabled()\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\"\n            [class.text-primary]=\"(isFocused() || isOpen()) && !showError() && !disabled()\"\n            [class.text-error]=\"showError() && !disabled()\">\n            <app-svg-icon [size]=\"iconSize()\" [src]=\"postfixIcon()!\"></app-svg-icon>\n          </button>\n        }\n        @if (showClockIcon()) {\n          <button\n            type=\"button\"\n            aria-label=\"Open time picker\"\n            [disabled]=\"disabled()\"\n            (click)=\"openClock($event)\"\n            class=\"pointer-events-auto p-2 rounded-full hover:bg-page-secondary flex items-center justify-center cursor-pointer transition-colors duration-200 ease-in-out hover:text-primary-hover disabled:cursor-not-allowed\"\n            [class.text-role-caption]=\"!disabled()\"\n            [class.text-role-disabled]=\"disabled()\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n              [style.width.px]=\"iconSize()\"\n              [style.height.px]=\"iconSize()\"\n              aria-hidden=\"true\">\n              <path d=\"M12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20ZM12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2ZM17 13.9L16.3 15.2L11 12.3V7H12.5V11.4L17 13.9Z\" />\n            </svg>\n          </button>\n        }\n      </div>\n    }\n\n    @if (!isMobile()) {\n      <ng-template\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"fieldWrapper\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n        (backdropClick)=\"closeClock()\"\n        (overlayOutsideClick)=\"closeClock()\"\n        [cdkConnectedOverlayPositions]=\"[\n          { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },\n          { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' }\n        ]\"\n        [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n        [cdkConnectedOverlayOffsetY]=\"10\">\n        <lib-signal-time-field-panel\n          [selectedTime]=\"value()\"\n          [timeFormat]=\"timeFormat()\"\n          [okLabel]=\"okLabel()\"\n          (confirmed)=\"onTimeConfirmed($event)\" />\n      </ng-template>\n    }\n  </div>\n\n</lib-base-signal-input>\n", styles: ["input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-moz-calendar-picker-indicator{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showClockIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClockIcon", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], postfixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixText", required: false }] }], postfixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "postfixIcon", required: false }] }], enablePrefixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePrefixBackground", required: false }] }], enablePostfixBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePostfixBackground", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], debounceValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceValueChange", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], mobilePresentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobilePresentation", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }], clear: [{ type: i0.Output, args: ["clear"] }], postfixIconClick: [{ type: i0.Output, args: ["postfixIconClick"] }], inputRef: [{
                 type: ViewChild,
                 args: ['inputRef']
             }], fieldWrapper: [{
@@ -13231,6 +13414,8 @@ class SignalOtpField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "digitIndices" }] : /* istanbul ignore next */ []));
     focusedIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     digits = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []));
     maskedAt = signal([], /* @ts-ignore */
@@ -13262,6 +13447,9 @@ class SignalOtpField extends BaseFormControl {
         if (this.disabled()) {
             classes.push('bg-surface-disabled border-disabled cursor-not-allowed');
         }
+        else if (this.readonly()) {
+            classes.push('border-default cursor-default');
+        }
         else if (this.showError()) {
             classes.push('border-error');
         }
@@ -13283,6 +13471,9 @@ class SignalOtpField extends BaseFormControl {
         if (this.disabled()) {
             classes.push('cursor-not-allowed');
         }
+        else if (this.readonly()) {
+            classes.push('cursor-default');
+        }
         else {
             classes.push('cursor-text');
         }
@@ -13316,7 +13507,7 @@ class SignalOtpField extends BaseFormControl {
         this.onBlur();
     }
     onInput(event, index) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         const inputEl = event.target;
@@ -13337,7 +13528,7 @@ class SignalOtpField extends BaseFormControl {
         }
     }
     onKeyDown(event, index) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         if (event.key === 'Backspace') {
@@ -13382,7 +13573,7 @@ class SignalOtpField extends BaseFormControl {
         }
     }
     onPaste(event, index) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         event.preventDefault();
@@ -13407,7 +13598,7 @@ class SignalOtpField extends BaseFormControl {
         this.focusIndex(focusIndex);
     }
     onCellClick(index) {
-        if (this.disabled()) {
+        if (!this.isInteractive()) {
             return;
         }
         this.focusIndex(index);
@@ -13504,11 +13695,11 @@ 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [attr.aria-readonly]=\"readonly() || null\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n" }]
+            args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [attr.aria-readonly]=\"readonly() || null\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], maskMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMode", required: false }] }], maskDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDelayMs", required: false }] }], obscureChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureChar", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], digitInputs: [{
                 type: ViewChildren,
                 args: ['digitInput']
@@ -13600,8 +13791,6 @@ class SignalRating extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "maxStars" }] : /* istanbul ignore next */ []));
     allowClear = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allowClear" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     valueChange = output();
     instanceId = ++nextRatingId;
     hoverRating = signal(null, /* @ts-ignore */
@@ -13713,12 +13902,12 @@ 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"] }, { 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 } }, 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,
             args: [{ selector: 'lib-signal-rating', imports: [BaseSignalInput, HintIcon], template: "<lib-base-signal-input\n  [showExternalLabel]=\"false\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [inputId]=\"ratingId()\">\n\n  <div input class=\"group flex w-full items-center gap-3\">\n    <div\n      [id]=\"ratingId()\"\n      role=\"slider\"\n      tabindex=\"0\"\n      [class]=\"sliderClasses()\"\n      [class.ring-4]=\"isFocused()\"\n      [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n      [class.ring-error-subtle]=\"isFocused() && showError()\"\n      [attr.aria-valuemin]=\"0\"\n      [attr.aria-valuemax]=\"effectiveMax()\"\n      [attr.aria-valuenow]=\"value() ?? 0\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [attr.aria-readonly]=\"readonly() || null\"\n      [attr.aria-required]=\"showRequiredIndicator() || null\"\n      [attr.aria-invalid]=\"showError() || null\"\n      [attr.aria-disabled]=\"disabled() || null\"\n      (mousemove)=\"onRowMouseMove($event)\"\n      (mouseleave)=\"onRowMouseLeave()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onKeyDown($event)\">\n      @for (starIndex of starIndices(); track starIndex) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          class=\"inline-flex shrink-0 items-center justify-center rounded-sm p-0.5 transition-transform duration-150 disabled:pointer-events-none\"\n          [class.hover:scale-110]=\"isInteractive()\"\n          [disabled]=\"!isInteractive()\"\n          (click)=\"onStarClick($event, starIndex)\">\n          @switch (getStarFillFor(starIndex)) {\n            @case ('full') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-primary\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n            @case ('half') {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <defs>\n                  <clipPath [attr.id]=\"'signal-rating-half-' + ratingId() + '-' + starIndex\">\n                    <rect x=\"0\" y=\"0\" width=\"12\" height=\"24\" />\n                  </clipPath>\n                </defs>\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-role-placeholder\" />\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\n                  fill=\"currentColor\"\n                  class=\"text-primary\"\n                  [attr.clip-path]=\"'url(#signal-rating-half-' + ratingId() + '-' + starIndex + ')'\" />\n              </svg>\n            }\n            @default {\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                class=\"text-role-placeholder\"\n                [attr.width]=\"iconSize()\"\n                [attr.height]=\"iconSize()\"\n                aria-hidden=\"true\">\n                <path\n                  d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\" />\n              </svg>\n            }\n          }\n        </button>\n      }\n    </div>\n\n    @if (label()) {\n      <div class=\"inline-flex min-w-0 flex-1 items-center gap-1\" [class]=\"labelRowClasses()\">\n        <span [class]=\"labelTextClasses()\">\n          {{ label() }}\n          @if (showRequiredIndicator()) {\n            <span class=\"text-error\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n\n        @if (hint()) {\n          <lib-hint-icon [hint]=\"hint()\" [size]=\"14\" />\n        }\n      </div>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxStars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStars", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxStars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxStars", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 let nextSliderId = 0;
 class SignalSlider extends BaseFormControl {
@@ -13737,8 +13926,6 @@ class SignalSlider extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "sliderMax" }] : /* istanbul ignore next */ []));
     sliderStep = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sliderStep" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     showValueLabel = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
     showValueBubble = input(true, /* @ts-ignore */
@@ -13921,12 +14108,12 @@ 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalSlider, isStandalone: true, selector: "lib-signal-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.width.%]=\"visualPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"visualPercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\"\n        [style.left.%]=\"visualPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayValue()\"\n        [attr.aria-valuetext]=\"ariaValueText()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayValue() }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalSlider, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 left-0 rounded-full bg-surface-primary\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.width.%]=\"visualPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"visualPercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused()\"\n        [class.ring-primary-subtle]=\"isFocused() && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && showError()\"\n        [style.left.%]=\"visualPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayValue()\"\n        [attr.aria-valuetext]=\"ariaValueText()\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"showRequiredIndicator() || null\"\n        [attr.aria-invalid]=\"showError() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeyDown($event)\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[2.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayValue() }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
                 type: ViewChild,
                 args: ['trackRef']
             }] } });
@@ -13948,8 +14135,6 @@ class SignalRangeSlider extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "sliderMax" }] : /* istanbul ignore next */ []));
     sliderStep = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sliderStep" }] : /* istanbul ignore next */ []));
-    readonly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     showValueLabel = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showValueLabel" }] : /* istanbul ignore next */ []));
     showValueBubble = input(true, /* @ts-ignore */
@@ -14200,12 +14385,12 @@ 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRangeSlider, isStandalone: true, selector: "lib-signal-range-slider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sliderMin: { classPropertyName: "sliderMin", publicName: "sliderMin", isSignal: true, isRequired: false, transformFunction: null }, sliderMax: { classPropertyName: "sliderMax", publicName: "sliderMax", isSignal: true, isRequired: false, transformFunction: null }, sliderStep: { classPropertyName: "sliderStep", publicName: "sliderStep", isSignal: true, isRequired: false, transformFunction: null }, showValueLabel: { classPropertyName: "showValueLabel", publicName: "showValueLabel", isSignal: true, isRequired: false, transformFunction: null }, showValueBubble: { classPropertyName: "showValueBubble", publicName: "showValueBubble", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      role=\"group\"\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [attr.aria-label]=\"label() || 'Range slider'\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.left.%]=\"visualStartPercent()\"\n          [style.width.%]=\"visualActiveWidthPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"bubblePercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n        [class.z-20]=\"activeThumb() === 'start'\"\n        [style.left.%]=\"visualStartPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"visualDisplayRange().end\"\n        [attr.aria-valuenow]=\"visualDisplayRange().start\"\n        [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n        (focus)=\"onThumbFocus('start')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n        [class.z-20]=\"activeThumb() === 'end'\"\n        [style.left.%]=\"visualEndPercent()\"\n        [attr.aria-valuemin]=\"visualDisplayRange().start\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayRange().end\"\n        [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n        (focus)=\"onThumbFocus('end')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRangeSlider, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-range-slider', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"sliderId()\">\n\n  <div input class=\"flex w-full items-center gap-3\">\n    <div\n      #trackRef\n      role=\"group\"\n      class=\"relative flex-1 touch-none select-none overflow-visible\"\n      [attr.aria-label]=\"label() || 'Range slider'\"\n      [attr.aria-valuetext]=\"ariaValueText()\"\n      [class.cursor-pointer]=\"isInteractive()\"\n      [class.cursor-not-allowed]=\"!isInteractive()\"\n      [class.opacity-70]=\"disabled()\"\n      (pointerdown)=\"onTrackPointerDown($event)\">\n      <div\n        class=\"relative w-full rounded-full bg-page-secondary\"\n        [class]=\"trackHeightClass()\">\n        <div\n          class=\"absolute inset-y-0 rounded-full bg-surface-primary\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.transition-[width]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [class.transition-none]=\"isDragging()\"\n          [style.left.%]=\"visualStartPercent()\"\n          [style.width.%]=\"visualActiveWidthPercent()\"></div>\n      </div>\n\n      @if (showValueBubble()) {\n        <div\n          class=\"absolute z-30 -translate-x-1/2 pointer-events-none\"\n          [class]=\"bubbleOffsetClass()\"\n          [class.transition-none]=\"isDragging()\"\n          [class.transition-[left]]=\"!isDragging()\"\n          [class.duration-75]=\"!isDragging()\"\n          [style.left.%]=\"bubblePercent()\">\n          <div\n            class=\"relative flex items-center justify-center rounded-full bg-surface-primary px-2.5 py-1 text-caption tabular-nums text-role-on-color-body shadow-md transition-[opacity,transform] duration-200 ease-out\"\n            [class.opacity-0]=\"!showBubble()\"\n            [class.opacity-100]=\"showBubble()\"\n            [class.scale-90]=\"!showBubble()\"\n            [class.scale-100]=\"showBubble()\"\n            [class.translate-y-0.5]=\"!showBubble()\"\n            [class.translate-y-0]=\"showBubble()\"\n            [attr.aria-hidden]=\"!showBubble()\">\n            {{ bubbleDisplayValue() }}\n          </div>\n        </div>\n      }\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'start'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'start' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'start' && showError()\"\n        [class.z-20]=\"activeThumb() === 'start'\"\n        [style.left.%]=\"visualStartPercent()\"\n        [attr.aria-valuemin]=\"effectiveMin()\"\n        [attr.aria-valuemax]=\"visualDisplayRange().end\"\n        [attr.aria-valuenow]=\"visualDisplayRange().start\"\n        [attr.aria-valuetext]=\"'Start ' + visualDisplayRange().start\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'start')\"\n        (focus)=\"onThumbFocus('start')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'start')\"></button>\n\n      <button\n        type=\"button\"\n        tabindex=\"0\"\n        role=\"slider\"\n        aria-hidden=\"false\"\n        class=\"absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-surface-primary shadow-sm outline-none\"\n        [class]=\"thumbSizeClass()\"\n        [class.transition-[left]]=\"!isDragging()\"\n        [class.duration-75]=\"!isDragging()\"\n        [class.transition-none]=\"isDragging()\"\n        [class.ring-4]=\"isFocused() && focusedThumb() === 'end'\"\n        [class.ring-primary-subtle]=\"isFocused() && focusedThumb() === 'end' && !showError()\"\n        [class.ring-error-subtle]=\"isFocused() && focusedThumb() === 'end' && showError()\"\n        [class.z-20]=\"activeThumb() === 'end'\"\n        [style.left.%]=\"visualEndPercent()\"\n        [attr.aria-valuemin]=\"visualDisplayRange().start\"\n        [attr.aria-valuemax]=\"effectiveMax()\"\n        [attr.aria-valuenow]=\"visualDisplayRange().end\"\n        [attr.aria-valuetext]=\"'End ' + visualDisplayRange().end\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        [disabled]=\"!isInteractive()\"\n        (pointerdown)=\"onThumbPointerDown($event, 'end')\"\n        (focus)=\"onThumbFocus('end')\"\n        (blur)=\"onThumbBlur($event)\"\n        (keydown)=\"onThumbKeyDown($event, 'end')\"></button>\n    </div>\n\n    @if (showValueLabel()) {\n      <span\n        class=\"min-w-[4.5rem] shrink-0 text-right text-body2 tabular-nums\"\n        [class.text-role-disabled]=\"disabled()\"\n        [class.text-role-body]=\"!disabled()\">\n        {{ visualDisplayRange().start }}\u2013{{ visualDisplayRange().end }}\n      </span>\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sliderMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMin", required: false }] }], sliderMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderMax", required: false }] }], sliderStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "sliderStep", required: false }] }], showValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabel", required: false }] }], showValueBubble: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBubble", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], trackRef: [{
                 type: ViewChild,
                 args: ['trackRef']
             }] } });
@@ -14526,7 +14711,7 @@ function getSignalButtonSpinnerBorderClass(appearance, disabled) {
     if (disabled) {
         return 'border-disabled';
     }
-    return appearance === 'primary' ? 'border-white' : 'border-primary';
+    return appearance === 'primary' ? 'border-primary-on-color' : 'border-primary';
 }
 
 class SignalButton {
@@ -14818,6 +15003,7 @@ function provideNglConfig(config) {
         ...config,
         input: { ...DEFAULT_NGL_INPUT_CONFIG, ...config.input },
         button: { ...DEFAULT_NGL_BUTTON_CONFIG, ...config.button },
+        listResponse: { ...DEFAULT_NGL_LIST_RESPONSE, ...config.listResponse },
     };
     const providers = [
         provideEnvironmentNgxMask(),
@@ -14910,5 +15096,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map