crdx-components 1.0.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crdx-components.mjs +680 -344
- package/fesm2022/crdx-components.mjs.map +1 -1
- package/package.json +10 -10
- package/src/lib/styles/index.scss +1 -0
- package/src/lib/styles/overrides/_index.scss +2 -4
- package/src/lib/styles/overrides/_mat-button-overrides.scss +0 -11
- package/src/lib/styles/overrides/_mat-checkbox-overrides.scss +2 -2
- package/src/lib/styles/overrides/_mat-radio-overrides.scss +40 -0
- package/types/crdx-components.d.ts +106 -44
- package/types/crdx-components.d.ts.map +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, inject, TemplateRef, Input, Directive, input, EventEmitter, DestroyRef, effect, ViewChild, ContentChildren, Output, signal,
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgTemplateOutlet, NgClass, NgComponentOutlet } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/material/table';
|
|
@@ -11,42 +11,48 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
|
11
11
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
12
12
|
import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
|
|
13
13
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
14
|
-
import * as i3$1 from '@angular/forms';
|
|
15
|
-
import { ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
16
14
|
import * as i1$1 from '@angular/material/form-field';
|
|
17
15
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
18
16
|
import * as i2$1 from '@angular/material/input';
|
|
19
17
|
import { MatInputModule } from '@angular/material/input';
|
|
20
|
-
import * as
|
|
18
|
+
import * as i2$2 from '@angular/material/icon';
|
|
21
19
|
import { MatIconModule } from '@angular/material/icon';
|
|
22
|
-
import * as
|
|
20
|
+
import * as i1$8 from '@angular/forms';
|
|
21
|
+
import { NgControl, NG_VALUE_ACCESSOR, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
22
|
+
import * as i2$3 from '@angular/material/select';
|
|
23
23
|
import { MatSelectModule } from '@angular/material/select';
|
|
24
24
|
import * as i1$2 from '@angular/material/checkbox';
|
|
25
25
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
26
|
-
import * as i3$
|
|
26
|
+
import * as i3$1 from '@angular/cdk/scrolling';
|
|
27
27
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
|
28
28
|
import * as i1$3 from '@angular/material/list';
|
|
29
29
|
import { MatListModule } from '@angular/material/list';
|
|
30
|
-
import * as i1$4 from '@angular/material/
|
|
30
|
+
import * as i1$4 from '@angular/material/radio';
|
|
31
|
+
import { MatRadioModule } from '@angular/material/radio';
|
|
32
|
+
import * as i1$5 from '@angular/material/menu';
|
|
31
33
|
import { MatMenuModule } from '@angular/material/menu';
|
|
32
|
-
import * as i2$
|
|
34
|
+
import * as i2$4 from '@angular/material/button';
|
|
33
35
|
import { MatButtonModule } from '@angular/material/button';
|
|
34
|
-
import * as i1$
|
|
35
|
-
import { MatRippleModule } from '@angular/material/core';
|
|
36
|
-
import * as i1$
|
|
36
|
+
import * as i1$6 from '@angular/material/core';
|
|
37
|
+
import { MatRippleModule, MatNativeDateModule, MAT_DATE_FORMATS } from '@angular/material/core';
|
|
38
|
+
import * as i1$7 from '@angular/material/slide-toggle';
|
|
37
39
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
40
|
+
import * as i3$2 from '@angular/material/datepicker';
|
|
41
|
+
import { MatDatepickerModule, MatDatepickerActions, MatDatepickerApply, MatDatepickerCancel } from '@angular/material/datepicker';
|
|
42
|
+
import * as i1$9 from '@angular/material/chips';
|
|
43
|
+
import { MatChipsModule } from '@angular/material/chips';
|
|
38
44
|
import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
39
45
|
import { Overlay } from '@angular/cdk/overlay';
|
|
40
46
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
41
47
|
import { TranslatePipe } from '@ngx-translate/core';
|
|
42
48
|
|
|
43
49
|
class LibUi {
|
|
44
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
45
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
50
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
+
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 });
|
|
46
52
|
}
|
|
47
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibUi, decorators: [{
|
|
48
54
|
type: Component,
|
|
49
|
-
args: [{ selector: 'lib-lib-ui', imports: [], template: "<p>LibUi works!</p>\n" }]
|
|
55
|
+
args: [{ selector: 'lib-lib-ui', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>LibUi works!</p>\n" }]
|
|
50
56
|
}] });
|
|
51
57
|
|
|
52
58
|
const DEFAULT_ICON_BASE_PATH = 'assets/icons';
|
|
@@ -131,10 +137,10 @@ class SharedTableCellTemplateDirective {
|
|
|
131
137
|
get key() {
|
|
132
138
|
return this.modernKey || this.legacyKey;
|
|
133
139
|
}
|
|
134
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
135
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
141
|
+
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 });
|
|
136
142
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableCellTemplateDirective, decorators: [{
|
|
138
144
|
type: Directive,
|
|
139
145
|
args: [{
|
|
140
146
|
selector: 'ng-template[cellTemplate], ng-template[libCellTemplate]',
|
|
@@ -147,16 +153,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
147
153
|
}] } });
|
|
148
154
|
|
|
149
155
|
class SharedTableComponent {
|
|
150
|
-
columns = input.required(
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
156
|
+
columns = input.required(/* @ts-ignore */
|
|
157
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
158
|
+
data = input.required(/* @ts-ignore */
|
|
159
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
160
|
+
caption = input(/* @ts-ignore */
|
|
161
|
+
...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
162
|
+
emptyState = input('Sin registros disponibles', /* @ts-ignore */
|
|
163
|
+
...(ngDevMode ? [{ debugName: "emptyState" }] : /* istanbul ignore next */ []));
|
|
164
|
+
loading = input(false, /* @ts-ignore */
|
|
165
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
166
|
+
showPaginator = input(true, /* @ts-ignore */
|
|
167
|
+
...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
|
|
168
|
+
pageSize = input(10, /* @ts-ignore */
|
|
169
|
+
...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
170
|
+
pageSizeOptions = input([5, 10, 20], /* @ts-ignore */
|
|
171
|
+
...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
172
|
+
enableRowClick = input(false, /* @ts-ignore */
|
|
173
|
+
...(ngDevMode ? [{ debugName: "enableRowClick" }] : /* istanbul ignore next */ []));
|
|
174
|
+
totalElements = input(/* @ts-ignore */
|
|
175
|
+
...(ngDevMode ? [undefined, { debugName: "totalElements" }] : /* istanbul ignore next */ []));
|
|
160
176
|
rowClick = new EventEmitter();
|
|
161
177
|
pageChange = new EventEmitter();
|
|
162
178
|
cellTemplatesQuery;
|
|
@@ -251,12 +267,12 @@ class SharedTableComponent {
|
|
|
251
267
|
}
|
|
252
268
|
this.rowClick.emit(row);
|
|
253
269
|
}
|
|
254
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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"] }] });
|
|
270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
+
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 });
|
|
256
272
|
}
|
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedTableComponent, decorators: [{
|
|
258
274
|
type: Component,
|
|
259
|
-
args: [{ selector: 'lib-shared-table, shared-table', standalone: true, imports: [CommonModule, MatTableModule, MatPaginatorModule, MatProgressSpinnerModule], 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"] }]
|
|
275
|
+
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"] }]
|
|
260
276
|
}], 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: [{
|
|
261
277
|
type: Output
|
|
262
278
|
}], pageChange: [{
|
|
@@ -279,9 +295,12 @@ class SharedBreadcrumbComponent {
|
|
|
279
295
|
route = inject(ActivatedRoute, { optional: true });
|
|
280
296
|
router = inject(Router, { optional: true });
|
|
281
297
|
parentNavigate = new EventEmitter();
|
|
282
|
-
parentLabel = signal('',
|
|
283
|
-
|
|
284
|
-
|
|
298
|
+
parentLabel = signal('', /* @ts-ignore */
|
|
299
|
+
...(ngDevMode ? [{ debugName: "parentLabel" }] : /* istanbul ignore next */ []));
|
|
300
|
+
parentUrl = signal('', /* @ts-ignore */
|
|
301
|
+
...(ngDevMode ? [{ debugName: "parentUrl" }] : /* istanbul ignore next */ []));
|
|
302
|
+
currentLabel = signal('', /* @ts-ignore */
|
|
303
|
+
...(ngDevMode ? [{ debugName: "currentLabel" }] : /* istanbul ignore next */ []));
|
|
285
304
|
ngOnInit() {
|
|
286
305
|
const currentRoute = this.route;
|
|
287
306
|
if (!currentRoute) {
|
|
@@ -303,10 +322,10 @@ class SharedBreadcrumbComponent {
|
|
|
303
322
|
this.parentNavigate.emit(target);
|
|
304
323
|
}
|
|
305
324
|
}
|
|
306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
325
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
326
|
+
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 });
|
|
308
327
|
}
|
|
309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SharedBreadcrumbComponent, decorators: [{
|
|
310
329
|
type: Component,
|
|
311
330
|
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"] }]
|
|
312
331
|
}], propDecorators: { parentNavigate: [{
|
|
@@ -314,12 +333,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
314
333
|
}] } });
|
|
315
334
|
|
|
316
335
|
class SidebarComponent {
|
|
317
|
-
items = input([],
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
336
|
+
items = input([], /* @ts-ignore */
|
|
337
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
338
|
+
selectedId = input(null, /* @ts-ignore */
|
|
339
|
+
...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
|
|
340
|
+
showLabels = input(true, /* @ts-ignore */
|
|
341
|
+
...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
|
|
342
|
+
spritePath = input('assets/icons/sprite.svg', /* @ts-ignore */
|
|
343
|
+
...(ngDevMode ? [{ debugName: "spritePath" }] : /* istanbul ignore next */ []));
|
|
321
344
|
itemSelected = new EventEmitter();
|
|
322
|
-
hasLabels = computed(() => this.showLabels() && this.items().some(({ label }) => !!label),
|
|
345
|
+
hasLabels = computed(() => this.showLabels() && this.items().some(({ label }) => !!label), /* @ts-ignore */
|
|
346
|
+
...(ngDevMode ? [{ debugName: "hasLabels" }] : /* istanbul ignore next */ []));
|
|
323
347
|
onSelect(item) {
|
|
324
348
|
if (item.disabled) {
|
|
325
349
|
return;
|
|
@@ -365,10 +389,10 @@ class SidebarComponent {
|
|
|
365
389
|
}
|
|
366
390
|
return this.showLabels();
|
|
367
391
|
}
|
|
368
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
369
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
392
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
393
|
+
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 });
|
|
370
394
|
}
|
|
371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
372
396
|
type: Component,
|
|
373
397
|
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"] }]
|
|
374
398
|
}], 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: [{
|
|
@@ -376,22 +400,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
376
400
|
}] } });
|
|
377
401
|
|
|
378
402
|
class HeaderComponent {
|
|
379
|
-
showLeading = input(true,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
403
|
+
showLeading = input(true, /* @ts-ignore */
|
|
404
|
+
...(ngDevMode ? [{ debugName: "showLeading" }] : /* istanbul ignore next */ []));
|
|
405
|
+
leadingIcon = input('icon-menu', /* @ts-ignore */
|
|
406
|
+
...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
|
|
407
|
+
leadingIconPath = input(null, /* @ts-ignore */
|
|
408
|
+
...(ngDevMode ? [{ debugName: "leadingIconPath" }] : /* istanbul ignore next */ []));
|
|
409
|
+
leadingActionLabel = input('Abrir navegación', /* @ts-ignore */
|
|
410
|
+
...(ngDevMode ? [{ debugName: "leadingActionLabel" }] : /* istanbul ignore next */ []));
|
|
411
|
+
brandLabel = input('Credix', /* @ts-ignore */
|
|
412
|
+
...(ngDevMode ? [{ debugName: "brandLabel" }] : /* istanbul ignore next */ []));
|
|
413
|
+
brandIcon = input('smiley', /* @ts-ignore */
|
|
414
|
+
...(ngDevMode ? [{ debugName: "brandIcon" }] : /* istanbul ignore next */ []));
|
|
415
|
+
brandIconPath = input(null, /* @ts-ignore */
|
|
416
|
+
...(ngDevMode ? [{ debugName: "brandIconPath" }] : /* istanbul ignore next */ []));
|
|
386
417
|
trailingActions = input([
|
|
387
418
|
{ icon: 'search', ariaLabel: 'Abrir buscador' },
|
|
388
|
-
],
|
|
389
|
-
|
|
419
|
+
], /* @ts-ignore */
|
|
420
|
+
...(ngDevMode ? [{ debugName: "trailingActions" }] : /* istanbul ignore next */ []));
|
|
421
|
+
iconBasePath = input('assets/icons', /* @ts-ignore */
|
|
422
|
+
...(ngDevMode ? [{ debugName: "iconBasePath" }] : /* istanbul ignore next */ []));
|
|
390
423
|
leadingClick = new EventEmitter();
|
|
391
424
|
actionClick = new EventEmitter();
|
|
392
|
-
iconAssetBasePath = computed(() => this.normalizeAssetBasePath(this.iconBasePath()),
|
|
393
|
-
|
|
394
|
-
|
|
425
|
+
iconAssetBasePath = computed(() => this.normalizeAssetBasePath(this.iconBasePath()), /* @ts-ignore */
|
|
426
|
+
...(ngDevMode ? [{ debugName: "iconAssetBasePath" }] : /* istanbul ignore next */ []));
|
|
427
|
+
leadingIconUrl = computed(() => this.resolveIconUrl(this.leadingIcon(), this.leadingIconPath()), /* @ts-ignore */
|
|
428
|
+
...(ngDevMode ? [{ debugName: "leadingIconUrl" }] : /* istanbul ignore next */ []));
|
|
429
|
+
brandIconUrl = computed(() => this.resolveIconUrl(this.brandIcon(), this.brandIconPath()), /* @ts-ignore */
|
|
430
|
+
...(ngDevMode ? [{ debugName: "brandIconUrl" }] : /* istanbul ignore next */ []));
|
|
395
431
|
onLeadingClick() {
|
|
396
432
|
this.leadingClick.emit();
|
|
397
433
|
}
|
|
@@ -434,10 +470,10 @@ class HeaderComponent {
|
|
|
434
470
|
}
|
|
435
471
|
return targetPath.replace(/\/$/, '');
|
|
436
472
|
}
|
|
437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
+
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 });
|
|
439
475
|
}
|
|
440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
441
477
|
type: Component,
|
|
442
478
|
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"] }]
|
|
443
479
|
}], 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: [{
|
|
@@ -448,96 +484,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
448
484
|
const KNOWN_UI_ICON_NAMES = new Set(UI_ICON_NAMES);
|
|
449
485
|
|
|
450
486
|
class LibTextFieldComponent {
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
487
|
+
// FormValueControl contract
|
|
488
|
+
value = model('', /* @ts-ignore */
|
|
489
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
490
|
+
disabled = input(false, /* @ts-ignore */
|
|
491
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
492
|
+
invalid = input(false, /* @ts-ignore */
|
|
493
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
494
|
+
errors = input([], /* @ts-ignore */
|
|
495
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
496
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
497
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
498
|
+
required = input(false, /* @ts-ignore */
|
|
499
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
500
|
+
touch = output();
|
|
501
|
+
// Component-specific inputs
|
|
502
|
+
label = input.required(/* @ts-ignore */
|
|
503
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
504
|
+
appearance = input('outline', /* @ts-ignore */
|
|
505
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
506
|
+
suffixIcon = input('', /* @ts-ignore */
|
|
507
|
+
...(ngDevMode ? [{ debugName: "suffixIcon" }] : /* istanbul ignore next */ []));
|
|
508
|
+
suffixTextIcon = input('', /* @ts-ignore */
|
|
509
|
+
...(ngDevMode ? [{ debugName: "suffixTextIcon" }] : /* istanbul ignore next */ []));
|
|
510
|
+
prefixIcon = input('', /* @ts-ignore */
|
|
511
|
+
...(ngDevMode ? [{ debugName: "prefixIcon" }] : /* istanbul ignore next */ []));
|
|
512
|
+
prefixIconSrc = input('', /* @ts-ignore */
|
|
513
|
+
...(ngDevMode ? [{ debugName: "prefixIconSrc" }] : /* istanbul ignore next */ []));
|
|
514
|
+
error = input(null, /* @ts-ignore */
|
|
515
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
516
|
+
hint = input('', /* @ts-ignore */
|
|
517
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
470
518
|
suffixEvent = output();
|
|
471
|
-
showSuffix = input(false, { ...(ngDevMode ? { debugName: "showSuffix" } : {}), transform: coerceBooleanProperty });
|
|
472
|
-
suffixIconBand = input(false, { ...(ngDevMode ? { debugName: "suffixIconBand" } : {}), transform: coerceBooleanProperty });
|
|
473
|
-
placeholder = input('',
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
519
|
+
showSuffix = input(false, { ...(ngDevMode ? { debugName: "showSuffix" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
520
|
+
suffixIconBand = input(false, { ...(ngDevMode ? { debugName: "suffixIconBand" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
521
|
+
placeholder = input('', /* @ts-ignore */
|
|
522
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
523
|
+
autocomplete = input('off', /* @ts-ignore */
|
|
524
|
+
...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
525
|
+
fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
526
|
+
width = input(null, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (value) => {
|
|
527
|
+
if (value == null || value === '')
|
|
478
528
|
return null;
|
|
479
|
-
}
|
|
480
529
|
return typeof value === 'number' ? `${value}px` : String(value);
|
|
481
530
|
} });
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
hideRequiredMarker = input(false, { ...(ngDevMode ? { debugName: "hideRequiredMarker" } : {}), transform: coerceBooleanProperty });
|
|
531
|
+
type = input('text', /* @ts-ignore */
|
|
532
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
533
|
+
hideRequiredMarker = input(false, { ...(ngDevMode ? { debugName: "hideRequiredMarker" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
485
534
|
resolvedAppearance = computed(() => {
|
|
486
|
-
const raw = this.
|
|
535
|
+
const raw = this.appearance();
|
|
487
536
|
if (raw === 'outlined')
|
|
488
537
|
return 'outline';
|
|
489
538
|
if (raw === 'filled')
|
|
490
539
|
return 'fill';
|
|
491
540
|
return raw;
|
|
492
|
-
},
|
|
493
|
-
|
|
494
|
-
widthStyle = computed(() => (this.fullWidth() ? '100%' : this.width()),
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
}
|
|
501
|
-
const control = this.control();
|
|
502
|
-
return control.invalid && (control.dirty || control.touched);
|
|
503
|
-
}, ...(ngDevMode ? [{ debugName: "shouldShowError" }] : []));
|
|
504
|
-
constructor() {
|
|
505
|
-
effect(() => {
|
|
506
|
-
const control = this.control();
|
|
507
|
-
const shouldDisable = this.disabled();
|
|
508
|
-
if (shouldDisable) {
|
|
509
|
-
if (control.enabled) {
|
|
510
|
-
control.disable({ emitEvent: false });
|
|
511
|
-
}
|
|
512
|
-
this.disabledAppliedByInput = true;
|
|
513
|
-
return;
|
|
514
|
-
}
|
|
515
|
-
if (this.disabledAppliedByInput && control.disabled) {
|
|
516
|
-
control.enable({ emitEvent: false });
|
|
517
|
-
}
|
|
518
|
-
this.disabledAppliedByInput = false;
|
|
519
|
-
});
|
|
520
|
-
}
|
|
541
|
+
}, /* @ts-ignore */
|
|
542
|
+
...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
|
|
543
|
+
widthStyle = computed(() => (this.fullWidth() ? '100%' : this.width()), /* @ts-ignore */
|
|
544
|
+
...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
|
|
545
|
+
shouldShowSuffix = computed(() => this.showSuffix() || (this.suffixIconBand() && (!!this.suffixIcon() || !!this.suffixTextIcon())), /* @ts-ignore */
|
|
546
|
+
...(ngDevMode ? [{ debugName: "shouldShowSuffix" }] : /* istanbul ignore next */ []));
|
|
547
|
+
shouldShowError = computed(() => this.invalid() || !!this.error(), /* @ts-ignore */
|
|
548
|
+
...(ngDevMode ? [{ debugName: "shouldShowError" }] : /* istanbul ignore next */ []));
|
|
521
549
|
pressSuffixEvent() {
|
|
522
550
|
this.suffixEvent.emit();
|
|
523
551
|
}
|
|
524
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
552
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
553
|
+
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 });
|
|
526
554
|
}
|
|
527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTextFieldComponent, decorators: [{
|
|
528
556
|
type: Component,
|
|
529
|
-
args: [{ selector: 'lib-text-field', standalone: true, imports: [MatFormFieldModule, MatInputModule,
|
|
530
|
-
}],
|
|
557
|
+
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"] }]
|
|
558
|
+
}], 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 }] }] } });
|
|
531
559
|
|
|
532
560
|
class LibCheckboxComponent {
|
|
533
|
-
checked = input(false,
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
561
|
+
checked = input(false, /* @ts-ignore */
|
|
562
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
563
|
+
indeterminate = input(false, /* @ts-ignore */
|
|
564
|
+
...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
565
|
+
disabled = input(false, /* @ts-ignore */
|
|
566
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
567
|
+
error = input(false, /* @ts-ignore */
|
|
568
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
569
|
+
labelId = input(null, /* @ts-ignore */
|
|
570
|
+
...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
|
|
539
571
|
checkedChange = output();
|
|
540
572
|
indeterminateChange = output();
|
|
573
|
+
matcher = {
|
|
574
|
+
isErrorState: () => this.error()
|
|
575
|
+
};
|
|
541
576
|
get ariaDisabled() {
|
|
542
577
|
return this.disabled() ? true : null;
|
|
543
578
|
}
|
|
@@ -545,7 +580,8 @@ class LibCheckboxComponent {
|
|
|
545
580
|
if (this.indeterminate())
|
|
546
581
|
return 'mixed';
|
|
547
582
|
return this.checked() ? 'true' : 'false';
|
|
548
|
-
},
|
|
583
|
+
}, /* @ts-ignore */
|
|
584
|
+
...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
|
|
549
585
|
onAction(event) {
|
|
550
586
|
event.preventDefault();
|
|
551
587
|
if (this.disabled())
|
|
@@ -565,17 +601,18 @@ class LibCheckboxComponent {
|
|
|
565
601
|
}
|
|
566
602
|
}
|
|
567
603
|
onMatCheckboxChange(event) {
|
|
604
|
+
console.log("Error value", this.error());
|
|
568
605
|
this.checkedChange.emit(event.checked);
|
|
569
606
|
if (event.checked && this.indeterminate()) {
|
|
570
607
|
this.indeterminateChange.emit(false);
|
|
571
608
|
}
|
|
572
609
|
}
|
|
573
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
574
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
610
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
611
|
+
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 });
|
|
575
612
|
}
|
|
576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
613
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCheckboxComponent, decorators: [{
|
|
577
614
|
type: Component,
|
|
578
|
-
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 <mat-checkbox\r\n [checked]=\"checked()\"\r\n [indeterminate]=\"indeterminate()\"\r\n [disabled]=\"disabled()\"\r\n (change)=\"onMatCheckboxChange($event)\"\r\n >\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}\n"] }]
|
|
615
|
+
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"] }]
|
|
579
616
|
}], 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: [{
|
|
580
617
|
type: HostBinding,
|
|
581
618
|
args: ['attr.aria-disabled']
|
|
@@ -589,37 +626,53 @@ class LibSelectFieldComponent {
|
|
|
589
626
|
destroyRef = inject(DestroyRef);
|
|
590
627
|
injector = inject(Injector);
|
|
591
628
|
ngControl = null;
|
|
592
|
-
label = input('',
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
629
|
+
label = input('', /* @ts-ignore */
|
|
630
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
631
|
+
appearance = input('outline', /* @ts-ignore */
|
|
632
|
+
...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
633
|
+
placeholder = input('Elegir opción', /* @ts-ignore */
|
|
634
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
635
|
+
options = input([], /* @ts-ignore */
|
|
636
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
637
|
+
mode = input('single', /* @ts-ignore */
|
|
638
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
639
|
+
filterable = input(true, { ...(ngDevMode ? { debugName: "filterable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
640
|
+
filterPlaceholder = input('Buscar...', /* @ts-ignore */
|
|
641
|
+
...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
|
|
642
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
643
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
|
|
644
|
+
width = input(null, /* @ts-ignore */
|
|
645
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
646
|
+
selectAllLabel = input('Seleccionar todos', /* @ts-ignore */
|
|
647
|
+
...(ngDevMode ? [{ debugName: "selectAllLabel" }] : /* istanbul ignore next */ []));
|
|
603
648
|
widthStyle = computed(() => {
|
|
604
649
|
const v = this.width();
|
|
605
650
|
return v == null || v === '' ? null : typeof v === 'number' ? `${v}px` : String(v);
|
|
606
|
-
},
|
|
607
|
-
|
|
651
|
+
}, /* @ts-ignore */
|
|
652
|
+
...(ngDevMode ? [{ debugName: "widthStyle" }] : /* istanbul ignore next */ []));
|
|
653
|
+
matAppearance = computed(() => this.appearance() === 'filled' ? 'fill' : 'outline', /* @ts-ignore */
|
|
654
|
+
...(ngDevMode ? [{ debugName: "matAppearance" }] : /* istanbul ignore next */ []));
|
|
608
655
|
valueChange = output();
|
|
609
|
-
panelOpen = signal(false,
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
656
|
+
panelOpen = signal(false, /* @ts-ignore */
|
|
657
|
+
...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
|
|
658
|
+
filterTerm = signal('', /* @ts-ignore */
|
|
659
|
+
...(ngDevMode ? [{ debugName: "filterTerm" }] : /* istanbul ignore next */ []));
|
|
660
|
+
disabledByControl = signal(false, /* @ts-ignore */
|
|
661
|
+
...(ngDevMode ? [{ debugName: "disabledByControl" }] : /* istanbul ignore next */ []));
|
|
662
|
+
isMultiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
|
|
663
|
+
...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
|
|
613
664
|
virtualViewportMaxHeight = computed(() => this.filterable()
|
|
614
665
|
? LibSelectFieldComponent.PANEL_CONTENT_HEIGHT - LibSelectFieldComponent.FILTER_ROW_HEIGHT
|
|
615
|
-
: LibSelectFieldComponent.PANEL_CONTENT_HEIGHT,
|
|
666
|
+
: LibSelectFieldComponent.PANEL_CONTENT_HEIGHT, /* @ts-ignore */
|
|
667
|
+
...(ngDevMode ? [{ debugName: "virtualViewportMaxHeight" }] : /* istanbul ignore next */ []));
|
|
616
668
|
filteredOptions = computed(() => {
|
|
617
669
|
const opts = this.options();
|
|
618
670
|
const term = this.filterTerm().trim().toLowerCase();
|
|
619
671
|
if (!term)
|
|
620
672
|
return opts;
|
|
621
673
|
return opts.filter((o) => o.label.toLowerCase().includes(term));
|
|
622
|
-
},
|
|
674
|
+
}, /* @ts-ignore */
|
|
675
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
623
676
|
virtualRows = computed(() => {
|
|
624
677
|
const rows = this.filteredOptions().map((option) => ({
|
|
625
678
|
kind: 'option',
|
|
@@ -629,14 +682,16 @@ class LibSelectFieldComponent {
|
|
|
629
682
|
rows.unshift({ kind: 'selectAll' });
|
|
630
683
|
}
|
|
631
684
|
return rows;
|
|
632
|
-
},
|
|
685
|
+
}, /* @ts-ignore */
|
|
686
|
+
...(ngDevMode ? [{ debugName: "virtualRows" }] : /* istanbul ignore next */ []));
|
|
633
687
|
virtualViewportHeight = computed(() => {
|
|
634
688
|
const rowsCount = this.virtualRows().length;
|
|
635
689
|
const contentHeight = rowsCount * LibSelectFieldComponent.OPTION_ROW_HEIGHT;
|
|
636
690
|
const maxHeight = this.virtualViewportMaxHeight();
|
|
637
691
|
const minHeight = rowsCount > 0 ? LibSelectFieldComponent.OPTION_ROW_HEIGHT : 0;
|
|
638
692
|
return Math.max(minHeight, Math.min(contentHeight, maxHeight));
|
|
639
|
-
},
|
|
693
|
+
}, /* @ts-ignore */
|
|
694
|
+
...(ngDevMode ? [{ debugName: "virtualViewportHeight" }] : /* istanbul ignore next */ []));
|
|
640
695
|
allSelected = computed(() => {
|
|
641
696
|
if (!this.isMultiple()) {
|
|
642
697
|
return false;
|
|
@@ -648,7 +703,8 @@ class LibSelectFieldComponent {
|
|
|
648
703
|
}
|
|
649
704
|
const values = opts.map((o) => o.value);
|
|
650
705
|
return values.every((v) => current.includes(v));
|
|
651
|
-
},
|
|
706
|
+
}, /* @ts-ignore */
|
|
707
|
+
...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
|
|
652
708
|
selectedLabels = computed(() => {
|
|
653
709
|
const current = this.value();
|
|
654
710
|
if (!Array.isArray(current) || !current.length) {
|
|
@@ -658,7 +714,8 @@ class LibSelectFieldComponent {
|
|
|
658
714
|
return this.options()
|
|
659
715
|
.filter((o) => selectedSet.has(o.value))
|
|
660
716
|
.map((o) => o.label);
|
|
661
|
-
},
|
|
717
|
+
}, /* @ts-ignore */
|
|
718
|
+
...(ngDevMode ? [{ debugName: "selectedLabels" }] : /* istanbul ignore next */ []));
|
|
662
719
|
multiTriggerLabel = computed(() => {
|
|
663
720
|
const labels = this.selectedLabels();
|
|
664
721
|
if (!labels.length) {
|
|
@@ -668,7 +725,8 @@ class LibSelectFieldComponent {
|
|
|
668
725
|
return labels[0];
|
|
669
726
|
}
|
|
670
727
|
return `${labels[0]} (+${labels.length - 1} items)`;
|
|
671
|
-
},
|
|
728
|
+
}, /* @ts-ignore */
|
|
729
|
+
...(ngDevMode ? [{ debugName: "multiTriggerLabel" }] : /* istanbul ignore next */ []));
|
|
672
730
|
selectAllIndeterminate = computed(() => {
|
|
673
731
|
if (!this.isMultiple()) {
|
|
674
732
|
return false;
|
|
@@ -680,8 +738,10 @@ class LibSelectFieldComponent {
|
|
|
680
738
|
}
|
|
681
739
|
const selectedCount = opts.filter((o) => current.includes(o.value)).length;
|
|
682
740
|
return selectedCount > 0 && selectedCount < opts.length;
|
|
683
|
-
},
|
|
684
|
-
|
|
741
|
+
}, /* @ts-ignore */
|
|
742
|
+
...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : /* istanbul ignore next */ []));
|
|
743
|
+
value = signal(null, /* @ts-ignore */
|
|
744
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
685
745
|
onChange = () => {
|
|
686
746
|
/* assigned by registerOnChange */
|
|
687
747
|
};
|
|
@@ -816,16 +876,16 @@ class LibSelectFieldComponent {
|
|
|
816
876
|
trackByVirtualRow(_index, row) {
|
|
817
877
|
return row.kind === 'selectAll' ? '__select-all__' : String(row.option.value);
|
|
818
878
|
}
|
|
819
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
820
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
879
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
880
|
+
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: [
|
|
821
881
|
{
|
|
822
882
|
provide: NG_VALUE_ACCESSOR,
|
|
823
883
|
useExisting: forwardRef(() => LibSelectFieldComponent),
|
|
824
884
|
multi: true,
|
|
825
885
|
},
|
|
826
|
-
], 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$2.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$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4$1.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 });
|
|
886
|
+
], 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 });
|
|
827
887
|
}
|
|
828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
888
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSelectFieldComponent, decorators: [{
|
|
829
889
|
type: Component,
|
|
830
890
|
args: [{ selector: 'lib-select-field', standalone: true, imports: [MatFormFieldModule, MatSelectModule, ScrollingModule, MatInputModule, MatIconModule, LibCheckboxComponent], providers: [
|
|
831
891
|
{
|
|
@@ -837,26 +897,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
837
897
|
}], 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"] }] } });
|
|
838
898
|
|
|
839
899
|
class LibListItemComponent {
|
|
840
|
-
items = input([],
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
900
|
+
items = input([], /* @ts-ignore */
|
|
901
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
902
|
+
selectedIds = input([], /* @ts-ignore */
|
|
903
|
+
...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
|
|
904
|
+
multiple = input(true, /* @ts-ignore */
|
|
905
|
+
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
906
|
+
disabled = input(false, /* @ts-ignore */
|
|
907
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
908
|
+
showCheckbox = input(true, /* @ts-ignore */
|
|
909
|
+
...(ngDevMode ? [{ debugName: "showCheckbox" }] : /* istanbul ignore next */ []));
|
|
910
|
+
showAvatar = input(true, /* @ts-ignore */
|
|
911
|
+
...(ngDevMode ? [{ debugName: "showAvatar" }] : /* istanbul ignore next */ []));
|
|
912
|
+
showDividers = input(true, /* @ts-ignore */
|
|
913
|
+
...(ngDevMode ? [{ debugName: "showDividers" }] : /* istanbul ignore next */ []));
|
|
847
914
|
/** Posición del checkbox: 'leading' (izquierda) o 'trailing' (derecha). Por defecto 'trailing' según diseño Figma. */
|
|
848
|
-
checkboxPosition = input('trailing',
|
|
915
|
+
checkboxPosition = input('trailing', /* @ts-ignore */
|
|
916
|
+
...(ngDevMode ? [{ debugName: "checkboxPosition" }] : /* istanbul ignore next */ []));
|
|
849
917
|
/** Ancho de la lista. Acepta valores CSS (ej: '18.8rem', '300px', '100%'). Si no se pasa, la lista ocupa el ancho disponible. */
|
|
850
|
-
width = input(undefined,
|
|
918
|
+
width = input(undefined, /* @ts-ignore */
|
|
919
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
851
920
|
/** Fondo personalizado de la lista/items. Si no se define, usa el fondo por defecto de tokens. */
|
|
852
|
-
backgroundColor = input(undefined,
|
|
921
|
+
backgroundColor = input(undefined, /* @ts-ignore */
|
|
922
|
+
...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
|
|
853
923
|
selectionChange = output();
|
|
854
924
|
itemClick = output();
|
|
855
925
|
/** Template para proyectar contenido arriba de la lista (ej: checkbox, filtros) */
|
|
856
|
-
headerTemplate = contentChild('headerTemplate',
|
|
926
|
+
headerTemplate = contentChild('headerTemplate', /* @ts-ignore */
|
|
927
|
+
...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
|
|
857
928
|
/** Template para proyectar el contenido personalizado de cada item. Usar: let-item para acceder al item */
|
|
858
|
-
itemTemplate = contentChild('itemTemplate',
|
|
859
|
-
|
|
929
|
+
itemTemplate = contentChild('itemTemplate', /* @ts-ignore */
|
|
930
|
+
...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
|
|
931
|
+
selectedSet = computed(() => new Set(this.selectedIds()), /* @ts-ignore */
|
|
932
|
+
...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
|
|
860
933
|
trackById(_index, item) {
|
|
861
934
|
return item.id;
|
|
862
935
|
}
|
|
@@ -897,46 +970,71 @@ class LibListItemComponent {
|
|
|
897
970
|
onItemClick(item) {
|
|
898
971
|
this.itemClick.emit(item);
|
|
899
972
|
}
|
|
900
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
901
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
973
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
974
|
+
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 });
|
|
902
975
|
}
|
|
903
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibListItemComponent, decorators: [{
|
|
904
977
|
type: Component,
|
|
905
|
-
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()
|
|
978
|
+
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"] }]
|
|
906
979
|
}], 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 }] }] } });
|
|
907
980
|
|
|
908
|
-
class
|
|
909
|
-
|
|
910
|
-
|
|
981
|
+
class LibRadioButtonComponent {
|
|
982
|
+
value = input(null, /* @ts-ignore */
|
|
983
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
984
|
+
disabled = input(false, /* @ts-ignore */
|
|
985
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
986
|
+
checked = input(false, /* @ts-ignore */
|
|
987
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
988
|
+
checkedChange = output();
|
|
989
|
+
get ariaDisabled() {
|
|
990
|
+
return this.disabled() ? true : null;
|
|
991
|
+
}
|
|
992
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
993
|
+
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 });
|
|
911
994
|
}
|
|
912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibRadioButtonComponent, decorators: [{
|
|
913
996
|
type: Component,
|
|
914
|
-
args: [{ selector: 'lib-
|
|
915
|
-
}] }
|
|
997
|
+
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"] }]
|
|
998
|
+
}], 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: [{
|
|
999
|
+
type: HostBinding,
|
|
1000
|
+
args: ['attr.aria-disabled']
|
|
1001
|
+
}] } });
|
|
916
1002
|
|
|
917
1003
|
/**
|
|
918
1004
|
* @deprecated Prefer `lib-select-field` for new implementations.
|
|
919
1005
|
* Kept for compatibility while migrating existing screens.
|
|
920
1006
|
*/
|
|
921
1007
|
class LibMenuComponent {
|
|
922
|
-
label = input(null,
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
1008
|
+
label = input(null, /* @ts-ignore */
|
|
1009
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1010
|
+
placeholder = input('Seleccionar', /* @ts-ignore */
|
|
1011
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
1012
|
+
options = input([], /* @ts-ignore */
|
|
1013
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
1014
|
+
mode = input('single', /* @ts-ignore */
|
|
1015
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
1016
|
+
filterable = input(true, /* @ts-ignore */
|
|
1017
|
+
...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
|
|
1018
|
+
disabled = input(false, /* @ts-ignore */
|
|
1019
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1020
|
+
panelOpen = signal(false, /* @ts-ignore */
|
|
1021
|
+
...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
|
|
1022
|
+
filterTerm = signal('', /* @ts-ignore */
|
|
1023
|
+
...(ngDevMode ? [{ debugName: "filterTerm" }] : /* istanbul ignore next */ []));
|
|
1024
|
+
disabledByControl = signal(false, /* @ts-ignore */
|
|
1025
|
+
...(ngDevMode ? [{ debugName: "disabledByControl" }] : /* istanbul ignore next */ []));
|
|
1026
|
+
valueSignal = signal(null, /* @ts-ignore */
|
|
1027
|
+
...(ngDevMode ? [{ debugName: "valueSignal" }] : /* istanbul ignore next */ []));
|
|
1028
|
+
isMultiple = computed(() => this.mode() === 'multiple', /* @ts-ignore */
|
|
1029
|
+
...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
|
|
933
1030
|
filteredOptions = computed(() => {
|
|
934
1031
|
const opts = this.options();
|
|
935
1032
|
const term = this.filterTerm().trim().toLowerCase();
|
|
936
1033
|
if (!term)
|
|
937
1034
|
return opts;
|
|
938
1035
|
return opts.filter((o) => o.label.toLowerCase().includes(term));
|
|
939
|
-
},
|
|
1036
|
+
}, /* @ts-ignore */
|
|
1037
|
+
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
940
1038
|
triggerLabel = computed(() => {
|
|
941
1039
|
const current = this.valueSignal();
|
|
942
1040
|
const opts = this.options();
|
|
@@ -958,7 +1056,8 @@ class LibMenuComponent {
|
|
|
958
1056
|
}
|
|
959
1057
|
const match = opts.find((o) => o.value === current);
|
|
960
1058
|
return match?.label ?? this.placeholder();
|
|
961
|
-
},
|
|
1059
|
+
}, /* @ts-ignore */
|
|
1060
|
+
...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
|
|
962
1061
|
onMenuOpened() {
|
|
963
1062
|
this.panelOpen.set(true);
|
|
964
1063
|
}
|
|
@@ -1017,16 +1116,16 @@ class LibMenuComponent {
|
|
|
1017
1116
|
setDisabledState(isDisabled) {
|
|
1018
1117
|
this.disabledByControl.set(isDisabled);
|
|
1019
1118
|
}
|
|
1020
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1021
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1120
|
+
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: [
|
|
1022
1121
|
{
|
|
1023
1122
|
provide: NG_VALUE_ACCESSOR,
|
|
1024
1123
|
useExisting: forwardRef(() => LibMenuComponent),
|
|
1025
1124
|
multi: true,
|
|
1026
1125
|
},
|
|
1027
|
-
], 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$
|
|
1126
|
+
], 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 });
|
|
1028
1127
|
}
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibMenuComponent, decorators: [{
|
|
1030
1129
|
type: Component,
|
|
1031
1130
|
args: [{ selector: 'lib-menu', standalone: true, imports: [
|
|
1032
1131
|
MatMenuModule,
|
|
@@ -1045,26 +1144,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1045
1144
|
}], 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 }] }] } });
|
|
1046
1145
|
|
|
1047
1146
|
class LibButtonComponent {
|
|
1048
|
-
size = input('medium',
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1147
|
+
size = input('medium', /* @ts-ignore */
|
|
1148
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1149
|
+
disabled = input(false, /* @ts-ignore */
|
|
1150
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1151
|
+
type = input('button', /* @ts-ignore */
|
|
1152
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1153
|
+
fullWidth = input(false, /* @ts-ignore */
|
|
1154
|
+
...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
1155
|
+
variant = input('filled', /* @ts-ignore */
|
|
1156
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1157
|
+
shape = input('round', /* @ts-ignore */
|
|
1158
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
1159
|
+
toggle = input(false, /* @ts-ignore */
|
|
1160
|
+
...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
|
|
1161
|
+
selected = input(false, /* @ts-ignore */
|
|
1162
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
1163
|
+
label = input('', /* @ts-ignore */
|
|
1164
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1165
|
+
icon = input('', /* @ts-ignore */
|
|
1166
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1167
|
+
iconPosition = input('leading', /* @ts-ignore */
|
|
1168
|
+
...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
1169
|
+
contentAlign = input('center', /* @ts-ignore */
|
|
1170
|
+
...(ngDevMode ? [{ debugName: "contentAlign" }] : /* istanbul ignore next */ []));
|
|
1171
|
+
labelClass = input('', /* @ts-ignore */
|
|
1172
|
+
...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
|
|
1173
|
+
pressed = input(false, /* @ts-ignore */
|
|
1174
|
+
...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
|
|
1175
|
+
debugPadding = input(false, /* @ts-ignore */
|
|
1176
|
+
...(ngDevMode ? [{ debugName: "debugPadding" }] : /* istanbul ignore next */ []));
|
|
1177
|
+
isPressed = signal(false, /* @ts-ignore */
|
|
1178
|
+
...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
|
|
1064
1179
|
/** Si hay label o icon por input, se usa contenido interno; si no, ng-content. */
|
|
1065
|
-
hasInputContent = computed(() => this.label().length > 0 || this.icon().length > 0,
|
|
1180
|
+
hasInputContent = computed(() => this.label().length > 0 || this.icon().length > 0, /* @ts-ignore */
|
|
1181
|
+
...(ngDevMode ? [{ debugName: "hasInputContent" }] : /* istanbul ignore next */ []));
|
|
1066
1182
|
/** contentAlign ya es 'start' | 'center' | 'end'; se usa directo para las clases CSS. */
|
|
1067
|
-
contentAlignNormalized = computed(() => this.contentAlign(),
|
|
1183
|
+
contentAlignNormalized = computed(() => this.contentAlign(), /* @ts-ignore */
|
|
1184
|
+
...(ngDevMode ? [{ debugName: "contentAlignNormalized" }] : /* istanbul ignore next */ []));
|
|
1068
1185
|
classes = computed(() => ({
|
|
1069
1186
|
'lib-mat-btn': true,
|
|
1070
1187
|
'lib-mat-btn--xsmall': this.size() === 'xsmall',
|
|
@@ -1087,7 +1204,8 @@ class LibButtonComponent {
|
|
|
1087
1204
|
'lib-mat-btn--align-start': this.contentAlignNormalized() === 'start',
|
|
1088
1205
|
'lib-mat-btn--align-center': this.contentAlignNormalized() === 'center',
|
|
1089
1206
|
'lib-mat-btn--align-end': this.contentAlignNormalized() === 'end',
|
|
1090
|
-
}),
|
|
1207
|
+
}), /* @ts-ignore */
|
|
1208
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1091
1209
|
onPressStart() {
|
|
1092
1210
|
if (!this.disabled())
|
|
1093
1211
|
this.isPressed.set(true);
|
|
@@ -1107,26 +1225,34 @@ class LibButtonComponent {
|
|
|
1107
1225
|
onKeyUp() {
|
|
1108
1226
|
this.isPressed.set(false);
|
|
1109
1227
|
}
|
|
1110
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1111
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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: [".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$3.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: i4$1.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 });
|
|
1228
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1229
|
+
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 });
|
|
1112
1230
|
}
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibButtonComponent, decorators: [{
|
|
1114
1232
|
type: Component,
|
|
1115
1233
|
args: [{ selector: 'lib-button', standalone: true, imports: [MatButtonModule, MatIconModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1116
1234
|
'[class.lib-mat-btn-host--full]': 'fullWidth()',
|
|
1117
|
-
}, 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: [".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"] }]
|
|
1235
|
+
}, 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"] }]
|
|
1118
1236
|
}], 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 }] }] } });
|
|
1119
1237
|
|
|
1120
1238
|
class LibIconButtonComponent {
|
|
1121
|
-
size = input('small',
|
|
1122
|
-
|
|
1123
|
-
|
|
1239
|
+
size = input('small', /* @ts-ignore */
|
|
1240
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1241
|
+
variant = input('standard', /* @ts-ignore */
|
|
1242
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1243
|
+
shape = input('round', /* @ts-ignore */
|
|
1244
|
+
...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
|
|
1124
1245
|
/** Variante de espacio (padding inline) desde Figma: narrow, default, wide. */
|
|
1125
|
-
space = input('default',
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1246
|
+
space = input('default', /* @ts-ignore */
|
|
1247
|
+
...(ngDevMode ? [{ debugName: "space" }] : /* istanbul ignore next */ []));
|
|
1248
|
+
disabled = input(false, /* @ts-ignore */
|
|
1249
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1250
|
+
type = input('button', /* @ts-ignore */
|
|
1251
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1252
|
+
toggle = input(false, /* @ts-ignore */
|
|
1253
|
+
...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
|
|
1254
|
+
selected = input(false, /* @ts-ignore */
|
|
1255
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
1130
1256
|
classes = computed(() => ({
|
|
1131
1257
|
'ui-icon-btn--xsmall': this.size() === 'xsmall',
|
|
1132
1258
|
'ui-icon-btn--small': this.size() === 'small',
|
|
@@ -1145,42 +1271,56 @@ class LibIconButtonComponent {
|
|
|
1145
1271
|
'ui-icon-btn--variant-action': this.variant() === 'action',
|
|
1146
1272
|
'ui-icon-btn--toggle': this.toggle(),
|
|
1147
1273
|
'ui-icon-btn--toggle-selected': this.toggle() && this.selected(),
|
|
1148
|
-
}),
|
|
1149
|
-
|
|
1150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", 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$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1274
|
+
}), /* @ts-ignore */
|
|
1275
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1276
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1277
|
+
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 });
|
|
1151
1278
|
}
|
|
1152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibIconButtonComponent, decorators: [{
|
|
1153
1280
|
type: Component,
|
|
1154
1281
|
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"] }]
|
|
1155
1282
|
}], 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 }] }] } });
|
|
1156
1283
|
|
|
1157
1284
|
class SlideToggle {
|
|
1158
|
-
checked = input(false,
|
|
1285
|
+
checked = input(false, /* @ts-ignore */
|
|
1286
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
1159
1287
|
checkedChange = output();
|
|
1160
1288
|
onChange(event) {
|
|
1161
1289
|
this.checkedChange.emit(event.checked);
|
|
1162
1290
|
}
|
|
1163
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1291
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SlideToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1292
|
+
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 });
|
|
1165
1293
|
}
|
|
1166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1294
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SlideToggle, decorators: [{
|
|
1167
1295
|
type: Component,
|
|
1168
|
-
args: [{ selector: 'lib-slide-toggle, slide-toggle', standalone: true, imports: [MatSlideToggleModule], 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" }]
|
|
1296
|
+
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" }]
|
|
1169
1297
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
|
|
1170
1298
|
|
|
1171
1299
|
class CircularProgressStepper {
|
|
1172
|
-
currentStep = input(0,
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1300
|
+
currentStep = input(0, /* @ts-ignore */
|
|
1301
|
+
...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
|
|
1302
|
+
totalsStep = input(0, /* @ts-ignore */
|
|
1303
|
+
...(ngDevMode ? [{ debugName: "totalsStep" }] : /* istanbul ignore next */ []));
|
|
1304
|
+
size = input('64px', /* @ts-ignore */
|
|
1305
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1306
|
+
barWidth = input('10px', /* @ts-ignore */
|
|
1307
|
+
...(ngDevMode ? [{ debugName: "barWidth" }] : /* istanbul ignore next */ []));
|
|
1308
|
+
colorBarProgress = input('#0BC626', /* @ts-ignore */
|
|
1309
|
+
...(ngDevMode ? [{ debugName: "colorBarProgress" }] : /* istanbul ignore next */ []));
|
|
1310
|
+
shadowColorBarProgress = input('#F0F0F0', /* @ts-ignore */
|
|
1311
|
+
...(ngDevMode ? [{ debugName: "shadowColorBarProgress" }] : /* istanbul ignore next */ []));
|
|
1312
|
+
noJsMessage = input('Esta función requiere JavaScript 😢', /* @ts-ignore */
|
|
1313
|
+
...(ngDevMode ? [{ debugName: "noJsMessage" }] : /* istanbul ignore next */ []));
|
|
1314
|
+
animationDuration = input(500, /* @ts-ignore */
|
|
1315
|
+
...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
|
|
1316
|
+
progress = signal(0, /* @ts-ignore */
|
|
1317
|
+
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
1318
|
+
isAnimating = signal(false, /* @ts-ignore */
|
|
1319
|
+
...(ngDevMode ? [{ debugName: "isAnimating" }] : /* istanbul ignore next */ []));
|
|
1320
|
+
jsEnabled = signal(true, /* @ts-ignore */
|
|
1321
|
+
...(ngDevMode ? [{ debugName: "jsEnabled" }] : /* istanbul ignore next */ []));
|
|
1322
|
+
progressPercentage = computed(() => `${this.progress()}%`, /* @ts-ignore */
|
|
1323
|
+
...(ngDevMode ? [{ debugName: "progressPercentage" }] : /* istanbul ignore next */ []));
|
|
1184
1324
|
constructor() {
|
|
1185
1325
|
effect(() => {
|
|
1186
1326
|
this.updateProgress();
|
|
@@ -1195,53 +1335,62 @@ class CircularProgressStepper {
|
|
|
1195
1335
|
this.progress.set(Math.round(progress));
|
|
1196
1336
|
}, 100);
|
|
1197
1337
|
}
|
|
1198
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1338
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CircularProgressStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1339
|
+
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 });
|
|
1200
1340
|
}
|
|
1201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CircularProgressStepper, decorators: [{
|
|
1202
1342
|
type: Component,
|
|
1203
|
-
args: [{ selector: 'lib-circular-progress-stepper, circular-progress-stepper', imports: [], 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"] }]
|
|
1343
|
+
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"] }]
|
|
1204
1344
|
}], 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 }] }] } });
|
|
1205
1345
|
|
|
1206
1346
|
class LibSpinnerComponent {
|
|
1207
|
-
diameter = input(48,
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1347
|
+
diameter = input(48, /* @ts-ignore */
|
|
1348
|
+
...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
|
|
1349
|
+
strokeWidth = input(4, /* @ts-ignore */
|
|
1350
|
+
...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
|
|
1351
|
+
color = input('var(--Rojo-400, #e30613)', /* @ts-ignore */
|
|
1352
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
1353
|
+
ariaLabel = input('Cargando', /* @ts-ignore */
|
|
1354
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
1355
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1356
|
+
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 });
|
|
1213
1357
|
}
|
|
1214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibSpinnerComponent, decorators: [{
|
|
1215
1359
|
type: Component,
|
|
1216
|
-
args: [{ selector: 'lib-spinner, spinner', standalone: true, imports: [MatProgressSpinnerModule], 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"] }]
|
|
1360
|
+
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"] }]
|
|
1217
1361
|
}], 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 }] }] } });
|
|
1218
1362
|
|
|
1219
1363
|
class LibDividerComponent {
|
|
1220
1364
|
/** Orientación: horizontal (full width) o vertical (full height). Figma: Horizontal/Full-width, Vertical/Full-width */
|
|
1221
|
-
orientation = input('horizontal',
|
|
1222
|
-
|
|
1223
|
-
static
|
|
1365
|
+
orientation = input('horizontal', /* @ts-ignore */
|
|
1366
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
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 });
|
|
1224
1369
|
}
|
|
1225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDividerComponent, decorators: [{
|
|
1226
1371
|
type: Component,
|
|
1227
1372
|
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"] }]
|
|
1228
1373
|
}], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
1229
1374
|
|
|
1230
1375
|
class LibTooltipComponent {
|
|
1231
1376
|
/** Texto del tooltip. */
|
|
1232
|
-
text = input('Supporting text',
|
|
1377
|
+
text = input('Supporting text', /* @ts-ignore */
|
|
1378
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
1233
1379
|
/** Variante del tooltip según Figma: single-line o multi-line. */
|
|
1234
|
-
type = input('single-line',
|
|
1380
|
+
type = input('single-line', /* @ts-ignore */
|
|
1381
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
1235
1382
|
/** Ancho máximo opcional para controlar el wrap en multi-line (ej: "12.5rem", "200px"). */
|
|
1236
|
-
maxWidth = input(null,
|
|
1383
|
+
maxWidth = input(null, /* @ts-ignore */
|
|
1384
|
+
...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
1237
1385
|
classes = computed(() => ({
|
|
1238
1386
|
'ui-tooltip--single-line': this.type() === 'single-line',
|
|
1239
1387
|
'ui-tooltip--multi-line': this.type() === 'multi-line',
|
|
1240
|
-
}),
|
|
1241
|
-
|
|
1242
|
-
static
|
|
1388
|
+
}), /* @ts-ignore */
|
|
1389
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1391
|
+
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 });
|
|
1243
1392
|
}
|
|
1244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1393
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibTooltipComponent, decorators: [{
|
|
1245
1394
|
type: Component,
|
|
1246
1395
|
args: [{ selector: 'lib-tooltip', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1247
1396
|
'[class.ui-tooltip-host]': 'true',
|
|
@@ -1249,27 +1398,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1249
1398
|
}], 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 }] }] } });
|
|
1250
1399
|
|
|
1251
1400
|
class LibCardComponent {
|
|
1252
|
-
title = input('Header',
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1401
|
+
title = input('Header', /* @ts-ignore */
|
|
1402
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
1403
|
+
subhead = input('', /* @ts-ignore */
|
|
1404
|
+
...(ngDevMode ? [{ debugName: "subhead" }] : /* istanbul ignore next */ []));
|
|
1405
|
+
variant = input('outlined', /* @ts-ignore */
|
|
1406
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1407
|
+
state = input('enabled', /* @ts-ignore */
|
|
1408
|
+
...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
|
|
1409
|
+
leadingKind = input('avatar', /* @ts-ignore */
|
|
1410
|
+
...(ngDevMode ? [{ debugName: "leadingKind" }] : /* istanbul ignore next */ []));
|
|
1411
|
+
leadingIcon = input('', /* @ts-ignore */
|
|
1412
|
+
...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
|
|
1258
1413
|
/** Tamaño del contenedor leading (Figma suele usar 2.5rem). */
|
|
1259
|
-
leadingContainerSize = input('2.5rem',
|
|
1414
|
+
leadingContainerSize = input('2.5rem', /* @ts-ignore */
|
|
1415
|
+
...(ngDevMode ? [{ debugName: "leadingContainerSize" }] : /* istanbul ignore next */ []));
|
|
1260
1416
|
/** Tamaño del icono leading. */
|
|
1261
|
-
leadingIconSize = input('2.08331rem',
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1417
|
+
leadingIconSize = input('2.08331rem', /* @ts-ignore */
|
|
1418
|
+
...(ngDevMode ? [{ debugName: "leadingIconSize" }] : /* istanbul ignore next */ []));
|
|
1419
|
+
mediaIcon = input('', /* @ts-ignore */
|
|
1420
|
+
...(ngDevMode ? [{ debugName: "mediaIcon" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
mediaAlt = input('Card media', /* @ts-ignore */
|
|
1422
|
+
...(ngDevMode ? [{ debugName: "mediaAlt" }] : /* istanbul ignore next */ []));
|
|
1423
|
+
showMedia = input(false, /* @ts-ignore */
|
|
1424
|
+
...(ngDevMode ? [{ debugName: "showMedia" }] : /* istanbul ignore next */ []));
|
|
1425
|
+
avatarText = input('', /* @ts-ignore */
|
|
1426
|
+
...(ngDevMode ? [{ debugName: "avatarText" }] : /* istanbul ignore next */ []));
|
|
1427
|
+
width = input('20.5rem', /* @ts-ignore */
|
|
1428
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
1267
1429
|
/** Alto del card. */
|
|
1268
|
-
height = input('4.5rem',
|
|
1430
|
+
height = input('4.5rem', /* @ts-ignore */
|
|
1431
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
1269
1432
|
/** Si es true, el card toma el 100% del ancho del contenedor padre. */
|
|
1270
|
-
fullWidth = input(false,
|
|
1271
|
-
|
|
1272
|
-
|
|
1433
|
+
fullWidth = input(false, /* @ts-ignore */
|
|
1434
|
+
...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
|
|
1435
|
+
active = input(false, /* @ts-ignore */
|
|
1436
|
+
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
1437
|
+
disabled = input(false, /* @ts-ignore */
|
|
1438
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1273
1439
|
cardClick = output();
|
|
1274
1440
|
initial = computed(() => {
|
|
1275
1441
|
const text = this.avatarText().trim();
|
|
@@ -1277,12 +1443,18 @@ class LibCardComponent {
|
|
|
1277
1443
|
return text.slice(0, 1).toUpperCase();
|
|
1278
1444
|
const title = this.title().trim();
|
|
1279
1445
|
return title.length ? title.slice(0, 1).toUpperCase() : 'A';
|
|
1280
|
-
},
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1446
|
+
}, /* @ts-ignore */
|
|
1447
|
+
...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
|
|
1448
|
+
hasMedia = computed(() => this.mediaIcon().trim().length > 0, /* @ts-ignore */
|
|
1449
|
+
...(ngDevMode ? [{ debugName: "hasMedia" }] : /* istanbul ignore next */ []));
|
|
1450
|
+
isMediaImage = computed(() => this.mediaIcon().trim().endsWith('.svg'), /* @ts-ignore */
|
|
1451
|
+
...(ngDevMode ? [{ debugName: "isMediaImage" }] : /* istanbul ignore next */ []));
|
|
1452
|
+
hasLeadingIcon = computed(() => this.leadingIcon().trim().length > 0, /* @ts-ignore */
|
|
1453
|
+
...(ngDevMode ? [{ debugName: "hasLeadingIcon" }] : /* istanbul ignore next */ []));
|
|
1454
|
+
isLeadingImage = computed(() => this.leadingIcon().trim().endsWith('.svg'), /* @ts-ignore */
|
|
1455
|
+
...(ngDevMode ? [{ debugName: "isLeadingImage" }] : /* istanbul ignore next */ []));
|
|
1456
|
+
hasSubhead = computed(() => this.subhead().trim().length > 0, /* @ts-ignore */
|
|
1457
|
+
...(ngDevMode ? [{ debugName: "hasSubhead" }] : /* istanbul ignore next */ []));
|
|
1286
1458
|
classes = computed(() => ({
|
|
1287
1459
|
'ui-card': true,
|
|
1288
1460
|
'ui-card--outlined': this.variant() === 'outlined',
|
|
@@ -1299,7 +1471,8 @@ class LibCardComponent {
|
|
|
1299
1471
|
'ui-card--title-emphasized': !this.hasSubhead(),
|
|
1300
1472
|
'ui-card--active': this.active(),
|
|
1301
1473
|
'ui-card--disabled': this.disabled(),
|
|
1302
|
-
}),
|
|
1474
|
+
}), /* @ts-ignore */
|
|
1475
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1303
1476
|
onCardClick() {
|
|
1304
1477
|
if (this.disabled())
|
|
1305
1478
|
return;
|
|
@@ -1313,20 +1486,178 @@ class LibCardComponent {
|
|
|
1313
1486
|
this.cardClick.emit();
|
|
1314
1487
|
}
|
|
1315
1488
|
}
|
|
1316
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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\r\n [ngClass]=\"classes()\"\r\n [style.width]=\"fullWidth() ? '100%' : width()\"\r\n [style.min-width]=\"fullWidth() ? '0rem' : width()\"\r\n [style.height]=\"height()\"\r\n [style.min-height]=\"height()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n (click)=\"onCardClick()\"\r\n (keydown)=\"onCardKeydown($event)\"\r\n>\r\n <div class=\"ui-card__content\">\r\n @if (leadingKind() === 'icon') {\r\n <div\r\n class=\"ui-card__leading ui-card__leading--icon\"\r\n aria-hidden=\"true\"\r\n [style.width]=\"leadingContainerSize()\"\r\n [style.height]=\"leadingContainerSize()\"\r\n >\r\n @if (hasLeadingIcon()) {\r\n @if (isLeadingImage()) {\r\n <img [src]=\"leadingIcon()\" alt=\"\" [style.width]=\"leadingIconSize()\" [style.height]=\"leadingIconSize()\" />\r\n } @else {\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n [style.width]=\"leadingIconSize()\"\r\n [style.height]=\"leadingIconSize()\"\r\n >\r\n <g [innerHTML]=\"leadingIcon()\"></g>\r\n </svg>\r\n }\r\n } @else {\r\n <span>{{ initial() }}</span>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"ui-card__avatar\" aria-hidden=\"true\">\r\n {{ initial() }}\r\n </div>\r\n }\r\n\r\n <div class=\"ui-card__text\">\r\n <p class=\"ui-card__title\">{{ title() }}</p>\r\n @if (subhead()) {\r\n <p class=\"ui-card__subhead\">{{ subhead() }}</p>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showMedia()) {\r\n <div class=\"ui-card__media\" [class.ui-card__media--empty]=\"!hasMedia()\">\r\n @if (hasMedia()) {\r\n @if (isMediaImage()) {\r\n <img [src]=\"mediaIcon()\" [alt]=\"mediaAlt()\" />\r\n } @else {\r\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\r\n <g [innerHTML]=\"mediaIcon()\"></g>\r\n </svg>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n <span class=\"ui-card__state-layer\" aria-hidden=\"true\"></span>\r\n @if (state() === 'focused') {\r\n <span class=\"ui-card__focus-indicator\" aria-hidden=\"true\"></span>\r\n }\r\n</div>\r\n", styles: [":host{display:block}:host(.lib-card-host--full-width){width:100%;min-width:0}.ui-card{display:flex;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: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;position:relative;z-index:2}.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);position:relative;z-index:2}.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 });
|
|
1489
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1490
|
+
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 });
|
|
1318
1491
|
}
|
|
1319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibCardComponent, decorators: [{
|
|
1320
1493
|
type: Component,
|
|
1321
1494
|
args: [{ selector: 'lib-card', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
1322
1495
|
'[class.lib-card-host--full-width]': 'fullWidth()',
|
|
1323
|
-
}, template: "<div\
|
|
1496
|
+
}, 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"] }]
|
|
1324
1497
|
}], 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"] }] } });
|
|
1325
1498
|
|
|
1499
|
+
const CREDIX_DATE_FORMATS$1 = {
|
|
1500
|
+
parse: { dateInput: { month: 'short', day: 'numeric', year: 'numeric' } },
|
|
1501
|
+
display: {
|
|
1502
|
+
dateInput: { day: '2-digit', month: '2-digit', year: 'numeric' },
|
|
1503
|
+
monthYearLabel: { month: 'short', year: 'numeric' },
|
|
1504
|
+
dateA11yLabel: { day: 'numeric', month: 'long', year: 'numeric' },
|
|
1505
|
+
monthYearA11yLabel: { month: 'long', year: 'numeric' },
|
|
1506
|
+
},
|
|
1507
|
+
};
|
|
1508
|
+
class LibDatePickerComponent {
|
|
1509
|
+
value = input(null, /* @ts-ignore */
|
|
1510
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1511
|
+
disabled = input(false, /* @ts-ignore */
|
|
1512
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1513
|
+
min = input(null, /* @ts-ignore */
|
|
1514
|
+
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1515
|
+
max = input(null, /* @ts-ignore */
|
|
1516
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1517
|
+
dateChange = output();
|
|
1518
|
+
_selected = signal(null, /* @ts-ignore */
|
|
1519
|
+
...(ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []));
|
|
1520
|
+
constructor() {
|
|
1521
|
+
effect(() => { this._selected.set(this.value()); });
|
|
1522
|
+
}
|
|
1523
|
+
_displayValue = computed(() => this.value() ?? this._selected(), /* @ts-ignore */
|
|
1524
|
+
...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
|
|
1525
|
+
_onChange(event) {
|
|
1526
|
+
if (event.value) {
|
|
1527
|
+
this._selected.set(event.value);
|
|
1528
|
+
this.dateChange.emit(event.value);
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1532
|
+
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 });
|
|
1533
|
+
}
|
|
1534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDatePickerComponent, decorators: [{
|
|
1535
|
+
type: Component,
|
|
1536
|
+
args: [{ selector: 'lib-date-picker', standalone: true, imports: [
|
|
1537
|
+
MatFormFieldModule,
|
|
1538
|
+
MatInputModule,
|
|
1539
|
+
MatDatepickerModule,
|
|
1540
|
+
MatNativeDateModule,
|
|
1541
|
+
MatDatepickerActions,
|
|
1542
|
+
MatDatepickerApply,
|
|
1543
|
+
MatDatepickerCancel,
|
|
1544
|
+
], 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"] }]
|
|
1545
|
+
}], 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"] }] } });
|
|
1546
|
+
|
|
1547
|
+
const CREDIX_DATE_FORMATS = {
|
|
1548
|
+
parse: { dateInput: { month: 'short', day: 'numeric', year: 'numeric' } },
|
|
1549
|
+
display: {
|
|
1550
|
+
dateInput: { day: '2-digit', month: '2-digit', year: 'numeric' },
|
|
1551
|
+
monthYearLabel: { month: 'short', year: 'numeric' },
|
|
1552
|
+
dateA11yLabel: { day: 'numeric', month: 'long', year: 'numeric' },
|
|
1553
|
+
monthYearA11yLabel: { month: 'long', year: 'numeric' },
|
|
1554
|
+
},
|
|
1555
|
+
};
|
|
1556
|
+
class LibDateRangePickerComponent {
|
|
1557
|
+
startDate = input(null, /* @ts-ignore */
|
|
1558
|
+
...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
|
|
1559
|
+
endDate = input(null, /* @ts-ignore */
|
|
1560
|
+
...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
|
|
1561
|
+
disabled = input(false, /* @ts-ignore */
|
|
1562
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1563
|
+
min = input(null, /* @ts-ignore */
|
|
1564
|
+
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
1565
|
+
max = input(null, /* @ts-ignore */
|
|
1566
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
1567
|
+
rangeChange = output();
|
|
1568
|
+
_range = new FormGroup({
|
|
1569
|
+
start: new FormControl(null),
|
|
1570
|
+
end: new FormControl(null),
|
|
1571
|
+
});
|
|
1572
|
+
// True when the user clicked Apply (not Cancel/outside-close)
|
|
1573
|
+
_applyPending = false;
|
|
1574
|
+
constructor() {
|
|
1575
|
+
effect(() => {
|
|
1576
|
+
this._range.setValue({ start: this.startDate(), end: this.endDate() }, { emitEvent: false });
|
|
1577
|
+
});
|
|
1578
|
+
effect(() => {
|
|
1579
|
+
if (this.disabled()) {
|
|
1580
|
+
this._range.disable({ emitEvent: false });
|
|
1581
|
+
}
|
|
1582
|
+
else {
|
|
1583
|
+
this._range.enable({ emitEvent: false });
|
|
1584
|
+
}
|
|
1585
|
+
});
|
|
1586
|
+
}
|
|
1587
|
+
_markApply() {
|
|
1588
|
+
this._applyPending = true;
|
|
1589
|
+
}
|
|
1590
|
+
_onClosed() {
|
|
1591
|
+
if (this._applyPending) {
|
|
1592
|
+
const start = this._range.controls.start.value;
|
|
1593
|
+
const end = this._range.controls.end.value;
|
|
1594
|
+
if (start && end) {
|
|
1595
|
+
this.rangeChange.emit({ start, end });
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
else {
|
|
1599
|
+
// Cancel or outside-click: reset pending selection to last committed values
|
|
1600
|
+
this._range.setValue({ start: this.startDate(), end: this.endDate() }, { emitEvent: false });
|
|
1601
|
+
}
|
|
1602
|
+
this._applyPending = false;
|
|
1603
|
+
}
|
|
1604
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1605
|
+
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 });
|
|
1606
|
+
}
|
|
1607
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibDateRangePickerComponent, decorators: [{
|
|
1608
|
+
type: Component,
|
|
1609
|
+
args: [{ selector: 'lib-date-range-picker', standalone: true, imports: [
|
|
1610
|
+
ReactiveFormsModule,
|
|
1611
|
+
MatFormFieldModule,
|
|
1612
|
+
MatInputModule,
|
|
1613
|
+
MatDatepickerModule,
|
|
1614
|
+
MatNativeDateModule,
|
|
1615
|
+
MatDatepickerActions,
|
|
1616
|
+
MatDatepickerApply,
|
|
1617
|
+
MatDatepickerCancel,
|
|
1618
|
+
], 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"] }]
|
|
1619
|
+
}], 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"] }] } });
|
|
1620
|
+
|
|
1621
|
+
class LibChipComponent {
|
|
1622
|
+
label = input('', /* @ts-ignore */
|
|
1623
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
1624
|
+
variant = input('outlined', /* @ts-ignore */
|
|
1625
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
1626
|
+
size = input('medium', /* @ts-ignore */
|
|
1627
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
1628
|
+
selected = input(false, /* @ts-ignore */
|
|
1629
|
+
...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
|
|
1630
|
+
disabled = input(false, /* @ts-ignore */
|
|
1631
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1632
|
+
removable = input(false, /* @ts-ignore */
|
|
1633
|
+
...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
|
|
1634
|
+
icon = input('', /* @ts-ignore */
|
|
1635
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1636
|
+
removed = output();
|
|
1637
|
+
classes = computed(() => ({
|
|
1638
|
+
'lib-chip--filled': this.variant() === 'filled',
|
|
1639
|
+
'lib-chip--outlined': this.variant() === 'outlined',
|
|
1640
|
+
'lib-chip--small': this.size() === 'small',
|
|
1641
|
+
'lib-chip--medium': this.size() === 'medium',
|
|
1642
|
+
'lib-chip--selected': this.selected(),
|
|
1643
|
+
}), /* @ts-ignore */
|
|
1644
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
1645
|
+
onRemove() {
|
|
1646
|
+
this.removed.emit();
|
|
1647
|
+
}
|
|
1648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
+
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 });
|
|
1650
|
+
}
|
|
1651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LibChipComponent, decorators: [{
|
|
1652
|
+
type: Component,
|
|
1653
|
+
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"] }]
|
|
1654
|
+
}], 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"] }] } });
|
|
1655
|
+
|
|
1326
1656
|
class ConfirmModal {
|
|
1327
1657
|
dialogRef = inject(DialogRef);
|
|
1328
1658
|
data = inject(DIALOG_DATA);
|
|
1329
|
-
listItems = signal(this.data.listItems ?? [],
|
|
1659
|
+
listItems = signal(this.data.listItems ?? [], /* @ts-ignore */
|
|
1660
|
+
...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
|
|
1330
1661
|
labelButtonCancel = this.data.labelButtonCancel ?? 'Cancelar';
|
|
1331
1662
|
supportingText = this.data.description ?? this.data.content ?? this.data.reference ?? '';
|
|
1332
1663
|
isListVariant = this.data.variant === 'list' || this.data.variant === 'scrollable-list';
|
|
@@ -1341,18 +1672,19 @@ class ConfirmModal {
|
|
|
1341
1672
|
onConfirm() {
|
|
1342
1673
|
this.dialogRef.close(true);
|
|
1343
1674
|
}
|
|
1344
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1675
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1676
|
+
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 });
|
|
1346
1677
|
}
|
|
1347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModal, decorators: [{
|
|
1348
1679
|
type: Component,
|
|
1349
|
-
args: [{ selector: 'lib-confirm', imports: [LibButtonComponent, MatIconModule], 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"] }]
|
|
1680
|
+
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"] }]
|
|
1350
1681
|
}] });
|
|
1351
1682
|
|
|
1352
1683
|
class ConfirmModalStore {
|
|
1353
1684
|
dialog = inject(Dialog);
|
|
1354
1685
|
overlay = inject(Overlay);
|
|
1355
|
-
dialogState = signal('open',
|
|
1686
|
+
dialogState = signal('open', /* @ts-ignore */
|
|
1687
|
+
...(ngDevMode ? [{ debugName: "dialogState" }] : /* istanbul ignore next */ []));
|
|
1356
1688
|
router = inject(Router);
|
|
1357
1689
|
currentDialogRef;
|
|
1358
1690
|
open(title, labelButtonConfirm, reference = '', content = '', width = '19.5rem', labelButtonCancel = 'Cancelar', options = {}) {
|
|
@@ -1428,10 +1760,10 @@ class ConfirmModalStore {
|
|
|
1428
1760
|
}
|
|
1429
1761
|
this.dialogState.set('closed');
|
|
1430
1762
|
}
|
|
1431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1432
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1763
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1764
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, providedIn: 'root' });
|
|
1433
1765
|
}
|
|
1434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ConfirmModalStore, decorators: [{
|
|
1435
1767
|
type: Injectable,
|
|
1436
1768
|
args: [{
|
|
1437
1769
|
providedIn: 'root'
|
|
@@ -1460,18 +1792,18 @@ class SideModal {
|
|
|
1460
1792
|
this.dialogRef.close(true);
|
|
1461
1793
|
}
|
|
1462
1794
|
}
|
|
1463
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1464
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1795
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1796
|
+
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: [
|
|
1465
1797
|
trigger('dialogAnimation', [
|
|
1466
1798
|
state('closed', style({ transform: 'translateX(100%)' })),
|
|
1467
1799
|
state('open', style({ transform: 'translateX(0)' })),
|
|
1468
1800
|
transition('open => closed', [animate('0.5s ease')]),
|
|
1469
1801
|
])
|
|
1470
|
-
] });
|
|
1802
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1471
1803
|
}
|
|
1472
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModal, decorators: [{
|
|
1473
1805
|
type: Component,
|
|
1474
|
-
args: [{ selector: 'lib-side-modal, app-side-modal', imports: [CommonModule, NgComponentOutlet], animations: [
|
|
1806
|
+
args: [{ selector: 'lib-side-modal, app-side-modal', imports: [CommonModule, NgComponentOutlet], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1475
1807
|
trigger('dialogAnimation', [
|
|
1476
1808
|
state('closed', style({ transform: 'translateX(100%)' })),
|
|
1477
1809
|
state('open', style({ transform: 'translateX(0)' })),
|
|
@@ -1483,7 +1815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1483
1815
|
class SideModalStore {
|
|
1484
1816
|
dialog = inject(Dialog);
|
|
1485
1817
|
overlay = inject(Overlay);
|
|
1486
|
-
dialogState = signal('open',
|
|
1818
|
+
dialogState = signal('open', /* @ts-ignore */
|
|
1819
|
+
...(ngDevMode ? [{ debugName: "dialogState" }] : /* istanbul ignore next */ []));
|
|
1487
1820
|
currentDialogRef;
|
|
1488
1821
|
router = inject(Router);
|
|
1489
1822
|
openSideModal(content, title, width, footer, headerConfig) {
|
|
@@ -1528,10 +1861,10 @@ class SideModalStore {
|
|
|
1528
1861
|
actionSideModal() {
|
|
1529
1862
|
this.dialogState.set('action');
|
|
1530
1863
|
}
|
|
1531
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1532
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1864
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1865
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, providedIn: 'root' });
|
|
1533
1866
|
}
|
|
1534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SideModalStore, decorators: [{
|
|
1535
1868
|
type: Injectable,
|
|
1536
1869
|
args: [{
|
|
1537
1870
|
providedIn: 'root'
|
|
@@ -1539,26 +1872,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
1539
1872
|
}] });
|
|
1540
1873
|
|
|
1541
1874
|
class PageFooterActionsComponent {
|
|
1542
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1543
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1875
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1876
|
+
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 });
|
|
1544
1877
|
}
|
|
1545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1878
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterActionsComponent, decorators: [{
|
|
1546
1879
|
type: Component,
|
|
1547
1880
|
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"] }]
|
|
1548
1881
|
}] });
|
|
1549
1882
|
|
|
1550
1883
|
class ModalFooterActionsComponent {
|
|
1551
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1552
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ModalFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1885
|
+
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 });
|
|
1553
1886
|
}
|
|
1554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ModalFooterActionsComponent, decorators: [{
|
|
1555
1888
|
type: Component,
|
|
1556
1889
|
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"] }]
|
|
1557
1890
|
}] });
|
|
1558
1891
|
|
|
1559
1892
|
class FooterFlowStore {
|
|
1560
|
-
totalSteps = signal(1,
|
|
1561
|
-
|
|
1893
|
+
totalSteps = signal(1, /* @ts-ignore */
|
|
1894
|
+
...(ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []));
|
|
1895
|
+
currentStep = signal(1, /* @ts-ignore */
|
|
1896
|
+
...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
|
|
1562
1897
|
setTotalSteps(total) {
|
|
1563
1898
|
this.totalSteps.set(Math.max(1, total));
|
|
1564
1899
|
if (this.currentStep() > this.totalSteps()) {
|
|
@@ -1578,10 +1913,10 @@ class FooterFlowStore {
|
|
|
1578
1913
|
this.currentStep.update((step) => step - 1);
|
|
1579
1914
|
}
|
|
1580
1915
|
}
|
|
1581
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1582
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1916
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1917
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, providedIn: 'root' });
|
|
1583
1918
|
}
|
|
1584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1919
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterFlowStore, decorators: [{
|
|
1585
1920
|
type: Injectable,
|
|
1586
1921
|
args: [{ providedIn: 'root' }]
|
|
1587
1922
|
}] });
|
|
@@ -1590,7 +1925,8 @@ class FooterComponent {
|
|
|
1590
1925
|
sideModalStore = inject(SideModalStore);
|
|
1591
1926
|
confirmModalStore = inject(ConfirmModalStore);
|
|
1592
1927
|
flowStore = inject(FooterFlowStore);
|
|
1593
|
-
primaryLabel = computed(() => this.flowStore.currentStep() < this.flowStore.totalSteps() ? 'NEXT' : 'SAVE',
|
|
1928
|
+
primaryLabel = computed(() => this.flowStore.currentStep() < this.flowStore.totalSteps() ? 'NEXT' : 'SAVE', /* @ts-ignore */
|
|
1929
|
+
...(ngDevMode ? [{ debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
|
|
1594
1930
|
onCancel() {
|
|
1595
1931
|
this.sideModalStore.closeSideModal();
|
|
1596
1932
|
}
|
|
@@ -1606,10 +1942,10 @@ class FooterComponent {
|
|
|
1606
1942
|
}
|
|
1607
1943
|
});
|
|
1608
1944
|
}
|
|
1609
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1610
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1945
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1946
|
+
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 });
|
|
1611
1947
|
}
|
|
1612
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FooterComponent, decorators: [{
|
|
1613
1949
|
type: Component,
|
|
1614
1950
|
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" }]
|
|
1615
1951
|
}] });
|
|
@@ -1620,5 +1956,5 @@ const LIB_UI_STYLES_PATH = './lib/styles/index.scss';
|
|
|
1620
1956
|
* Generated bundle index. Do not edit.
|
|
1621
1957
|
*/
|
|
1622
1958
|
|
|
1623
|
-
export { CircularProgressStepper, ConfirmModal, ConfirmModalStore, FooterComponent, FooterFlowStore, HeaderComponent, LIB_UI_STYLES_PATH, LibButtonComponent, LibCardComponent, LibCheckboxComponent,
|
|
1959
|
+
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 };
|
|
1624
1960
|
//# sourceMappingURL=crdx-components.mjs.map
|