crdx-components 1.0.0 → 2.0.0

package/fesm2022/crdx-components.mjs

@@ -0,0 +1,1960 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, TemplateRef, Input, Directive, input, EventEmitter, DestroyRef, effect, ViewChild, ContentChildren, Output, signal, computed, model, output, HostBinding, ChangeDetectorRef, Injector, forwardRef, contentChild, Injectable } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgClass, NgComponentOutlet } from '@angular/common';
+import * as i2 from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import * as i3 from '@angular/material/paginator';
+import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$8 from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i2$3 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3$1 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1$3 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i1$4 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i1$5 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i2$4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$6 from '@angular/material/core';
+import { MatRippleModule, MatNativeDateModule, MAT_DATE_FORMATS } from '@angular/material/core';
+import * as i1$7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i3$2 from '@angular/material/datepicker';
+import { MatDatepickerModule, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel } from '@angular/material/datepicker';
+import * as i1$9 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import { Overlay } from '@angular/cdk/overlay';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { TranslatePipe } from '@ngx-translate/core';
+
+class LibUi {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: LibUi, isStandalone: true, selector: "lib-lib-ui", ngImport: i0, template: "<p>LibUi works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibUi, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-lib-ui', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>LibUi works!</p>\n" }]
+        }] });
+
+const DEFAULT_ICON_BASE_PATH = 'assets/icons';
+const ICON_MENU_FILE = 'icon-menu.svg';
+const LOGO_FILE = 'logo.svg';
+const SMILEY_FILE = 'smiley.svg';
+const ICON_FILE_MAP = Object.freeze({
+    CollapseMenu: ICON_MENU_FILE,
+    'collapse-menu': ICON_MENU_FILE,
+    'icon-menu': ICON_MENU_FILE,
+    logo: LOGO_FILE,
+    'credix-logo': LOGO_FILE,
+    smiley: SMILEY_FILE,
+    'error-circle': 'error-circle.svg',
+    'info-error': 'info-error.svg',
+    'configuration-countable': 'configuration-countable.svg',
+    edit: 'edit.svg',
+    'edit-table': 'edit-table.svg',
+    hub: 'hub.svg',
+    logout: 'logout.svg',
+    notifications: 'notifications.svg',
+    profile: 'profile.svg',
+    'profile-user-menu': 'profile-user-menu.svg',
+    visibility: 'visibility-eye.svg',
+    check: 'success-check_icon.svg',
+    'gif-icon-massive': 'gif-icon.svg',
+    'background-color-massive': 'background-color-massive.svg',
+    'content-edit-massive': 'trailing-icon.svg',
+    'edit-massive': 'edit-massive.svg',
+    'edit-massive-white': 'edit-white.svg',
+    'edit-gray': 'edit-gray.svg',
+    'check-update': 'check-update.svg',
+    'download-simple': 'download-simple.svg',
+    'download-file': 'download-file.svg',
+    'content-copy': 'content-copy.svg',
+    'add-create': 'add-create.svg',
+    'add-create-dark': 'add-create-dark.svg',
+    'add-create-dark-icon': 'add-create-dark-icon.svg',
+    'add-circle-filled': 'add_circle_filled.svg',
+    'add-circle-tonal': 'add_circle_tonal.svg',
+    'add-circle-outlined': 'add_circle_outline.svg',
+    'add-circle-elevated': 'add_circle_text.svg',
+    'add-circle-text': 'add_circle_text.svg',
+});
+function normalizeBasePath(basePath) {
+    const targetPath = basePath ?? DEFAULT_ICON_BASE_PATH;
+    if (/^(https?:)?\/\//.test(targetPath)) {
+        return targetPath.replace(/\/$/, '');
+    }
+    return targetPath.replace(/\/$/, '');
+}
+const UI_ICON_NAMES = Object.keys(ICON_FILE_MAP);
+function resolveUiIconResource(iconName, options) {
+    const fileName = ICON_FILE_MAP[iconName];
+    if (!fileName) {
+        throw new Error(`Icon "${iconName}" is not registered in ICON_FILE_MAP.`);
+    }
+    return `${normalizeBasePath(options?.basePath)}/${fileName}`;
+}
+function registerUiIcons(registry, sanitizer, icons = UI_ICON_NAMES, options) {
+    const basePath = normalizeBasePath(options?.basePath);
+    icons.forEach((iconName) => {
+        const fileName = ICON_FILE_MAP[iconName];
+        if (!fileName) {
+            return;
+        }
+        const resourceUrl = `${basePath}/${fileName}`;
+        registry.addSvgIcon(iconName, sanitizer.bypassSecurityTrustResourceUrl(resourceUrl));
+    });
+}
+
+class SharedTableCellTemplateDirective {
+    template = inject(TemplateRef);
+    legacyKey = '';
+    modernKey = '';
+    set cellTemplate(value) {
+        this.legacyKey = value ?? '';
+    }
+    set libCellTemplate(value) {
+        this.modernKey = value ?? '';
+    }
+    get key() {
+        return this.modernKey || this.legacyKey;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: SharedTableCellTemplateDirective, isStandalone: true, selector: "ng-template[cellTemplate], ng-template[libCellTemplate]", inputs: { cellTemplate: "cellTemplate", libCellTemplate: "libCellTemplate" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cellTemplate], ng-template[libCellTemplate]',
+                    standalone: true,
+                }]
+        }], propDecorators: { cellTemplate: [{
+                type: Input
+            }], libCellTemplate: [{
+                type: Input
+            }] } });
+
+class SharedTableComponent {
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    caption = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
+    emptyState = input('Sin registros disponibles', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyState" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    showPaginator = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([5, 10, 20], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    enableRowClick = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableRowClick" }] : /* istanbul ignore next */ []));
+    totalElements = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "totalElements" }] : /* istanbul ignore next */ []));
+    rowClick = new EventEmitter();
+    pageChange = new EventEmitter();
+    cellTemplatesQuery;
+    cellTemplates = {};
+    removeScrollSync = null;
+    _paginator;
+    destroyRef = inject(DestroyRef);
+    dataSource = new MatTableDataSource();
+    displayedColumns = [];
+    constructor() {
+        effect(() => {
+            const columns = this.columns();
+            this.displayedColumns = columns.map((column) => String(column.key));
+        });
+        effect(() => {
+            const rows = this.data();
+            this.dataSource.data = rows.slice();
+        });
+    }
+    set paginator(paginator) {
+        this._paginator = paginator;
+        // En modo server-side (totalElements definido) NO conectamos al dataSource
+        // para que Material no intente paginar los datos localmente
+        if (this.totalElements() === undefined) {
+            this.dataSource.paginator = paginator ?? null;
+        }
+    }
+    headerWrapRef;
+    bodyWrapRef;
+    ngAfterViewInit() {
+        const header = this.headerWrapRef?.nativeElement;
+        const body = this.bodyWrapRef?.nativeElement;
+        if (header && body) {
+            const onScroll = () => { header.scrollLeft = body.scrollLeft; };
+            body.addEventListener('scroll', onScroll);
+            this.removeScrollSync = () => body.removeEventListener('scroll', onScroll);
+        }
+        // Modo server-side: escuchar eventos del paginator y emitirlos hacia arriba
+        if (this._paginator && this.totalElements() !== undefined) {
+            this._paginator.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.pageChange.emit({ pageIndex: event.pageIndex, pageSize: event.pageSize });
+            });
+        }
+    }
+    ngAfterContentInit() {
+        const rebuildTemplateMap = () => {
+            const map = {};
+            this.cellTemplatesQuery.forEach((entry) => {
+                if (entry.key) {
+                    map[entry.key] = entry.template;
+                }
+            });
+            this.cellTemplates = map;
+        };
+        rebuildTemplateMap();
+        this.cellTemplatesQuery.changes
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => rebuildTemplateMap());
+    }
+    ngOnDestroy() {
+        this.removeScrollSync?.();
+        this.removeScrollSync = null;
+    }
+    getCellValue(column, row, index) {
+        if (column.cell) {
+            return column.cell(row, index);
+        }
+        const key = column.key;
+        const fallbackKey = column.key;
+        return (row?.[key] ?? row?.[fallbackKey]) ?? '';
+    }
+    columnId(column) {
+        return String(column.key);
+    }
+    columnTrackBy = (_, column) => column.key;
+    resolveTextAlign(column) {
+        return column.align ?? 'start';
+    }
+    resolveWidth(column) {
+        return column.width ?? null;
+    }
+    shouldRenderPaginator() {
+        return this.showPaginator();
+    }
+    onRowClick(event, row) {
+        if (!this.enableRowClick())
+            return;
+        const el = event.target;
+        // Evita abrir el side modal si el click fue sobre un elemento interactivo (acciones dentro de la fila)
+        if (el?.closest('button, a, input, textarea, select, [role="button"], mat-icon, mat-slide-toggle, mat-checkbox')) {
+            return;
+        }
+        this.rowClick.emit(row);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SharedTableComponent, isStandalone: true, selector: "lib-shared-table, shared-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, enableRowClick: { classPropertyName: "enableRowClick", publicName: "enableRowClick", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", pageChange: "pageChange" }, queries: [{ propertyName: "cellTemplatesQuery", predicate: SharedTableCellTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "headerWrapRef", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "bodyWrapRef", first: true, predicate: ["bodyWrap"], descendants: true }], ngImport: i0, template: "<figure class=\"shared-table\">\r\n  <div\r\n    class=\"shared-table__container mdc-data-table\"\r\n    [class.shared-table__container--no-paginator]=\"!shouldRenderPaginator()\"\r\n  >\r\n    <!-- Header: scroll sincronizado con el cuerpo, sin barra visible -->\r\n    <div class=\"shared-table__header-wrap\" #headerWrap>\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"dataSource\"\r\n        class=\"shared-table__mat-table shared-table__mat-table--header\"\r\n      >\r\n        @for (column of columns(); track columnTrackBy($index, column)) {\r\n          <ng-container [matColumnDef]=\"columnId(column)\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.text-align]=\"resolveTextAlign(column)\"\r\n              [style.width]=\"resolveWidth(column)\"\r\n            >\r\n              {{ column.header }}\r\n            </th>\r\n          </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      </table>\r\n    </div>\r\n    <!-- Cuerpo: scroll horizontal aqu\u00ED (barra debajo del header) -->\r\n    <div\r\n      class=\"shared-table__body-wrap\"\r\n      [class.shared-table__body-wrap--loading]=\"loading()\"\r\n      #bodyWrap\r\n    >\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"dataSource\"\r\n        class=\"shared-table__mat-table shared-table__mat-table--body\"\r\n      >\r\n        @for (column of columns(); track columnTrackBy($index, column)) {\r\n          <ng-container [matColumnDef]=\"columnId(column)\">\r\n            <td\r\n              mat-cell\r\n              *matCellDef=\"let row; let i = index\"\r\n              [style.text-align]=\"resolveTextAlign(column)\"\r\n              [style.width]=\"resolveWidth(column)\"\r\n            >\r\n              @if (cellTemplates[column.key]) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cellTemplates[column.key]\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: i,\r\n                    column: column,\r\n                  }\"\r\n                ></ng-container>\r\n              } @else {\r\n                {{ getCellValue(column, row, i) }}\r\n              }\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n        <tr mat-no-data-row>\r\n          <td\r\n            class=\"shared-table__empty\"\r\n            [attr.colspan]=\"displayedColumns.length || 1\"\r\n          >\r\n\r\n          <span>loading: {{ loading() }}</span>\r\n            @if (!loading()) {\r\n              {{ emptyState() }}\r\n            }\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      @if (loading()) {\r\n        <div class=\"shared-table__loading-overlay\">\r\n          <mat-spinner\r\n            class=\"shared-table__loading-spinner\"\r\n            [diameter]=\"48\"\r\n            [strokeWidth]=\"4\"\r\n          ></mat-spinner>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (shouldRenderPaginator()) {\r\n    <mat-paginator\r\n      class=\"shared-table__paginator\"\r\n      [length]=\"totalElements() ?? data().length\"\r\n      [pageSize]=\"pageSize()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    ></mat-paginator>\r\n  }\r\n</figure>\r\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%}.shared-table{width:100%;display:flex;flex-direction:column;margin:0;flex:1 1 0;min-height:0}.shared-table .mat-mdc-paginator{flex-shrink:0}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select{width:fit-content!important;min-width:0;max-width:fit-content!important;flex:0 0 auto!important;--mat-paginator-page-size-select-width: 100%;--mat-paginator-page-size-select-touch-target-height: 100%}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field{position:relative;width:fit-content!important;min-width:0;max-width:fit-content!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value{border:none!important;border-bottom:none!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-text-field-wrapper,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field--outlined{padding:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex{position:relative;width:fit-content!important;min-width:0;max-width:fit-content!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix{width:auto!important;min-width:0!important;flex:0 0 auto!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-paginator-touch-target{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:5rem!important;max-height:1.625rem!important;box-sizing:border-box!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value{margin-right:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger{display:flex!important;min-width:2.0625rem!important;width:max-content!important;height:1.625rem!important;flex-direction:row!important;align-items:center!important;flex-shrink:0;gap:0!important;border:none!important;border-bottom:.0625rem solid var(--pallete-scheme-surface-outline-variant, #C3C7C9)!important;box-shadow:none!important;align-self:stretch}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-arrow-wrapper{margin-left:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__leading,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__notch,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__trailing,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline .mat-mdc-notch-piece{border:none!important;border-width:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-line-ripple{display:none!important}.shared-table__mat-table{width:max-content;min-width:100%;table-layout:auto}.shared-table__caption{margin-bottom:16px;font-weight:600;font-size:1.125rem}.shared-table__empty{text-align:center;padding:24px 16px;color:#6b7280}.shared-table__container{--border-color: #E9E9E9;--table-radius: .25rem;flex:1 1 0;flex-grow:1;width:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--table-radius) var(--table-radius) 0 0}.shared-table__container.shared-table__container--no-paginator{border-radius:var(--table-radius)!important;border-bottom:1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9)!important}.shared-table__container.shared-table__container--no-paginator .shared-table__body-wrap{border-radius:0 0 var(--table-radius) var(--table-radius)}.shared-table__header-wrap{flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:var(--table-radius) var(--table-radius) 0 0}.shared-table__header-wrap::-webkit-scrollbar{display:none}.shared-table__body-wrap{flex:1 1 0;min-height:0;overflow:auto;position:relative}.shared-table__loading-overlay{position:absolute;inset:0;background:#ffffffeb;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .shared-table__loading-spinner,::ng-deep .shared-table__loading-spinner .mat-mdc-circular-progress,::ng-deep .shared-table__loading-spinner .mdc-circular-progress,::ng-deep .shared-table__loading-spinner circle{position:relative;z-index:10000;color:#d32f2f!important;stroke:#d32f2f!important;stroke-opacity:1!important;opacity:1!important}::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indicator,::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-outer-circle,::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-inner-circle{stroke:#d32f2f!important;stroke-width:6!important}::ng-deep .shared-table__loading-spinner{--mdc-circular-progress-active-indicator-color: #d32f2f !important;--mdc-circular-progress-track-color: rgba(0, 0, 0, .1) !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-shared-table, shared-table', standalone: true, imports: [CommonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<figure class=\"shared-table\">\r\n  <div\r\n    class=\"shared-table__container mdc-data-table\"\r\n    [class.shared-table__container--no-paginator]=\"!shouldRenderPaginator()\"\r\n  >\r\n    <!-- Header: scroll sincronizado con el cuerpo, sin barra visible -->\r\n    <div class=\"shared-table__header-wrap\" #headerWrap>\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"dataSource\"\r\n        class=\"shared-table__mat-table shared-table__mat-table--header\"\r\n      >\r\n        @for (column of columns(); track columnTrackBy($index, column)) {\r\n          <ng-container [matColumnDef]=\"columnId(column)\">\r\n            <th\r\n              mat-header-cell\r\n              *matHeaderCellDef\r\n              [style.text-align]=\"resolveTextAlign(column)\"\r\n              [style.width]=\"resolveWidth(column)\"\r\n            >\r\n              {{ column.header }}\r\n            </th>\r\n          </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n      </table>\r\n    </div>\r\n    <!-- Cuerpo: scroll horizontal aqu\u00ED (barra debajo del header) -->\r\n    <div\r\n      class=\"shared-table__body-wrap\"\r\n      [class.shared-table__body-wrap--loading]=\"loading()\"\r\n      #bodyWrap\r\n    >\r\n      <table\r\n        mat-table\r\n        [dataSource]=\"dataSource\"\r\n        class=\"shared-table__mat-table shared-table__mat-table--body\"\r\n      >\r\n        @for (column of columns(); track columnTrackBy($index, column)) {\r\n          <ng-container [matColumnDef]=\"columnId(column)\">\r\n            <td\r\n              mat-cell\r\n              *matCellDef=\"let row; let i = index\"\r\n              [style.text-align]=\"resolveTextAlign(column)\"\r\n              [style.width]=\"resolveWidth(column)\"\r\n            >\r\n              @if (cellTemplates[column.key]) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cellTemplates[column.key]\"\r\n                  [ngTemplateOutletContext]=\"{\r\n                    $implicit: row,\r\n                    index: i,\r\n                    column: column,\r\n                  }\"\r\n                ></ng-container>\r\n              } @else {\r\n                {{ getCellValue(column, row, i) }}\r\n              }\r\n            </td>\r\n          </ng-container>\r\n        }\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\r\n        <tr mat-no-data-row>\r\n          <td\r\n            class=\"shared-table__empty\"\r\n            [attr.colspan]=\"displayedColumns.length || 1\"\r\n          >\r\n\r\n          <span>loading: {{ loading() }}</span>\r\n            @if (!loading()) {\r\n              {{ emptyState() }}\r\n            }\r\n          </td>\r\n        </tr>\r\n      </table>\r\n      @if (loading()) {\r\n        <div class=\"shared-table__loading-overlay\">\r\n          <mat-spinner\r\n            class=\"shared-table__loading-spinner\"\r\n            [diameter]=\"48\"\r\n            [strokeWidth]=\"4\"\r\n          ></mat-spinner>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (shouldRenderPaginator()) {\r\n    <mat-paginator\r\n      class=\"shared-table__paginator\"\r\n      [length]=\"totalElements() ?? data().length\"\r\n      [pageSize]=\"pageSize()\"\r\n      [pageSizeOptions]=\"pageSizeOptions()\"\r\n    ></mat-paginator>\r\n  }\r\n</figure>\r\n", styles: [":host{display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%}.shared-table{width:100%;display:flex;flex-direction:column;margin:0;flex:1 1 0;min-height:0}.shared-table .mat-mdc-paginator{flex-shrink:0}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select{width:fit-content!important;min-width:0;max-width:fit-content!important;flex:0 0 auto!important;--mat-paginator-page-size-select-width: 100%;--mat-paginator-page-size-select-touch-target-height: 100%}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field{position:relative;width:fit-content!important;min-width:0;max-width:fit-content!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-subscript-wrapper,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value{border:none!important;border-bottom:none!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-text-field-wrapper,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field--outlined{padding:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex{position:relative;width:fit-content!important;min-width:0;max-width:fit-content!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix{width:auto!important;min-width:0!important;flex:0 0 auto!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-paginator-touch-target{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:5rem!important;max-height:1.625rem!important;box-sizing:border-box!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value{margin-right:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger{display:flex!important;min-width:2.0625rem!important;width:max-content!important;height:1.625rem!important;flex-direction:row!important;align-items:center!important;flex-shrink:0;gap:0!important;border:none!important;border-bottom:.0625rem solid var(--pallete-scheme-surface-outline-variant, #C3C7C9)!important;box-shadow:none!important;align-self:stretch}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-arrow-wrapper{margin-left:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__leading,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__notch,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__trailing,:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline .mat-mdc-notch-piece{border:none!important;border-width:0!important}:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-line-ripple{display:none!important}.shared-table__mat-table{width:max-content;min-width:100%;table-layout:auto}.shared-table__caption{margin-bottom:16px;font-weight:600;font-size:1.125rem}.shared-table__empty{text-align:center;padding:24px 16px;color:#6b7280}.shared-table__container{--border-color: #E9E9E9;--table-radius: .25rem;flex:1 1 0;flex-grow:1;width:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:var(--table-radius) var(--table-radius) 0 0}.shared-table__container.shared-table__container--no-paginator{border-radius:var(--table-radius)!important;border-bottom:1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9)!important}.shared-table__container.shared-table__container--no-paginator .shared-table__body-wrap{border-radius:0 0 var(--table-radius) var(--table-radius)}.shared-table__header-wrap{flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:var(--table-radius) var(--table-radius) 0 0}.shared-table__header-wrap::-webkit-scrollbar{display:none}.shared-table__body-wrap{flex:1 1 0;min-height:0;overflow:auto;position:relative}.shared-table__loading-overlay{position:absolute;inset:0;background:#ffffffeb;display:flex;align-items:center;justify-content:center;z-index:9999}::ng-deep .shared-table__loading-spinner,::ng-deep .shared-table__loading-spinner .mat-mdc-circular-progress,::ng-deep .shared-table__loading-spinner .mdc-circular-progress,::ng-deep .shared-table__loading-spinner circle{position:relative;z-index:10000;color:#d32f2f!important;stroke:#d32f2f!important;stroke-opacity:1!important;opacity:1!important}::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indicator,::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-outer-circle,::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-inner-circle{stroke:#d32f2f!important;stroke-width:6!important}::ng-deep .shared-table__loading-spinner{--mdc-circular-progress-active-indicator-color: #d32f2f !important;--mdc-circular-progress-track-color: rgba(0, 0, 0, .1) !important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], emptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyState", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], enableRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowClick", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], rowClick: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], cellTemplatesQuery: [{
+                type: ContentChildren,
+                args: [SharedTableCellTemplateDirective, { descendants: true }]
+            }], paginator: [{
+                type: ViewChild,
+                args: [MatPaginator]
+            }], headerWrapRef: [{
+                type: ViewChild,
+                args: ['headerWrap']
+            }], bodyWrapRef: [{
+                type: ViewChild,
+                args: ['bodyWrap']
+            }] } });
+
+class SharedBreadcrumbComponent {
+    route = inject(ActivatedRoute, { optional: true });
+    router = inject(Router, { optional: true });
+    parentNavigate = new EventEmitter();
+    parentLabel = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentLabel" }] : /* istanbul ignore next */ []));
+    parentUrl = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parentUrl" }] : /* istanbul ignore next */ []));
+    currentLabel = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentLabel" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const currentRoute = this.route;
+        if (!currentRoute) {
+            return;
+        }
+        const parentRoute = currentRoute.parent;
+        const parentData = parentRoute?.snapshot.data ?? {};
+        const currentData = currentRoute.snapshot.data ?? {};
+        const parentLabel = parentData['breadcrumb'] ?? currentData['parentBreadcrumb'] ?? '';
+        const parentUrl = parentData['url'] ?? currentData['parentUrl'] ?? '/';
+        const currentLabel = currentData['breadcrumb'] ?? '';
+        this.parentLabel.set(parentLabel);
+        this.parentUrl.set(parentUrl);
+        this.currentLabel.set(currentLabel);
+    }
+    navigateToParent() {
+        const target = this.parentUrl();
+        if (target) {
+            this.parentNavigate.emit(target);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SharedBreadcrumbComponent, isStandalone: true, selector: "lib-breadcrumb, shared-breadcrumb", outputs: { parentNavigate: "parentNavigate" }, ngImport: i0, template: "<nav class=\"shared-breadcrumb\" *ngIf=\"currentLabel() || parentLabel()\">\r\n  @if (parentLabel()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shared-breadcrumb__parent\"\r\n      (click)=\"navigateToParent()\"\r\n    >\r\n      <span class=\"shared-breadcrumb__parent-label\">{{ parentLabel() }}</span>\r\n    </button>\r\n    <span class=\"shared-breadcrumb__separator\">/</span>\r\n  }\r\n  <span class=\"shared-breadcrumb__current\">\r\n    <span class=\"shared-breadcrumb__current-label\">{{ currentLabel() }}</span>\r\n  </span>\r\n</nav>\r\n", styles: [".shared-breadcrumb{display:flex;align-items:center;gap:.5rem;padding:0;color:var( --breadcrumbs-label-enabled-breadcrumb-enabled-label-text-color, var(--pallete-scheme-surface-on-surface-variant, #434749) );font-family:var(--breadcrumbs-label-enabled-breadcrumb-label-text-font, Heebo);font-size:var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);font-style:normal;font-weight:var(--breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400);line-height:calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, .25px)}.shared-breadcrumb__parent{display:inline-flex;align-items:center;gap:.5rem;border:none;background:none;padding:.625rem .75rem;border-radius:100px;position:relative;overflow:hidden;font:inherit;font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 );color:inherit;cursor:pointer;transition:color .15s ease,background-color .15s ease;--breadcrumb-ripple-color: var( --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color, rgba(24, 28, 30, .08) )}.shared-breadcrumb__parent:after{content:\"\";position:absolute;right:0;bottom:0;width:48px;height:28px;background-color:var(--breadcrumb-ripple-color);-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;opacity:0;pointer-events:none}.shared-breadcrumb__parent:hover,.shared-breadcrumb__parent:focus-visible{color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-label-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );background-color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color, rgba(24, 28, 30, .08) );outline:none}.shared-breadcrumb__parent:focus-visible{outline:calc(var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-weight, 3) * 1px) solid var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-color, #5b5f61);outline-offset:2px}.shared-breadcrumb__parent:active{color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );background-color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color, rgba(24, 28, 30, .1) )}.shared-breadcrumb__parent:active:after{opacity:1}.shared-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--breadcrumbs-divider-breadcrumb-divider-color, #181c1e);text-align:center;font-family:var(--breadcrumbs-divider-breadcrumb-divider-text-font, Heebo);font-size:var(--breadcrumbs-divider-breadcrumb-divider-text-size, 14px);font-style:normal;font-weight:var(--breadcrumbs-divider-breadcrumb-divider-text-weight, 400);line-height:calc(var(--breadcrumbs-divider-breadcrumb-divider-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-divider-breadcrumb-divider-text-tracking, .25px)}.shared-breadcrumb__current{display:inline-flex;align-items:center;padding:.625rem .75rem;gap:.5rem;border-radius:100px;position:relative;overflow:hidden;cursor:pointer;font-weight:var( --breadcrumbs-label-selected-breadcrumb-selected-label-text-weight, 700 );color:var( --breadcrumbs-label-selected-breadcrumb-selected-label-hovered-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );letter-spacing:var(--breadcrumbs-label-selected-breadcrumb-selected-label-text-tracking, .1px);--breadcrumb-ripple-color: var( --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color, rgba(24, 28, 30, .08) )}.shared-breadcrumb__current:after{content:\"\";position:absolute;right:0;bottom:0;width:48px;height:28px;background-color:var(--breadcrumb-ripple-color);-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;opacity:0;pointer-events:none}.shared-breadcrumb__current:hover,.shared-breadcrumb__current:focus-visible{background-color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color, rgba(24, 28, 30, .08) );outline:none}.shared-breadcrumb__current:active{color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color, #181c1e );background-color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color, rgba(24, 28, 30, .1) )}.shared-breadcrumb__current:active:after{opacity:1}.shared-breadcrumb__current-label{position:relative;z-index:1;text-align:center;font-size:var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);font-style:normal;line-height:calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, .25px);font-weight:inherit}.shared-breadcrumb__parent-label{position:relative;z-index:1}.shared-breadcrumb__current:active .shared-breadcrumb__current-label{font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 )}.shared-breadcrumb__current:hover .shared-breadcrumb__current-label,.shared-breadcrumb__current:focus-visible .shared-breadcrumb__current-label{font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-breadcrumb, shared-breadcrumb', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"shared-breadcrumb\" *ngIf=\"currentLabel() || parentLabel()\">\r\n  @if (parentLabel()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"shared-breadcrumb__parent\"\r\n      (click)=\"navigateToParent()\"\r\n    >\r\n      <span class=\"shared-breadcrumb__parent-label\">{{ parentLabel() }}</span>\r\n    </button>\r\n    <span class=\"shared-breadcrumb__separator\">/</span>\r\n  }\r\n  <span class=\"shared-breadcrumb__current\">\r\n    <span class=\"shared-breadcrumb__current-label\">{{ currentLabel() }}</span>\r\n  </span>\r\n</nav>\r\n", styles: [".shared-breadcrumb{display:flex;align-items:center;gap:.5rem;padding:0;color:var( --breadcrumbs-label-enabled-breadcrumb-enabled-label-text-color, var(--pallete-scheme-surface-on-surface-variant, #434749) );font-family:var(--breadcrumbs-label-enabled-breadcrumb-label-text-font, Heebo);font-size:var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);font-style:normal;font-weight:var(--breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400);line-height:calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, .25px)}.shared-breadcrumb__parent{display:inline-flex;align-items:center;gap:.5rem;border:none;background:none;padding:.625rem .75rem;border-radius:100px;position:relative;overflow:hidden;font:inherit;font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 );color:inherit;cursor:pointer;transition:color .15s ease,background-color .15s ease;--breadcrumb-ripple-color: var( --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color, rgba(24, 28, 30, .08) )}.shared-breadcrumb__parent:after{content:\"\";position:absolute;right:0;bottom:0;width:48px;height:28px;background-color:var(--breadcrumb-ripple-color);-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;opacity:0;pointer-events:none}.shared-breadcrumb__parent:hover,.shared-breadcrumb__parent:focus-visible{color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-label-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );background-color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color, rgba(24, 28, 30, .08) );outline:none}.shared-breadcrumb__parent:focus-visible{outline:calc(var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-weight, 3) * 1px) solid var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-color, #5b5f61);outline-offset:2px}.shared-breadcrumb__parent:active{color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );background-color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color, rgba(24, 28, 30, .1) )}.shared-breadcrumb__parent:active:after{opacity:1}.shared-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--breadcrumbs-divider-breadcrumb-divider-color, #181c1e);text-align:center;font-family:var(--breadcrumbs-divider-breadcrumb-divider-text-font, Heebo);font-size:var(--breadcrumbs-divider-breadcrumb-divider-text-size, 14px);font-style:normal;font-weight:var(--breadcrumbs-divider-breadcrumb-divider-text-weight, 400);line-height:calc(var(--breadcrumbs-divider-breadcrumb-divider-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-divider-breadcrumb-divider-text-tracking, .25px)}.shared-breadcrumb__current{display:inline-flex;align-items:center;padding:.625rem .75rem;gap:.5rem;border-radius:100px;position:relative;overflow:hidden;cursor:pointer;font-weight:var( --breadcrumbs-label-selected-breadcrumb-selected-label-text-weight, 700 );color:var( --breadcrumbs-label-selected-breadcrumb-selected-label-hovered-text-color, var(--pallete-scheme-surface-on-surface, #181c1e) );letter-spacing:var(--breadcrumbs-label-selected-breadcrumb-selected-label-text-tracking, .1px);--breadcrumb-ripple-color: var( --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color, rgba(24, 28, 30, .08) )}.shared-breadcrumb__current:after{content:\"\";position:absolute;right:0;bottom:0;width:48px;height:28px;background-color:var(--breadcrumb-ripple-color);-webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");mask-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;opacity:0;pointer-events:none}.shared-breadcrumb__current:hover,.shared-breadcrumb__current:focus-visible{background-color:var( --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color, rgba(24, 28, 30, .08) );outline:none}.shared-breadcrumb__current:active{color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color, #181c1e );background-color:var( --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color, rgba(24, 28, 30, .1) )}.shared-breadcrumb__current:active:after{opacity:1}.shared-breadcrumb__current-label{position:relative;z-index:1;text-align:center;font-size:var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);font-style:normal;line-height:calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);letter-spacing:var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, .25px);font-weight:inherit}.shared-breadcrumb__parent-label{position:relative;z-index:1}.shared-breadcrumb__current:active .shared-breadcrumb__current-label{font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 )}.shared-breadcrumb__current:hover .shared-breadcrumb__current-label,.shared-breadcrumb__current:focus-visible .shared-breadcrumb__current-label{font-weight:var( --breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400 )}\n"] }]
+        }], propDecorators: { parentNavigate: [{
+                type: Output
+            }] } });
+
+class SidebarComponent {
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    selectedId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    showLabels = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    spritePath = input('assets/icons/sprite.svg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spritePath" }] : /* istanbul ignore next */ []));
+    itemSelected = new EventEmitter();
+    hasLabels = computed(() => this.showLabels() && this.items().some(({ label }) => !!label), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabels" }] : /* istanbul ignore next */ []));
+    onSelect(item) {
+        if (item.disabled) {
+            return;
+        }
+        this.itemSelected.emit(item);
+    }
+    isSelected(item) {
+        return item.id === this.selectedId();
+    }
+    trackById(_index, item) {
+        return item.id;
+    }
+    iconHref(icon) {
+        return `${this.spritePath()}#${icon}`;
+    }
+    accessoryHref(accessoryIcon) {
+        return `${this.spritePath()}#${accessoryIcon}`;
+    }
+    iconRef(item) {
+        if (item.iconPath) {
+            return item.iconPath;
+        }
+        if (item.icon) {
+            return this.iconHref(item.icon);
+        }
+        return null;
+    }
+    accessoryRef(item) {
+        if (item.accessoryIconPath) {
+            return item.accessoryIconPath;
+        }
+        if (item.accessoryIcon) {
+            return this.accessoryHref(item.accessoryIcon);
+        }
+        return null;
+    }
+    isSprite(ref) {
+        return !!ref && ref.includes('#');
+    }
+    shouldShowLabel(item) {
+        if (!item.label) {
+            return false;
+        }
+        return this.showLabels();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, spritePath: { classPropertyName: "spritePath", publicName: "spritePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<aside class=\"sidebar\" role=\"navigation\" aria-label=\"Navegaci\u00F3n principal\" [class.sidebar--show-labels]=\"hasLabels()\">\r\n  <div class=\"sidebar__header\">\r\n    <ng-content select=\"[sidebar-header]\"></ng-content>\r\n  </div>\r\n\r\n  <nav class=\"sidebar__nav\" aria-label=\"Secciones\">\r\n    <ul class=\"sidebar__list\">\r\n      @for (item of items(); track trackById($index, item)) {\r\n        <li\r\n          class=\"sidebar__item\"\r\n          [class.sidebar__item--selected]=\"isSelected(item)\"\r\n          [class.sidebar__item--disabled]=\"item.disabled\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"sidebar__button\"\r\n            [class.sidebar__button--expanded]=\"hasLabels()\"\r\n            [class.sidebar__button--selected]=\"isSelected(item)\"\r\n            [attr.aria-label]=\"item.ariaLabel ?? item.label\"\r\n            [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\r\n            [attr.title]=\"shouldShowLabel(item) ? null : (item.ariaLabel || item.label)\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"onSelect(item)\"\r\n          >\r\n            <span class=\"sidebar__active\" [class.sidebar__active--expanded]=\"hasLabels()\">\r\n              @if (iconRef(item); as iconSrc) {\r\n                <span class=\"sidebar__icon\" aria-hidden=\"true\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"renderIcon\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: iconSrc, svgClass: 'sidebar__icon-svg', imgClass: 'sidebar__icon-img' }\"\r\n                  ></ng-container>\r\n                </span>\r\n              }\r\n\r\n              @if (shouldShowLabel(item)) {\r\n                <span class=\"sidebar__label\">{{ item.label }}</span>\r\n              }\r\n\r\n              @if (accessoryRef(item); as accessorySrc) {\r\n                <span class=\"sidebar__accessory\" aria-hidden=\"true\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"renderIcon\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: accessorySrc, svgClass: 'sidebar__accessory-svg', imgClass: 'sidebar__accessory-img' }\"\r\n                  ></ng-container>\r\n                </span>\r\n              }\r\n            </span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n\r\n  <div class=\"sidebar__footer\">\r\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\r\n  </div>\r\n\r\n  <ng-template #renderIcon let-src let-svgClass=\"svgClass\" let-imgClass=\"imgClass\">\r\n    @if (isSprite(src)) {\r\n      <svg [attr.class]=\"svgClass\">\r\n        <use [attr.href]=\"src\"></use>\r\n      </svg>\r\n    } @else {\r\n      <img [attr.class]=\"imgClass\" [src]=\"src\" alt=\"\" />\r\n    }\r\n  </ng-template>\r\n</aside>\r\n", styles: [":host{display:block;height:100%}.sidebar{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);min-width:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);height:100%;padding:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-top-space, 44) * 1px) 0 calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);box-sizing:border-box;gap:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);background-color:var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-color, #ebeef0);border-radius:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-shape, 0) * 1px);color:var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-text-color, #434749);transition:width .28s ease,min-width .28s ease,padding .28s ease}.sidebar--show-labels{align-items:stretch;width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);min-width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px)}.sidebar__header,.sidebar__footer{display:flex;justify-content:center;padding-inline:calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-leading-space, 16) * 1px);width:100%}.sidebar__header{min-height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-header-space-minimum, 40) * 1px);align-items:center}.sidebar__header:empty,.sidebar__footer:empty{display:none}.sidebar__nav{flex:1;display:flex;flex-direction:column;width:100%;padding:0 var(--padding-container-main, 16px) 0}.sidebar__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-vertical-space, 6) * 1px)}.sidebar--show-labels .sidebar__list{align-items:stretch}.sidebar__item{width:100%;display:flex;align-items:center}.sidebar--show-labels .sidebar__item{justify-content:flex-start}.sidebar__button{position:relative;display:flex;justify-content:center;width:auto;max-width:100%;height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);margin:0;padding-inline:0;padding-block:0;border:0;background:none;cursor:pointer;color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-color, #181c1e);text-decoration:none;transition:color .18s ease,height .32s ease,max-width .32s ease,padding .32s ease}.sidebar__button--expanded{align-self:center;width:auto;max-width:100%;height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);justify-content:flex-start;padding-inline:0}.sidebar__button:focus-visible{outline:2px solid var(--navigation-rail-nav-rail-item-common-nav-rail-item-focus-indicator, #5b5f61);outline-offset:4px}.sidebar__button:disabled{cursor:default;opacity:.48}.sidebar__active{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-icon-label-space, 8) * 1px);height:calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-active-indicator-height, 32) * 1px);padding-inline:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-leading-space, 16) * 1px) calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-trailing-space, 16) * 1px);border-radius:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-shape, 1000) * 1px);background-color:transparent;transition:background-color .18s ease,color .18s ease,gap .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),max-width .32s cubic-bezier(.4,0,.2,1);max-width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);overflow:hidden}.sidebar__button--expanded .sidebar__active,.sidebar__active--expanded{width:auto;max-width:100%;height:100%;align-items:center;justify-content:flex-start;padding-inline:calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-full-width-leading-space, 16) * 1px);gap:calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-icon-label-space, 8) * 1px)}.sidebar__button:not(:disabled):hover .sidebar__active{background-color:#181c1e14}.sidebar__button:not(:disabled):active .sidebar__active{background-color:#181c1e1f}.sidebar__button--selected .sidebar__active{background-color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-selected-color, #e42313);color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-selected-color, #ffffff)}.sidebar__button--selected:not(:disabled):hover .sidebar__active{background-color:#e42313e0}.sidebar__button--selected:not(:disabled):active .sidebar__active{background-color:#e42313c2}.sidebar__icon{display:flex;align-items:center;justify-content:center;width:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);color:currentColor}.sidebar__icon-svg,.sidebar__icon-img{width:100%;height:100%}.sidebar__icon-svg{fill:currentColor}.sidebar__icon-img{object-fit:contain}.sidebar__label{flex:1 1 auto;min-width:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;line-height:1.2;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .2s ease}.sidebar__accessory{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:auto;color:inherit}.sidebar__accessory-svg,.sidebar__accessory-img{width:100%;height:100%;fill:currentColor}.sidebar__footer{margin-top:auto;align-items:flex-end;padding-bottom:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"sidebar\" role=\"navigation\" aria-label=\"Navegaci\u00F3n principal\" [class.sidebar--show-labels]=\"hasLabels()\">\r\n  <div class=\"sidebar__header\">\r\n    <ng-content select=\"[sidebar-header]\"></ng-content>\r\n  </div>\r\n\r\n  <nav class=\"sidebar__nav\" aria-label=\"Secciones\">\r\n    <ul class=\"sidebar__list\">\r\n      @for (item of items(); track trackById($index, item)) {\r\n        <li\r\n          class=\"sidebar__item\"\r\n          [class.sidebar__item--selected]=\"isSelected(item)\"\r\n          [class.sidebar__item--disabled]=\"item.disabled\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"sidebar__button\"\r\n            [class.sidebar__button--expanded]=\"hasLabels()\"\r\n            [class.sidebar__button--selected]=\"isSelected(item)\"\r\n            [attr.aria-label]=\"item.ariaLabel ?? item.label\"\r\n            [attr.aria-current]=\"isSelected(item) ? 'page' : null\"\r\n            [attr.title]=\"shouldShowLabel(item) ? null : (item.ariaLabel || item.label)\"\r\n            [disabled]=\"item.disabled\"\r\n            (click)=\"onSelect(item)\"\r\n          >\r\n            <span class=\"sidebar__active\" [class.sidebar__active--expanded]=\"hasLabels()\">\r\n              @if (iconRef(item); as iconSrc) {\r\n                <span class=\"sidebar__icon\" aria-hidden=\"true\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"renderIcon\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: iconSrc, svgClass: 'sidebar__icon-svg', imgClass: 'sidebar__icon-img' }\"\r\n                  ></ng-container>\r\n                </span>\r\n              }\r\n\r\n              @if (shouldShowLabel(item)) {\r\n                <span class=\"sidebar__label\">{{ item.label }}</span>\r\n              }\r\n\r\n              @if (accessoryRef(item); as accessorySrc) {\r\n                <span class=\"sidebar__accessory\" aria-hidden=\"true\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"renderIcon\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: accessorySrc, svgClass: 'sidebar__accessory-svg', imgClass: 'sidebar__accessory-img' }\"\r\n                  ></ng-container>\r\n                </span>\r\n              }\r\n            </span>\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </nav>\r\n\r\n  <div class=\"sidebar__footer\">\r\n    <ng-content select=\"[sidebar-footer]\"></ng-content>\r\n  </div>\r\n\r\n  <ng-template #renderIcon let-src let-svgClass=\"svgClass\" let-imgClass=\"imgClass\">\r\n    @if (isSprite(src)) {\r\n      <svg [attr.class]=\"svgClass\">\r\n        <use [attr.href]=\"src\"></use>\r\n      </svg>\r\n    } @else {\r\n      <img [attr.class]=\"imgClass\" [src]=\"src\" alt=\"\" />\r\n    }\r\n  </ng-template>\r\n</aside>\r\n", styles: [":host{display:block;height:100%}.sidebar{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);min-width:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-width, 96) * 1px);height:100%;padding:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-top-space, 44) * 1px) 0 calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);box-sizing:border-box;gap:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px);background-color:var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-color, #ebeef0);border-radius:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-container-shape, 0) * 1px);color:var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-text-color, #434749);transition:width .28s ease,min-width .28s ease,padding .28s ease}.sidebar--show-labels{align-items:stretch;width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);min-width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px)}.sidebar__header,.sidebar__footer{display:flex;justify-content:center;padding-inline:calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-leading-space, 16) * 1px);width:100%}.sidebar__header{min-height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-header-space-minimum, 40) * 1px);align-items:center}.sidebar__header:empty,.sidebar__footer:empty{display:none}.sidebar__nav{flex:1;display:flex;flex-direction:column;width:100%;padding:0 var(--padding-container-main, 16px) 0}.sidebar__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-vertical-space, 6) * 1px)}.sidebar--show-labels .sidebar__list{align-items:stretch}.sidebar__item{width:100%;display:flex;align-items:center}.sidebar--show-labels .sidebar__item{justify-content:flex-start}.sidebar__button{position:relative;display:flex;justify-content:center;width:auto;max-width:100%;height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);margin:0;padding-inline:0;padding-block:0;border:0;background:none;cursor:pointer;color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-color, #181c1e);text-decoration:none;transition:color .18s ease,height .32s ease,max-width .32s ease,padding .32s ease}.sidebar__button--expanded{align-self:center;width:auto;max-width:100%;height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-height, 64) * 1px);justify-content:flex-start;padding-inline:0}.sidebar__button:focus-visible{outline:2px solid var(--navigation-rail-nav-rail-item-common-nav-rail-item-focus-indicator, #5b5f61);outline-offset:4px}.sidebar__button:disabled{cursor:default;opacity:.48}.sidebar__active{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-icon-label-space, 8) * 1px);height:calc(var(--navigation-rail-nav-rail-item-vertical-nav-rail-item-vertical-active-indicator-height, 32) * 1px);padding-inline:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-leading-space, 16) * 1px) calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-trailing-space, 16) * 1px);border-radius:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-active-indicator-shape, 1000) * 1px);background-color:transparent;transition:background-color .18s ease,color .18s ease,gap .32s cubic-bezier(.4,0,.2,1),padding .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),max-width .32s cubic-bezier(.4,0,.2,1);max-width:calc(var(--navigation-rail-nav-rail-expanded-nav-rail-expanded-container-width-minimum, 220) * 1px);overflow:hidden}.sidebar__button--expanded .sidebar__active,.sidebar__active--expanded{width:auto;max-width:100%;height:100%;align-items:center;justify-content:flex-start;padding-inline:calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-full-width-leading-space, 16) * 1px);gap:calc(var(--navigation-rail-nav-rail-item-horizontal-nav-rail-item-horizontal-icon-label-space, 8) * 1px)}.sidebar__button:not(:disabled):hover .sidebar__active{background-color:#181c1e14}.sidebar__button:not(:disabled):active .sidebar__active{background-color:#181c1e1f}.sidebar__button--selected .sidebar__active{background-color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-container-selected-color, #e42313);color:var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-selected-color, #ffffff)}.sidebar__button--selected:not(:disabled):hover .sidebar__active{background-color:#e42313e0}.sidebar__button--selected:not(:disabled):active .sidebar__active{background-color:#e42313c2}.sidebar__icon{display:flex;align-items:center;justify-content:center;width:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);height:calc(var(--navigation-rail-nav-rail-item-common-nav-rail-item-icon-size, 24) * 1px);color:currentColor}.sidebar__icon-svg,.sidebar__icon-img{width:100%;height:100%}.sidebar__icon-svg{fill:currentColor}.sidebar__icon-img{object-fit:contain}.sidebar__label{flex:1 1 auto;min-width:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;line-height:1.2;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .2s ease}.sidebar__accessory{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:auto;color:inherit}.sidebar__accessory-svg,.sidebar__accessory-img{width:100%;height:100%;fill:currentColor}.sidebar__footer{margin-top:auto;align-items:flex-end;padding-bottom:calc(var(--navigation-rail-nav-rail-collapsed-nav-rail-collapsed-item-vertical-space, 4) * 1px)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedId", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], spritePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "spritePath", required: false }] }], itemSelected: [{
+                type: Output
+            }] } });
+
+class HeaderComponent {
+    showLeading = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLeading" }] : /* istanbul ignore next */ []));
+    leadingIcon = input('icon-menu', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    leadingIconPath = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingIconPath" }] : /* istanbul ignore next */ []));
+    leadingActionLabel = input('Abrir navegación', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingActionLabel" }] : /* istanbul ignore next */ []));
+    brandLabel = input('Credix', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandLabel" }] : /* istanbul ignore next */ []));
+    brandIcon = input('smiley', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
+    brandIconPath = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandIconPath" }] : /* istanbul ignore next */ []));
+    trailingActions = input([
+        { icon: 'search', ariaLabel: 'Abrir buscador' },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailingActions" }] : /* istanbul ignore next */ []));
+    iconBasePath = input('assets/icons', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconBasePath" }] : /* istanbul ignore next */ []));
+    leadingClick = new EventEmitter();
+    actionClick = new EventEmitter();
+    iconAssetBasePath = computed(() => this.normalizeAssetBasePath(this.iconBasePath()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconAssetBasePath" }] : /* istanbul ignore next */ []));
+    leadingIconUrl = computed(() => this.resolveIconUrl(this.leadingIcon(), this.leadingIconPath()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingIconUrl" }] : /* istanbul ignore next */ []));
+    brandIconUrl = computed(() => this.resolveIconUrl(this.brandIcon(), this.brandIconPath()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandIconUrl" }] : /* istanbul ignore next */ []));
+    onLeadingClick() {
+        this.leadingClick.emit();
+    }
+    onActionClick(action) {
+        this.actionClick.emit(action);
+    }
+    trackByAction(_index, action) {
+        return action.id ?? action.icon;
+    }
+    actionIconUrl(action) {
+        return this.resolveIconUrl(action.icon, action.iconPath ?? null);
+    }
+    resolveIconUrl(iconName, explicitPath) {
+        if (explicitPath) {
+            if (explicitPath.includes('#')) {
+                const spriteSymbol = explicitPath.split('#')[1];
+                if (spriteSymbol) {
+                    const fallback = this.resolveIconUrl(spriteSymbol, null);
+                    if (fallback) {
+                        return fallback;
+                    }
+                }
+            }
+            return explicitPath;
+        }
+        if (!iconName) {
+            return null;
+        }
+        if (KNOWN_UI_ICON_NAMES.has(iconName)) {
+            return resolveUiIconResource(iconName, {
+                basePath: this.iconAssetBasePath(),
+            });
+        }
+        return `${this.iconAssetBasePath()}/${iconName}.svg`;
+    }
+    normalizeAssetBasePath(basePath) {
+        const targetPath = basePath ?? 'assets/icons';
+        if (/^(https?:)?\/\//.test(targetPath)) {
+            return targetPath.replace(/\/$/, '');
+        }
+        return targetPath.replace(/\/$/, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: HeaderComponent, isStandalone: true, selector: "lib-header", inputs: { showLeading: { classPropertyName: "showLeading", publicName: "showLeading", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingIconPath: { classPropertyName: "leadingIconPath", publicName: "leadingIconPath", isSignal: true, isRequired: false, transformFunction: null }, leadingActionLabel: { classPropertyName: "leadingActionLabel", publicName: "leadingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, brandLabel: { classPropertyName: "brandLabel", publicName: "brandLabel", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandIconPath: { classPropertyName: "brandIconPath", publicName: "brandIconPath", isSignal: true, isRequired: false, transformFunction: null }, trailingActions: { classPropertyName: "trailingActions", publicName: "trailingActions", isSignal: true, isRequired: false, transformFunction: null }, iconBasePath: { classPropertyName: "iconBasePath", publicName: "iconBasePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leadingClick: "leadingClick", actionClick: "actionClick" }, ngImport: i0, template: "<header class=\"app-bar\" role=\"banner\">\r\n  <div class=\"app-bar__leading\">\r\n    @if(showLeading()) {\r\n    <button type=\"button\" class=\"app-bar__icon-button app-bar__icon-button--leading\" (click)=\"onLeadingClick()\"\r\n      [attr.aria-label]=\"leadingActionLabel()\">\r\n      @if (leadingIconUrl(); as leadingIconSrc) {\r\n      <img class=\"app-bar__icon\" [src]=\"leadingIconSrc\" alt=\"\" aria-hidden=\"true\" />\r\n      }\r\n    </button>\r\n    }\r\n  </div>\r\n  <div class=\"app-bar__brand\" role=\"img\" [attr.aria-label]=\"brandLabel()\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"47\" height=\"25\" viewBox=\"0 0 47 25\" fill=\"none\">\r\n      <path\r\n        d=\"M34.0017 2.67521e-05C30.6579 -0.00672338 27.4427 1.26417 25.0377 3.54336C22.6327 5.82255 21.2268 8.93092 21.1179 12.2097C21.1179 12.3304 21.0564 12.5274 21.0564 12.6959C21.0564 14.8068 20.2017 16.8311 18.6803 18.3237C17.1589 19.8163 15.0955 20.6548 12.9439 20.6548C10.7923 20.6548 8.72889 19.8163 7.2075 18.3237C5.68612 16.8311 4.83141 14.8068 4.83141 12.6959C4.83073 12.0678 4.57609 11.4656 4.12335 11.0214C3.67061 10.5773 3.05676 10.3274 2.4165 10.3268C2.09598 10.3218 1.77774 10.3805 1.48091 10.4992C1.18407 10.6179 0.914746 10.7943 0.689116 11.0177C0.463486 11.2411 0.286201 11.5069 0.167908 11.7992C0.0496149 12.0915 -0.00724651 12.4042 0.000738184 12.7186C0.114789 15.972 1.49612 19.0588 3.86027 21.3431C6.22441 23.6274 9.39139 24.9353 12.709 24.9977C16.0266 25.06 19.2423 23.8719 21.6939 21.678C24.1454 19.4842 25.6462 16.4516 25.8871 13.2048C25.9417 13.0487 25.9626 12.8831 25.9486 12.7186C25.9486 10.6078 26.8033 8.58341 28.3247 7.09083C29.8461 5.59826 31.9095 4.75974 34.0611 4.75974C36.2127 4.75974 38.2761 5.59826 39.7975 7.09083C41.3189 8.58341 42.1736 10.6078 42.1736 12.7186C42.1562 13.0399 42.2056 13.3613 42.3189 13.6632C42.4322 13.9651 42.607 14.2412 42.8327 14.4747C43.0583 14.7082 43.3301 14.8941 43.6313 15.0212C43.9326 15.1482 44.2571 15.2138 44.5851 15.2138C44.913 15.2138 45.2375 15.1482 45.5388 15.0212C45.8401 14.8941 46.1119 14.7082 46.3375 14.4747C46.5632 14.2412 46.738 13.9651 46.8513 13.6632C46.9646 13.3613 47.014 13.0399 46.9966 12.7186C46.99 9.34216 45.6178 6.10632 43.1814 3.72165C40.7449 1.33699 37.4433 -0.00153433 34.0017 2.67521e-05Z\"\r\n        fill=\"#E42313\" />\r\n      <path\r\n        d=\"M10.5943 6.75042C10.5937 7.32697 10.4188 7.89037 10.0918 8.36943C9.76482 8.84848 9.30041 9.22168 8.75728 9.44185C8.21414 9.66203 7.61667 9.71929 7.04037 9.60641C6.46407 9.49352 5.93482 9.21556 5.51951 8.80765C5.1042 8.39974 4.82148 7.88019 4.70708 7.31468C4.59268 6.74917 4.65174 6.16307 4.87678 5.63048C5.10183 5.09789 5.48277 4.64271 5.97145 4.32247C6.46013 4.00222 7.03461 3.8313 7.62228 3.8313C8.40773 3.84195 9.15792 4.15302 9.71305 4.69826C10.2682 5.24351 10.5844 5.97984 10.5943 6.75042Z\"\r\n        fill=\"#E42313\" />\r\n      <path\r\n        d=\"M19.3841 6.75044C19.3841 7.52375 19.0709 8.26539 18.5136 8.8122C17.9562 9.35901 17.2003 9.66621 16.412 9.66621C15.6238 9.66621 14.8678 9.35901 14.3104 8.8122C13.7531 8.26539 13.44 7.52375 13.44 6.75044C13.4347 6.36594 13.5079 5.9843 13.6554 5.62802C13.8028 5.27174 14.0215 4.94802 14.2985 4.67596C14.5755 4.4039 14.9052 4.18901 15.2682 4.04394C15.6312 3.89888 16.0201 3.82658 16.412 3.83132C17.1975 3.84196 17.9476 4.15303 18.5028 4.69828C19.0579 5.24352 19.3741 5.97985 19.3841 6.75044Z\"\r\n        fill=\"#E42313\" />\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"app-bar__actions\">\r\n    @for (action of trailingActions(); track trackByAction($index, action)) {\r\n    <button type=\"button\" class=\"app-bar__icon-button app-bar__icon-button--trailing\" (click)=\"onActionClick(action)\"\r\n      [attr.aria-label]=\"action.ariaLabel\">\r\n      @if (actionIconUrl(action); as actionIconSrc) {\r\n      <img class=\"app-bar__icon\" [src]=\"actionIconSrc\" alt=\"\" aria-hidden=\"true\" />\r\n      }\r\n    </button>\r\n    }\r\n  </div>\r\n</header>", styles: [":host{display:block;width:100%;--bars-common-app-bar-brand-width: 47;--bars-common-app-bar-brand-height: 25}.app-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;flex-shrink:0;align-self:stretch;height:calc(var(--bars-size-small-app-bar-small-container-height, 64) * 1px);padding:.5rem calc(var(--bars-common-app-bar-right-padding, 4) * 1px) .5rem calc(var(--bars-common-app-bar-left-padding, 4) * 1px);background-color:var(--bars-common-app-bar-container-color, #ebeef0);border-radius:calc(var(--bars-common-app-bar-container-shape, 0) * 1px);box-sizing:border-box;column-gap:calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px)}.app-bar__leading,.app-bar__actions{display:flex;align-items:center}.app-bar__leading{justify-self:start;width:calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px)}.app-bar__actions{justify-self:end;justify-content:flex-end;gap:calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);min-width:calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px)}.app-bar__actions:empty{min-width:0}.app-bar__brand{justify-self:center;position:relative;width:calc(var(--bars-common-app-bar-brand-width, 47) * 1px);height:calc(var(--bars-common-app-bar-brand-height, 25) * 1px);aspect-ratio:47 / 25;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--bars-common-app-bar-central-icon, #e42313)}.app-bar__brand-icon{width:100%;height:100%;aspect-ratio:47 / 25;display:block;object-fit:contain}.app-bar__brand-icon use{width:100%!important;height:100%!important}.app-bar__brand-dot{position:absolute;width:6px;height:6px;border-radius:50%}.app-bar__brand-dot--primary{top:6px;left:6px}.app-bar__brand-dot--secondary{top:3px;left:16px}.app-bar__brand-dot--tertiary{top:8px;left:26px}.app-bar__brand-curve{position:absolute;bottom:0;right:0;width:32px;height:18px;border-bottom:4px solid var(--bars-common-app-bar-central-icon, #e42313);border-right:4px solid var(--bars-common-app-bar-central-icon, #e42313);border-left:0;border-top:0;border-radius:0 0 24px 24px}.app-bar__icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;border:0;border-radius:calc(var(--icon-buttons-size-small-icon-button-small-container-shape-round, 1000) * 1px);background:transparent;color:var(--bars-common-app-bar-leading-icon, #181c1e);cursor:pointer;transition:background-color .15s ease,color .15s ease}.app-bar__icon-button--trailing{color:var(--bars-common-app-bar-trailing-icon, #434749)}.app-bar__icon-button:hover,.app-bar__icon-button:focus-visible{background-color:#00000014}.app-bar__icon-button:focus-visible{outline:2px solid rgba(0,0,0,.24);outline-offset:2px}.app-bar__icon{font-size:calc(var(--bars-common-app-bar-icon-size, 24) * 1px);width:1em;height:1em;line-height:1;display:block;object-fit:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-header', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"app-bar\" role=\"banner\">\r\n  <div class=\"app-bar__leading\">\r\n    @if(showLeading()) {\r\n    <button type=\"button\" class=\"app-bar__icon-button app-bar__icon-button--leading\" (click)=\"onLeadingClick()\"\r\n      [attr.aria-label]=\"leadingActionLabel()\">\r\n      @if (leadingIconUrl(); as leadingIconSrc) {\r\n      <img class=\"app-bar__icon\" [src]=\"leadingIconSrc\" alt=\"\" aria-hidden=\"true\" />\r\n      }\r\n    </button>\r\n    }\r\n  </div>\r\n  <div class=\"app-bar__brand\" role=\"img\" [attr.aria-label]=\"brandLabel()\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"47\" height=\"25\" viewBox=\"0 0 47 25\" fill=\"none\">\r\n      <path\r\n        d=\"M34.0017 2.67521e-05C30.6579 -0.00672338 27.4427 1.26417 25.0377 3.54336C22.6327 5.82255 21.2268 8.93092 21.1179 12.2097C21.1179 12.3304 21.0564 12.5274 21.0564 12.6959C21.0564 14.8068 20.2017 16.8311 18.6803 18.3237C17.1589 19.8163 15.0955 20.6548 12.9439 20.6548C10.7923 20.6548 8.72889 19.8163 7.2075 18.3237C5.68612 16.8311 4.83141 14.8068 4.83141 12.6959C4.83073 12.0678 4.57609 11.4656 4.12335 11.0214C3.67061 10.5773 3.05676 10.3274 2.4165 10.3268C2.09598 10.3218 1.77774 10.3805 1.48091 10.4992C1.18407 10.6179 0.914746 10.7943 0.689116 11.0177C0.463486 11.2411 0.286201 11.5069 0.167908 11.7992C0.0496149 12.0915 -0.00724651 12.4042 0.000738184 12.7186C0.114789 15.972 1.49612 19.0588 3.86027 21.3431C6.22441 23.6274 9.39139 24.9353 12.709 24.9977C16.0266 25.06 19.2423 23.8719 21.6939 21.678C24.1454 19.4842 25.6462 16.4516 25.8871 13.2048C25.9417 13.0487 25.9626 12.8831 25.9486 12.7186C25.9486 10.6078 26.8033 8.58341 28.3247 7.09083C29.8461 5.59826 31.9095 4.75974 34.0611 4.75974C36.2127 4.75974 38.2761 5.59826 39.7975 7.09083C41.3189 8.58341 42.1736 10.6078 42.1736 12.7186C42.1562 13.0399 42.2056 13.3613 42.3189 13.6632C42.4322 13.9651 42.607 14.2412 42.8327 14.4747C43.0583 14.7082 43.3301 14.8941 43.6313 15.0212C43.9326 15.1482 44.2571 15.2138 44.5851 15.2138C44.913 15.2138 45.2375 15.1482 45.5388 15.0212C45.8401 14.8941 46.1119 14.7082 46.3375 14.4747C46.5632 14.2412 46.738 13.9651 46.8513 13.6632C46.9646 13.3613 47.014 13.0399 46.9966 12.7186C46.99 9.34216 45.6178 6.10632 43.1814 3.72165C40.7449 1.33699 37.4433 -0.00153433 34.0017 2.67521e-05Z\"\r\n        fill=\"#E42313\" />\r\n      <path\r\n        d=\"M10.5943 6.75042C10.5937 7.32697 10.4188 7.89037 10.0918 8.36943C9.76482 8.84848 9.30041 9.22168 8.75728 9.44185C8.21414 9.66203 7.61667 9.71929 7.04037 9.60641C6.46407 9.49352 5.93482 9.21556 5.51951 8.80765C5.1042 8.39974 4.82148 7.88019 4.70708 7.31468C4.59268 6.74917 4.65174 6.16307 4.87678 5.63048C5.10183 5.09789 5.48277 4.64271 5.97145 4.32247C6.46013 4.00222 7.03461 3.8313 7.62228 3.8313C8.40773 3.84195 9.15792 4.15302 9.71305 4.69826C10.2682 5.24351 10.5844 5.97984 10.5943 6.75042Z\"\r\n        fill=\"#E42313\" />\r\n      <path\r\n        d=\"M19.3841 6.75044C19.3841 7.52375 19.0709 8.26539 18.5136 8.8122C17.9562 9.35901 17.2003 9.66621 16.412 9.66621C15.6238 9.66621 14.8678 9.35901 14.3104 8.8122C13.7531 8.26539 13.44 7.52375 13.44 6.75044C13.4347 6.36594 13.5079 5.9843 13.6554 5.62802C13.8028 5.27174 14.0215 4.94802 14.2985 4.67596C14.5755 4.4039 14.9052 4.18901 15.2682 4.04394C15.6312 3.89888 16.0201 3.82658 16.412 3.83132C17.1975 3.84196 17.9476 4.15303 18.5028 4.69828C19.0579 5.24352 19.3741 5.97985 19.3841 6.75044Z\"\r\n        fill=\"#E42313\" />\r\n    </svg>\r\n  </div>\r\n\r\n  <div class=\"app-bar__actions\">\r\n    @for (action of trailingActions(); track trackByAction($index, action)) {\r\n    <button type=\"button\" class=\"app-bar__icon-button app-bar__icon-button--trailing\" (click)=\"onActionClick(action)\"\r\n      [attr.aria-label]=\"action.ariaLabel\">\r\n      @if (actionIconUrl(action); as actionIconSrc) {\r\n      <img class=\"app-bar__icon\" [src]=\"actionIconSrc\" alt=\"\" aria-hidden=\"true\" />\r\n      }\r\n    </button>\r\n    }\r\n  </div>\r\n</header>", styles: [":host{display:block;width:100%;--bars-common-app-bar-brand-width: 47;--bars-common-app-bar-brand-height: 25}.app-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;flex-shrink:0;align-self:stretch;height:calc(var(--bars-size-small-app-bar-small-container-height, 64) * 1px);padding:.5rem calc(var(--bars-common-app-bar-right-padding, 4) * 1px) .5rem calc(var(--bars-common-app-bar-left-padding, 4) * 1px);background-color:var(--bars-common-app-bar-container-color, #ebeef0);border-radius:calc(var(--bars-common-app-bar-container-shape, 0) * 1px);box-sizing:border-box;column-gap:calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px)}.app-bar__leading,.app-bar__actions{display:flex;align-items:center}.app-bar__leading{justify-self:start;width:calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px)}.app-bar__actions{justify-self:end;justify-content:flex-end;gap:calc(var(--bars-common-app-bar-icon-spacing, 0) * 1px);min-width:calc(var(--bars-common-app-bar-icon-touch-target-size, 48) * 1px)}.app-bar__actions:empty{min-width:0}.app-bar__brand{justify-self:center;position:relative;width:calc(var(--bars-common-app-bar-brand-width, 47) * 1px);height:calc(var(--bars-common-app-bar-brand-height, 25) * 1px);aspect-ratio:47 / 25;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--bars-common-app-bar-central-icon, #e42313)}.app-bar__brand-icon{width:100%;height:100%;aspect-ratio:47 / 25;display:block;object-fit:contain}.app-bar__brand-icon use{width:100%!important;height:100%!important}.app-bar__brand-dot{position:absolute;width:6px;height:6px;border-radius:50%}.app-bar__brand-dot--primary{top:6px;left:6px}.app-bar__brand-dot--secondary{top:3px;left:16px}.app-bar__brand-dot--tertiary{top:8px;left:26px}.app-bar__brand-curve{position:absolute;bottom:0;right:0;width:32px;height:18px;border-bottom:4px solid var(--bars-common-app-bar-central-icon, #e42313);border-right:4px solid var(--bars-common-app-bar-central-icon, #e42313);border-left:0;border-top:0;border-radius:0 0 24px 24px}.app-bar__icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;border:0;border-radius:calc(var(--icon-buttons-size-small-icon-button-small-container-shape-round, 1000) * 1px);background:transparent;color:var(--bars-common-app-bar-leading-icon, #181c1e);cursor:pointer;transition:background-color .15s ease,color .15s ease}.app-bar__icon-button--trailing{color:var(--bars-common-app-bar-trailing-icon, #434749)}.app-bar__icon-button:hover,.app-bar__icon-button:focus-visible{background-color:#00000014}.app-bar__icon-button:focus-visible{outline:2px solid rgba(0,0,0,.24);outline-offset:2px}.app-bar__icon{font-size:calc(var(--bars-common-app-bar-icon-size, 24) * 1px);width:1em;height:1em;line-height:1;display:block;object-fit:contain}\n"] }]
+        }], propDecorators: { showLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLeading", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], leadingIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconPath", required: false }] }], leadingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingActionLabel", required: false }] }], brandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabel", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], brandIconPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIconPath", required: false }] }], trailingActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActions", required: false }] }], iconBasePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconBasePath", required: false }] }], leadingClick: [{
+                type: Output
+            }], actionClick: [{
+                type: Output
+            }] } });
+const KNOWN_UI_ICON_NAMES = new Set(UI_ICON_NAMES);
+
+class LibTextFieldComponent {
+    // FormValueControl contract
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    disabledReasons = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    touch = output();
+    // Component-specific inputs
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    suffixIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
+    suffixTextIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffixTextIcon" }] : /* istanbul ignore next */ []));
+    prefixIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
+    prefixIconSrc = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefixIconSrc" }] : /* istanbul ignore next */ []));
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    suffixEvent = output();
+    showSuffix = input(false, { ...(ngDevMode ? { debugName: "showSuffix" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    suffixIconBand = input(false, { ...(ngDevMode ? { debugName: "suffixIconBand" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    autocomplete = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    width = input(null, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (value) => {
+            if (value == null || value === '')
+                return null;
+            return typeof value === 'number' ? `${value}px` : String(value);
+        } });
+    type = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    hideRequiredMarker = input(false, { ...(ngDevMode ? { debugName: "hideRequiredMarker" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    resolvedAppearance = computed(() => {
+        const raw = this.appearance();
+        if (raw === 'outlined')
+            return 'outline';
+        if (raw === 'filled')
+            return 'fill';
+        return raw;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    widthStyle = computed(() => (this.fullWidth() ? '100%' : this.width()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+    shouldShowSuffix = computed(() => this.showSuffix() || (this.suffixIconBand() && (!!this.suffixIcon() || !!this.suffixTextIcon())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldShowSuffix" }] : /* istanbul ignore next */ []));
+    shouldShowError = computed(() => this.invalid() || !!this.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
+    pressSuffixEvent() {
+        this.suffixEvent.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibTextFieldComponent, isStandalone: true, selector: "lib-text-field", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixTextIcon: { classPropertyName: "suffixTextIcon", publicName: "suffixTextIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconSrc: { classPropertyName: "prefixIconSrc", publicName: "prefixIconSrc", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showSuffix: { classPropertyName: "showSuffix", publicName: "showSuffix", isSignal: true, isRequired: false, transformFunction: null }, suffixIconBand: { classPropertyName: "suffixIconBand", publicName: "suffixIconBand", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideRequiredMarker: { classPropertyName: "hideRequiredMarker", publicName: "hideRequiredMarker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", suffixEvent: "suffixEvent" }, ngImport: i0, template: "<mat-form-field [appearance]=\"resolvedAppearance()\" [style.width]=\"widthStyle() ?? null\" [hideRequiredMarker]=\"hideRequiredMarker()\">\r\n  @if(prefixIconSrc()){\r\n    <mat-icon\r\n      matPrefix\r\n      class=\"lib-text-field__prefix-image\"\r\n      [svgIcon]=\"prefixIconSrc()\"\r\n      (click)=\"pressSuffixEvent()\"\r\n    >\r\n      {{ prefixIconSrc() }}\r\n    </mat-icon>\r\n  } @else if(prefixIcon()){\r\n    <mat-icon matPrefix>\r\n      {{ prefixIcon() }}\r\n    </mat-icon>\r\n  }\r\n\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <input matInput [type]=\"type()\" [value]=\"value()\" (input)=\"value.set($any($event.target).value)\" (blur)=\"touch.emit()\" [disabled]=\"disabled()\" [placeholder]=\"placeholder()\" [attr.autocomplete]=\"autocomplete()\" />\r\n\r\n  @if(shouldShowError() && error()) {\r\n    <mat-error>{{ error() }}</mat-error>\r\n  }\r\n\r\n  @if(hint()) {\r\n    <mat-hint>{{ hint() }}</mat-hint>\r\n  }\r\n\r\n  @if(shouldShowSuffix()) {\r\n    <mat-icon\r\n      matSuffix\r\n      class=\"lib-text-field__icon lib-text-field__icon--suffix\"\r\n      [svgIcon]=\"suffixIcon()\"\r\n      (click)=\"pressSuffixEvent()\"\r\n    >\r\n      {{ suffixTextIcon() }}\r\n    </mat-icon>\r\n  }\r\n</mat-form-field>\r\n", styles: [":host{display:block}.lib-text-field__field{width:100%}.lib-text-field__prefix-image{width:24px;height:24px;font-size:24px;overflow:visible}.lib-text-field__prefix-image svg{width:24px;height:24px}:host[data-state=error] ::ng-deep .mat-mdc-form-field,:host[data-state=error-hover] ::ng-deep .mat-mdc-form-field,:host[data-state=error-focus] ::ng-deep .mat-mdc-form-field{--mdc-outlined-text-field-outline-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-outlined-text-field-hover-outline-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-outline-color, #ba1a1a);--mdc-outlined-text-field-focus-outline-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);--mdc-outlined-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-filled-text-field-active-indicator-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-filled-text-field-focus-active-indicator-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);--mdc-filled-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a)}.lib-text-field__field textarea.mat-mdc-input-element{resize:none}:host ::ng-deep input[type=password]::-ms-reveal,:host ::ng-deep input[type=password]::-ms-clear{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [appearance]=\"resolvedAppearance()\" [style.width]=\"widthStyle() ?? null\" [hideRequiredMarker]=\"hideRequiredMarker()\">\r\n  @if(prefixIconSrc()){\r\n    <mat-icon\r\n      matPrefix\r\n      class=\"lib-text-field__prefix-image\"\r\n      [svgIcon]=\"prefixIconSrc()\"\r\n      (click)=\"pressSuffixEvent()\"\r\n    >\r\n      {{ prefixIconSrc() }}\r\n    </mat-icon>\r\n  } @else if(prefixIcon()){\r\n    <mat-icon matPrefix>\r\n      {{ prefixIcon() }}\r\n    </mat-icon>\r\n  }\r\n\r\n  <mat-label>{{ label() }}</mat-label>\r\n  <input matInput [type]=\"type()\" [value]=\"value()\" (input)=\"value.set($any($event.target).value)\" (blur)=\"touch.emit()\" [disabled]=\"disabled()\" [placeholder]=\"placeholder()\" [attr.autocomplete]=\"autocomplete()\" />\r\n\r\n  @if(shouldShowError() && error()) {\r\n    <mat-error>{{ error() }}</mat-error>\r\n  }\r\n\r\n  @if(hint()) {\r\n    <mat-hint>{{ hint() }}</mat-hint>\r\n  }\r\n\r\n  @if(shouldShowSuffix()) {\r\n    <mat-icon\r\n      matSuffix\r\n      class=\"lib-text-field__icon lib-text-field__icon--suffix\"\r\n      [svgIcon]=\"suffixIcon()\"\r\n      (click)=\"pressSuffixEvent()\"\r\n    >\r\n      {{ suffixTextIcon() }}\r\n    </mat-icon>\r\n  }\r\n</mat-form-field>\r\n", styles: [":host{display:block}.lib-text-field__field{width:100%}.lib-text-field__prefix-image{width:24px;height:24px;font-size:24px;overflow:visible}.lib-text-field__prefix-image svg{width:24px;height:24px}:host[data-state=error] ::ng-deep .mat-mdc-form-field,:host[data-state=error-hover] ::ng-deep .mat-mdc-form-field,:host[data-state=error-focus] ::ng-deep .mat-mdc-form-field{--mdc-outlined-text-field-outline-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-outlined-text-field-hover-outline-color: var(--text-fields-outlined-error-hover-outlined-text-field-error-hover-outline-color, #ba1a1a);--mdc-outlined-text-field-focus-outline-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);--mdc-outlined-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-filled-text-field-active-indicator-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a);--mdc-filled-text-field-focus-active-indicator-color: var(--text-fields-outlined-error-focus-outlined-text-field-error-focus-outline-color, #ba1a1a);--mdc-filled-text-field-label-text-color: var(--text-fields-outlined-error-outline-outlined-text-field-error-outline-color, #ba1a1a)}.lib-text-field__field textarea.mat-mdc-input-element{resize:none}:host ::ng-deep input[type=password]::-ms-reveal,:host ::ng-deep input[type=password]::-ms-clear{display:none}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixTextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixTextIcon", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixIconSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconSrc", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], suffixEvent: [{ type: i0.Output, args: ["suffixEvent"] }], showSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSuffix", required: false }] }], suffixIconBand: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIconBand", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], hideRequiredMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideRequiredMarker", required: false }] }] } });
+
+class LibCheckboxComponent {
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    error = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    labelId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    indeterminateChange = output();
+    matcher = {
+        isErrorState: () => this.error()
+    };
+    get ariaDisabled() {
+        return this.disabled() ? true : null;
+    }
+    ariaChecked = computed(() => {
+        if (this.indeterminate())
+            return 'mixed';
+        return this.checked() ? 'true' : 'false';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+    onAction(event) {
+        event.preventDefault();
+        if (this.disabled())
+            return;
+        if (this.indeterminate()) {
+            this.indeterminateChange.emit(false);
+            this.checkedChange.emit(true);
+        }
+        else {
+            this.checkedChange.emit(!this.checked());
+        }
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.onAction(event);
+        }
+    }
+    onMatCheckboxChange(event) {
+        console.log("Error value", this.error());
+        this.checkedChange.emit(event.checked);
+        if (event.checked && this.indeterminate()) {
+            this.indeterminateChange.emit(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibCheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0, template: "<div\r\n  class=\"lib-checkbox__wrapper\"\r\n  [class.lib-checkbox--disabled]=\"disabled()\"\r\n>\r\n\r\n  <mat-checkbox\r\n    [checked]=\"checked()\"\r\n    [indeterminate]=\"indeterminate()\"\r\n    [disabled]=\"disabled()\"\r\n    [class.es-error]=\"error()\"\r\n    (change)=\"onMatCheckboxChange($event)\"\r\n  >\r\n  <div>{{ error()}}</div>\r\n    <ng-content />\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [".lib-checkbox__wrapper{position:relative;display:inline-flex}.lib-checkbox__wrapper .mat-mdc-checkbox{position:relative;z-index:1}:host ::ng-deep .es-error{--mat-checkbox-selected-focus-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-selected-hover-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-selected-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-unselected-focus-icon-color: var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);--mat-checkbox-unselected-hover-icon-color: var(--checkboxes-hovered-container-checkbox-unselected-error-hover-outline-color, #FF4965);--mat-checkbox-unselected-icon-color: var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);color:var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);--mat-checkbox-unselected-focus-state-layer-color: var(--Checkboxes-focused-state-layer-checkbox-error-focus-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-selected-focus-state-layer-color: var(--Checkboxes-focused-state-layer-checkbox-error-focus-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-unselected-focus-state-layer-opacity: 1;--mat-checkbox-selected-focus-state-layer-opacity: 1;--mat-checkbox-unselected-hover-state-layer-color: var(--Checkboxes-hovered-state-layer-checkbox-error-hover-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-selected-hover-state-layer-color: var(--Checkboxes-hovered-state-layer-checkbox-error-hover-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-unselected-hover-state-layer-opacity: 1;--mat-checkbox-selected-hover-state-layer-opacity: 1}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-checkbox', standalone: true, imports: [MatCheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"lib-checkbox__wrapper\"\r\n  [class.lib-checkbox--disabled]=\"disabled()\"\r\n>\r\n\r\n  <mat-checkbox\r\n    [checked]=\"checked()\"\r\n    [indeterminate]=\"indeterminate()\"\r\n    [disabled]=\"disabled()\"\r\n    [class.es-error]=\"error()\"\r\n    (change)=\"onMatCheckboxChange($event)\"\r\n  >\r\n  <div>{{ error()}}</div>\r\n    <ng-content />\r\n  </mat-checkbox>\r\n</div>\r\n", styles: [".lib-checkbox__wrapper{position:relative;display:inline-flex}.lib-checkbox__wrapper .mat-mdc-checkbox{position:relative;z-index:1}:host ::ng-deep .es-error{--mat-checkbox-selected-focus-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-selected-hover-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-selected-icon-color: var(--app-checkboxes-enabled-container-checkbox-selected-error-container-color, #FF4965);--mat-checkbox-unselected-focus-icon-color: var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);--mat-checkbox-unselected-hover-icon-color: var(--checkboxes-hovered-container-checkbox-unselected-error-hover-outline-color, #FF4965);--mat-checkbox-unselected-icon-color: var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);color:var(--app-checkboxes-enabled-container-checkbox-unselected-error-outline-color, #FF4965);--mat-checkbox-unselected-focus-state-layer-color: var(--Checkboxes-focused-state-layer-checkbox-error-focus-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-selected-focus-state-layer-color: var(--Checkboxes-focused-state-layer-checkbox-error-focus-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-unselected-focus-state-layer-opacity: 1;--mat-checkbox-selected-focus-state-layer-opacity: 1;--mat-checkbox-unselected-hover-state-layer-color: var(--Checkboxes-hovered-state-layer-checkbox-error-hover-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-selected-hover-state-layer-color: var(--Checkboxes-hovered-state-layer-checkbox-error-hover-state-layer-opacity, rgba(255, 73, 101, .1));--mat-checkbox-unselected-hover-state-layer-opacity: 1;--mat-checkbox-selected-hover-state-layer-opacity: 1}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], labelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelId", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }] } });
+
+class LibSelectFieldComponent {
+    static PANEL_CONTENT_HEIGHT = 240;
+    static FILTER_ROW_HEIGHT = 48;
+    static OPTION_ROW_HEIGHT = 48;
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    ngControl = null;
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    placeholder = input('Elegir opción', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    filterable = input(true, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    filterPlaceholder = input('Buscar...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    selectAllLabel = input('Seleccionar todos', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : /* istanbul ignore next */ []));
+    widthStyle = computed(() => {
+        const v = this.width();
+        return v == null || v === '' ? null : typeof v === 'number' ? `${v}px` : String(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
+    matAppearance = computed(() => this.appearance() === 'filled' ? 'fill' : 'outline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matAppearance" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    panelOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    filterTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterTerm" }] : /* istanbul ignore next */ []));
+    disabledByControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByControl" }] : /* istanbul ignore next */ []));
+    isMultiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
+    virtualViewportMaxHeight = computed(() => this.filterable()
+        ? LibSelectFieldComponent.PANEL_CONTENT_HEIGHT - LibSelectFieldComponent.FILTER_ROW_HEIGHT
+        : LibSelectFieldComponent.PANEL_CONTENT_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualViewportMaxHeight" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const opts = this.options();
+        const term = this.filterTerm().trim().toLowerCase();
+        if (!term)
+            return opts;
+        return opts.filter((o) => o.label.toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    virtualRows = computed(() => {
+        const rows = this.filteredOptions().map((option) => ({
+            kind: 'option',
+            option,
+        }));
+        if (this.isMultiple()) {
+            rows.unshift({ kind: 'selectAll' });
+        }
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualRows" }] : /* istanbul ignore next */ []));
+    virtualViewportHeight = computed(() => {
+        const rowsCount = this.virtualRows().length;
+        const contentHeight = rowsCount * LibSelectFieldComponent.OPTION_ROW_HEIGHT;
+        const maxHeight = this.virtualViewportMaxHeight();
+        const minHeight = rowsCount > 0 ? LibSelectFieldComponent.OPTION_ROW_HEIGHT : 0;
+        return Math.max(minHeight, Math.min(contentHeight, maxHeight));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualViewportHeight" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        if (!this.isMultiple()) {
+            return false;
+        }
+        const opts = this.options();
+        const current = this.value();
+        if (!Array.isArray(current) || !opts.length) {
+            return false;
+        }
+        const values = opts.map((o) => o.value);
+        return values.every((v) => current.includes(v));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    selectedLabels = computed(() => {
+        const current = this.value();
+        if (!Array.isArray(current) || !current.length) {
+            return [];
+        }
+        const selectedSet = new Set(current);
+        return this.options()
+            .filter((o) => selectedSet.has(o.value))
+            .map((o) => o.label);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
+    multiTriggerLabel = computed(() => {
+        const labels = this.selectedLabels();
+        if (!labels.length) {
+            return '';
+        }
+        if (labels.length === 1) {
+            return labels[0];
+        }
+        return `${labels[0]} (+${labels.length - 1} items)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiTriggerLabel" }] : /* istanbul ignore next */ []));
+    selectAllIndeterminate = computed(() => {
+        if (!this.isMultiple()) {
+            return false;
+        }
+        const opts = this.options();
+        const current = this.value();
+        if (!Array.isArray(current) || !opts.length) {
+            return false;
+        }
+        const selectedCount = opts.filter((o) => current.includes(o.value)).length;
+        return selectedCount > 0 && selectedCount < opts.length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : /* istanbul ignore next */ []));
+    value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    onChange = () => {
+        /* assigned by registerOnChange */
+    };
+    onTouched = () => {
+        /* assigned by registerOnTouched */
+    };
+    ngOnInit() {
+        this.ngControl = this.injector.get(NgControl, null);
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        if (this.ngControl?.valueChanges) {
+            this.ngControl.valueChanges
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.cdr.markForCheck());
+        }
+    }
+    onPanelOpenChange(open) {
+        this.panelOpen.set(open);
+        if (!open)
+            this.filterTerm.set('');
+        this.cdr.markForCheck();
+    }
+    onFilterInput(event) {
+        const el = event.target;
+        this.filterTerm.set(el?.value ?? '');
+    }
+    onFilterKeydown(event) {
+        event.stopPropagation();
+    }
+    onSelectionChange(change) {
+        if (this.isMultiple()) {
+            const incoming = Array.isArray(change.value) ? change.value : [];
+            const options = this.options().map((o) => o.value);
+            const optionSet = new Set(options);
+            const hasUnknownValues = incoming.some((v) => !optionSet.has(v));
+            // Ignore synthetic values emitted by the auxiliary "select all" option.
+            if (hasUnknownValues) {
+                this.cdr.markForCheck();
+                return;
+            }
+            const incomingSet = new Set(incoming);
+            const normalized = options.filter((v) => incomingSet.has(v));
+            this.value.set(normalized);
+            this.onChange(normalized);
+            this.valueChange.emit(normalized);
+            this.cdr.markForCheck();
+            return;
+        }
+        this.value.set(change.value);
+        this.onChange(change.value);
+        this.valueChange.emit(change.value);
+        this.cdr.markForCheck();
+    }
+    onToggleSelectAll(checked) {
+        if (!this.isMultiple()) {
+            return;
+        }
+        const options = this.options();
+        const currentValue = this.value();
+        const current = Array.isArray(currentValue) ? [...currentValue] : [];
+        if (checked) {
+            const toAdd = options.map((o) => o.value);
+            const set = new Set(current);
+            for (const v of toAdd) {
+                set.add(v);
+            }
+            this.value.set(Array.from(set));
+        }
+        else {
+            const toRemove = new Set(options.map((o) => o.value));
+            this.value.set(current.filter((v) => !toRemove.has(v)));
+        }
+        const updated = this.value();
+        this.onChange(updated);
+        this.valueChange.emit(updated);
+        this.cdr.markForCheck();
+    }
+    onSelectAllCheckedChange(checked) {
+        this.onToggleSelectAll(checked);
+    }
+    onOptionCheckedChange(value, checked) {
+        if (!this.isMultiple()) {
+            return;
+        }
+        const currentValue = this.value();
+        const current = Array.isArray(currentValue) ? [...currentValue] : [];
+        const set = new Set(current);
+        if (checked) {
+            set.add(value);
+        }
+        else {
+            set.delete(value);
+        }
+        this.value.set(Array.from(set));
+        const updated = this.value();
+        this.onChange(updated);
+        this.valueChange.emit(updated);
+        this.cdr.markForCheck();
+    }
+    writeValue(value) {
+        this.value.set(value);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByControl.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    get displayValue() {
+        return this.value();
+    }
+    toggledAllSelection() {
+        if (this.allSelected()) {
+            this.onToggleSelectAll(false);
+            return;
+        }
+        this.onToggleSelectAll(true);
+    }
+    isSelected(value) {
+        const current = this.value();
+        if (!Array.isArray(current)) {
+            return false;
+        }
+        return current.includes(value);
+    }
+    trackByVirtualRow(_index, row) {
+        return row.kind === 'selectAll' ? '__select-all__' : String(row.option.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibSelectFieldComponent, isStandalone: true, selector: "lib-select-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LibSelectFieldComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mat-form-field\r\n  class=\"lib-select-field__field\"\r\n  [appearance]=\"matAppearance()\"\r\n  [style.width]=\"widthStyle() ?? null\"\r\n>\r\n  @if (label()) {\r\n  <mat-label>{{ label() }}</mat-label>\r\n  }\r\n  <mat-select\r\n    [value]=\"displayValue\"\r\n    [multiple]=\"isMultiple()\"\r\n    [disabled]=\"disabled() || disabledByControl()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    panelClass=\"lib-select-field-panel\"\r\n    (openedChange)=\"onPanelOpenChange($event)\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n  >\r\n    @if (isMultiple()) {\r\n    <mat-select-trigger\r\n      >{{ multiTriggerLabel() || placeholder() }}</mat-select-trigger\r\n    >\r\n    } @if (filterable()) {\r\n    <div\r\n      class=\"lib-select-field__filter-option\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    >\r\n      <input\r\n        #filterInput\r\n        class=\"lib-select-field__filter-input\"\r\n        type=\"text\"\r\n        [placeholder]=\"filterPlaceholder()\"\r\n        [value]=\"filterTerm()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (input)=\"onFilterInput($event)\"\r\n        (keydown)=\"onFilterKeydown($event)\"\r\n      />\r\n    </div>\r\n    }\r\n    <cdk-virtual-scroll-viewport\r\n          class=\"lib-select-field__viewport app-scrollbar-figma\"\r\n      [itemSize]=\"48\"\r\n      minBufferPx=\"240\"\r\n      maxBufferPx=\"240\"\r\n      [style.height.px]=\"virtualViewportHeight()\"\r\n    >\r\n      <div\r\n        *cdkVirtualFor=\"let row of virtualRows(); trackBy: trackByVirtualRow\"\r\n        class=\"lib-select-field__virtual-row\"\r\n      >\r\n        @if (row.kind === 'selectAll') {\r\n          <div\r\n            class=\"lib-select-field__select-all-option\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n            (click)=\"toggledAllSelection(); $event.stopPropagation()\"\r\n            (keydown.enter)=\"toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()\"\r\n            (keydown.space)=\"toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"lib-select-field__option-row\">\r\n              <lib-checkbox\r\n                [checked]=\"allSelected()\"\r\n                [indeterminate]=\"selectAllIndeterminate()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (checkedChange)=\"onSelectAllCheckedChange($event)\"\r\n              />\r\n              <span>{{ selectAllLabel() }}</span>\r\n            </span>\r\n          </div>\r\n        } @else {\r\n          <mat-option [value]=\"row.option.value\">\r\n            @if (isMultiple()) {\r\n              <span class=\"lib-select-field__option-row\">\r\n                <lib-checkbox\r\n                  [checked]=\"isSelected(row.option.value)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (checkedChange)=\"onOptionCheckedChange(row.option.value, $event)\"\r\n                />\r\n                <span>{{ row.option.label }}</span>\r\n              </span>\r\n            } @else {\r\n              {{ row.option.label }}\r\n            }\r\n          </mat-option>\r\n        }\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-select>\r\n  <mat-icon class=\"lib-select-field__arrow\" matSuffix>\r\n    {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n  </mat-icon>\r\n</mat-form-field>\r\n", styles: [".lib-select-field__field{display:block}:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow,:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow-wrapper{display:none!important}:host ::ng-deep .mat-mdc-select-trigger{padding-right:0!important}.lib-select-field__field .mat-mdc-select-arrow-wrapper{display:none!important}.lib-select-field__filter-option{pointer-events:auto;height:auto;padding:0;line-height:0}.lib-select-field__filter-option .mat-pseudo-checkbox{display:none}.lib-select-field__filter-option .lib-select-field__filter-input{width:100%;padding:8px 16px;border:none;outline:none;background:transparent;font-size:14px;box-sizing:border-box}.lib-select-field__multi-trigger-input{width:100%;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:inherit;box-sizing:border-box;cursor:pointer}.lib-select-field__multi-trigger-input::placeholder{color:#0000006b}.lib-select-field__option-row{display:inline-flex;align-items:center;gap:12px}.lib-select-field__virtual-row{height:48px}.lib-select-field__select-all-option{display:flex;align-items:center;height:100%;padding:0 16px;box-sizing:border-box;cursor:pointer}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel{overflow:hidden!important}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport{width:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--Gris-500, #6a7282) var(--Gris-100, #f3f4f6)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar{width:10px}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end{display:none!important;width:0!important;height:0!important;-webkit-appearance:none!important;appearance:none!important}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track{background:var(--Gris-100, #f3f4f6);border-radius:var(--Corner-Radius-Full, 6.25rem)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb{background:var(--Gris-500, #6a7282);border-radius:var(--Corner-Radius-Small, .5rem);min-height:3rem}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--Gris-500, #6a7282) 80%,black)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active{background:color-mix(in srgb,var(--Gris-500, #6a7282) 65%,black)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LibCheckboxComponent, selector: "lib-checkbox", inputs: ["checked", "indeterminate", "disabled", "error", "labelId"], outputs: ["checkedChange", "indeterminateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-field', standalone: true, imports: [MatFormFieldModule, MatSelectModule, ScrollingModule, MatInputModule, MatIconModule, LibCheckboxComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LibSelectFieldComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\r\n  class=\"lib-select-field__field\"\r\n  [appearance]=\"matAppearance()\"\r\n  [style.width]=\"widthStyle() ?? null\"\r\n>\r\n  @if (label()) {\r\n  <mat-label>{{ label() }}</mat-label>\r\n  }\r\n  <mat-select\r\n    [value]=\"displayValue\"\r\n    [multiple]=\"isMultiple()\"\r\n    [disabled]=\"disabled() || disabledByControl()\"\r\n    [required]=\"required()\"\r\n    [placeholder]=\"placeholder()\"\r\n    panelClass=\"lib-select-field-panel\"\r\n    (openedChange)=\"onPanelOpenChange($event)\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n  >\r\n    @if (isMultiple()) {\r\n    <mat-select-trigger\r\n      >{{ multiTriggerLabel() || placeholder() }}</mat-select-trigger\r\n    >\r\n    } @if (filterable()) {\r\n    <div\r\n      class=\"lib-select-field__filter-option\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n    >\r\n      <input\r\n        #filterInput\r\n        class=\"lib-select-field__filter-input\"\r\n        type=\"text\"\r\n        [placeholder]=\"filterPlaceholder()\"\r\n        [value]=\"filterTerm()\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (input)=\"onFilterInput($event)\"\r\n        (keydown)=\"onFilterKeydown($event)\"\r\n      />\r\n    </div>\r\n    }\r\n    <cdk-virtual-scroll-viewport\r\n          class=\"lib-select-field__viewport app-scrollbar-figma\"\r\n      [itemSize]=\"48\"\r\n      minBufferPx=\"240\"\r\n      maxBufferPx=\"240\"\r\n      [style.height.px]=\"virtualViewportHeight()\"\r\n    >\r\n      <div\r\n        *cdkVirtualFor=\"let row of virtualRows(); trackBy: trackByVirtualRow\"\r\n        class=\"lib-select-field__virtual-row\"\r\n      >\r\n        @if (row.kind === 'selectAll') {\r\n          <div\r\n            class=\"lib-select-field__select-all-option\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (mousedown)=\"$event.stopPropagation()\"\r\n            (click)=\"toggledAllSelection(); $event.stopPropagation()\"\r\n            (keydown.enter)=\"toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()\"\r\n            (keydown.space)=\"toggledAllSelection(); $event.preventDefault(); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"lib-select-field__option-row\">\r\n              <lib-checkbox\r\n                [checked]=\"allSelected()\"\r\n                [indeterminate]=\"selectAllIndeterminate()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (checkedChange)=\"onSelectAllCheckedChange($event)\"\r\n              />\r\n              <span>{{ selectAllLabel() }}</span>\r\n            </span>\r\n          </div>\r\n        } @else {\r\n          <mat-option [value]=\"row.option.value\">\r\n            @if (isMultiple()) {\r\n              <span class=\"lib-select-field__option-row\">\r\n                <lib-checkbox\r\n                  [checked]=\"isSelected(row.option.value)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (checkedChange)=\"onOptionCheckedChange(row.option.value, $event)\"\r\n                />\r\n                <span>{{ row.option.label }}</span>\r\n              </span>\r\n            } @else {\r\n              {{ row.option.label }}\r\n            }\r\n          </mat-option>\r\n        }\r\n      </div>\r\n    </cdk-virtual-scroll-viewport>\r\n  </mat-select>\r\n  <mat-icon class=\"lib-select-field__arrow\" matSuffix>\r\n    {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n  </mat-icon>\r\n</mat-form-field>\r\n", styles: [".lib-select-field__field{display:block}:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow,:host ::ng-deep .lib-select-field__field .mat-mdc-select-arrow-wrapper{display:none!important}:host ::ng-deep .mat-mdc-select-trigger{padding-right:0!important}.lib-select-field__field .mat-mdc-select-arrow-wrapper{display:none!important}.lib-select-field__filter-option{pointer-events:auto;height:auto;padding:0;line-height:0}.lib-select-field__filter-option .mat-pseudo-checkbox{display:none}.lib-select-field__filter-option .lib-select-field__filter-input{width:100%;padding:8px 16px;border:none;outline:none;background:transparent;font-size:14px;box-sizing:border-box}.lib-select-field__multi-trigger-input{width:100%;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:inherit;box-sizing:border-box;cursor:pointer}.lib-select-field__multi-trigger-input::placeholder{color:#0000006b}.lib-select-field__option-row{display:inline-flex;align-items:center;gap:12px}.lib-select-field__virtual-row{height:48px}.lib-select-field__select-all-option{display:flex;align-items:center;height:100%;padding:0 16px;box-sizing:border-box;cursor:pointer}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel{overflow:hidden!important}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport{width:100%;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--Gris-500, #6a7282) var(--Gris-100, #f3f4f6)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar{width:10px}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:start:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:end:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:vertical:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:single-button:horizontal:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:decrement,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:increment,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:start,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:vertical:end,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:start,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-button:horizontal:end{display:none!important;width:0!important;height:0!important;-webkit-appearance:none!important;appearance:none!important}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-track{background:var(--Gris-100, #f3f4f6);border-radius:var(--Corner-Radius-Full, 6.25rem)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb{background:var(--Gris-500, #6a7282);border-radius:var(--Corner-Radius-Small, .5rem);min-height:3rem}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--Gris-500, #6a7282) 80%,black)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport::-webkit-scrollbar-thumb:active{background:color-mix(in srgb,var(--Gris-500, #6a7282) 65%,black)}:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-pseudo-checkbox,:host ::ng-deep .cdk-overlay-container .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start,:host ::ng-deep .mat-mdc-select-panel.lib-select-field-panel .lib-select-field__viewport .mat-mdc-option .mdc-list-item__start{display:none!important}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+class LibListItemComponent {
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    selectedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    multiple = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    showCheckbox = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCheckbox" }] : /* istanbul ignore next */ []));
+    showAvatar = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAvatar" }] : /* istanbul ignore next */ []));
+    showDividers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDividers" }] : /* istanbul ignore next */ []));
+    /** Posición del checkbox: 'leading' (izquierda) o 'trailing' (derecha). Por defecto 'trailing' según diseño Figma. */
+    checkboxPosition = input('trailing', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : /* istanbul ignore next */ []));
+    /** Ancho de la lista. Acepta valores CSS (ej: '18.8rem', '300px', '100%'). Si no se pasa, la lista ocupa el ancho disponible. */
+    width = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Fondo personalizado de la lista/items. Si no se define, usa el fondo por defecto de tokens. */
+    backgroundColor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    selectionChange = output();
+    itemClick = output();
+    /** Template para proyectar contenido arriba de la lista (ej: checkbox, filtros) */
+    headerTemplate = contentChild('headerTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    /** Template para proyectar el contenido personalizado de cada item. Usar: let-item para acceder al item */
+    itemTemplate = contentChild('itemTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    selectedSet = computed(() => new Set(this.selectedIds()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
+    trackById(_index, item) {
+        return item.id;
+    }
+    avatarInitial(item) {
+        const explicit = item.avatarText?.trim();
+        if (explicit) {
+            return explicit.slice(0, 2).toUpperCase();
+        }
+        const label = item.label?.trim();
+        return label ? label.charAt(0).toUpperCase() : '';
+    }
+    isItemSelected(item) {
+        return this.selectedSet().has(item.id);
+    }
+    onCheckboxChange(item, selected) {
+        const current = new Set(this.selectedIds());
+        if (this.multiple()) {
+            if (selected) {
+                current.add(item.id);
+            }
+            else {
+                current.delete(item.id);
+            }
+        }
+        else {
+            this.selectionChange.emit(selected ? [item.id] : []);
+            return;
+        }
+        this.selectionChange.emit([...current]);
+    }
+    onRowClick(item, _event) {
+        if (this.showCheckbox() && !(item.disabled ?? this.disabled())) {
+            const isSelected = this.isItemSelected(item);
+            this.onCheckboxChange(item, !isSelected);
+        }
+        this.itemClick.emit(item);
+    }
+    onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibListItemComponent, isStandalone: true, selector: "lib-list-item", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, showDividers: { classPropertyName: "showDividers", publicName: "showDividers", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", itemClick: "itemClick" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"ui-list-item__container\"\r\n  [style.width]=\"width() ?? '100%'\"\r\n  [style.min-width]=\"width() ?? null\"\r\n  [style.--lib-list-item-background]=\"backgroundColor() ?? null\"\r\n>\r\n  @if (headerTemplate()) {\r\n  <div class=\"ui-list-item__header\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()!\" />\r\n  </div>\r\n}\r\n<mat-list role=\"list\">\r\n  @for (item of items(); track trackById($index, item)) {\r\n    <mat-list-item\r\n      role=\"listitem\"\r\n      class=\"ui-list-option\"\r\n      [class.ui-list-item--disabled]=\"item.disabled ?? false\"\r\n      [class.ui-list-item--selected]=\"showCheckbox() && isItemSelected(item)\"\r\n      [class.ui-list-item--with-divider]=\"showDividers()\"\r\n      [disableRipple]=\"true\"\r\n      (click)=\"onRowClick(item, $event)\"\r\n    >\r\n      @if (itemTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\r\n      } @else {\r\n        <div class=\"ui-list-item\" [class.ui-list-item--with-divider]=\"showDividers()\">\r\n          <span class=\"ui-list-item__state-layer\"></span>\r\n\r\n          @if (showCheckbox() && checkboxPosition() === 'leading') {\r\n            <span class=\"ui-list-item__leading ui-list-item__leading--checkbox\">\r\n              <mat-checkbox\r\n                [checked]=\"isItemSelected(item)\"\r\n                [disabled]=\"item.disabled ?? disabled()\"\r\n                (change)=\"onCheckboxChange(item, $event.checked)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </span>\r\n          }\r\n\r\n          @if (showAvatar()) {\r\n            <span class=\"ui-list-item__leading\">\r\n              @if (item.avatarImage) {\r\n                <img\r\n                  class=\"ui-list-item__avatar-image\"\r\n                  [src]=\"item.avatarImage\"\r\n                  [attr.alt]=\"item.avatarAlt || item.label\"\r\n                  loading=\"lazy\"\r\n                />\r\n              } @else {\r\n                <span class=\"ui-list-item__avatar-text\" aria-hidden=\"true\">\r\n                  {{ avatarInitial(item) }}\r\n                </span>\r\n              }\r\n            </span>\r\n          }\r\n\r\n          <span class=\"ui-list-item__content\">\r\n            <span class=\"ui-list-item__label\">{{ item.label }}</span>\r\n            @if (item.description) {\r\n              <span class=\"ui-list-item__description\">{{ item.description }}</span>\r\n            }\r\n          </span>\r\n\r\n          @if (showCheckbox() && checkboxPosition() === 'trailing') {\r\n            <span class=\"ui-list-item__trailing ui-list-item__trailing--checkbox\">\r\n              <lib-checkbox\r\n                [checked]=\"isItemSelected(item)\"\r\n                [disabled]=\"item.disabled ?? disabled()\"\r\n                (checkedChange)=\"onCheckboxChange(item, $event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n    </mat-list-item>\r\n  }\r\n</mat-list>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0}.ui-list-item__container{display:flex;flex-direction:column;flex:1 1 0;min-height:0}.ui-list-item__header{padding-bottom:.5rem}:host ::ng-deep .ui-list-option.mdc-list-item{padding:0;min-height:calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);background-color:var(--lists-wip-common-color-enabled-list-list-item-container-color, var(--app-pallete-scheme-surface-surface-container-lowest, #FFFFFF))}.ui-list-item{display:flex;align-items:center;padding:8px 16px;min-height:calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);position:relative;width:100%;box-sizing:border-box}:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider{border-bottom:calc(var(--divider-enabled-container-divider-thickness, 1) * 1px) solid var(--divider-enabled-container-divider-color, #c3c7c9)}:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider:last-child{border-bottom:none}.ui-list-item__content{display:flex;flex-direction:column;justify-content:center;min-height:0;flex:1;min-width:0}.ui-list-item__label{color:var(--lists-wip-common-color-enabled-list-list-item-label-text-color, #181c1e);font-family:var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-font, Heebo),sans-serif;font-size:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-size, 16) * 1px);font-style:normal;font-weight:var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-weight, 400);line-height:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-line-height, 24) * 1px);letter-spacing:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-tracking, .5) * 1px)}.ui-list-item__description{line-height:1.25}.ui-list-item__leading--checkbox{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}.ui-list-item__leading--checkbox .mat-mdc-checkbox{display:flex;align-items:center;justify-content:center}.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer{inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important}.ui-list-item__trailing--checkbox{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-left:auto}.ui-list-item__trailing--checkbox .mat-mdc-checkbox{display:flex;align-items:center;justify-content:center}.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer{inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1$3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i1$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: LibCheckboxComponent, selector: "lib-checkbox", inputs: ["checked", "indeterminate", "disabled", "error", "labelId"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-item', standalone: true, imports: [MatListModule, MatCheckboxModule, LibCheckboxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ui-list-item__container\"\r\n  [style.width]=\"width() ?? '100%'\"\r\n  [style.min-width]=\"width() ?? null\"\r\n  [style.--lib-list-item-background]=\"backgroundColor() ?? null\"\r\n>\r\n  @if (headerTemplate()) {\r\n  <div class=\"ui-list-item__header\">\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate()!\" />\r\n  </div>\r\n}\r\n<mat-list role=\"list\">\r\n  @for (item of items(); track trackById($index, item)) {\r\n    <mat-list-item\r\n      role=\"listitem\"\r\n      class=\"ui-list-option\"\r\n      [class.ui-list-item--disabled]=\"item.disabled ?? false\"\r\n      [class.ui-list-item--selected]=\"showCheckbox() && isItemSelected(item)\"\r\n      [class.ui-list-item--with-divider]=\"showDividers()\"\r\n      [disableRipple]=\"true\"\r\n      (click)=\"onRowClick(item, $event)\"\r\n    >\r\n      @if (itemTemplate()) {\r\n        <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\r\n      } @else {\r\n        <div class=\"ui-list-item\" [class.ui-list-item--with-divider]=\"showDividers()\">\r\n          <span class=\"ui-list-item__state-layer\"></span>\r\n\r\n          @if (showCheckbox() && checkboxPosition() === 'leading') {\r\n            <span class=\"ui-list-item__leading ui-list-item__leading--checkbox\">\r\n              <mat-checkbox\r\n                [checked]=\"isItemSelected(item)\"\r\n                [disabled]=\"item.disabled ?? disabled()\"\r\n                (change)=\"onCheckboxChange(item, $event.checked)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </span>\r\n          }\r\n\r\n          @if (showAvatar()) {\r\n            <span class=\"ui-list-item__leading\">\r\n              @if (item.avatarImage) {\r\n                <img\r\n                  class=\"ui-list-item__avatar-image\"\r\n                  [src]=\"item.avatarImage\"\r\n                  [attr.alt]=\"item.avatarAlt || item.label\"\r\n                  loading=\"lazy\"\r\n                />\r\n              } @else {\r\n                <span class=\"ui-list-item__avatar-text\" aria-hidden=\"true\">\r\n                  {{ avatarInitial(item) }}\r\n                </span>\r\n              }\r\n            </span>\r\n          }\r\n\r\n          <span class=\"ui-list-item__content\">\r\n            <span class=\"ui-list-item__label\">{{ item.label }}</span>\r\n            @if (item.description) {\r\n              <span class=\"ui-list-item__description\">{{ item.description }}</span>\r\n            }\r\n          </span>\r\n\r\n          @if (showCheckbox() && checkboxPosition() === 'trailing') {\r\n            <span class=\"ui-list-item__trailing ui-list-item__trailing--checkbox\">\r\n              <lib-checkbox\r\n                [checked]=\"isItemSelected(item)\"\r\n                [disabled]=\"item.disabled ?? disabled()\"\r\n                (checkedChange)=\"onCheckboxChange(item, $event)\"\r\n                (click)=\"$event.stopPropagation()\"\r\n              />\r\n            </span>\r\n          }\r\n        </div>\r\n      }\r\n    </mat-list-item>\r\n  }\r\n</mat-list>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0}.ui-list-item__container{display:flex;flex-direction:column;flex:1 1 0;min-height:0}.ui-list-item__header{padding-bottom:.5rem}:host ::ng-deep .ui-list-option.mdc-list-item{padding:0;min-height:calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);background-color:var(--lists-wip-common-color-enabled-list-list-item-container-color, var(--app-pallete-scheme-surface-surface-container-lowest, #FFFFFF))}.ui-list-item{display:flex;align-items:center;padding:8px 16px;min-height:calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);position:relative;width:100%;box-sizing:border-box}:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider{border-bottom:calc(var(--divider-enabled-container-divider-thickness, 1) * 1px) solid var(--divider-enabled-container-divider-color, #c3c7c9)}:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider:last-child{border-bottom:none}.ui-list-item__content{display:flex;flex-direction:column;justify-content:center;min-height:0;flex:1;min-width:0}.ui-list-item__label{color:var(--lists-wip-common-color-enabled-list-list-item-label-text-color, #181c1e);font-family:var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-font, Heebo),sans-serif;font-size:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-size, 16) * 1px);font-style:normal;font-weight:var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-weight, 400);line-height:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-line-height, 24) * 1px);letter-spacing:calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-tracking, .5) * 1px)}.ui-list-item__description{line-height:1.25}.ui-list-item__leading--checkbox{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}.ui-list-item__leading--checkbox .mat-mdc-checkbox{display:flex;align-items:center;justify-content:center}.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer{inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important}.ui-list-item__trailing--checkbox{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;margin-left:auto}.ui-list-item__trailing--checkbox .mat-mdc-checkbox{display:flex;align-items:center;justify-content:center}.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer{inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], showDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDividers", required: false }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], headerTemplate: [{ type: i0.ContentChild, args: ['headerTemplate', { isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['itemTemplate', { isSignal: true }] }] } });
+
+class LibRadioButtonComponent {
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    get ariaDisabled() {
+        return this.disabled() ? true : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibRadioButtonComponent, isStandalone: true, selector: "lib-radio-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0, template: "<mat-radio-button\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [checked]=\"checked()\"\n  (change)=\"checkedChange.emit($event.value)\"\n>\n  <ng-content />\n</mat-radio-button>\n", styles: [":host{display:inline-flex;--mdc-radio-state-layer-size: calc(var(--radio-button-enabled-state-layer-radio-button-state-layer-size, 40) * 1px)}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i1$4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-radio-button', standalone: true, imports: [MatRadioModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-radio-button\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [checked]=\"checked()\"\n  (change)=\"checkedChange.emit($event.value)\"\n>\n  <ng-content />\n</mat-radio-button>\n", styles: [":host{display:inline-flex;--mdc-radio-state-layer-size: calc(var(--radio-button-enabled-state-layer-radio-button-state-layer-size, 40) * 1px)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }] } });
+
+/**
+ * @deprecated Prefer `lib-select-field` for new implementations.
+ * Kept for compatibility while migrating existing screens.
+ */
+class LibMenuComponent {
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Seleccionar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    filterable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    panelOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    filterTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterTerm" }] : /* istanbul ignore next */ []));
+    disabledByControl = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByControl" }] : /* istanbul ignore next */ []));
+    valueSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
+    isMultiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const opts = this.options();
+        const term = this.filterTerm().trim().toLowerCase();
+        if (!term)
+            return opts;
+        return opts.filter((o) => o.label.toLowerCase().includes(term));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    triggerLabel = computed(() => {
+        const current = this.valueSignal();
+        const opts = this.options();
+        if (current == null) {
+            return this.placeholder();
+        }
+        if (Array.isArray(current)) {
+            if (!current.length)
+                return this.placeholder();
+            const labels = current
+                .map((v) => opts.find((o) => o.value === v)?.label)
+                .filter((l) => !!l);
+            if (!labels.length)
+                return this.placeholder();
+            if (labels.length === 1)
+                return labels[0];
+            const [first, ...rest] = labels;
+            return `${first} (+${rest.length})`;
+        }
+        const match = opts.find((o) => o.value === current);
+        return match?.label ?? this.placeholder();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    onMenuOpened() {
+        this.panelOpen.set(true);
+    }
+    onMenuClosed() {
+        this.panelOpen.set(false);
+        this.filterTerm.set('');
+    }
+    onFilterInput(event) {
+        const el = event.target;
+        this.filterTerm.set(el?.value ?? '');
+    }
+    onOptionClick(option, event) {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        if (this.isMultiple()) {
+            const current = this.valueSignal();
+            const asArray = Array.isArray(current) ? [...current] : [];
+            const index = asArray.findIndex((v) => v === option.value);
+            if (index >= 0) {
+                asArray.splice(index, 1);
+            }
+            else {
+                asArray.push(option.value);
+            }
+            const next = asArray;
+            this.valueSignal.set(next);
+            this.onChange(next);
+        }
+        else {
+            const next = option.value;
+            this.valueSignal.set(next);
+            this.onChange(next);
+        }
+    }
+    isSelected(value) {
+        const current = this.valueSignal();
+        if (Array.isArray(current)) {
+            return current.includes(value);
+        }
+        return current === value;
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.valueSignal.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByControl.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibMenuComponent, isStandalone: true, selector: "lib-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => LibMenuComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"lib-menu\">\r\n  <button\r\n    mat-button\r\n    class=\"lib-menu__trigger\"\r\n    [matMenuTriggerFor]=\"menu\"\r\n    [disabled]=\"disabled() || disabledByControl()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"lib-menu__trigger-label\">\r\n      {{ label() || '' }}\r\n    </span>\r\n    <span class=\"lib-menu__trigger-value\">\r\n      {{ triggerLabel() }}\r\n    </span>\r\n    <mat-icon class=\"lib-menu__trigger-icon\">\r\n      {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #menu=\"matMenu\"\r\n    class=\"lib-menu__panel\"\r\n    (menuOpened)=\"onMenuOpened()\"\r\n    (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    @if (filterable()) {\r\n    <div class=\"lib-menu__filter\">\r\n      <mat-form-field appearance=\"outline\" class=\"lib-menu__filter-field\">\r\n        <mat-label>Buscar</mat-label>\r\n        <input\r\n          matInput\r\n          type=\"text\"\r\n          (input)=\"onFilterInput($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n    }\r\n\r\n    @for (opt of filteredOptions(); track opt.value) {\r\n    @if (isMultiple()) {\r\n    <button mat-menu-item (click)=\"onOptionClick(opt, $event)\">\r\n      <mat-checkbox\r\n        [checked]=\"isSelected(opt.value)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        {{ opt.label }}\r\n      </mat-checkbox>\r\n    </button>\r\n    } @else {\r\n    <button mat-menu-item (click)=\"onOptionClick(opt, $event)\">\r\n      <span>{{ opt.label }}</span>\r\n    </button>\r\n    }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n", styles: [".lib-menu{display:inline-flex}.lib-menu__trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:12rem;padding-inline:.75rem;text-transform:none}.lib-menu__trigger-label{font-size:.875rem;color:#0009}.lib-menu__trigger-value{flex:1;text-align:left}.lib-menu__trigger-icon{font-size:20px}.lib-menu__filter{padding:.5rem 1rem .25rem}.lib-menu__filter-field{width:100%}.lib-menu__panel{max-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-menu', standalone: true, imports: [
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => LibMenuComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"lib-menu\">\r\n  <button\r\n    mat-button\r\n    class=\"lib-menu__trigger\"\r\n    [matMenuTriggerFor]=\"menu\"\r\n    [disabled]=\"disabled() || disabledByControl()\"\r\n    type=\"button\"\r\n  >\r\n    <span class=\"lib-menu__trigger-label\">\r\n      {{ label() || '' }}\r\n    </span>\r\n    <span class=\"lib-menu__trigger-value\">\r\n      {{ triggerLabel() }}\r\n    </span>\r\n    <mat-icon class=\"lib-menu__trigger-icon\">\r\n      {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}\r\n    </mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #menu=\"matMenu\"\r\n    class=\"lib-menu__panel\"\r\n    (menuOpened)=\"onMenuOpened()\"\r\n    (menuClosed)=\"onMenuClosed()\"\r\n  >\r\n    @if (filterable()) {\r\n    <div class=\"lib-menu__filter\">\r\n      <mat-form-field appearance=\"outline\" class=\"lib-menu__filter-field\">\r\n        <mat-label>Buscar</mat-label>\r\n        <input\r\n          matInput\r\n          type=\"text\"\r\n          (input)=\"onFilterInput($event)\"\r\n        />\r\n      </mat-form-field>\r\n    </div>\r\n    }\r\n\r\n    @for (opt of filteredOptions(); track opt.value) {\r\n    @if (isMultiple()) {\r\n    <button mat-menu-item (click)=\"onOptionClick(opt, $event)\">\r\n      <mat-checkbox\r\n        [checked]=\"isSelected(opt.value)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n      >\r\n        {{ opt.label }}\r\n      </mat-checkbox>\r\n    </button>\r\n    } @else {\r\n    <button mat-menu-item (click)=\"onOptionClick(opt, $event)\">\r\n      <span>{{ opt.label }}</span>\r\n    </button>\r\n    }\r\n    }\r\n  </mat-menu>\r\n</div>\r\n\r\n", styles: [".lib-menu{display:inline-flex}.lib-menu__trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:12rem;padding-inline:.75rem;text-transform:none}.lib-menu__trigger-label{font-size:.875rem;color:#0009}.lib-menu__trigger-value{flex:1;text-align:left}.lib-menu__trigger-icon{font-size:20px}.lib-menu__filter{padding:.5rem 1rem .25rem}.lib-menu__filter-field{width:100%}.lib-menu__panel{max-width:20rem}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class LibButtonComponent {
+    size = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    variant = input('filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    shape = input('round', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    toggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconPosition = input('leading', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    contentAlign = input('center', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentAlign" }] : /* istanbul ignore next */ []));
+    labelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    pressed = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    debugPadding = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "debugPadding" }] : /* istanbul ignore next */ []));
+    isPressed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+    /** Si hay label o icon por input, se usa contenido interno; si no, ng-content. */
+    hasInputContent = computed(() => this.label().length > 0 || this.icon().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasInputContent" }] : /* istanbul ignore next */ []));
+    /** contentAlign ya es 'start' | 'center' | 'end'; se usa directo para las clases CSS. */
+    contentAlignNormalized = computed(() => this.contentAlign(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentAlignNormalized" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ({
+        'lib-mat-btn': true,
+        'lib-mat-btn--xsmall': this.size() === 'xsmall',
+        'lib-mat-btn--small': this.size() === 'small',
+        'lib-mat-btn--medium': this.size() === 'medium',
+        'lib-mat-btn--large': this.size() === 'large',
+        'lib-mat-btn--xlarge': this.size() === 'xlarge',
+        'lib-mat-btn--full': this.fullWidth(),
+        'lib-mat-btn--variant-filled': this.variant() === 'filled',
+        'lib-mat-btn--variant-outlined': this.variant() === 'outlined',
+        'lib-mat-btn--variant-tonal': this.variant() === 'tonal',
+        'lib-mat-btn--variant-text': this.variant() === 'text',
+        'lib-mat-btn--variant-elevated': this.variant() === 'elevated',
+        'lib-mat-btn--shape-round': this.shape() === 'round',
+        'lib-mat-btn--shape-square': this.shape() === 'square',
+        'lib-mat-btn--toggle': this.toggle(),
+        'lib-mat-btn--selected': this.toggle() && this.selected(),
+        'lib-mat-btn--pressed': this.isPressed() || this.pressed(),
+        'lib-mat-btn--debug-padding': this.debugPadding(),
+        'lib-mat-btn--align-start': this.contentAlignNormalized() === 'start',
+        'lib-mat-btn--align-center': this.contentAlignNormalized() === 'center',
+        'lib-mat-btn--align-end': this.contentAlignNormalized() === 'end',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onPressStart() {
+        if (!this.disabled())
+            this.isPressed.set(true);
+    }
+    onPressEnd() {
+        this.isPressed.set(false);
+    }
+    onPressCancel() {
+        this.isPressed.set(false);
+    }
+    onKeyDown(event) {
+        if (this.disabled())
+            return;
+        if (event.code === 'Space' || event.code === 'Enter')
+            this.isPressed.set(true);
+    }
+    onKeyUp() {
+        this.isPressed.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibButtonComponent, isStandalone: true, selector: "lib-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, contentAlign: { classPropertyName: "contentAlign", publicName: "contentAlign", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, debugPadding: { classPropertyName: "debugPadding", publicName: "debugPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.lib-mat-btn-host--full": "fullWidth()" } }, ngImport: i0, template: "@switch (variant()) {\r\n  @case ('filled') {\r\n    <button\r\n      mat-flat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('outlined') {\r\n    <button\r\n      mat-stroked-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('tonal') {\r\n    <button\r\n      matButton\r\n      appearance=\"tonal\"\r\n      class=\"lib-mat-btn lib-mat-btn--variant-tonal\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('text') {\r\n    <button\r\n      mat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('elevated') {\r\n    <button\r\n      mat-raised-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @default {\r\n    <button\r\n      mat-flat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [":host{display:inline-block}:host(.lib-mat-btn-host--full){display:block;width:100%}.lib-mat-btn{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;overflow:hidden!important}.lib-mat-btn ::ng-deep .mdc-button__label{overflow:visible!important;position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:var(--lib-mat-btn-gap)!important}.lib-mat-btn ::ng-deep .mdc-button__label>.mat-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;margin:0!important;line-height:1!important;vertical-align:middle!important}.lib-mat-btn ::ng-deep .mdc-button__label>span{display:inline-flex!important;align-items:center!important;line-height:var(--lib-mat-btn-line-height)!important;vertical-align:middle!important}.lib-mat-btn:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61),0 0 0 calc((var(--buttons-wip-button-enabled-button-focus-ring-indicator-thickness, 3) + var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2)) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61)}.lib-mat-btn.lib-mat-btn--pressed:not([disabled]){border-radius:calc(var(--lib-mat-btn-pressed-radius, var(--buttons-wip-size-medium-button-medium-shape-pressed-morph, 8)) * 1px)}.lib-mat-btn.lib-mat-btn--debug-padding{box-shadow:inset var(--lib-mat-btn-padding-x) 0 0 0 #f009,inset calc(100% - var(--lib-mat-btn-padding-x-right) - 2px) 0 0 0 #0064ff99}.lib-mat-btn__content{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;gap:var(--lib-mat-btn-gap)}.lib-mat-btn--align-start .lib-mat-btn__content,.lib-mat-btn--align-center .lib-mat-btn__content,.lib-mat-btn--align-end .lib-mat-btn__content{width:100%}.lib-mat-btn--align-start .lib-mat-btn__content{justify-content:flex-start}.lib-mat-btn--align-center .lib-mat-btn__content{justify-content:center}.lib-mat-btn--align-end .lib-mat-btn__content{justify-content:flex-end}:host .lib-mat-btn--align-start .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-start .mdc-button__label{width:100%!important;justify-content:flex-start!important}:host .lib-mat-btn--align-center .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-center .mdc-button__label{width:100%!important;justify-content:center!important}:host .lib-mat-btn--align-end .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-end .mdc-button__label{width:100%!important;justify-content:flex-end!important}.lib-mat-btn{--lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-medium-button-medium-label-text-weight, 500);line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--variant-outlined{color:var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749)!important}.lib-mat-btn--variant-outlined:focus-visible{color:var(--buttons-wip-color-outlined-focused-button-outlined-focused-label-color, #434749)!important}.lib-mat-btn--variant-outlined .lib-mat-btn__content,.lib-mat-btn--variant-outlined .mdc-button__label{color:inherit!important}.lib-mat-btn--variant-tonal{background-color:var(--buttons-wip-color-tonal-enabled-button-tonal-container-color, #e0e3e5)!important;color:var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749)!important;--mat-button-tonal-ripple-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, .1))}:host ::ng-deep .lib-mat-btn--variant-tonal:hover:not([disabled]) .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-hovered-button-tonal-hovered-container-state-layer-color, rgba(67, 71, 73, .08))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-program-focused .mat-mdc-button-persistent-ripple:before,:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-focused-button-tonal-focused-container-state-layer-color, rgba(67, 71, 73, .1))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal:active:not([disabled]) .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-container-state-layer-color, rgba(67, 71, 73, .1))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal .mat-ripple-element{background-color:var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, .1))!important}.lib-mat-btn--full{width:100%}.lib-mat-btn--xsmall{--lib-mat-btn-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xsmall-button-xsmall-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xsmall-button-xsmall-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-xsmall-button-xsmall-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-square, 8) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-xsmall-button-xsmall-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-xsmall-button-xsmall-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-xsmall-button-xsmall-label-text-weight, 500);line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--xsmall .mat-icon,.lib-mat-btn--xsmall .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);display:flex;align-items:center;justify-content:center}.lib-mat-btn--small{--lib-mat-btn-height: calc(var(--buttons-wip-size-small-button-small-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-small-button-small-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-small-button-small-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-small-button-small-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-small-button-small-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-small-button-small-shape-square, 8) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-small-button-small-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-small-button-small-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-small-button-small-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-small-button-small-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-small-button-small-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-small-button-small-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-small-button-small-label-text-weight, 500)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--small .mat-icon,.lib-mat-btn--small .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--medium{--lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-medium-button-medium-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-medium-button-medium-label-text-weight, 500)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--medium .mat-icon,.lib-mat-btn--medium .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--large{--lib-mat-btn-height: calc(var(--buttons-wip-size-large-button-large-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-large-button-large-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-large-button-large-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-large-button-large-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-large-button-large-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-large-button-large-shape-square, 16) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-large-button-large-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-large-button-large-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-large-button-large-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-large-button-large-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-large-button-large-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-large-button-large-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-large-button-large-label-text-weight, 400)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--large .mat-icon,.lib-mat-btn--large .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--xlarge{--lib-mat-btn-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xlarge-button-xlarge-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xlarge-button-xlarge-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-xlarge-button-xlarge-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-square, 16) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-xlarge-button-xlarge-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-xlarge-button-xlarge-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-xlarge-button-xlarge-label-text-weight, 400)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--xlarge .mat-icon,.lib-mat-btn--xlarge .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--shape-round{--lib-mat-btn-radius: var(--lib-mat-btn-radius-round)}.lib-mat-btn--shape-square{--lib-mat-btn-radius: var(--lib-mat-btn-radius-square)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', standalone: true, imports: [MatButtonModule, MatIconModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.lib-mat-btn-host--full]': 'fullWidth()',
+                    }, template: "@switch (variant()) {\r\n  @case ('filled') {\r\n    <button\r\n      mat-flat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('outlined') {\r\n    <button\r\n      mat-stroked-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('tonal') {\r\n    <button\r\n      matButton\r\n      appearance=\"tonal\"\r\n      class=\"lib-mat-btn lib-mat-btn--variant-tonal\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('text') {\r\n    <button\r\n      mat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @case ('elevated') {\r\n    <button\r\n      mat-raised-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n  @default {\r\n    <button\r\n      mat-flat-button\r\n      class=\"lib-mat-btn\"\r\n      [attr.type]=\"type()\"\r\n      [disabled]=\"disabled()\"\r\n      [ngClass]=\"classes()\"\r\n      (pointerdown)=\"onPressStart()\"\r\n      (pointerup)=\"onPressEnd()\"\r\n      (pointerleave)=\"onPressCancel()\"\r\n      (pointercancel)=\"onPressCancel()\"\r\n      (keydown)=\"onKeyDown($event)\"\r\n      (keyup)=\"onKeyUp()\"\r\n      (blur)=\"onPressEnd()\"\r\n    >\r\n      @if (hasInputContent()) {\r\n        @if (iconPosition() === 'leading' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n        @if (label()) {\r\n          <span [class]=\"labelClass()\">{{ label() }}</span>\r\n        }\r\n        @if (iconPosition() === 'trailing' && icon()) {\r\n          <mat-icon [svgIcon]=\"icon()\">{{ icon() }}</mat-icon>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n    </button>\r\n  }\r\n}\r\n", styles: [":host{display:inline-block}:host(.lib-mat-btn-host--full){display:block;width:100%}.lib-mat-btn{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;overflow:hidden!important}.lib-mat-btn ::ng-deep .mdc-button__label{overflow:visible!important;position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:var(--lib-mat-btn-gap)!important}.lib-mat-btn ::ng-deep .mdc-button__label>.mat-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;margin:0!important;line-height:1!important;vertical-align:middle!important}.lib-mat-btn ::ng-deep .mdc-button__label>span{display:inline-flex!important;align-items:center!important;line-height:var(--lib-mat-btn-line-height)!important;vertical-align:middle!important}.lib-mat-btn:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61),0 0 0 calc((var(--buttons-wip-button-enabled-button-focus-ring-indicator-thickness, 3) + var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2)) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61)}.lib-mat-btn.lib-mat-btn--pressed:not([disabled]){border-radius:calc(var(--lib-mat-btn-pressed-radius, var(--buttons-wip-size-medium-button-medium-shape-pressed-morph, 8)) * 1px)}.lib-mat-btn.lib-mat-btn--debug-padding{box-shadow:inset var(--lib-mat-btn-padding-x) 0 0 0 #f009,inset calc(100% - var(--lib-mat-btn-padding-x-right) - 2px) 0 0 0 #0064ff99}.lib-mat-btn__content{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;gap:var(--lib-mat-btn-gap)}.lib-mat-btn--align-start .lib-mat-btn__content,.lib-mat-btn--align-center .lib-mat-btn__content,.lib-mat-btn--align-end .lib-mat-btn__content{width:100%}.lib-mat-btn--align-start .lib-mat-btn__content{justify-content:flex-start}.lib-mat-btn--align-center .lib-mat-btn__content{justify-content:center}.lib-mat-btn--align-end .lib-mat-btn__content{justify-content:flex-end}:host .lib-mat-btn--align-start .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-start .mdc-button__label{width:100%!important;justify-content:flex-start!important}:host .lib-mat-btn--align-center .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-center .mdc-button__label{width:100%!important;justify-content:center!important}:host .lib-mat-btn--align-end .mdc-button__label,:host ::ng-deep .lib-mat-btn--align-end .mdc-button__label{width:100%!important;justify-content:flex-end!important}.lib-mat-btn{--lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-medium-button-medium-label-text-weight, 500);line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--variant-outlined{color:var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749)!important}.lib-mat-btn--variant-outlined:focus-visible{color:var(--buttons-wip-color-outlined-focused-button-outlined-focused-label-color, #434749)!important}.lib-mat-btn--variant-outlined .lib-mat-btn__content,.lib-mat-btn--variant-outlined .mdc-button__label{color:inherit!important}.lib-mat-btn--variant-tonal{background-color:var(--buttons-wip-color-tonal-enabled-button-tonal-container-color, #e0e3e5)!important;color:var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749)!important;--mat-button-tonal-ripple-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, .1))}:host ::ng-deep .lib-mat-btn--variant-tonal:hover:not([disabled]) .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-hovered-button-tonal-hovered-container-state-layer-color, rgba(67, 71, 73, .08))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-program-focused .mat-mdc-button-persistent-ripple:before,:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-focused-button-tonal-focused-container-state-layer-color, rgba(67, 71, 73, .1))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal:active:not([disabled]) .mat-mdc-button-persistent-ripple:before{background-color:var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-container-state-layer-color, rgba(67, 71, 73, .1))!important;opacity:1!important}:host ::ng-deep .lib-mat-btn--variant-tonal .mat-ripple-element{background-color:var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, .1))!important}.lib-mat-btn--full{width:100%}.lib-mat-btn--xsmall{--lib-mat-btn-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xsmall-button-xsmall-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xsmall-button-xsmall-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-xsmall-button-xsmall-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-square, 8) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-xsmall-button-xsmall-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-xsmall-button-xsmall-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-xsmall-button-xsmall-label-text-weight, 500);line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--xsmall .mat-icon,.lib-mat-btn--xsmall .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);display:flex;align-items:center;justify-content:center}.lib-mat-btn--small{--lib-mat-btn-height: calc(var(--buttons-wip-size-small-button-small-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-small-button-small-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-small-button-small-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-small-button-small-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-small-button-small-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-small-button-small-shape-square, 8) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-small-button-small-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-small-button-small-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-small-button-small-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-small-button-small-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-small-button-small-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-small-button-small-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-small-button-small-label-text-weight, 500)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--small .mat-icon,.lib-mat-btn--small .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--medium{--lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-medium-button-medium-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-medium-button-medium-label-text-weight, 500)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--medium .mat-icon,.lib-mat-btn--medium .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--large{--lib-mat-btn-height: calc(var(--buttons-wip-size-large-button-large-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-large-button-large-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-large-button-large-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-large-button-large-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-large-button-large-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-large-button-large-shape-square, 16) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-large-button-large-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-large-button-large-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-large-button-large-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-large-button-large-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-large-button-large-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-large-button-large-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-large-button-large-label-text-weight, 400)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--large .mat-icon,.lib-mat-btn--large .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--xlarge{--lib-mat-btn-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-container-height) * 1px);--lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xlarge-button-xlarge-leading-space) * 1px);--lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xlarge-button-xlarge-trailing-space) * 1px);--lib-mat-btn-gap: calc(var(--buttons-wip-size-xlarge-button-xlarge-between-icon-label-space) * 1px);--lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-round, 1000) * 1px);--lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-square, 16) * 1px);--lib-mat-btn-radius: var(--lib-mat-btn-radius-round);--lib-mat-btn-pressed-radius: var(--buttons-wip-size-xlarge-button-xlarge-shape-pressed-morph);--lib-mat-btn-font-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-size) * 1px);--lib-mat-btn-line-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-line-height) * 1px);--lib-mat-btn-tracking: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-tracking) * 1px);--lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-icon-size) * 1px);min-height:var(--lib-mat-btn-height);height:var(--lib-mat-btn-height);padding-left:var(--lib-mat-btn-padding-x)!important;padding-right:var(--lib-mat-btn-padding-x-right)!important;color:var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);font-family:var(--buttons-wip-size-xlarge-button-xlarge-label-text-font, Heebo);font-size:var(--lib-mat-btn-font-size);font-style:normal;font-weight:var(--buttons-wip-size-xlarge-button-xlarge-label-text-weight, 400)!important;line-height:var(--lib-mat-btn-line-height);letter-spacing:var(--lib-mat-btn-tracking);border-radius:var(--lib-mat-btn-radius)}.lib-mat-btn--xlarge .mat-icon,.lib-mat-btn--xlarge .mat-mdc-button-touch-target{width:var(--lib-mat-btn-icon-size);height:var(--lib-mat-btn-icon-size);font-size:var(--lib-mat-btn-icon-size);line-height:1;display:flex;align-items:center;justify-content:center}.lib-mat-btn--shape-round{--lib-mat-btn-radius: var(--lib-mat-btn-radius-round)}.lib-mat-btn--shape-square{--lib-mat-btn-radius: var(--lib-mat-btn-radius-square)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], contentAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAlign", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], debugPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "debugPadding", required: false }] }] } });
+
+class LibIconButtonComponent {
+    size = input('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('standard', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    shape = input('round', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Variante de espacio (padding inline) desde Figma: narrow, default, wide. */
+    space = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "space" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    toggle = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ({
+        'ui-icon-btn--xsmall': this.size() === 'xsmall',
+        'ui-icon-btn--small': this.size() === 'small',
+        'ui-icon-btn--medium': this.size() === 'medium',
+        'ui-icon-btn--large': this.size() === 'large',
+        'ui-icon-btn--xlarge': this.size() === 'xlarge',
+        'ui-icon-btn--shape-round': this.shape() === 'round',
+        'ui-icon-btn--shape-square': this.shape() === 'square',
+        'ui-icon-btn--space-narrow': this.space() === 'narrow',
+        'ui-icon-btn--space-default': this.space() === 'default',
+        'ui-icon-btn--space-wide': this.space() === 'wide',
+        'ui-icon-btn--variant-filled': this.variant() === 'filled',
+        'ui-icon-btn--variant-tonal': this.variant() === 'tonal',
+        'ui-icon-btn--variant-outlined': this.variant() === 'outlined',
+        'ui-icon-btn--variant-standard': this.variant() === 'standard',
+        'ui-icon-btn--variant-action': this.variant() === 'action',
+        'ui-icon-btn--toggle': this.toggle(),
+        'ui-icon-btn--toggle-selected': this.toggle() && this.selected(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibIconButtonComponent, isStandalone: true, selector: "lib-icon-button", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, space: { classPropertyName: "space", publicName: "space", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\r\n  class=\"ui-icon-btn\"\r\n  [attr.type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  matRipple\r\n  [matRippleDisabled]=\"disabled()\"\r\n  [matRippleColor]=\"'var(--ui-icon-btn-ripple-color)'\"\r\n  [matRippleCentered]=\"true\"\r\n  [ngClass]=\"classes()\"\r\n  [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n>\r\n  <span class=\"ui-icon-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: [".ui-icon-btn{--ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px);--ui-icon-btn-pressed-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, var(--app-icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, 0)) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-ripple-boost: 2.4;--ui-icon-btn-ripple-min-opacity: .18;--ui-icon-btn-ripple-opacity: min( 1, max( var(--ui-icon-btn-ripple-min-opacity), calc(var(--ui-icon-btn-pressed-layer-opacity, 0) * var(--ui-icon-btn-ripple-boost)) ) );--ui-icon-btn-ripple-color: color-mix( in srgb, var(--ui-icon-btn-pressed-layer-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%), transparent );--ui-icon-btn-focus-ring-color: var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, transparent));--ui-icon-btn-focus-ring-width: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, 0)) * 1px);--ui-icon-btn-focus-ring-offset: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, 0)) * 1px);--ui-icon-btn-disabled-container-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-color, var(--ui-icon-btn-container-color));--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-icon-color, var(--ui-icon-btn-icon-color));--ui-icon-btn-disabled-border-color: var(--ui-icon-btn-border-color);--ui-icon-btn-disabled-border-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);--ui-icon-btn-disabled-opacity: 1;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ui-icon-btn-size);min-width:var(--ui-icon-btn-size);padding-inline-start:var(--ui-icon-btn-padding-inline-start);padding-inline-end:var(--ui-icon-btn-padding-inline-end);border-radius:var(--ui-icon-btn-radius);border-style:solid;border-width:var(--ui-icon-btn-border-width);border-color:var(--ui-icon-btn-border-color);background-color:var(--ui-icon-btn-container-color);color:var(--ui-icon-btn-icon-color);cursor:pointer;overflow:hidden;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,border-radius .15s ease}.ui-icon-btn:after{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:transparent;opacity:0;transition:opacity .15s ease,background-color .15s ease}.ui-icon-btn__content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center}.ui-icon-btn mat-icon,.ui-icon-btn .mat-icon,.ui-icon-btn>svg{width:var(--ui-icon-btn-icon-size);height:var(--ui-icon-btn-icon-size);font-size:var(--ui-icon-btn-icon-size);color:currentColor;fill:currentColor;display:inline-flex;align-items:center;justify-content:center;line-height:1}.ui-icon-btn mat-icon svg,.ui-icon-btn .mat-icon svg,.ui-icon-btn>svg{width:100%;height:100%;fill:currentColor}.ui-icon-btn:hover:not(:disabled):after{background-color:var(--ui-icon-btn-hover-layer-color);opacity:var(--ui-icon-btn-hover-layer-opacity)}.ui-icon-btn:focus-visible:not(:disabled):after{background-color:var(--ui-icon-btn-focus-layer-color);opacity:var(--ui-icon-btn-focus-layer-opacity)}.ui-icon-btn:active:not(:disabled):after{background-color:var(--ui-icon-btn-pressed-layer-color);opacity:var(--ui-icon-btn-pressed-layer-opacity)}.ui-icon-btn:active:not(:disabled){border-radius:var(--ui-icon-btn-pressed-radius)}.ui-icon-btn:focus-visible{outline:var(--ui-icon-btn-focus-ring-width) solid var(--ui-icon-btn-focus-ring-color);outline-offset:var(--ui-icon-btn-focus-ring-offset)}.ui-icon-btn:disabled{cursor:not-allowed;background-color:color-mix(in srgb,var(--ui-icon-btn-disabled-container-color) calc(var(--ui-icon-btn-disabled-container-opacity) * 1%),transparent);border-color:color-mix(in srgb,var(--ui-icon-btn-disabled-border-color) calc(var(--ui-icon-btn-disabled-border-opacity) * 1%),transparent);color:color-mix(in srgb,var(--ui-icon-btn-disabled-icon-color) calc(var(--ui-icon-btn-disabled-icon-opacity) * 1%),transparent);opacity:var(--ui-icon-btn-disabled-opacity)}.ui-icon-btn:disabled:after{opacity:0}.ui-icon-btn--xsmall{--ui-icon-btn-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-outline-width) * 1px)}.ui-icon-btn--small{--ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px)}.ui-icon-btn--medium{--ui-icon-btn-size: calc(var(--icon-buttons-size-medium-icon-button-medium-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-medium-icon-button-medium-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-medium-icon-button-medium-outline-width) * 1px)}.ui-icon-btn--large{--ui-icon-btn-size: calc(var(--icon-buttons-size-large-icon-button-large-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-large-icon-button-large-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-large-icon-button-large-outline-width) * 1px)}.ui-icon-btn--xlarge{--ui-icon-btn-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-outline-width) * 1px)}.ui-icon-btn--xsmall.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-trailing-space) * 1px)}.ui-icon-btn--xsmall.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-trailing-space) * 1px)}.ui-icon-btn--small.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-narrow-trailing-space) * 1px)}.ui-icon-btn--small.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-wide-trailing-space) * 1px)}.ui-icon-btn--medium.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-trailing-space) * 1px)}.ui-icon-btn--medium.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-trailing-space) * 1px)}.ui-icon-btn--large.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-narrow-trailing-space) * 1px)}.ui-icon-btn--large.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-wide-trailing-space) * 1px)}.ui-icon-btn--xlarge.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-trailing-space) * 1px)}.ui-icon-btn--xlarge.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-trailing-space) * 1px)}.ui-icon-btn--shape-round{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px)}.ui-icon-btn--shape-square{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-square)) * 1px)}.ui-icon-btn--toggle-selected.ui-icon-btn--shape-round{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round)) * 1px)}.ui-icon-btn--toggle-selected.ui-icon-btn--shape-square{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square)) * 1px)}.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--ui-icon-btn-container-color)));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--ui-icon-btn-icon-color)));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--ui-icon-btn-hover-layer-color)));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--ui-icon-btn-focus-layer-color)));--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--ui-icon-btn-pressed-layer-color)))}.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--ui-icon-btn-container-color)));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--ui-icon-btn-icon-color)));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--ui-icon-btn-hover-layer-color)));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--ui-icon-btn-focus-layer-color)));--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--ui-icon-btn-pressed-layer-color)))}.ui-icon-btn--variant-filled{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color);--ui-icon-btn-ripple-boost: 2.8;--ui-icon-btn-ripple-min-opacity: .24;--ui-icon-btn-ripple-color: color-mix( in srgb, var(--ui-icon-btn-icon-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%), transparent );--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color);--ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-opacity) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color);--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-opacity) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color);--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-opacity) / 100);--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-color);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-opacity);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-opacity)}.ui-icon-btn--variant-filled.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-unselected);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-unselected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-unselected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-filled.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-selected);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-tonal{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);--ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-opacity) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-opacity) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color);--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-opacity) / 100);--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-color);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-opacity);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-opacity)}.ui-icon-btn--variant-tonal.ui-icon-btn--shape-round{--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color)}.ui-icon-btn--variant-tonal.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-unselected);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-tonal.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-selected);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-outlined{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color);--ui-icon-btn-border-width: var(--ui-icon-btn-outline-width);--ui-icon-btn-border-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-color);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-pressed-layer-opacity: .08;--ui-icon-btn-disabled-border-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-outline-color);--ui-icon-btn-disabled-border-opacity: 100;--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-color-selected, transparent);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-opacity-selected, 0);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-opacity)}.ui-icon-btn--variant-outlined.ui-icon-btn--toggle{--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-opacity: .08}.ui-icon-btn--variant-outlined.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-outlined-enabled-icon-button-container-color-toggle-selected, transparent);--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-opacity: .08}.ui-icon-btn--variant-standard{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, rgba(67, 71, 73, .08)));--ui-icon-btn-hover-layer-opacity: 1;--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, rgba(67, 71, 73, .08)));--ui-icon-btn-focus-layer-opacity: 1;--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, rgba(67, 71, 73, .12)));--ui-icon-btn-pressed-layer-opacity: 1;--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-standard-disabled-icon-button-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-standard-disabled-icon-button-disabled-opacity);--ui-icon-btn-disabled-opacity: 1}.ui-icon-btn--variant-standard.ui-icon-btn--toggle{--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-unselected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-unselected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-standard.ui-icon-btn--toggle-selected{--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-action{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-action-enabled-icon-button-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-action-disabled-icon-button-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-action-disabled-icon-button-disabled-opacity);--ui-icon-btn-disabled-opacity: 1}.ui-icon-btn--variant-action.ui-icon-btn--toggle,.ui-icon-btn--variant-action.ui-icon-btn--toggle-selected{--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-hover-layer-opacity: calc((var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, 0)) * 3) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, 0)) / 100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1$6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-icon-button', standalone: true, imports: [NgClass, MatRippleModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  class=\"ui-icon-btn\"\r\n  [attr.type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  matRipple\r\n  [matRippleDisabled]=\"disabled()\"\r\n  [matRippleColor]=\"'var(--ui-icon-btn-ripple-color)'\"\r\n  [matRippleCentered]=\"true\"\r\n  [ngClass]=\"classes()\"\r\n  [attr.aria-pressed]=\"toggle() ? selected() : null\"\r\n>\r\n  <span class=\"ui-icon-btn__content\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</button>\r\n", styles: [".ui-icon-btn{--ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px);--ui-icon-btn-pressed-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, var(--app-icon-buttons-icon-button-enabled-icon-button-shape-pressed-morph, 0)) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-ripple-boost: 2.4;--ui-icon-btn-ripple-min-opacity: .18;--ui-icon-btn-ripple-opacity: min( 1, max( var(--ui-icon-btn-ripple-min-opacity), calc(var(--ui-icon-btn-pressed-layer-opacity, 0) * var(--ui-icon-btn-ripple-boost)) ) );--ui-icon-btn-ripple-color: color-mix( in srgb, var(--ui-icon-btn-pressed-layer-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%), transparent );--ui-icon-btn-focus-ring-color: var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-color, transparent));--ui-icon-btn-focus-ring-width: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-thickness, 0)) * 1px);--ui-icon-btn-focus-ring-offset: calc(var(--icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, var(--app-icon-buttons-icon-button-enabled-icon-button-focus-indicator-offset, 0)) * 1px);--ui-icon-btn-disabled-container-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-color, var(--ui-icon-btn-container-color));--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-icon-button-disabled-icon-button-disabled-icon-color, var(--ui-icon-btn-icon-color));--ui-icon-btn-disabled-border-color: var(--ui-icon-btn-border-color);--ui-icon-btn-disabled-border-opacity: var(--icon-buttons-icon-button-disabled-icon-button-disabled-container-opacity, 100);--ui-icon-btn-disabled-opacity: 1;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ui-icon-btn-size);min-width:var(--ui-icon-btn-size);padding-inline-start:var(--ui-icon-btn-padding-inline-start);padding-inline-end:var(--ui-icon-btn-padding-inline-end);border-radius:var(--ui-icon-btn-radius);border-style:solid;border-width:var(--ui-icon-btn-border-width);border-color:var(--ui-icon-btn-border-color);background-color:var(--ui-icon-btn-container-color);color:var(--ui-icon-btn-icon-color);cursor:pointer;overflow:hidden;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,border-radius .15s ease}.ui-icon-btn:after{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background-color:transparent;opacity:0;transition:opacity .15s ease,background-color .15s ease}.ui-icon-btn__content{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center}.ui-icon-btn mat-icon,.ui-icon-btn .mat-icon,.ui-icon-btn>svg{width:var(--ui-icon-btn-icon-size);height:var(--ui-icon-btn-icon-size);font-size:var(--ui-icon-btn-icon-size);color:currentColor;fill:currentColor;display:inline-flex;align-items:center;justify-content:center;line-height:1}.ui-icon-btn mat-icon svg,.ui-icon-btn .mat-icon svg,.ui-icon-btn>svg{width:100%;height:100%;fill:currentColor}.ui-icon-btn:hover:not(:disabled):after{background-color:var(--ui-icon-btn-hover-layer-color);opacity:var(--ui-icon-btn-hover-layer-opacity)}.ui-icon-btn:focus-visible:not(:disabled):after{background-color:var(--ui-icon-btn-focus-layer-color);opacity:var(--ui-icon-btn-focus-layer-opacity)}.ui-icon-btn:active:not(:disabled):after{background-color:var(--ui-icon-btn-pressed-layer-color);opacity:var(--ui-icon-btn-pressed-layer-opacity)}.ui-icon-btn:active:not(:disabled){border-radius:var(--ui-icon-btn-pressed-radius)}.ui-icon-btn:focus-visible{outline:var(--ui-icon-btn-focus-ring-width) solid var(--ui-icon-btn-focus-ring-color);outline-offset:var(--ui-icon-btn-focus-ring-offset)}.ui-icon-btn:disabled{cursor:not-allowed;background-color:color-mix(in srgb,var(--ui-icon-btn-disabled-container-color) calc(var(--ui-icon-btn-disabled-container-opacity) * 1%),transparent);border-color:color-mix(in srgb,var(--ui-icon-btn-disabled-border-color) calc(var(--ui-icon-btn-disabled-border-opacity) * 1%),transparent);color:color-mix(in srgb,var(--ui-icon-btn-disabled-icon-color) calc(var(--ui-icon-btn-disabled-icon-opacity) * 1%),transparent);opacity:var(--ui-icon-btn-disabled-opacity)}.ui-icon-btn:disabled:after{opacity:0}.ui-icon-btn--xsmall{--ui-icon-btn-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-outline-width) * 1px)}.ui-icon-btn--small{--ui-icon-btn-size: calc(var(--icon-buttons-size-small-icon-button-small-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-small-icon-button-small-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-small-icon-button-small-outline-width) * 1px)}.ui-icon-btn--medium{--ui-icon-btn-size: calc(var(--icon-buttons-size-medium-icon-button-medium-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-medium-icon-button-medium-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-medium-icon-button-medium-outline-width) * 1px)}.ui-icon-btn--large{--ui-icon-btn-size: calc(var(--icon-buttons-size-large-icon-button-large-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-large-icon-button-large-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-large-icon-button-large-outline-width) * 1px)}.ui-icon-btn--xlarge{--ui-icon-btn-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-container-height) * 1px);--ui-icon-btn-icon-size: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-icon-size) * 1px);--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-default-trailing-space) * 1px);--ui-icon-btn-outline-width: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-outline-width) * 1px)}.ui-icon-btn--xsmall.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-narrow-trailing-space) * 1px)}.ui-icon-btn--xsmall.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xsmall-icon-button-xsmall-wide-trailing-space) * 1px)}.ui-icon-btn--small.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-narrow-trailing-space) * 1px)}.ui-icon-btn--small.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-small-icon-button-small-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-small-icon-button-small-wide-trailing-space) * 1px)}.ui-icon-btn--medium.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-narrow-trailing-space) * 1px)}.ui-icon-btn--medium.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-medium-icon-button-medium-wide-trailing-space) * 1px)}.ui-icon-btn--large.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-narrow-trailing-space) * 1px)}.ui-icon-btn--large.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-large-icon-button-large-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-large-icon-button-large-wide-trailing-space) * 1px)}.ui-icon-btn--xlarge.ui-icon-btn--space-narrow{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-narrow-trailing-space) * 1px)}.ui-icon-btn--xlarge.ui-icon-btn--space-wide{--ui-icon-btn-padding-inline-start: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-leading-space) * 1px);--ui-icon-btn-padding-inline-end: calc(var(--icon-buttons-size-xlarge-icon-button-xlarge-wide-trailing-space) * 1px)}.ui-icon-btn--shape-round{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-round)) * 1px)}.ui-icon-btn--shape-square{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-container-shape-square)) * 1px)}.ui-icon-btn--toggle-selected.ui-icon-btn--shape-round{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-round)) * 1px)}.ui-icon-btn--toggle-selected.ui-icon-btn--shape-square{--ui-icon-btn-radius: calc(var(--icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square, var(--app-icon-buttons-icon-button-enabled-icon-button-selected-container-shape-square)) * 1px)}.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-unselected, var(--ui-icon-btn-container-color)));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-unselected, var(--ui-icon-btn-icon-color)));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-unselected, var(--ui-icon-btn-hover-layer-color)));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-unselected, var(--ui-icon-btn-focus-layer-color)));--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-unselected, var(--ui-icon-btn-pressed-layer-color)))}.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-container-color-toggle-selected, var(--ui-icon-btn-container-color)));--ui-icon-btn-icon-color: var(--icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--app-icon-buttons-icon-button-enabled-icon-button-icon-color-toggle-selected, var(--ui-icon-btn-icon-color)));--ui-icon-btn-hover-layer-color: var(--icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-hovered-icon-button-hovered-state-layer-color-toggle-selected, var(--ui-icon-btn-hover-layer-color)));--ui-icon-btn-focus-layer-color: var(--icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-focused-icon-button-focused-state-layer-color-toggle-selected, var(--ui-icon-btn-focus-layer-color)));--ui-icon-btn-pressed-layer-color: var(--icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--app-icon-buttons-icon-button-pressed-icon-button-pressed-state-layer-color-toggle-selected, var(--ui-icon-btn-pressed-layer-color)))}.ui-icon-btn--variant-filled{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color);--ui-icon-btn-ripple-boost: 2.8;--ui-icon-btn-ripple-min-opacity: .24;--ui-icon-btn-ripple-color: color-mix( in srgb, var(--ui-icon-btn-icon-color) calc(var(--ui-icon-btn-ripple-opacity) * 100%), transparent );--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color);--ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-opacity) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color);--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-opacity) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color);--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-opacity) / 100);--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-color);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-container-opacity);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-filled-disabled-icon-button-filled-disabled-icon-opacity)}.ui-icon-btn--variant-filled.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-unselected);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-unselected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-unselected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-filled.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-container-color-toggle-selected);--ui-icon-btn-icon-color: var(--icon-buttons-color-filled-enabled-icon-button-filled-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-filled-hovered-icon-button-filled-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-filled-focused-icon-button-filled-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-filled-pressed-icon-button-filled-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-tonal{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);--ui-icon-btn-hover-layer-opacity: calc(var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-opacity) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-opacity) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color);--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-opacity) / 100);--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-color);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-container-opacity);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-tonal-disabled-icon-button-tonal-disabled-icon-opacity)}.ui-icon-btn--variant-tonal.ui-icon-btn--shape-round{--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color)}.ui-icon-btn--variant-tonal.ui-icon-btn--toggle{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-unselected);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-tonal.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-container-color-toggle-selected);--ui-icon-btn-icon-color: var(--icon-buttons-color-tonal-enabled-icon-button-tonal-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-tonal-hovered-icon-button-tonal-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-tonal-focused-icon-button-tonal-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-tonal-pressed-icon-button-tonal-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-outlined{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color);--ui-icon-btn-border-width: var(--ui-icon-btn-outline-width);--ui-icon-btn-border-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-color);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-pressed-layer-opacity: .08;--ui-icon-btn-disabled-border-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-outline-color);--ui-icon-btn-disabled-border-opacity: 100;--ui-icon-btn-disabled-container-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-color-selected, transparent);--ui-icon-btn-disabled-container-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-container-opacity-selected, 0);--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-outlined-disabled-icon-button-outlined-disabled-icon-opacity)}.ui-icon-btn--variant-outlined.ui-icon-btn--toggle{--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-opacity: .08}.ui-icon-btn--variant-outlined.ui-icon-btn--toggle-selected{--ui-icon-btn-container-color: var(--icon-buttons-color-outlined-enabled-icon-button-container-color-toggle-selected, transparent);--ui-icon-btn-icon-color: var(--icon-buttons-color-outlined-enabled-icon-button-outlined-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: #434749;--ui-icon-btn-focus-layer-color: #434749;--ui-icon-btn-pressed-layer-color: #434749;--ui-icon-btn-hover-layer-opacity: .08;--ui-icon-btn-focus-layer-opacity: .1;--ui-icon-btn-pressed-layer-opacity: .08}.ui-icon-btn--variant-standard{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color, rgba(67, 71, 73, .08)));--ui-icon-btn-hover-layer-opacity: 1;--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-standard-focused-icon-button-focused-state-layer-color, rgba(67, 71, 73, .08)));--ui-icon-btn-focus-layer-opacity: 1;--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color, rgba(67, 71, 73, .12)));--ui-icon-btn-pressed-layer-opacity: 1;--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-standard-disabled-icon-button-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-standard-disabled-icon-button-disabled-opacity);--ui-icon-btn-disabled-opacity: 1}.ui-icon-btn--variant-standard.ui-icon-btn--toggle{--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-unselected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-unselected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-unselected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-unselected)}.ui-icon-btn--variant-standard.ui-icon-btn--toggle-selected{--ui-icon-btn-icon-color: var(--icon-buttons-color-standard-enabled-icon-button-icon-color-toggle-selected);--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-standard-hovered-icon-button-hovered-state-layer-color-toggle-selected);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-standard-focused-icon-button-focused-state-layer-color-toggle-selected);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-standard-pressed-icon-button-pressed-state-layer-color-toggle-selected)}.ui-icon-btn--variant-action{--ui-icon-btn-container-color: transparent;--ui-icon-btn-icon-color: var(--icon-buttons-color-action-enabled-icon-button-icon-color);--ui-icon-btn-border-width: 0;--ui-icon-btn-border-color: transparent;--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-disabled-icon-color: var(--icon-buttons-color-action-disabled-icon-button-disabled-icon-color);--ui-icon-btn-disabled-icon-opacity: var(--icon-buttons-color-action-disabled-icon-button-disabled-opacity);--ui-icon-btn-disabled-opacity: 1}.ui-icon-btn--variant-action.ui-icon-btn--toggle,.ui-icon-btn--variant-action.ui-icon-btn--toggle-selected{--ui-icon-btn-hover-layer-color: var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-color, transparent));--ui-icon-btn-hover-layer-opacity: calc((var(--icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, var(--app-icon-buttons-color-action-hovered-icon-button-hovered-state-layer-opacity, 0)) * 3) / 100);--ui-icon-btn-focus-layer-color: var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-color, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-color, transparent));--ui-icon-btn-focus-layer-opacity: calc(var(--icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, var(--app-icon-buttons-color-action-focused-icon-button-focused-state-layer-opacity, 0)) / 100);--ui-icon-btn-pressed-layer-color: var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-color, transparent));--ui-icon-btn-pressed-layer-opacity: calc(var(--icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, var(--app-icon-buttons-color-action-pressed-icon-button-pressed-state-layer-opacity, 0)) / 100)}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], space: [{ type: i0.Input, args: [{ isSignal: true, alias: "space", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggle", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
+
+class SlideToggle {
+    checked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    checkedChange = output();
+    onChange(event) {
+        this.checkedChange.emit(event.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: SlideToggle, isStandalone: true, selector: "lib-slide-toggle, slide-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<mat-slide-toggle [checked]=\"checked()\" [hideIcon]=\"true\" (change)=\"onChange($event)\">\r\n\t<ng-content></ng-content>\r\n</mat-slide-toggle>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SlideToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-slide-toggle, slide-toggle', standalone: true, imports: [MatSlideToggleModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-slide-toggle [checked]=\"checked()\" [hideIcon]=\"true\" (change)=\"onChange($event)\">\r\n\t<ng-content></ng-content>\r\n</mat-slide-toggle>\r\n" }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+
+class CircularProgressStepper {
+    currentStep = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    totalsStep = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalsStep" }] : /* istanbul ignore next */ []));
+    size = input('64px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    barWidth = input('10px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barWidth" }] : /* istanbul ignore next */ []));
+    colorBarProgress = input('#0BC626', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorBarProgress" }] : /* istanbul ignore next */ []));
+    shadowColorBarProgress = input('#F0F0F0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shadowColorBarProgress" }] : /* istanbul ignore next */ []));
+    noJsMessage = input('Esta función requiere JavaScript 😢', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noJsMessage" }] : /* istanbul ignore next */ []));
+    animationDuration = input(500, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
+    progress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    isAnimating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
+    jsEnabled = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "jsEnabled" }] : /* istanbul ignore next */ []));
+    progressPercentage = computed(() => `${this.progress()}%`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progressPercentage" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.updateProgress();
+        });
+    }
+    updateProgress() {
+        const previousStep = (this.currentStep() > 0) ? this.currentStep() - 1 : 0;
+        const previousProgress = (Math.round(previousStep) / Math.round(this.totalsStep())) * 100;
+        this.progress.set(Math.round(previousProgress));
+        const progress = (Math.round(this.currentStep()) / Math.round(this.totalsStep())) * 100;
+        setTimeout(() => {
+            this.progress.set(Math.round(progress));
+        }, 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CircularProgressStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: CircularProgressStepper, isStandalone: true, selector: "lib-circular-progress-stepper, circular-progress-stepper", inputs: { currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, totalsStep: { classPropertyName: "totalsStep", publicName: "totalsStep", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, barWidth: { classPropertyName: "barWidth", publicName: "barWidth", isSignal: true, isRequired: false, transformFunction: null }, colorBarProgress: { classPropertyName: "colorBarProgress", publicName: "colorBarProgress", isSignal: true, isRequired: false, transformFunction: null }, shadowColorBarProgress: { classPropertyName: "shadowColorBarProgress", publicName: "shadowColorBarProgress", isSignal: true, isRequired: false, transformFunction: null }, noJsMessage: { classPropertyName: "noJsMessage", publicName: "noJsMessage", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"progressbar\"\r\n  [class.no-js]=\"!jsEnabled()\"\r\n  [attr.role]=\"jsEnabled() ? 'progressbar' : null\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"100\"\r\n  [attr.aria-busy]=\"isAnimating()\"\r\n  [attr.aria-live]=\"jsEnabled() ? 'polite' : null\"\r\n  [style.--progress]=\"progressPercentage()\"\r\n  [style.--size]=\"size()\"\r\n  [style.--bar-width]=\"barWidth()\"\r\n  [style.--color-bar-progress]=\"colorBarProgress()\"\r\n  [style.--shadow-shadow-bar-progress]=\"shadowColorBarProgress()\">\r\n\r\n  <div class=\"progress-content\">\r\n    <span class=\"step-text\">Paso</span>\r\n    <span class=\"step-number\">{{ `${currentStep()} de ${totalsStep()}` }}</span>\r\n  </div>\r\n  @if (!jsEnabled()) {\r\n    <span>{{ noJsMessage() }}</span>\r\n  }\r\n\r\n</div>\r\n", styles: ["@property --progress{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}.progressbar[role=progressbar]{--size: 64px;--bar-width: 10px;--color-bar-progress: #0BC626;--shadow-color-bar-progress: #F0F0F0;width:var(--size);aspect-ratio:1 / 1;position:relative;background:conic-gradient(var(--color-bar-progress),var(--color-bar-progress) var(--progress),var(--shadow-color-bar-progress) 0%);border-radius:50vmax;display:grid;place-items:center;transition:--progress .5s linear}.progressbar[role=progressbar]>span{display:none}.progressbar[role=progressbar]:after{content:\"\";background:#fff;position:absolute;inset:calc(var(--bar-width) / 2);aspect-ratio:1;border-radius:inherit;display:grid;place-items:center;z-index:0}.progressbar:not([role=progressbar]){position:relative;width:var(--size, 132px);aspect-ratio:1 / 1;margin:2rem auto;display:grid;place-items:center;background:#f3f4f6;border-radius:50%}.progressbar:not([role=progressbar]):after{display:none}.progressbar:not([role=progressbar]) span{font-size:1rem;text-align:center;color:#059669;padding:1rem}.progress-content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.progress-content .step-text{font-size:10px;font-weight:400;color:#3e3e3e}.progress-content .step-number{font-size:12px;font-weight:400;color:#3e3e3e}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CircularProgressStepper, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-circular-progress-stepper, circular-progress-stepper', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"progressbar\"\r\n  [class.no-js]=\"!jsEnabled()\"\r\n  [attr.role]=\"jsEnabled() ? 'progressbar' : null\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"100\"\r\n  [attr.aria-busy]=\"isAnimating()\"\r\n  [attr.aria-live]=\"jsEnabled() ? 'polite' : null\"\r\n  [style.--progress]=\"progressPercentage()\"\r\n  [style.--size]=\"size()\"\r\n  [style.--bar-width]=\"barWidth()\"\r\n  [style.--color-bar-progress]=\"colorBarProgress()\"\r\n  [style.--shadow-shadow-bar-progress]=\"shadowColorBarProgress()\">\r\n\r\n  <div class=\"progress-content\">\r\n    <span class=\"step-text\">Paso</span>\r\n    <span class=\"step-number\">{{ `${currentStep()} de ${totalsStep()}` }}</span>\r\n  </div>\r\n  @if (!jsEnabled()) {\r\n    <span>{{ noJsMessage() }}</span>\r\n  }\r\n\r\n</div>\r\n", styles: ["@property --progress{syntax: \"<length-percentage>\"; inherits: false; initial-value: 0%;}.progressbar[role=progressbar]{--size: 64px;--bar-width: 10px;--color-bar-progress: #0BC626;--shadow-color-bar-progress: #F0F0F0;width:var(--size);aspect-ratio:1 / 1;position:relative;background:conic-gradient(var(--color-bar-progress),var(--color-bar-progress) var(--progress),var(--shadow-color-bar-progress) 0%);border-radius:50vmax;display:grid;place-items:center;transition:--progress .5s linear}.progressbar[role=progressbar]>span{display:none}.progressbar[role=progressbar]:after{content:\"\";background:#fff;position:absolute;inset:calc(var(--bar-width) / 2);aspect-ratio:1;border-radius:inherit;display:grid;place-items:center;z-index:0}.progressbar:not([role=progressbar]){position:relative;width:var(--size, 132px);aspect-ratio:1 / 1;margin:2rem auto;display:grid;place-items:center;background:#f3f4f6;border-radius:50%}.progressbar:not([role=progressbar]):after{display:none}.progressbar:not([role=progressbar]) span{font-size:1rem;text-align:center;color:#059669;padding:1rem}.progress-content{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.progress-content .step-text{font-size:10px;font-weight:400;color:#3e3e3e}.progress-content .step-number{font-size:12px;font-weight:400;color:#3e3e3e}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], totalsStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalsStep", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], barWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "barWidth", required: false }] }], colorBarProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorBarProgress", required: false }] }], shadowColorBarProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowColorBarProgress", required: false }] }], noJsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noJsMessage", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
+
+class LibSpinnerComponent {
+    diameter = input(48, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    color = input('var(--Rojo-400, #e30613)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Cargando', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibSpinnerComponent, isStandalone: true, selector: "lib-spinner, spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-spinner\r\n  mode=\"indeterminate\"\r\n  class=\"lib-spinner\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [diameter]=\"diameter()\"\r\n  [strokeWidth]=\"strokeWidth()\"\r\n  [style.--lib-spinner-color]=\"color()\"\r\n></mat-spinner>\r\n\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .lib-spinner{--mdc-circular-progress-active-indicator-color: var(--lib-spinner-color, var(--Rojo-400, #e30613))}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-spinner, spinner', standalone: true, imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-spinner\r\n  mode=\"indeterminate\"\r\n  class=\"lib-spinner\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [diameter]=\"diameter()\"\r\n  [strokeWidth]=\"strokeWidth()\"\r\n  [style.--lib-spinner-color]=\"color()\"\r\n></mat-spinner>\r\n\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host ::ng-deep .lib-spinner{--mdc-circular-progress-active-indicator-color: var(--lib-spinner-color, var(--Rojo-400, #e30613))}\n"] }]
+        }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class LibDividerComponent {
+    /** Orientación: horizontal (full width) o vertical (full height). Figma: Horizontal/Full-width, Vertical/Full-width */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibDividerComponent, isStandalone: true, selector: "lib-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"ui-divider\"\r\n  [class.ui-divider--horizontal]=\"orientation() === 'horizontal'\"\r\n  [class.ui-divider--vertical]=\"orientation() === 'vertical'\"\r\n  role=\"separator\"\r\n  [attr.aria-orientation]=\"orientation()\"\r\n></div>\r\n", styles: [":host{display:flex;align-items:stretch}.ui-divider{flex-shrink:0;background:var(--divider-enabled-container-divider-color, #c3c7c9)}.ui-divider--horizontal{width:100%;height:var(--divider-enabled-container-divider-thickness, .0625rem);min-height:.0625rem}.ui-divider--vertical{width:var(--divider-enabled-container-divider-thickness, .0625rem);min-width:.0625rem;align-self:stretch;min-height:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"ui-divider\"\r\n  [class.ui-divider--horizontal]=\"orientation() === 'horizontal'\"\r\n  [class.ui-divider--vertical]=\"orientation() === 'vertical'\"\r\n  role=\"separator\"\r\n  [attr.aria-orientation]=\"orientation()\"\r\n></div>\r\n", styles: [":host{display:flex;align-items:stretch}.ui-divider{flex-shrink:0;background:var(--divider-enabled-container-divider-color, #c3c7c9)}.ui-divider--horizontal{width:100%;height:var(--divider-enabled-container-divider-thickness, .0625rem);min-height:.0625rem}.ui-divider--vertical{width:var(--divider-enabled-container-divider-thickness, .0625rem);min-width:.0625rem;align-self:stretch;min-height:0}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+class LibTooltipComponent {
+    /** Texto del tooltip. */
+    text = input('Supporting text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Variante del tooltip según Figma: single-line o multi-line. */
+    type = input('single-line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Ancho máximo opcional para controlar el wrap en multi-line (ej: "12.5rem", "200px"). */
+    maxWidth = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ({
+        'ui-tooltip--single-line': this.type() === 'single-line',
+        'ui-tooltip--multi-line': this.type() === 'multi-line',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibTooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ui-tooltip-host": "true" } }, ngImport: i0, template: "<div class=\"ui-tooltip\" [ngClass]=\"classes()\" [style.max-width]=\"maxWidth()\">\r\n  <span class=\"ui-tooltip__text\">{{ text() }}</span>\r\n</div>\r\n", styles: [":host.ui-tooltip-host{display:inline-flex}.ui-tooltip{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 8px;border-radius:calc(var(--tooltips-plain-enabled-container-plain-tooltip-container-shape, 4) * 1px);background:var(--tooltips-plain-enabled-container-plain-tooltip-container-color, #2d3133);box-sizing:border-box}.ui-tooltip__text{color:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-color, #eef1f3);font-family:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-font, \"Heebo\"),sans-serif;font-size:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-size, 12px);font-style:normal;font-weight:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-weight, 400);line-height:calc(var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-line-height, 16) * 1px);letter-spacing:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-tracking, .4px)}.ui-tooltip--single-line .ui-tooltip__text{white-space:nowrap}.ui-tooltip--multi-line .ui-tooltip__text{white-space:normal}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tooltip', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ui-tooltip-host]': 'true',
+                    }, template: "<div class=\"ui-tooltip\" [ngClass]=\"classes()\" [style.max-width]=\"maxWidth()\">\r\n  <span class=\"ui-tooltip__text\">{{ text() }}</span>\r\n</div>\r\n", styles: [":host.ui-tooltip-host{display:inline-flex}.ui-tooltip{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 8px;border-radius:calc(var(--tooltips-plain-enabled-container-plain-tooltip-container-shape, 4) * 1px);background:var(--tooltips-plain-enabled-container-plain-tooltip-container-color, #2d3133);box-sizing:border-box}.ui-tooltip__text{color:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-color, #eef1f3);font-family:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-font, \"Heebo\"),sans-serif;font-size:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-size, 12px);font-style:normal;font-weight:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-weight, 400);line-height:calc(var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-line-height, 16) * 1px);letter-spacing:var(--tooltips-plain-enabled-supporting-text-plain-tooltip-supporting-text-tracking, .4px)}.ui-tooltip--single-line .ui-tooltip__text{white-space:nowrap}.ui-tooltip--multi-line .ui-tooltip__text{white-space:normal}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
+
+class LibCardComponent {
+    title = input('Header', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subhead = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subhead" }] : /* istanbul ignore next */ []));
+    variant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    state = input('enabled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    leadingKind = input('avatar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingKind" }] : /* istanbul ignore next */ []));
+    leadingIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    /** Tamaño del contenedor leading (Figma suele usar 2.5rem). */
+    leadingContainerSize = input('2.5rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingContainerSize" }] : /* istanbul ignore next */ []));
+    /** Tamaño del icono leading. */
+    leadingIconSize = input('2.08331rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingIconSize" }] : /* istanbul ignore next */ []));
+    mediaIcon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaIcon" }] : /* istanbul ignore next */ []));
+    mediaAlt = input('Card media', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mediaAlt" }] : /* istanbul ignore next */ []));
+    showMedia = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMedia" }] : /* istanbul ignore next */ []));
+    avatarText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarText" }] : /* istanbul ignore next */ []));
+    width = input('20.5rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Alto del card. */
+    height = input('4.5rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Si es true, el card toma el 100% del ancho del contenedor padre. */
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    active = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    cardClick = output();
+    initial = computed(() => {
+        const text = this.avatarText().trim();
+        if (text.length)
+            return text.slice(0, 1).toUpperCase();
+        const title = this.title().trim();
+        return title.length ? title.slice(0, 1).toUpperCase() : 'A';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
+    hasMedia = computed(() => this.mediaIcon().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMedia" }] : /* istanbul ignore next */ []));
+    isMediaImage = computed(() => this.mediaIcon().trim().endsWith('.svg'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMediaImage" }] : /* istanbul ignore next */ []));
+    hasLeadingIcon = computed(() => this.leadingIcon().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLeadingIcon" }] : /* istanbul ignore next */ []));
+    isLeadingImage = computed(() => this.leadingIcon().trim().endsWith('.svg'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLeadingImage" }] : /* istanbul ignore next */ []));
+    hasSubhead = computed(() => this.subhead().trim().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSubhead" }] : /* istanbul ignore next */ []));
+    classes = computed(() => ({
+        'ui-card': true,
+        'ui-card--outlined': this.variant() === 'outlined',
+        'ui-card--elevated': this.variant() === 'elevated',
+        'ui-card--filled': this.variant() === 'filled',
+        'ui-card--state-enabled': this.state() === 'enabled',
+        'ui-card--state-hovered': this.state() === 'hovered',
+        'ui-card--state-focused': this.state() === 'focused',
+        'ui-card--state-pressed': this.state() === 'pressed',
+        'ui-card--state-dragged': this.state() === 'dragged',
+        'ui-card--leading-avatar': this.leadingKind() === 'avatar',
+        'ui-card--leading-icon': this.leadingKind() === 'icon',
+        'ui-card--with-media': this.showMedia() && this.hasMedia(),
+        'ui-card--title-emphasized': !this.hasSubhead(),
+        'ui-card--active': this.active(),
+        'ui-card--disabled': this.disabled(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onCardClick() {
+        if (this.disabled())
+            return;
+        this.cardClick.emit();
+    }
+    onCardKeydown(event) {
+        if (this.disabled())
+            return;
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            this.cardClick.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibCardComponent, isStandalone: true, selector: "lib-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subhead: { classPropertyName: "subhead", publicName: "subhead", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, leadingKind: { classPropertyName: "leadingKind", publicName: "leadingKind", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingContainerSize: { classPropertyName: "leadingContainerSize", publicName: "leadingContainerSize", isSignal: true, isRequired: false, transformFunction: null }, leadingIconSize: { classPropertyName: "leadingIconSize", publicName: "leadingIconSize", isSignal: true, isRequired: false, transformFunction: null }, mediaIcon: { classPropertyName: "mediaIcon", publicName: "mediaIcon", isSignal: true, isRequired: false, transformFunction: null }, mediaAlt: { classPropertyName: "mediaAlt", publicName: "mediaAlt", isSignal: true, isRequired: false, transformFunction: null }, showMedia: { classPropertyName: "showMedia", publicName: "showMedia", isSignal: true, isRequired: false, transformFunction: null }, avatarText: { classPropertyName: "avatarText", publicName: "avatarText", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { properties: { "class.lib-card-host--full-width": "fullWidth()" } }, ngImport: i0, template: "<div\n  [ngClass]=\"classes()\"\n  [style.width]=\"fullWidth() ? '100%' : width()\"\n  [style.min-width]=\"fullWidth() ? '0rem' : width()\"\n  [attr.aria-disabled]=\"disabled()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (click)=\"onCardClick()\"\n  (keydown)=\"onCardKeydown($event)\"\n>\n  <div class=\"ui-card__row\" [style.min-height]=\"height()\">\n    <div class=\"ui-card__content\">\n      @if (leadingKind() === 'icon') {\n        <div\n          class=\"ui-card__leading ui-card__leading--icon\"\n          aria-hidden=\"true\"\n          [style.width]=\"leadingContainerSize()\"\n          [style.height]=\"leadingContainerSize()\"\n        >\n          @if (hasLeadingIcon()) {\n            @if (isLeadingImage()) {\n              <img [src]=\"leadingIcon()\" alt=\"\" [style.width]=\"leadingIconSize()\" [style.height]=\"leadingIconSize()\" />\n            } @else {\n              <svg\n                viewBox=\"0 0 24 24\"\n                [style.width]=\"leadingIconSize()\"\n                [style.height]=\"leadingIconSize()\"\n              >\n                <g [innerHTML]=\"leadingIcon()\"></g>\n              </svg>\n            }\n          } @else {\n            <span>{{ initial() }}</span>\n          }\n        </div>\n      } @else {\n        <div class=\"ui-card__avatar\" aria-hidden=\"true\">\n          {{ initial() }}\n        </div>\n      }\n\n      <div class=\"ui-card__text\">\n        <p class=\"ui-card__title\">{{ title() }}</p>\n        @if (subhead()) {\n          <p class=\"ui-card__subhead\">{{ subhead() }}</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"ui-card__trailing\">\n      <ng-content select=\"[slot=trailing]\" />\n    </div>\n\n    @if (showMedia()) {\n      <div class=\"ui-card__media\" [class.ui-card__media--empty]=\"!hasMedia()\">\n        @if (hasMedia()) {\n          @if (isMediaImage()) {\n            <img [src]=\"mediaIcon()\" [alt]=\"mediaAlt()\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n              <g [innerHTML]=\"mediaIcon()\"></g>\n            </svg>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ui-card__body\">\n    <ng-content />\n  </div>\n\n  <span class=\"ui-card__state-layer\" aria-hidden=\"true\"></span>\n  @if (state() === 'focused') {\n    <span class=\"ui-card__focus-indicator\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: [":host{display:block}:host(.lib-card-host--full-width){width:100%;min-width:0}.ui-card{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-radius:calc(var(--app-cards-outlined-enabled-container-outlined-card-container-shape, 12) * 1px);color:var(--app-pallete-scheme-surface-on-surface, #181c1e);box-sizing:border-box;cursor:pointer;transition:box-shadow .18s ease,background-color .18s ease,border-color .18s ease;position:relative;isolation:isolate}.ui-card__row{display:flex;flex-direction:row;align-items:stretch;flex:0 0 auto;position:relative;z-index:2}.ui-card__trailing{display:flex;align-items:center;padding:0 8px;gap:4px;flex:0 0 auto}.ui-card__trailing:empty{display:none}.ui-card__body{position:relative;z-index:2}.ui-card__body:empty{display:none}.ui-card:focus-visible{outline:none}.ui-card:focus-visible .ui-card__focus-indicator{display:block}.ui-card--outlined{border:0;outline:calc(var(--app-cards-outlined-enabled-outline-outlined-card-outline-width, 1) * 1px) solid var(--app-cards-outlined-enabled-outline-outlined-card-outline-color, #c3c7c9);outline-offset:-1px;background:var(--app-cards-outlined-enabled-container-outlined-card-container-color, #f7fafc)}.ui-card--elevated{border:0;background:var(--app-cards-elevated-enabled-container-elevated-card-container-color, #f1f4f6);box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--filled{border:0;background:var(--app-cards-filled-enabled-container-filled-card-container-color, #e0e3e5)}.ui-card--active{outline-color:var(--app-pallete-scheme-surface-outline-variant, #d4d7db);background:var(--app-pallete-scheme-surface-outline-variant, #d4d7db)}.ui-card--disabled{opacity:.7;cursor:not-allowed}.ui-card__content{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:16px;padding:16px}.ui-card__avatar{width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;background:var(--app-pallete-scheme-primary-primary, #e42313);color:var(--app-pallete-scheme-primary-on-primary, #fff);font-family:var(--app-typescale-title-medium-font, Heebo),sans-serif;font-size:1rem;font-weight:500;line-height:1.5rem;letter-spacing:.00625rem}.ui-card__leading{width:2.5rem;height:2.5rem;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.ui-card__leading--icon img,.ui-card__leading--icon svg{width:2.08331rem;height:2.08331rem;display:block}.ui-card__leading--icon svg{fill:currentColor}.ui-card__text{display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit}.ui-card__title,.ui-card__subhead{margin:0}.ui-card__title{font-family:var(--app-typescale-title-medium-font, Heebo),sans-serif;font-size:calc(var(--app-typescale-title-medium-size, 16) * 1px);font-weight:var(--app-typescale-title-medium-weight, 500);line-height:calc(var(--app-typescale-title-medium-line-height, 24) * 1px);letter-spacing:calc(var(--app-typescale-title-medium-tracking, .15) * 1px)}.ui-card--title-emphasized .ui-card__title{font-weight:var(--app-typescale-title-medium-weight-emphasized, 700)}.ui-card__subhead{font-family:var(--app-typescale-body-medium-font, Heebo),sans-serif;font-size:calc(var(--app-typescale-body-medium-size, 14) * 1px);font-weight:var(--app-typescale-body-medium-weight, 400);line-height:calc(var(--app-typescale-body-medium-line-height, 20) * 1px);letter-spacing:calc(var(--app-typescale-body-medium-tracking, .25) * 1px)}.ui-card__media{width:5rem;flex:0 0 5rem;display:inline-flex;align-items:center;justify-content:center;border-left:1px solid var(--app-pallete-scheme-surface-outline-variant, #c3c7c9);background:var(--app-schemes-surface-container-high, #ebe7e7)}.ui-card__media img,.ui-card__media svg{width:2.08331rem;height:2.08331rem;display:block}.ui-card__media svg{fill:var(--app-schemes-outline, #b5b5b5)}.ui-card__media--empty{opacity:.45}.ui-card__state-layer{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:transparent}.ui-card__focus-indicator{display:none;position:absolute;inset:-3px;border-radius:14px;border:3px solid var(--app-cards-outlined-focused-focus-indicator-outlined-card-focus-indicator-color, #5b5f61);pointer-events:none;z-index:3}.ui-card--state-focused .ui-card__focus-indicator{display:block}.ui-card--state-hovered .ui-card__state-layer,.ui-card:hover .ui-card__state-layer,.ui-card--state-focused .ui-card__state-layer,.ui-card--state-pressed .ui-card__state-layer,.ui-card--state-dragged .ui-card__state-layer{opacity:1}.ui-card--outlined.ui-card--state-hovered,.ui-card--outlined:hover{box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}.ui-card--outlined.ui-card--state-dragged{box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d}.ui-card--elevated.ui-card--state-hovered,.ui-card--elevated:hover{box-shadow:0 2px 6px 2px #00000026,0 1px 2px #0000004d}.ui-card--elevated.ui-card--state-pressed{box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--elevated.ui-card--state-dragged{box-shadow:0 6px 10px 4px #00000026,0 2px 3px #0000004d}.ui-card--filled.ui-card--state-hovered{box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--filled.ui-card--state-dragged{box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d}.ui-card--outlined.ui-card--state-hovered .ui-card__state-layer,.ui-card--outlined:hover .ui-card__state-layer{background:#181c1e14}.ui-card--outlined.ui-card--state-focused .ui-card__state-layer,.ui-card--outlined.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--outlined.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--elevated.ui-card--state-hovered .ui-card__state-layer,.ui-card--elevated:hover .ui-card__state-layer{background:#181c1e14}.ui-card--elevated.ui-card--state-focused .ui-card__state-layer,.ui-card--elevated.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--elevated.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--filled.ui-card--state-hovered .ui-card__state-layer,.ui-card--filled:hover .ui-card__state-layer{background:#181c1e14}.ui-card--filled.ui-card--state-focused .ui-card__state-layer,.ui-card--filled.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--filled.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--disabled .ui-card__state-layer{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.lib-card-host--full-width]': 'fullWidth()',
+                    }, template: "<div\n  [ngClass]=\"classes()\"\n  [style.width]=\"fullWidth() ? '100%' : width()\"\n  [style.min-width]=\"fullWidth() ? '0rem' : width()\"\n  [attr.aria-disabled]=\"disabled()\"\n  role=\"button\"\n  tabindex=\"0\"\n  (click)=\"onCardClick()\"\n  (keydown)=\"onCardKeydown($event)\"\n>\n  <div class=\"ui-card__row\" [style.min-height]=\"height()\">\n    <div class=\"ui-card__content\">\n      @if (leadingKind() === 'icon') {\n        <div\n          class=\"ui-card__leading ui-card__leading--icon\"\n          aria-hidden=\"true\"\n          [style.width]=\"leadingContainerSize()\"\n          [style.height]=\"leadingContainerSize()\"\n        >\n          @if (hasLeadingIcon()) {\n            @if (isLeadingImage()) {\n              <img [src]=\"leadingIcon()\" alt=\"\" [style.width]=\"leadingIconSize()\" [style.height]=\"leadingIconSize()\" />\n            } @else {\n              <svg\n                viewBox=\"0 0 24 24\"\n                [style.width]=\"leadingIconSize()\"\n                [style.height]=\"leadingIconSize()\"\n              >\n                <g [innerHTML]=\"leadingIcon()\"></g>\n              </svg>\n            }\n          } @else {\n            <span>{{ initial() }}</span>\n          }\n        </div>\n      } @else {\n        <div class=\"ui-card__avatar\" aria-hidden=\"true\">\n          {{ initial() }}\n        </div>\n      }\n\n      <div class=\"ui-card__text\">\n        <p class=\"ui-card__title\">{{ title() }}</p>\n        @if (subhead()) {\n          <p class=\"ui-card__subhead\">{{ subhead() }}</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"ui-card__trailing\">\n      <ng-content select=\"[slot=trailing]\" />\n    </div>\n\n    @if (showMedia()) {\n      <div class=\"ui-card__media\" [class.ui-card__media--empty]=\"!hasMedia()\">\n        @if (hasMedia()) {\n          @if (isMediaImage()) {\n            <img [src]=\"mediaIcon()\" [alt]=\"mediaAlt()\" />\n          } @else {\n            <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n              <g [innerHTML]=\"mediaIcon()\"></g>\n            </svg>\n          }\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"ui-card__body\">\n    <ng-content />\n  </div>\n\n  <span class=\"ui-card__state-layer\" aria-hidden=\"true\"></span>\n  @if (state() === 'focused') {\n    <span class=\"ui-card__focus-indicator\" aria-hidden=\"true\"></span>\n  }\n</div>\n", styles: [":host{display:block}:host(.lib-card-host--full-width){width:100%;min-width:0}.ui-card{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-radius:calc(var(--app-cards-outlined-enabled-container-outlined-card-container-shape, 12) * 1px);color:var(--app-pallete-scheme-surface-on-surface, #181c1e);box-sizing:border-box;cursor:pointer;transition:box-shadow .18s ease,background-color .18s ease,border-color .18s ease;position:relative;isolation:isolate}.ui-card__row{display:flex;flex-direction:row;align-items:stretch;flex:0 0 auto;position:relative;z-index:2}.ui-card__trailing{display:flex;align-items:center;padding:0 8px;gap:4px;flex:0 0 auto}.ui-card__trailing:empty{display:none}.ui-card__body{position:relative;z-index:2}.ui-card__body:empty{display:none}.ui-card:focus-visible{outline:none}.ui-card:focus-visible .ui-card__focus-indicator{display:block}.ui-card--outlined{border:0;outline:calc(var(--app-cards-outlined-enabled-outline-outlined-card-outline-width, 1) * 1px) solid var(--app-cards-outlined-enabled-outline-outlined-card-outline-color, #c3c7c9);outline-offset:-1px;background:var(--app-cards-outlined-enabled-container-outlined-card-container-color, #f7fafc)}.ui-card--elevated{border:0;background:var(--app-cards-elevated-enabled-container-elevated-card-container-color, #f1f4f6);box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--filled{border:0;background:var(--app-cards-filled-enabled-container-filled-card-container-color, #e0e3e5)}.ui-card--active{outline-color:var(--app-pallete-scheme-surface-outline-variant, #d4d7db);background:var(--app-pallete-scheme-surface-outline-variant, #d4d7db)}.ui-card--disabled{opacity:.7;cursor:not-allowed}.ui-card__content{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:16px;padding:16px}.ui-card__avatar{width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;background:var(--app-pallete-scheme-primary-primary, #e42313);color:var(--app-pallete-scheme-primary-on-primary, #fff);font-family:var(--app-typescale-title-medium-font, Heebo),sans-serif;font-size:1rem;font-weight:500;line-height:1.5rem;letter-spacing:.00625rem}.ui-card__leading{width:2.5rem;height:2.5rem;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.ui-card__leading--icon img,.ui-card__leading--icon svg{width:2.08331rem;height:2.08331rem;display:block}.ui-card__leading--icon svg{fill:currentColor}.ui-card__text{display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit}.ui-card__title,.ui-card__subhead{margin:0}.ui-card__title{font-family:var(--app-typescale-title-medium-font, Heebo),sans-serif;font-size:calc(var(--app-typescale-title-medium-size, 16) * 1px);font-weight:var(--app-typescale-title-medium-weight, 500);line-height:calc(var(--app-typescale-title-medium-line-height, 24) * 1px);letter-spacing:calc(var(--app-typescale-title-medium-tracking, .15) * 1px)}.ui-card--title-emphasized .ui-card__title{font-weight:var(--app-typescale-title-medium-weight-emphasized, 700)}.ui-card__subhead{font-family:var(--app-typescale-body-medium-font, Heebo),sans-serif;font-size:calc(var(--app-typescale-body-medium-size, 14) * 1px);font-weight:var(--app-typescale-body-medium-weight, 400);line-height:calc(var(--app-typescale-body-medium-line-height, 20) * 1px);letter-spacing:calc(var(--app-typescale-body-medium-tracking, .25) * 1px)}.ui-card__media{width:5rem;flex:0 0 5rem;display:inline-flex;align-items:center;justify-content:center;border-left:1px solid var(--app-pallete-scheme-surface-outline-variant, #c3c7c9);background:var(--app-schemes-surface-container-high, #ebe7e7)}.ui-card__media img,.ui-card__media svg{width:2.08331rem;height:2.08331rem;display:block}.ui-card__media svg{fill:var(--app-schemes-outline, #b5b5b5)}.ui-card__media--empty{opacity:.45}.ui-card__state-layer{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;background:transparent}.ui-card__focus-indicator{display:none;position:absolute;inset:-3px;border-radius:14px;border:3px solid var(--app-cards-outlined-focused-focus-indicator-outlined-card-focus-indicator-color, #5b5f61);pointer-events:none;z-index:3}.ui-card--state-focused .ui-card__focus-indicator{display:block}.ui-card--state-hovered .ui-card__state-layer,.ui-card:hover .ui-card__state-layer,.ui-card--state-focused .ui-card__state-layer,.ui-card--state-pressed .ui-card__state-layer,.ui-card--state-dragged .ui-card__state-layer{opacity:1}.ui-card--outlined.ui-card--state-hovered,.ui-card--outlined:hover{box-shadow:0 1px 2px #0000004d,0 1px 3px 1px #00000026}.ui-card--outlined.ui-card--state-dragged{box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d}.ui-card--elevated.ui-card--state-hovered,.ui-card--elevated:hover{box-shadow:0 2px 6px 2px #00000026,0 1px 2px #0000004d}.ui-card--elevated.ui-card--state-pressed{box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--elevated.ui-card--state-dragged{box-shadow:0 6px 10px 4px #00000026,0 2px 3px #0000004d}.ui-card--filled.ui-card--state-hovered{box-shadow:0 1px 3px 1px #00000026,0 1px 2px #0000004d}.ui-card--filled.ui-card--state-dragged{box-shadow:0 4px 8px 3px #00000026,0 1px 3px #0000004d}.ui-card--outlined.ui-card--state-hovered .ui-card__state-layer,.ui-card--outlined:hover .ui-card__state-layer{background:#181c1e14}.ui-card--outlined.ui-card--state-focused .ui-card__state-layer,.ui-card--outlined.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--outlined.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--elevated.ui-card--state-hovered .ui-card__state-layer,.ui-card--elevated:hover .ui-card__state-layer{background:#181c1e14}.ui-card--elevated.ui-card--state-focused .ui-card__state-layer,.ui-card--elevated.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--elevated.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--filled.ui-card--state-hovered .ui-card__state-layer,.ui-card--filled:hover .ui-card__state-layer{background:#181c1e14}.ui-card--filled.ui-card--state-focused .ui-card__state-layer,.ui-card--filled.ui-card--state-pressed .ui-card__state-layer{background:#181c1e1a}.ui-card--filled.ui-card--state-dragged .ui-card__state-layer{background:#181c1e29}.ui-card--disabled .ui-card__state-layer{display:none}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subhead: [{ type: i0.Input, args: [{ isSignal: true, alias: "subhead", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], leadingKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingKind", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], leadingContainerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingContainerSize", required: false }] }], leadingIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconSize", required: false }] }], mediaIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaIcon", required: false }] }], mediaAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "mediaAlt", required: false }] }], showMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMedia", required: false }] }], avatarText: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarText", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
+const CREDIX_DATE_FORMATS$1 = {
+    parse: { dateInput: { month: 'short', day: 'numeric', year: 'numeric' } },
+    display: {
+        dateInput: { day: '2-digit', month: '2-digit', year: 'numeric' },
+        monthYearLabel: { month: 'short', year: 'numeric' },
+        dateA11yLabel: { day: 'numeric', month: 'long', year: 'numeric' },
+        monthYearA11yLabel: { month: 'long', year: 'numeric' },
+    },
+};
+class LibDatePickerComponent {
+    value = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    dateChange = output();
+    _selected = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => { this._selected.set(this.value()); });
+    }
+    _displayValue = computed(() => this.value() ?? this._selected(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    _onChange(event) {
+        if (event.value) {
+            this._selected.set(event.value);
+            this.dateChange.emit(event.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibDatePickerComponent, isStandalone: true, selector: "lib-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [{ provide: MAT_DATE_FORMATS, useValue: CREDIX_DATE_FORMATS$1 }], ngImport: i0, template: "<mat-form-field class=\"dp-field\" appearance=\"outline\">\n  <mat-label>Date</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [value]=\"_displayValue()\"\n    [disabled]=\"disabled()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    (dateChange)=\"_onChange($event)\"\n    placeholder=\"DD/MM/YYYY\"\n  >\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <span class=\"material-symbols-outlined\" matDatepickerToggleIcon>calendar_today</span>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button matDatepickerCancel class=\"dp-btn-cancel\">Cancel</button>\n      <button mat-button matDatepickerApply  class=\"dp-btn-ok\">OK</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n  <mat-hint>DD/MM/YYYY</mat-hint>\n</mat-form-field>\n", styles: [":host{display:inline-block;--dp-w: var(--app-date-pickers-docked-enabled-container-container-width, 360);--dp-primary: var(--app-date-pickers-docked-enabled-container-date-selected-container-color, #E42313);--dp-on-primary: var(--app-date-pickers-docked-enabled-label-text-date-selected-label-text-color, #FFFFFF)}.dp-field{width:calc(var(--dp-w) * 1px);font-family:var(--app-date-pickers-docked-enabled-label-text-date-label-text-font, Heebo),sans-serif}.dp-field.mat-mdc-form-field{--mdc-outlined-text-field-label-text-font: inherit;--mdc-outlined-text-field-input-text-font: inherit}.dp-field .material-symbols-outlined{font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i3$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$2.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$2.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-picker', standalone: true, imports: [
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatDatepickerActions,
+                        MatDatepickerApply,
+                        MatDatepickerCancel,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MAT_DATE_FORMATS, useValue: CREDIX_DATE_FORMATS$1 }], template: "<mat-form-field class=\"dp-field\" appearance=\"outline\">\n  <mat-label>Date</mat-label>\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [value]=\"_displayValue()\"\n    [disabled]=\"disabled()\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n    (dateChange)=\"_onChange($event)\"\n    placeholder=\"DD/MM/YYYY\"\n  >\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <span class=\"material-symbols-outlined\" matDatepickerToggleIcon>calendar_today</span>\n  </mat-datepicker-toggle>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button matDatepickerCancel class=\"dp-btn-cancel\">Cancel</button>\n      <button mat-button matDatepickerApply  class=\"dp-btn-ok\">OK</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n  <mat-hint>DD/MM/YYYY</mat-hint>\n</mat-form-field>\n", styles: [":host{display:inline-block;--dp-w: var(--app-date-pickers-docked-enabled-container-container-width, 360);--dp-primary: var(--app-date-pickers-docked-enabled-container-date-selected-container-color, #E42313);--dp-on-primary: var(--app-date-pickers-docked-enabled-label-text-date-selected-label-text-color, #FFFFFF)}.dp-field{width:calc(var(--dp-w) * 1px);font-family:var(--app-date-pickers-docked-enabled-label-text-date-label-text-font, Heebo),sans-serif}.dp-field.mat-mdc-form-field{--mdc-outlined-text-field-label-text-font: inherit;--mdc-outlined-text-field-input-text-font: inherit}.dp-field .material-symbols-outlined{font-size:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+
+const CREDIX_DATE_FORMATS = {
+    parse: { dateInput: { month: 'short', day: 'numeric', year: 'numeric' } },
+    display: {
+        dateInput: { day: '2-digit', month: '2-digit', year: 'numeric' },
+        monthYearLabel: { month: 'short', year: 'numeric' },
+        dateA11yLabel: { day: 'numeric', month: 'long', year: 'numeric' },
+        monthYearA11yLabel: { month: 'long', year: 'numeric' },
+    },
+};
+class LibDateRangePickerComponent {
+    startDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
+    endDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    rangeChange = output();
+    _range = new FormGroup({
+        start: new FormControl(null),
+        end: new FormControl(null),
+    });
+    // True when the user clicked Apply (not Cancel/outside-close)
+    _applyPending = false;
+    constructor() {
+        effect(() => {
+            this._range.setValue({ start: this.startDate(), end: this.endDate() }, { emitEvent: false });
+        });
+        effect(() => {
+            if (this.disabled()) {
+                this._range.disable({ emitEvent: false });
+            }
+            else {
+                this._range.enable({ emitEvent: false });
+            }
+        });
+    }
+    _markApply() {
+        this._applyPending = true;
+    }
+    _onClosed() {
+        if (this._applyPending) {
+            const start = this._range.controls.start.value;
+            const end = this._range.controls.end.value;
+            if (start && end) {
+                this.rangeChange.emit({ start, end });
+            }
+        }
+        else {
+            // Cancel or outside-click: reset pending selection to last committed values
+            this._range.setValue({ start: this.startDate(), end: this.endDate() }, { emitEvent: false });
+        }
+        this._applyPending = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LibDateRangePickerComponent, isStandalone: true, selector: "lib-date-range-picker", inputs: { startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, providers: [{ provide: MAT_DATE_FORMATS, useValue: CREDIX_DATE_FORMATS }], ngImport: i0, template: "<mat-form-field class=\"dp-range-field\" appearance=\"outline\">\n  <mat-label>Date range</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"_range\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n  >\n    <input matStartDate formControlName=\"start\" placeholder=\"DD/MM/YYYY\">\n    <input matEndDate   formControlName=\"end\"   placeholder=\"DD/MM/YYYY\">\n  </mat-date-range-input>\n  <mat-hint>DD/MM/YYYY \u2013 DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <span class=\"material-symbols-outlined\" matDatepickerToggleIcon>calendar_today</span>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker (closed)=\"_onClosed()\">\n    <mat-date-range-picker-actions>\n      <button mat-button matDateRangePickerCancel class=\"dp-btn-cancel\">Cancel</button>\n      <button mat-button matDateRangePickerApply  class=\"dp-btn-ok\" (click)=\"_markApply()\">Apply</button>\n    </mat-date-range-picker-actions>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: [":host{display:inline-block}.dp-range-field{width:100%;font-family:var(--date-pickers-docked-enabled-label-text-date-label-text-font, Heebo),sans-serif}.dp-range-field.mat-mdc-form-field{--mdc-outlined-text-field-label-text-font: inherit;--mdc-outlined-text-field-input-text-font: inherit}.dp-range-field .material-symbols-outlined{font-size:20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$2.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$2.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-range-picker', standalone: true, imports: [
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatDatepickerActions,
+                        MatDatepickerApply,
+                        MatDatepickerCancel,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MAT_DATE_FORMATS, useValue: CREDIX_DATE_FORMATS }], template: "<mat-form-field class=\"dp-range-field\" appearance=\"outline\">\n  <mat-label>Date range</mat-label>\n  <mat-date-range-input\n    [rangePicker]=\"picker\"\n    [formGroup]=\"_range\"\n    [min]=\"min()\"\n    [max]=\"max()\"\n  >\n    <input matStartDate formControlName=\"start\" placeholder=\"DD/MM/YYYY\">\n    <input matEndDate   formControlName=\"end\"   placeholder=\"DD/MM/YYYY\">\n  </mat-date-range-input>\n  <mat-hint>DD/MM/YYYY \u2013 DD/MM/YYYY</mat-hint>\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n    <span class=\"material-symbols-outlined\" matDatepickerToggleIcon>calendar_today</span>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker (closed)=\"_onClosed()\">\n    <mat-date-range-picker-actions>\n      <button mat-button matDateRangePickerCancel class=\"dp-btn-cancel\">Cancel</button>\n      <button mat-button matDateRangePickerApply  class=\"dp-btn-ok\" (click)=\"_markApply()\">Apply</button>\n    </mat-date-range-picker-actions>\n  </mat-date-range-picker>\n</mat-form-field>\n", styles: [":host{display:inline-block}.dp-range-field{width:100%;font-family:var(--date-pickers-docked-enabled-label-text-date-label-text-font, Heebo),sans-serif}.dp-range-field.mat-mdc-form-field{--mdc-outlined-text-field-label-text-font: inherit;--mdc-outlined-text-field-input-text-font: inherit}.dp-range-field .material-symbols-outlined{font-size:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
+
+class LibChipComponent {
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    selected = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    removable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    removed = output();
+    classes = computed(() => ({
+        'lib-chip--filled': this.variant() === 'filled',
+        'lib-chip--outlined': this.variant() === 'outlined',
+        'lib-chip--small': this.size() === 'small',
+        'lib-chip--medium': this.size() === 'medium',
+        'lib-chip--selected': this.selected(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onRemove() {
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LibChipComponent, isStandalone: true, selector: "lib-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, ngImport: i0, template: "<mat-chip\n  [ngClass]=\"classes()\"\n  [highlighted]=\"selected()\"\n  [disabled]=\"disabled()\"\n  [removable]=\"removable()\"\n  (removed)=\"onRemove()\"\n>\n  @if (icon()) {\n    <mat-icon matChipAvatar>{{ icon() }}</mat-icon>\n  }\n  {{ label() }}\n  <ng-content />\n  @if (removable()) {\n    <mat-icon matChipRemove>cancel</mat-icon>\n  }\n</mat-chip>\n", styles: [":host{display:inline-block}.lib-chip--outlined,.lib-chip--filled{--mdc-chip-container-shape-radius: calc(var(--chips-wip-filter-enabled-container-filter-chip-container-shape, 8) * 1px);--mdc-chip-label-text-color: var(--chips-wip-filter-enabled-label-text-filter-chip-unselected-label-text-color, #434749);--mat-chip-selected-label-text-color: var(--chips-wip-filter-enabled-label-text-filter-chip-selected-label-text-color, #ffffff);--mdc-chip-label-text-font: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-font, \"Heebo\");--mdc-chip-label-text-size: var(--chips-wip-filter-enabled-label-text-silter-chip-label-text-size, 14px);--mdc-chip-label-text-weight: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-weight, 500);--mdc-chip-label-text-tracking: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-tracking, .1px);--mdc-chip-label-text-line-height: calc(var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-line-height, 20) * 1px);--mat-chip-with-icon-leading-icon-size: calc(var(--chips-wip-filter-enabled-icon-filter-chip-with-icon-icon-size, 18) * 1px);--mat-chip-with-icon-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-leading-icon-unselected-leading-icon-color, #e42313);--mat-chip-trailing-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-trailing-icon-unselected-trailing-icon-color, #434749);--mat-chip-selected-trailing-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-trailing-icon-selected-trailing-icon-color, #ffffff)}.lib-chip--outlined{--mdc-chip-elevated-container-color: transparent;--mdc-chip-outline-width: calc(var(--chips-wip-filter-enabled-container-filter-chip-unselected-outline-width, 1) * 1px);--mdc-chip-outline-color: var(--chips-wip-filter-enabled-container-filter-chip-unselected-outline-color, #c3c7c9)}.lib-chip--filled{--mdc-chip-elevated-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #e0e3e5);--mdc-chip-outline-width: 0}.lib-chip--selected{--mdc-chip-elevated-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #5b5f61);--mat-chip-elevated-selected-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #5b5f61);--mdc-chip-outline-width: 0;--mat-chip-with-icon-icon-color: var(--chips-wip-filter-enabled-label-text-filter-chip-selected-label-text-color, #ffffff)}mat-icon[matChipAvatar]{border-radius:0;overflow:visible;width:var(--mat-chip-with-icon-leading-icon-size, 18px);height:var(--mat-chip-with-icon-leading-icon-size, 18px);font-size:var(--mat-chip-with-icon-leading-icon-size, 18px);display:inline-flex;align-items:center;justify-content:center;line-height:1}.lib-chip--small{--mdc-chip-container-height: 24px;--mdc-chip-label-text-size: 12px}.lib-chip--medium{--mdc-chip-container-height: calc(var(--chips-wip-filter-enabled-container-filter-chip-container-height, 32) * 1px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$9.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i1$9.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i1$9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-chip', standalone: true, imports: [MatChipsModule, MatIconModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-chip\n  [ngClass]=\"classes()\"\n  [highlighted]=\"selected()\"\n  [disabled]=\"disabled()\"\n  [removable]=\"removable()\"\n  (removed)=\"onRemove()\"\n>\n  @if (icon()) {\n    <mat-icon matChipAvatar>{{ icon() }}</mat-icon>\n  }\n  {{ label() }}\n  <ng-content />\n  @if (removable()) {\n    <mat-icon matChipRemove>cancel</mat-icon>\n  }\n</mat-chip>\n", styles: [":host{display:inline-block}.lib-chip--outlined,.lib-chip--filled{--mdc-chip-container-shape-radius: calc(var(--chips-wip-filter-enabled-container-filter-chip-container-shape, 8) * 1px);--mdc-chip-label-text-color: var(--chips-wip-filter-enabled-label-text-filter-chip-unselected-label-text-color, #434749);--mat-chip-selected-label-text-color: var(--chips-wip-filter-enabled-label-text-filter-chip-selected-label-text-color, #ffffff);--mdc-chip-label-text-font: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-font, \"Heebo\");--mdc-chip-label-text-size: var(--chips-wip-filter-enabled-label-text-silter-chip-label-text-size, 14px);--mdc-chip-label-text-weight: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-weight, 500);--mdc-chip-label-text-tracking: var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-tracking, .1px);--mdc-chip-label-text-line-height: calc(var(--chips-wip-filter-enabled-label-text-filter-chip-label-text-line-height, 20) * 1px);--mat-chip-with-icon-leading-icon-size: calc(var(--chips-wip-filter-enabled-icon-filter-chip-with-icon-icon-size, 18) * 1px);--mat-chip-with-icon-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-leading-icon-unselected-leading-icon-color, #e42313);--mat-chip-trailing-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-trailing-icon-unselected-trailing-icon-color, #434749);--mat-chip-selected-trailing-icon-color: var(--chips-wip-filter-enabled-icon-filter-chip-with-trailing-icon-selected-trailing-icon-color, #ffffff)}.lib-chip--outlined{--mdc-chip-elevated-container-color: transparent;--mdc-chip-outline-width: calc(var(--chips-wip-filter-enabled-container-filter-chip-unselected-outline-width, 1) * 1px);--mdc-chip-outline-color: var(--chips-wip-filter-enabled-container-filter-chip-unselected-outline-color, #c3c7c9)}.lib-chip--filled{--mdc-chip-elevated-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #e0e3e5);--mdc-chip-outline-width: 0}.lib-chip--selected{--mdc-chip-elevated-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #5b5f61);--mat-chip-elevated-selected-container-color: var(--chips-wip-filter-enabled-container-filter-chip-elevated-selected-container-color, #5b5f61);--mdc-chip-outline-width: 0;--mat-chip-with-icon-icon-color: var(--chips-wip-filter-enabled-label-text-filter-chip-selected-label-text-color, #ffffff)}mat-icon[matChipAvatar]{border-radius:0;overflow:visible;width:var(--mat-chip-with-icon-leading-icon-size, 18px);height:var(--mat-chip-with-icon-leading-icon-size, 18px);font-size:var(--mat-chip-with-icon-leading-icon-size, 18px);display:inline-flex;align-items:center;justify-content:center;line-height:1}.lib-chip--small{--mdc-chip-container-height: 24px;--mdc-chip-label-text-size: 12px}.lib-chip--medium{--mdc-chip-container-height: calc(var(--chips-wip-filter-enabled-container-filter-chip-container-height, 32) * 1px)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+class ConfirmModal {
+    dialogRef = inject(DialogRef);
+    data = inject(DIALOG_DATA);
+    listItems = signal(this.data.listItems ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
+    labelButtonCancel = this.data.labelButtonCancel ?? 'Cancelar';
+    supportingText = this.data.description ?? this.data.content ?? this.data.reference ?? '';
+    isListVariant = this.data.variant === 'list' || this.data.variant === 'scrollable-list';
+    isScrollableList = this.data.variant === 'scrollable-list';
+    topIconName = this.data.topIconName ?? 'check_box';
+    toggleListItem(itemId) {
+        this.listItems.update((items) => items.map((item) => (item.id === itemId ? { ...item, selected: !item.selected } : item)));
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    onConfirm() {
+        this.dialogRef.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ConfirmModal, isStandalone: true, selector: "lib-confirm", ngImport: i0, template: "<div\r\n  class=\"confirm-modal\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  aria-labelledby=\"confirm-modal-title\"\r\n  [attr.aria-describedby]=\"supportingText || isListVariant ? 'confirm-modal-desc' : null\"\r\n>\r\n  <div class=\"confirm-modal__container\">\r\n    @if (data.showTopIcon) {\r\n      <div class=\"confirm-modal__top-icon\" aria-hidden=\"true\">\r\n        <mat-icon>{{ topIconName }}</mat-icon>\r\n      </div>\r\n    }\r\n\r\n    <header class=\"confirm-modal__header\">\r\n      <h2 id=\"confirm-modal-title\" class=\"confirm-modal__title\">{{ data.title }}</h2>\r\n      @if (supportingText) {\r\n        <p id=\"confirm-modal-desc\" class=\"confirm-modal__reference\">{{ supportingText }}</p>\r\n      }\r\n    </header>\r\n\r\n    @if (isListVariant) {\r\n      <div\r\n        class=\"confirm-modal__list\"\r\n        [class.confirm-modal__list--scrollable]=\"isScrollableList\"\r\n        [attr.id]=\"!supportingText ? 'confirm-modal-desc' : null\"\r\n      >\r\n        @for (item of listItems(); track item.id) {\r\n          <button type=\"button\" class=\"confirm-modal__list-item\" (click)=\"toggleListItem(item.id)\">\r\n            <mat-icon class=\"confirm-modal__list-item-leading-icon\" aria-hidden=\"true\">error_outline</mat-icon>\r\n            <span class=\"confirm-modal__list-item-label\">{{ item.label }}</span>\r\n            @if (item.amount) {\r\n              <span class=\"confirm-modal__list-item-amount\">{{ item.amount }}</span>\r\n            }\r\n            <mat-icon class=\"confirm-modal__list-item-check\" aria-hidden=\"true\">\r\n              {{ item.selected ? 'check_box' : 'check_box_outline_blank' }}\r\n            </mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"confirm-modal__actions\">\r\n      <lib-button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        (click)=\"onCancel()\"\r\n        [label]=\"labelButtonCancel\"\r\n        contentAlign=\"center\"\r\n      ></lib-button>\r\n      <lib-button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        (click)=\"onConfirm()\"\r\n        [label]=\"data.labelButtonConfirm\"\r\n        contentAlign=\"center\"\r\n      ></lib-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".confirm-modal{--confirm-container-color: var(--app-dialogs-basic-enabled-container-dialog-container-color, #f7fafc);--confirm-container-elevation: var(--app-dialogs-basic-enabled-container-dialog-container-elevation, 6);--confirm-container-shape: var(--app-dialogs-basic-enabled-container-dialog-container-shape, 28);--confirm-headline-color: var(--app-dialogs-basic-enabled-headline-dialog-headline-color, #181c1e);--confirm-headline-font: var(--app-dialogs-basic-enabled-headline-dialog-headline-font, Heebo);--confirm-headline-size: var(--app-dialogs-basic-enabled-headline-dialog-headline-size, 24);--confirm-headline-weight: var(--app-dialogs-basic-enabled-headline-dialog-headline-weight, 400);--confirm-headline-line-height: var(--app-dialogs-basic-enabled-headline-dialog-headline-line-height, 32);--confirm-supporting-color: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-color, #434749);--confirm-supporting-font: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-font, Heebo);--confirm-supporting-size: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-size, 14);--confirm-supporting-weight: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-weight, 400);--confirm-supporting-line-height: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-line-height, 20);--confirm-action-color: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-color, #e42313);--confirm-action-font: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-font, Heebo);--confirm-action-size: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-size, 14);--confirm-action-weight: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-weight, 500);--confirm-primary: var(--app-colors-rojo-primary-rojo-50, #e42313);--confirm-primary-hover: var(--app-colors-rojo-primary-rojo-40, #bf0600);--confirm-primary-on: var(--app-colors-rojo-primary-rojo-100, #ffffff);--confirm-btn-shape: var(--app-shape-large, 16);display:flex;width:100%;background:var(--confirm-container-color);border-radius:calc(var(--confirm-container-shape) * 1px);box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;min-width:280px;max-width:560px}.confirm-modal__container{display:flex;padding:1.5rem 1.5rem 1.25rem;flex-direction:column;align-items:flex-start;gap:1.25rem;align-self:stretch;width:100%}.confirm-modal__top-icon{width:100%;display:flex;justify-content:center;color:#5f6368}.confirm-modal__top-icon .mat-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.confirm-modal__header{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;align-self:stretch;width:100%}.confirm-modal__title{align-self:stretch;color:var(--confirm-headline-color);font-family:var(--confirm-headline-font),var(--app-font-type-brand, Heebo),sans-serif;font-size:calc(var(--confirm-headline-size) * 1px);font-weight:var(--confirm-headline-weight);line-height:calc(var(--confirm-headline-line-height) * 1px);text-align:start;margin:0}.confirm-modal__reference,.confirm-modal__content{align-self:stretch;width:100%;color:var(--confirm-supporting-color);font-family:var(--confirm-supporting-font),var(--app-font-type-plain, Heebo),sans-serif;font-size:calc(var(--confirm-supporting-size) * 1px);font-weight:var(--confirm-supporting-weight);line-height:calc(var(--confirm-supporting-line-height) * 1px);text-align:start;margin:0}.confirm-modal__list{width:100%;border-top:1px solid #c4c7c5;border-bottom:1px solid #c4c7c5}.confirm-modal__list--scrollable{max-height:14rem;overflow-y:auto}.confirm-modal__list-item{width:100%;display:grid;grid-template-columns:2.5rem 1fr auto auto;align-items:center;gap:.75rem;border:0;border-bottom:1px solid #c4c7c5;background:transparent;padding:.75rem 0;text-align:left;cursor:pointer}.confirm-modal__list-item:last-child{border-bottom:0}.confirm-modal__list-item-leading-icon{color:#1f2328;width:1.25rem;height:1.25rem;font-size:1.25rem}.confirm-modal__list-item-label{color:#1d1b20;font-size:1.125rem;line-height:1.5rem;font-weight:400}.confirm-modal__list-item-amount{color:#5f6368;font-size:.75rem;line-height:1rem}.confirm-modal__list-item-check{color:#1f2328;width:1.25rem;height:1.25rem;font-size:1.25rem}.confirm-modal__actions{display:flex;flex-direction:row;align-items:flex-end;align-self:stretch;width:100%;min-width:0;justify-content:flex-end;gap:.5rem}.confirm-modal__actions>*{display:flex;width:auto;align-self:flex-end}.confirm-modal__btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;min-width:120px;font-family:var(--confirm-action-font),var(--app-font-type-brand, Heebo),sans-serif;font-size:calc(var(--confirm-action-size) * 1px);font-weight:var(--confirm-action-weight);line-height:1.25;border-radius:calc(var(--confirm-btn-shape) * 1px);border:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;box-shadow:none;outline:none}.confirm-modal__btn:focus-visible{outline:2px solid var(--confirm-primary);outline-offset:2px}.confirm-modal__btn--cancel{flex:1;max-width:180px;background:var(--confirm-container-color);color:var(--confirm-action-color);border:1px solid var(--confirm-action-color)}.confirm-modal__btn--cancel:hover,.confirm-modal__btn--cancel:focus,.confirm-modal__btn--cancel:active{background:var(--confirm-container-color);color:var(--confirm-primary-hover);border-color:var(--confirm-primary-hover)}.confirm-modal__btn--confirm{flex:1;max-width:180px;background:var(--confirm-primary);color:var(--confirm-primary-on)}.confirm-modal__btn--confirm:hover,.confirm-modal__btn--confirm:focus,.confirm-modal__btn--confirm:active{background:var(--confirm-primary-hover);color:var(--confirm-primary-on)}\n"], dependencies: [{ kind: "component", type: LibButtonComponent, selector: "lib-button", inputs: ["size", "disabled", "type", "fullWidth", "variant", "shape", "toggle", "selected", "label", "icon", "iconPosition", "contentAlign", "labelClass", "pressed", "debugPadding"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-confirm', imports: [LibButtonComponent, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"confirm-modal\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  aria-labelledby=\"confirm-modal-title\"\r\n  [attr.aria-describedby]=\"supportingText || isListVariant ? 'confirm-modal-desc' : null\"\r\n>\r\n  <div class=\"confirm-modal__container\">\r\n    @if (data.showTopIcon) {\r\n      <div class=\"confirm-modal__top-icon\" aria-hidden=\"true\">\r\n        <mat-icon>{{ topIconName }}</mat-icon>\r\n      </div>\r\n    }\r\n\r\n    <header class=\"confirm-modal__header\">\r\n      <h2 id=\"confirm-modal-title\" class=\"confirm-modal__title\">{{ data.title }}</h2>\r\n      @if (supportingText) {\r\n        <p id=\"confirm-modal-desc\" class=\"confirm-modal__reference\">{{ supportingText }}</p>\r\n      }\r\n    </header>\r\n\r\n    @if (isListVariant) {\r\n      <div\r\n        class=\"confirm-modal__list\"\r\n        [class.confirm-modal__list--scrollable]=\"isScrollableList\"\r\n        [attr.id]=\"!supportingText ? 'confirm-modal-desc' : null\"\r\n      >\r\n        @for (item of listItems(); track item.id) {\r\n          <button type=\"button\" class=\"confirm-modal__list-item\" (click)=\"toggleListItem(item.id)\">\r\n            <mat-icon class=\"confirm-modal__list-item-leading-icon\" aria-hidden=\"true\">error_outline</mat-icon>\r\n            <span class=\"confirm-modal__list-item-label\">{{ item.label }}</span>\r\n            @if (item.amount) {\r\n              <span class=\"confirm-modal__list-item-amount\">{{ item.amount }}</span>\r\n            }\r\n            <mat-icon class=\"confirm-modal__list-item-check\" aria-hidden=\"true\">\r\n              {{ item.selected ? 'check_box' : 'check_box_outline_blank' }}\r\n            </mat-icon>\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    <div class=\"confirm-modal__actions\">\r\n      <lib-button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        (click)=\"onCancel()\"\r\n        [label]=\"labelButtonCancel\"\r\n        contentAlign=\"center\"\r\n      ></lib-button>\r\n      <lib-button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        (click)=\"onConfirm()\"\r\n        [label]=\"data.labelButtonConfirm\"\r\n        contentAlign=\"center\"\r\n      ></lib-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".confirm-modal{--confirm-container-color: var(--app-dialogs-basic-enabled-container-dialog-container-color, #f7fafc);--confirm-container-elevation: var(--app-dialogs-basic-enabled-container-dialog-container-elevation, 6);--confirm-container-shape: var(--app-dialogs-basic-enabled-container-dialog-container-shape, 28);--confirm-headline-color: var(--app-dialogs-basic-enabled-headline-dialog-headline-color, #181c1e);--confirm-headline-font: var(--app-dialogs-basic-enabled-headline-dialog-headline-font, Heebo);--confirm-headline-size: var(--app-dialogs-basic-enabled-headline-dialog-headline-size, 24);--confirm-headline-weight: var(--app-dialogs-basic-enabled-headline-dialog-headline-weight, 400);--confirm-headline-line-height: var(--app-dialogs-basic-enabled-headline-dialog-headline-line-height, 32);--confirm-supporting-color: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-color, #434749);--confirm-supporting-font: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-font, Heebo);--confirm-supporting-size: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-size, 14);--confirm-supporting-weight: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-weight, 400);--confirm-supporting-line-height: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-line-height, 20);--confirm-action-color: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-color, #e42313);--confirm-action-font: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-font, Heebo);--confirm-action-size: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-size, 14);--confirm-action-weight: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-weight, 500);--confirm-primary: var(--app-colors-rojo-primary-rojo-50, #e42313);--confirm-primary-hover: var(--app-colors-rojo-primary-rojo-40, #bf0600);--confirm-primary-on: var(--app-colors-rojo-primary-rojo-100, #ffffff);--confirm-btn-shape: var(--app-shape-large, 16);display:flex;width:100%;background:var(--confirm-container-color);border-radius:calc(var(--confirm-container-shape) * 1px);box-shadow:0 1px 3px #0000004d,0 4px 8px 3px #00000026;min-width:280px;max-width:560px}.confirm-modal__container{display:flex;padding:1.5rem 1.5rem 1.25rem;flex-direction:column;align-items:flex-start;gap:1.25rem;align-self:stretch;width:100%}.confirm-modal__top-icon{width:100%;display:flex;justify-content:center;color:#5f6368}.confirm-modal__top-icon .mat-icon{width:1.5rem;height:1.5rem;font-size:1.5rem}.confirm-modal__header{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;align-self:stretch;width:100%}.confirm-modal__title{align-self:stretch;color:var(--confirm-headline-color);font-family:var(--confirm-headline-font),var(--app-font-type-brand, Heebo),sans-serif;font-size:calc(var(--confirm-headline-size) * 1px);font-weight:var(--confirm-headline-weight);line-height:calc(var(--confirm-headline-line-height) * 1px);text-align:start;margin:0}.confirm-modal__reference,.confirm-modal__content{align-self:stretch;width:100%;color:var(--confirm-supporting-color);font-family:var(--confirm-supporting-font),var(--app-font-type-plain, Heebo),sans-serif;font-size:calc(var(--confirm-supporting-size) * 1px);font-weight:var(--confirm-supporting-weight);line-height:calc(var(--confirm-supporting-line-height) * 1px);text-align:start;margin:0}.confirm-modal__list{width:100%;border-top:1px solid #c4c7c5;border-bottom:1px solid #c4c7c5}.confirm-modal__list--scrollable{max-height:14rem;overflow-y:auto}.confirm-modal__list-item{width:100%;display:grid;grid-template-columns:2.5rem 1fr auto auto;align-items:center;gap:.75rem;border:0;border-bottom:1px solid #c4c7c5;background:transparent;padding:.75rem 0;text-align:left;cursor:pointer}.confirm-modal__list-item:last-child{border-bottom:0}.confirm-modal__list-item-leading-icon{color:#1f2328;width:1.25rem;height:1.25rem;font-size:1.25rem}.confirm-modal__list-item-label{color:#1d1b20;font-size:1.125rem;line-height:1.5rem;font-weight:400}.confirm-modal__list-item-amount{color:#5f6368;font-size:.75rem;line-height:1rem}.confirm-modal__list-item-check{color:#1f2328;width:1.25rem;height:1.25rem;font-size:1.25rem}.confirm-modal__actions{display:flex;flex-direction:row;align-items:flex-end;align-self:stretch;width:100%;min-width:0;justify-content:flex-end;gap:.5rem}.confirm-modal__actions>*{display:flex;width:auto;align-self:flex-end}.confirm-modal__btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.5rem;min-width:120px;font-family:var(--confirm-action-font),var(--app-font-type-brand, Heebo),sans-serif;font-size:calc(var(--confirm-action-size) * 1px);font-weight:var(--confirm-action-weight);line-height:1.25;border-radius:calc(var(--confirm-btn-shape) * 1px);border:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;box-shadow:none;outline:none}.confirm-modal__btn:focus-visible{outline:2px solid var(--confirm-primary);outline-offset:2px}.confirm-modal__btn--cancel{flex:1;max-width:180px;background:var(--confirm-container-color);color:var(--confirm-action-color);border:1px solid var(--confirm-action-color)}.confirm-modal__btn--cancel:hover,.confirm-modal__btn--cancel:focus,.confirm-modal__btn--cancel:active{background:var(--confirm-container-color);color:var(--confirm-primary-hover);border-color:var(--confirm-primary-hover)}.confirm-modal__btn--confirm{flex:1;max-width:180px;background:var(--confirm-primary);color:var(--confirm-primary-on)}.confirm-modal__btn--confirm:hover,.confirm-modal__btn--confirm:focus,.confirm-modal__btn--confirm:active{background:var(--confirm-primary-hover);color:var(--confirm-primary-on)}\n"] }]
+        }] });
+
+class ConfirmModalStore {
+    dialog = inject(Dialog);
+    overlay = inject(Overlay);
+    dialogState = signal('open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogState" }] : /* istanbul ignore next */ []));
+    router = inject(Router);
+    currentDialogRef;
+    open(title, labelButtonConfirm, reference = '', content = '', width = '19.5rem', labelButtonCancel = 'Cancelar', options = {}) {
+        this.dialogState.set('open');
+        const positionBuilder = this.overlay.position();
+        const strategy = positionBuilder.global().centerHorizontally().centerVertically();
+        this.currentDialogRef = this.dialog.open(ConfirmModal, {
+            width,
+            height: options.height,
+            disableClose: true,
+            autoFocus: false,
+            positionStrategy: strategy,
+            panelClass: 'lib-confirm-modal-panel',
+            backdropClass: 'lib-confirm-modal-backdrop',
+            data: {
+                title: title,
+                reference: reference,
+                content: content,
+                description: options.description,
+                showTopIcon: options.showTopIcon,
+                topIconName: options.topIconName,
+                variant: options.variant,
+                listItems: options.listItems,
+                labelButtonConfirm: labelButtonConfirm,
+                labelButtonCancel: labelButtonCancel,
+            },
+            closeOnNavigation: true
+        });
+        const sub = this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                this.close();
+                sub.unsubscribe();
+            }
+        });
+        return this.currentDialogRef;
+    }
+    openBasic(title, confirmLabel, cancelLabel = 'Cancelar') {
+        return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel);
+    }
+    openWithDescription(title, description, confirmLabel, cancelLabel = 'Cancelar') {
+        return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+            description,
+        });
+    }
+    openWithIcon(title, description, confirmLabel, cancelLabel = 'Cancelar', topIconName = 'check_box') {
+        return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+            description,
+            showTopIcon: true,
+            topIconName,
+        });
+    }
+    openWithList(title, description, listItems, confirmLabel, cancelLabel = 'Cancelar', showTopIcon = false) {
+        return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+            description,
+            showTopIcon,
+            variant: 'list',
+            listItems,
+        });
+    }
+    openWithScrollableList(title, description, listItems, confirmLabel, cancelLabel = 'Cancelar', showTopIcon = false) {
+        return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+            description,
+            showTopIcon,
+            variant: 'scrollable-list',
+            listItems,
+            height: 'auto',
+        });
+    }
+    close() {
+        if (this.currentDialogRef) {
+            this.currentDialogRef.close();
+            this.currentDialogRef = undefined;
+        }
+        this.dialogState.set('closed');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SideModal {
+    dialogData = inject(DIALOG_DATA);
+    dialogRef = inject(DialogRef);
+    content = this.dialogData.content;
+    title = this.dialogData.title;
+    footer = this.dialogData.footer;
+    headerConfig = this.dialogData.headerConfig;
+    dialogState = this.dialogData.dialogState;
+    closeDialog() {
+        this.dialogState.set('closed');
+    }
+    shouldShowBack() {
+        return this.headerConfig?.showBackButton?.() ?? false;
+    }
+    onBackClick() {
+        this.headerConfig?.onBack?.();
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'action' || event.toState === 'closed') {
+            this.dialogRef.close(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SideModal, isStandalone: true, selector: "lib-side-modal, app-side-modal", ngImport: i0, template: "<div class=\"container\" [@dialogAnimation]=\"dialogState()\" (@dialogAnimation.done)=\"onAnimationDone($event)\">\r\n  <header class=\"side-modal__header\">\r\n    <div style=\"display: flex; align-items: center;\">\r\n      @if (shouldShowBack()) {\r\n        <button type=\"button\" class=\"side-modal__icon-btn\" (click)=\"onBackClick()\" aria-label=\"Volver\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path d=\"M14 6H3.83L8.41 1.41L7 0L0 7L7 14L8.41 12.59L3.83 8H14V6Z\" fill=\"#434749\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n      <h4 class=\"title\">{{title}}</h4>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"side-modal__icon-btn\" (click)=\"closeDialog()\" aria-label=\"Cerrar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n        <path d=\"M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z\"\r\n          fill=\"#434749\" />\r\n      </svg>\r\n    </button>\r\n  </header>\r\n\r\n  <main class=\"side-modal__content container-content app-scrollbar-figma\">\r\n    <ng-container *ngComponentOutlet=\"content\"></ng-container>\r\n  </main>\r\n  @if (footer) {\r\n    <footer class=\"side-modal__footer\">\r\n      <ng-container *ngComponentOutlet=\"footer\"></ng-container>\r\n    </footer>\r\n  }\r\n</div>\r\n", styles: [".container{height:100dvh;width:100%;max-height:100dvh;box-sizing:border-box;background-color:var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color, #f8f9fa);border-radius:8px 0 0 8px;display:flex;flex-direction:column;overflow:hidden;animation:animationDialog .5s ease}.side-modal__header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:1.5rem;padding:1rem 1rem 0}.title{color:var(--side-sheets-enabled-headline-sheet-side-docked-headline-color, #434749);font-family:var(--side-sheets-enabled-headline-sheet-side-docked-headline-font, \"Heebo\"),sans-serif;font-size:var(--side-sheets-enabled-headline-sheet-side-docked-headline-size, 22px);font-style:normal;font-weight:var(--side-sheets-enabled-headline-sheet-side-docked-headline-weight, 400);line-height:calc(var(--side-sheets-enabled-headline-sheet-side-docked-headline-line-height, 28) * 1px);letter-spacing:var(--side-sheets-enabled-headline-sheet-side-docked-headline-tracking, 0px);margin:0}.side-modal__header button{background-color:transparent;border:none;height:40px;width:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#696d6f}.side-modal__header button mat-icon{font-size:24px}.side-modal__icon-btn svg{display:block}.side-modal__content{width:100%;box-sizing:border-box;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-top:0;padding-bottom:0}.side-modal__footer{width:100%;flex:0 0 auto}@keyframes animationDialog{0%{transform:translate(100%)}to{transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], animations: [
+            trigger('dialogAnimation', [
+                state('closed', style({ transform: 'translateX(100%)' })),
+                state('open', style({ transform: 'translateX(0)' })),
+                transition('open => closed', [animate('0.5s ease')]),
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-side-modal, app-side-modal', imports: [CommonModule, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('dialogAnimation', [
+                            state('closed', style({ transform: 'translateX(100%)' })),
+                            state('open', style({ transform: 'translateX(0)' })),
+                            transition('open => closed', [animate('0.5s ease')]),
+                        ])
+                    ], template: "<div class=\"container\" [@dialogAnimation]=\"dialogState()\" (@dialogAnimation.done)=\"onAnimationDone($event)\">\r\n  <header class=\"side-modal__header\">\r\n    <div style=\"display: flex; align-items: center;\">\r\n      @if (shouldShowBack()) {\r\n        <button type=\"button\" class=\"side-modal__icon-btn\" (click)=\"onBackClick()\" aria-label=\"Volver\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path d=\"M14 6H3.83L8.41 1.41L7 0L0 7L7 14L8.41 12.59L3.83 8H14V6Z\" fill=\"#434749\" />\r\n          </svg>\r\n        </button>\r\n      }\r\n      <h4 class=\"title\">{{title}}</h4>\r\n    </div>\r\n\r\n    <button type=\"button\" class=\"side-modal__icon-btn\" (click)=\"closeDialog()\" aria-label=\"Cerrar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n        <path d=\"M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z\"\r\n          fill=\"#434749\" />\r\n      </svg>\r\n    </button>\r\n  </header>\r\n\r\n  <main class=\"side-modal__content container-content app-scrollbar-figma\">\r\n    <ng-container *ngComponentOutlet=\"content\"></ng-container>\r\n  </main>\r\n  @if (footer) {\r\n    <footer class=\"side-modal__footer\">\r\n      <ng-container *ngComponentOutlet=\"footer\"></ng-container>\r\n    </footer>\r\n  }\r\n</div>\r\n", styles: [".container{height:100dvh;width:100%;max-height:100dvh;box-sizing:border-box;background-color:var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color, #f8f9fa);border-radius:8px 0 0 8px;display:flex;flex-direction:column;overflow:hidden;animation:animationDialog .5s ease}.side-modal__header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:1.5rem;padding:1rem 1rem 0}.title{color:var(--side-sheets-enabled-headline-sheet-side-docked-headline-color, #434749);font-family:var(--side-sheets-enabled-headline-sheet-side-docked-headline-font, \"Heebo\"),sans-serif;font-size:var(--side-sheets-enabled-headline-sheet-side-docked-headline-size, 22px);font-style:normal;font-weight:var(--side-sheets-enabled-headline-sheet-side-docked-headline-weight, 400);line-height:calc(var(--side-sheets-enabled-headline-sheet-side-docked-headline-line-height, 28) * 1px);letter-spacing:var(--side-sheets-enabled-headline-sheet-side-docked-headline-tracking, 0px);margin:0}.side-modal__header button{background-color:transparent;border:none;height:40px;width:40px;min-width:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#696d6f}.side-modal__header button mat-icon{font-size:24px}.side-modal__icon-btn svg{display:block}.side-modal__content{width:100%;box-sizing:border-box;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-top:0;padding-bottom:0}.side-modal__footer{width:100%;flex:0 0 auto}@keyframes animationDialog{0%{transform:translate(100%)}to{transform:translate(0)}}\n"] }]
+        }] });
+
+class SideModalStore {
+    dialog = inject(Dialog);
+    overlay = inject(Overlay);
+    dialogState = signal('open', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogState" }] : /* istanbul ignore next */ []));
+    currentDialogRef;
+    router = inject(Router);
+    openSideModal(content, title, width, footer, headerConfig) {
+        this.dialogState.set('open');
+        const positionBuilder = this.overlay.position();
+        const strategy = positionBuilder.global().end();
+        this.currentDialogRef = this.dialog.open(SideModal, {
+            width: width,
+            height: '100%',
+            disableClose: true,
+            hasBackdrop: true,
+            backdropClass: 'lib-side-modal-backdrop',
+            positionStrategy: strategy,
+            data: {
+                title: title,
+                content,
+                dialogState: this.dialogState,
+                footer,
+                headerConfig,
+            },
+            closeOnNavigation: true
+        });
+        const sub = this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                this.closeSideModal();
+                sub.unsubscribe();
+            }
+        });
+        return this.currentDialogRef;
+    }
+    isOnAction() {
+        return this.dialogState() === 'action';
+    }
+    closeSideModal(_data) {
+        void _data;
+        if (this.currentDialogRef) {
+            this.currentDialogRef.close();
+            this.currentDialogRef = undefined;
+        }
+        this.dialogState.set('closed');
+    }
+    actionSideModal() {
+        this.dialogState.set('action');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PageFooterActionsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: PageFooterActionsComponent, isStandalone: true, selector: "lib-page-footer-actions", ngImport: i0, template: "<div class=\"lib-page-footer-actions\">\r\n  <lib-divider orientation=\"horizontal\" />\r\n  <div class=\"lib-page-footer-actions__buttons\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{display:block;width:100%}:host-context(.side-modal__content){width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem}.lib-page-footer-actions{display:flex;flex-direction:column;align-items:stretch;width:100%}.lib-page-footer-actions__buttons{display:flex;align-items:center;gap:8px;padding:12px 24px 0;justify-content:flex-end}.lib-page-footer-actions__buttons lib-mat-button,.lib-page-footer-actions__buttons .lib-mat-btn{width:auto}\n"], dependencies: [{ kind: "component", type: LibDividerComponent, selector: "lib-divider", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-page-footer-actions', standalone: true, imports: [LibDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-page-footer-actions\">\r\n  <lib-divider orientation=\"horizontal\" />\r\n  <div class=\"lib-page-footer-actions__buttons\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{display:block;width:100%}:host-context(.side-modal__content){width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem}.lib-page-footer-actions{display:flex;flex-direction:column;align-items:stretch;width:100%}.lib-page-footer-actions__buttons{display:flex;align-items:center;gap:8px;padding:12px 24px 0;justify-content:flex-end}.lib-page-footer-actions__buttons lib-mat-button,.lib-page-footer-actions__buttons .lib-mat-btn{width:auto}\n"] }]
+        }] });
+
+class ModalFooterActionsComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ModalFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ModalFooterActionsComponent, isStandalone: true, selector: "lib-modal-footer-actions", ngImport: i0, template: "<div class=\"lib-modal-footer-actions\">\r\n  <lib-divider orientation=\"horizontal\" />\r\n  <div class=\"lib-modal-footer-actions__buttons\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{display:block;width:100%}:host-context(.side-modal__content){width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem}:host-context(.side-modal__content) .lib-modal-footer-actions__buttons{padding-left:0;padding-right:0}.lib-modal-footer-actions{display:flex;flex-direction:column;align-items:stretch;width:100%;align-self:flex-end;flex:0 0 auto;margin-top:auto;background:var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color, var(--app-side-sheets-enabled-container-sheet-side-docked-standard-container-color, #F7FAFC));z-index:10;position:sticky;bottom:0}.lib-modal-footer-actions__buttons{display:flex;align-items:center;gap:8px;padding:.75rem 1.5rem 1.25rem}.lib-modal-footer-actions__buttons lib-mat-button,.lib-modal-footer-actions__buttons .lib-mat-btn{width:auto}\n"], dependencies: [{ kind: "component", type: LibDividerComponent, selector: "lib-divider", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ModalFooterActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-modal-footer-actions', standalone: true, imports: [LibDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lib-modal-footer-actions\">\r\n  <lib-divider orientation=\"horizontal\" />\r\n  <div class=\"lib-modal-footer-actions__buttons\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{display:block;width:100%}:host-context(.side-modal__content){width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;margin-bottom:-1rem}:host-context(.side-modal__content) .lib-modal-footer-actions__buttons{padding-left:0;padding-right:0}.lib-modal-footer-actions{display:flex;flex-direction:column;align-items:stretch;width:100%;align-self:flex-end;flex:0 0 auto;margin-top:auto;background:var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color, var(--app-side-sheets-enabled-container-sheet-side-docked-standard-container-color, #F7FAFC));z-index:10;position:sticky;bottom:0}.lib-modal-footer-actions__buttons{display:flex;align-items:center;gap:8px;padding:.75rem 1.5rem 1.25rem}.lib-modal-footer-actions__buttons lib-mat-button,.lib-modal-footer-actions__buttons .lib-mat-btn{width:auto}\n"] }]
+        }] });
+
+class FooterFlowStore {
+    totalSteps = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
+    currentStep = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    setTotalSteps(total) {
+        this.totalSteps.set(Math.max(1, total));
+        if (this.currentStep() > this.totalSteps()) {
+            this.currentStep.set(this.totalSteps());
+        }
+    }
+    reset() {
+        this.currentStep.set(1);
+    }
+    advance() {
+        if (this.currentStep() < this.totalSteps()) {
+            this.currentStep.update((step) => step + 1);
+        }
+    }
+    retreat() {
+        if (this.currentStep() > 1) {
+            this.currentStep.update((step) => step - 1);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class FooterComponent {
+    sideModalStore = inject(SideModalStore);
+    confirmModalStore = inject(ConfirmModalStore);
+    flowStore = inject(FooterFlowStore);
+    primaryLabel = computed(() => this.flowStore.currentStep() < this.flowStore.totalSteps() ? 'NEXT' : 'SAVE', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
+    onCancel() {
+        this.sideModalStore.closeSideModal();
+    }
+    onContinue() {
+        if (this.flowStore.currentStep() < this.flowStore.totalSteps()) {
+            this.flowStore.advance();
+            return;
+        }
+        const dialogRef = this.confirmModalStore.open('¿Guardar cambios?', 'Guardar', '', '', 'max-content', 'Cancelar');
+        dialogRef.closed.subscribe((result) => {
+            if (result === true) {
+                this.sideModalStore.closeSideModal({ step: this.flowStore.totalSteps(), saved: true });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: FooterComponent, isStandalone: true, selector: "lib-side-modal-footer", ngImport: i0, template: "<lib-modal-footer-actions>\r\n  <lib-button\r\n    variant=\"outlined\"\r\n    size=\"small\"\r\n    [label]=\"'Cancelar' | translate\"\r\n    (click)=\"onCancel()\"\r\n  />\r\n  <lib-button\r\n    variant=\"filled\"\r\n    size=\"small\"\r\n    [label]=\"primaryLabel() | translate\"\r\n    (click)=\"onContinue()\"\r\n  />\r\n</lib-modal-footer-actions>\r\n", dependencies: [{ kind: "component", type: ModalFooterActionsComponent, selector: "lib-modal-footer-actions" }, { kind: "component", type: LibButtonComponent, selector: "lib-button", inputs: ["size", "disabled", "type", "fullWidth", "variant", "shape", "toggle", "selected", "label", "icon", "iconPosition", "contentAlign", "labelClass", "pressed", "debugPadding"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-side-modal-footer', standalone: true, imports: [ModalFooterActionsComponent, LibButtonComponent, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<lib-modal-footer-actions>\r\n  <lib-button\r\n    variant=\"outlined\"\r\n    size=\"small\"\r\n    [label]=\"'Cancelar' | translate\"\r\n    (click)=\"onCancel()\"\r\n  />\r\n  <lib-button\r\n    variant=\"filled\"\r\n    size=\"small\"\r\n    [label]=\"primaryLabel() | translate\"\r\n    (click)=\"onContinue()\"\r\n  />\r\n</lib-modal-footer-actions>\r\n" }]
+        }] });
+
+const LIB_UI_STYLES_PATH = './lib/styles/index.scss';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CircularProgressStepper, ConfirmModal, ConfirmModalStore, FooterComponent, FooterFlowStore, HeaderComponent, LIB_UI_STYLES_PATH, LibButtonComponent, LibCardComponent, LibCheckboxComponent, LibChipComponent, LibDatePickerComponent, LibDateRangePickerComponent, LibDividerComponent, LibIconButtonComponent, LibListItemComponent, LibMenuComponent, LibRadioButtonComponent, LibSelectFieldComponent, LibSpinnerComponent, LibTextFieldComponent, LibTooltipComponent, LibUi, ModalFooterActionsComponent, PageFooterActionsComponent, SharedBreadcrumbComponent, SharedTableCellTemplateDirective, SharedTableComponent, SideModal, SideModalStore, SidebarComponent, SlideToggle, UI_ICON_NAMES, registerUiIcons, resolveUiIconResource };
+//# sourceMappingURL=crdx-components.mjs.map