@ifsworld/granite-components 13.4.2 → 13.5.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/esm2022/date-picker/lib/date-picker-base.mjs +4 -4
- package/esm2022/date-picker/lib/date-picker-trigger-for.directive.mjs +4 -4
- package/esm2022/date-picker/lib/date-picker.component.mjs +5 -5
- package/esm2022/date-picker/lib/date-picker.module.mjs +5 -5
- package/esm2022/date-picker/lib/date-range-picker.component.mjs +5 -5
- package/esm2022/lib/arrange-grid/arrange-grid-item.component.mjs +4 -4
- package/esm2022/lib/arrange-grid/arrange-grid.component.mjs +4 -4
- package/esm2022/lib/arrange-grid/arrange-grid.module.mjs +5 -5
- package/esm2022/lib/avatar/avatar-default-status/avatar-default-status.component.mjs +5 -5
- package/esm2022/lib/avatar/avatar.component.mjs +20 -8
- package/esm2022/lib/avatar/avatar.module.mjs +5 -5
- package/esm2022/lib/avatar/custom-avatar-status.directive.mjs +4 -4
- package/esm2022/lib/avatar/empty-avatar/empty-avatar.component.mjs +14 -8
- package/esm2022/lib/badge/badge.component.mjs +5 -5
- package/esm2022/lib/badge/badge.module.mjs +5 -5
- package/esm2022/lib/button/button.component.mjs +9 -9
- package/esm2022/lib/button/button.module.mjs +5 -5
- package/esm2022/lib/card-list/card/card-avatar.component.mjs +4 -4
- package/esm2022/lib/card-list/card/card-content/card-actions.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card-content/card-body.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card-content/card-content.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card-content/card-footer.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card-content/card-header-subtitle.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card-content/card-header-title.component.mjs +4 -4
- package/esm2022/lib/card-list/card/card-content/card-header.component.mjs +5 -5
- package/esm2022/lib/card-list/card/card.component.mjs +5 -5
- package/esm2022/lib/card-list/card-list.component.mjs +5 -5
- package/esm2022/lib/card-list/card-list.module.mjs +5 -5
- package/esm2022/lib/checkbox/checkbox-group.component.mjs +5 -5
- package/esm2022/lib/checkbox/checkbox.component.mjs +5 -5
- package/esm2022/lib/checkbox/checkbox.module.mjs +5 -5
- package/esm2022/lib/chips/chip-input.mjs +4 -4
- package/esm2022/lib/chips/chip-list.component.mjs +5 -5
- package/esm2022/lib/chips/chip.component.mjs +5 -5
- package/esm2022/lib/chips/chips.module.mjs +5 -5
- package/esm2022/lib/collapsible-group/collapsible-group-body.directive.mjs +4 -4
- package/esm2022/lib/collapsible-group/collapsible-group-header.directive.mjs +4 -4
- package/esm2022/lib/collapsible-group/collapsible-group.component.mjs +5 -5
- package/esm2022/lib/collapsible-group/collapsible-group.module.mjs +5 -5
- package/esm2022/lib/contacts/contact-item/contact-item.component.mjs +5 -5
- package/esm2022/lib/contacts/contact-item-default-status/contact-item-default-status.component.mjs +4 -4
- package/esm2022/lib/contacts/contact-item-title/contact-item-title.component.mjs +4 -4
- package/esm2022/lib/contacts/contacts-profile/contacts-profile.component.mjs +5 -5
- package/esm2022/lib/contacts/contacts-trigger/contacts-trigger-data.mjs +4 -4
- package/esm2022/lib/contacts/contacts-trigger/contacts-trigger-for.directive.mjs +4 -4
- package/esm2022/lib/contacts/contacts.component.mjs +5 -5
- package/esm2022/lib/contacts/contacts.module.mjs +5 -5
- package/esm2022/lib/contacts/custom-profile.directive.mjs +4 -4
- package/esm2022/lib/contacts/custom-status.directive.mjs +4 -4
- package/esm2022/lib/core/common-behaviors/disabled.mjs +4 -4
- package/esm2022/lib/core/core.module.mjs +5 -5
- package/esm2022/lib/core/devices/client-input-desktop.directive.mjs +4 -4
- package/esm2022/lib/core/devices/client-input-touch.directive.mjs +4 -4
- package/esm2022/lib/core/devices/client-output-desktop.directive.mjs +4 -4
- package/esm2022/lib/core/devices/client-output-touch.directive.mjs +4 -4
- package/esm2022/lib/core/hide-on-overflow.directive.mjs +4 -4
- package/esm2022/lib/core/overlay-base.mjs +4 -4
- package/esm2022/lib/core/overlay-trigger-for-base.directive.mjs +4 -4
- package/esm2022/lib/core/overlay.service.mjs +4 -4
- package/esm2022/lib/core/pipes/pure-pipes.module.mjs +5 -5
- package/esm2022/lib/core/pipes/title.pipe.mjs +4 -4
- package/esm2022/lib/core/radio-checkbox-base.mjs +4 -4
- package/esm2022/lib/file-upload/directives/file-drag-and-drop.directive.mjs +4 -4
- package/esm2022/lib/file-upload/file-upload.component.mjs +4 -4
- package/esm2022/lib/file-upload/file-upload.module.mjs +5 -5
- package/esm2022/lib/grid/grid.component.mjs +7 -7
- package/esm2022/lib/grid/grid.module.mjs +5 -5
- package/esm2022/lib/icon/icon.component.mjs +4 -4
- package/esm2022/lib/icon/icon.module.mjs +5 -5
- package/esm2022/lib/input-field/input-field.component.mjs +5 -5
- package/esm2022/lib/input-field/input-field.module.mjs +5 -5
- package/esm2022/lib/label/label.component.mjs +4 -4
- package/esm2022/lib/label/label.module.mjs +5 -5
- package/esm2022/lib/menu/divider.directive.mjs +4 -4
- package/esm2022/lib/menu/menu-base.mjs +4 -6
- package/esm2022/lib/menu/menu-item.component.mjs +6 -8
- package/esm2022/lib/menu/menu-touch-close.component.mjs +5 -5
- package/esm2022/lib/menu/menu-touch-title.component.mjs +6 -6
- package/esm2022/lib/menu/menu-trigger-for.directive.mjs +4 -7
- package/esm2022/lib/menu/menu.component.mjs +4 -4
- package/esm2022/lib/menu/menu.module.mjs +5 -5
- package/esm2022/lib/menu/title.directive.mjs +4 -4
- package/esm2022/lib/progress-bar/progress-bar-legend/progress-bar-legend.component.mjs +5 -5
- package/esm2022/lib/progress-bar/progress-bar-legend-base.mjs +4 -4
- package/esm2022/lib/progress-bar/progress-bar-legend-trigger-for.directive.mjs +4 -4
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +4 -4
- package/esm2022/lib/progress-bar/progress-bar.module.mjs +5 -5
- package/esm2022/lib/radio-button/radio-button.component.mjs +5 -5
- package/esm2022/lib/radio-button/radio-button.module.mjs +5 -5
- package/esm2022/lib/radio-button/radio-group.component.mjs +5 -5
- package/esm2022/lib/toggle-switch/toggle-switch.component.mjs +5 -5
- package/esm2022/lib/toggle-switch/toggle-switch.module.mjs +5 -5
- package/esm2022/table/lib/cell/cell-align/cell-align-classes.directive.mjs +4 -4
- package/esm2022/table/lib/cell/cell.mjs +4 -4
- package/esm2022/table/lib/cell/table-data-cell.component.mjs +4 -4
- package/esm2022/table/lib/cell/table-header-cell.component.mjs +4 -4
- package/esm2022/table/lib/column/table-column.directive.mjs +4 -4
- package/esm2022/table/lib/column-size/column-size.directive.mjs +4 -4
- package/esm2022/table/lib/table.component.mjs +4 -4
- package/esm2022/table/lib/table.module.mjs +5 -5
- package/esm2022/tooltip/lib/tooltip-trigger-for.directive.mjs +4 -4
- package/esm2022/tooltip/lib/tooltip.component.mjs +4 -4
- package/esm2022/tooltip/lib/tooltip.module.mjs +5 -5
- package/fesm2022/ifsworld-granite-components-date-picker.mjs +18 -18
- package/fesm2022/ifsworld-granite-components-date-picker.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components-table.mjs +25 -25
- package/fesm2022/ifsworld-granite-components-table.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components-tooltip.mjs +10 -10
- package/fesm2022/ifsworld-granite-components-tooltip.mjs.map +1 -1
- package/fesm2022/ifsworld-granite-components.mjs +343 -332
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/lib/avatar/avatar.component.d.ts +3 -1
- package/lib/avatar/empty-avatar/empty-avatar.component.d.ts +2 -1
- package/package.json +10 -10
|
@@ -59,10 +59,10 @@ class GraniteArrangeGridItemComponent {
|
|
|
59
59
|
setCssProperty(variable, value) {
|
|
60
60
|
this.element.nativeElement.style.setProperty(variable, value);
|
|
61
61
|
}
|
|
62
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
63
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
63
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteArrangeGridItemComponent, selector: "granite-arrange-grid-item", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
64
64
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridItemComponent, decorators: [{
|
|
66
66
|
type: Component,
|
|
67
67
|
args: [{ selector: 'granite-arrange-grid-item', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--column-span: $default-column-span;display:grid;grid-column:span var(--column-span, 1)}\n"] }]
|
|
68
68
|
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
@@ -165,10 +165,10 @@ class GraniteArrangeGridComponent {
|
|
|
165
165
|
setCssProperty(variable, value) {
|
|
166
166
|
this.element.nativeElement.style.setProperty(variable, value);
|
|
167
167
|
}
|
|
168
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
168
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteArrangeGridComponent, selector: "granite-arrange-grid", inputs: { orientation: "orientation", cols: "cols" }, host: { properties: { "class.column-orientation": "this.classColumnOrientation", "class.row-orientation": "this.classRowOrientation" } }, queries: [{ propertyName: "arrangeGridItemComponents", predicate: GraniteArrangeGridItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n", styles: ["@media only screen and (min-width: 960px){:host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);gap:var(--granite-spacing-8)}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
170
170
|
}
|
|
171
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridComponent, decorators: [{
|
|
172
172
|
type: Component,
|
|
173
173
|
args: [{ selector: 'granite-arrange-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"granite-arrange-grid-item\"></ng-content>\n", styles: ["@media only screen and (min-width: 960px){:host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);gap:var(--granite-spacing-8)}:host.row-orientation{grid-template-columns:auto;grid-template-rows:repeat(calc(var(--rows, 1) - 1),max-content)}}\n"] }]
|
|
174
174
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { orientation: [{
|
|
@@ -187,11 +187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
187
187
|
}] } });
|
|
188
188
|
|
|
189
189
|
class GraniteArrangeGridModule {
|
|
190
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
191
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
192
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
191
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridModule, declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent], imports: [CommonModule], exports: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent] }); }
|
|
192
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridModule, imports: [CommonModule] }); }
|
|
193
193
|
}
|
|
194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteArrangeGridModule, decorators: [{
|
|
195
195
|
type: NgModule,
|
|
196
196
|
args: [{
|
|
197
197
|
declarations: [GraniteArrangeGridComponent, GraniteArrangeGridItemComponent],
|
|
@@ -229,10 +229,10 @@ class GraniteGridItemComponent {
|
|
|
229
229
|
setStyle(property, value) {
|
|
230
230
|
this.renderer.setStyle(this.element.nativeElement, property, value || '');
|
|
231
231
|
}
|
|
232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteGridItemComponent, selector: "granite-grid-item", inputs: { columnStart: "columnStart", columnEnd: "columnEnd", rowStart: "rowStart", rowEnd: "rowEnd" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
234
234
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridItemComponent, decorators: [{
|
|
236
236
|
type: Component,
|
|
237
237
|
args: [{
|
|
238
238
|
selector: 'granite-grid-item',
|
|
@@ -313,10 +313,10 @@ class GraniteGridComponent {
|
|
|
313
313
|
updateRowStyles() {
|
|
314
314
|
this.setCssProperty('--rows', (this._rows && this._rows.toString()) || null);
|
|
315
315
|
}
|
|
316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteGridComponent, selector: "granite-grid", inputs: { cols: "cols", rows: "rows" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);grid-template-rows:repeat(var(--rows, 1),1fr)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
318
318
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridComponent, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
321
|
args: [{ selector: 'granite-grid', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--cols: 1;--rows: 1;display:grid;grid-template-columns:repeat(var(--cols, 1),1fr);grid-template-rows:repeat(var(--rows, 1),1fr)}\n"] }]
|
|
322
322
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { cols: [{
|
|
@@ -326,11 +326,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
326
326
|
}] } });
|
|
327
327
|
|
|
328
328
|
class GraniteGridModule {
|
|
329
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
330
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
331
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
330
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridModule, declarations: [GraniteGridComponent, GraniteGridItemComponent], imports: [CommonModule], exports: [GraniteGridComponent, GraniteGridItemComponent] }); }
|
|
331
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridModule, imports: [CommonModule] }); }
|
|
332
332
|
}
|
|
333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteGridModule, decorators: [{
|
|
334
334
|
type: NgModule,
|
|
335
335
|
args: [{
|
|
336
336
|
declarations: [GraniteGridComponent, GraniteGridItemComponent],
|
|
@@ -417,15 +417,15 @@ class GraniteBadgeComponent {
|
|
|
417
417
|
}
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteBadgeComponent, selector: "granite-badge", inputs: { backgroundColor: "backgroundColor", color: "color", pill: "pill" }, host: { properties: { "class.granite-badge-pill": "pill" }, classAttribute: "granite-badge" }, exportAs: ["graniteBadge"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
422
422
|
}
|
|
423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeComponent, decorators: [{
|
|
424
424
|
type: Component,
|
|
425
425
|
args: [{ selector: 'granite-badge', exportAs: 'graniteBadge', host: {
|
|
426
426
|
class: 'granite-badge',
|
|
427
427
|
'[class.granite-badge-pill]': 'pill',
|
|
428
|
-
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width
|
|
428
|
+
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:block;align-items:center;background-color:var(--granite-color-signal-neutral);color:var(--granite-color-text-static-light);border-radius:var(--granite-radius-s);font-size:var(--granite-font-size-body-small);padding-inline:var(--granite-spacing-8);padding-block:var(--granite-spacing-4);max-width:fit-content}:host(.granite-badge-pill){border-radius:var(--granite-radius-l)}\n"] }]
|
|
429
429
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { backgroundColor: [{
|
|
430
430
|
type: Input
|
|
431
431
|
}], color: [{
|
|
@@ -435,11 +435,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
435
435
|
}] } });
|
|
436
436
|
|
|
437
437
|
class GraniteBadgeModule {
|
|
438
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
439
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
440
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
438
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
439
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeModule, declarations: [GraniteBadgeComponent], imports: [CommonModule], exports: [GraniteBadgeComponent] }); }
|
|
440
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeModule, imports: [CommonModule] }); }
|
|
441
441
|
}
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
442
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteBadgeModule, decorators: [{
|
|
443
443
|
type: NgModule,
|
|
444
444
|
args: [{
|
|
445
445
|
declarations: [GraniteBadgeComponent],
|
|
@@ -730,10 +730,10 @@ class GraniteIconComponent {
|
|
|
730
730
|
this._previousFontIconClass = this.fontIcon;
|
|
731
731
|
}
|
|
732
732
|
}
|
|
733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
734
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'aria-hidden', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteIconComponent, selector: "granite-icon", inputs: { fontIcon: "fontIcon" }, host: { attributes: { "role": "img" }, classAttribute: "granite-icon" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host.granite-icon{background-repeat:no-repeat;display:inline-block;padding:0 calc(var(--granite-spacing-4) / 2);font-size:1em;line-height:1em;position:relative;top:.1em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
735
735
|
}
|
|
736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconComponent, decorators: [{
|
|
737
737
|
type: Component,
|
|
738
738
|
args: [{ selector: 'granite-icon', template: '<ng-content></ng-content>', host: {
|
|
739
739
|
role: 'img',
|
|
@@ -754,10 +754,8 @@ class GraniteMenuItemComponent {
|
|
|
754
754
|
/** ARIA role for the menu item. */
|
|
755
755
|
this.role = 'menuitem';
|
|
756
756
|
/** Stream that emits when the menu item is hovered. */
|
|
757
|
-
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
758
757
|
this._hovered = new Subject();
|
|
759
758
|
/** Stream that emits when the menu item is focused. */
|
|
760
|
-
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
761
759
|
this._focused = new Subject();
|
|
762
760
|
/** Whether the menu item acts as a trigger for a sub-menu (used for styling) */
|
|
763
761
|
this._triggersSubmenu = false;
|
|
@@ -785,8 +783,8 @@ class GraniteMenuItemComponent {
|
|
|
785
783
|
_getHostElement() {
|
|
786
784
|
return this._elementRef.nativeElement;
|
|
787
785
|
}
|
|
788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
786
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }, { token: GRANITE_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteMenuItemComponent, selector: "[graniteMenuItem]", inputs: { role: "role" }, host: { listeners: { "mouseenter": "_hovered.next(this)" }, properties: { "attr.role": "role", "class.granite-menu-item": "true", "class.granite-menu-item-highlighted": "_highlighted", "class.granite-menu-item-submenu-trigger": "_triggersSubmenu", "class.granite-device-output-touch": "_clientOutput?.device === \"touch\"" } }, exportAs: ["graniteMenuItem"], ngImport: i0, template: `<ng-content></ng-content>
|
|
790
788
|
<ng-container *ngIf="_triggersSubmenu">
|
|
791
789
|
<granite-icon
|
|
792
790
|
class="caret-left"
|
|
@@ -796,9 +794,9 @@ class GraniteMenuItemComponent {
|
|
|
796
794
|
class="caret-right"
|
|
797
795
|
[fontIcon]="'icon-caret-right'"
|
|
798
796
|
></granite-icon>
|
|
799
|
-
</ng-container>`, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
797
|
+
</ng-container>`, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
800
798
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuItemComponent, decorators: [{
|
|
802
800
|
type: Component,
|
|
803
801
|
args: [{ selector: '[graniteMenuItem]', template: `<ng-content></ng-content>
|
|
804
802
|
<ng-container *ngIf="_triggersSubmenu">
|
|
@@ -819,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
819
817
|
'[class.granite-device-output-touch]': '_clientOutput?.device === "touch"',
|
|
820
818
|
//#endregion --- Touch device customizations ---
|
|
821
819
|
'(mouseenter)': '_hovered.next(this)',
|
|
822
|
-
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
820
|
+
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
823
821
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: undefined, decorators: [{
|
|
824
822
|
type: Inject,
|
|
825
823
|
args: [GRANITE_MENU_PANEL]
|
|
@@ -892,10 +890,8 @@ class _MenuBaseComponent {
|
|
|
892
890
|
/** Whether to add a close button below the menu */
|
|
893
891
|
this.showCloseButton = false;
|
|
894
892
|
/** Observable current state of the panel animation. */
|
|
895
|
-
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
896
893
|
this._transformMenu = new BehaviorSubject(transformMenuDefault);
|
|
897
894
|
/** Emits whenever an animation on the menu completes. */
|
|
898
|
-
// eslint-disable-next-line rxjs/no-exposed-subjects
|
|
899
895
|
this._animationDone = new Subject();
|
|
900
896
|
this._menuEmpty$ = new BehaviorSubject(false);
|
|
901
897
|
// eslint-disable-next-line @typescript-eslint/member-ordering
|
|
@@ -1148,10 +1144,10 @@ class _MenuBaseComponent {
|
|
|
1148
1144
|
this._directDescendantItems.notifyOnChanges();
|
|
1149
1145
|
});
|
|
1150
1146
|
}
|
|
1151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1152
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _MenuBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1148
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: _MenuBaseComponent, inputs: { xPosition: "xPosition", yPosition: "yPosition", title: "title", closeLabel: "closeLabel", openOnHover: "openOnHover", scrollStrategy: "scrollStrategy" }, outputs: { closed: "closed", opened: "opened" }, queries: [{ propertyName: "_allItems", predicate: GraniteMenuItemComponent, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
1153
1149
|
}
|
|
1154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _MenuBaseComponent, decorators: [{
|
|
1155
1151
|
type: Directive
|
|
1156
1152
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { xPosition: [{
|
|
1157
1153
|
type: Input
|
|
@@ -1178,14 +1174,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1178
1174
|
}] } });
|
|
1179
1175
|
|
|
1180
1176
|
class GraniteMenuTouchCloseComponent {
|
|
1181
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1182
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTouchCloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", host: { properties: { "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchCloseItem"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }); }
|
|
1183
1179
|
}
|
|
1184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTouchCloseComponent, decorators: [{
|
|
1185
1181
|
type: Component,
|
|
1186
1182
|
args: [{ selector: '[graniteMenuTouchCloseItem]', template: '<ng-content></ng-content>', exportAs: 'graniteMenuTouchCloseItem', host: {
|
|
1187
1183
|
'[class.granite-device-output-touch]': 'true',
|
|
1188
|
-
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1184
|
+
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1189
1185
|
}] });
|
|
1190
1186
|
|
|
1191
1187
|
class GraniteMenuTouchTitleItemComponent {
|
|
@@ -1199,8 +1195,8 @@ class GraniteMenuTouchTitleItemComponent {
|
|
|
1199
1195
|
this._triggersBack = false;
|
|
1200
1196
|
this._triggersBack = !!_parentMenu.parentMenu;
|
|
1201
1197
|
}
|
|
1202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, deps: [{ token: GRANITE_MENU_PANEL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", host: { properties: { "class.granite-menu-item-title": "true", "class.granite-menu-item-back-trigger": "_triggersBack", "class.granite-device-output-touch": "true" } }, exportAs: ["graniteMenuTouchTitleItem"], ngImport: i0, template: `
|
|
1204
1200
|
<ng-container *ngIf="_triggersBack">
|
|
1205
1201
|
<granite-icon
|
|
1206
1202
|
class="caret-left"
|
|
@@ -1212,9 +1208,9 @@ class GraniteMenuTouchTitleItemComponent {
|
|
|
1212
1208
|
></granite-icon>
|
|
1213
1209
|
</ng-container>
|
|
1214
1210
|
<ng-content></ng-content>
|
|
1215
|
-
`, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
1211
|
+
`, isInline: true, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
1216
1212
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTouchTitleItemComponent, decorators: [{
|
|
1218
1214
|
type: Component,
|
|
1219
1215
|
args: [{ selector: '[graniteMenuTouchTitleItem]', template: `
|
|
1220
1216
|
<ng-container *ngIf="_triggersBack">
|
|
@@ -1232,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1232
1228
|
'[class.granite-menu-item-title]': 'true',
|
|
1233
1229
|
'[class.granite-menu-item-back-trigger]': '_triggersBack',
|
|
1234
1230
|
'[class.granite-device-output-touch]': 'true',
|
|
1235
|
-
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-webkit-user-select:none;user-select:none;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1231
|
+
}, styles: [":host{display:block;position:relative;line-height:2rem;padding:0 var(--granite-spacing-8);width:100%;max-width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start;text-decoration:none;background-color:var(--granite-color-background-variant);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-family:inherit}@media (hover: hover) and (pointer: fine){:host:hover:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}@media (hover: none) and (pointer: coarse){:host:active:not(.granite-title):not([disabled]){background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}:host.granite-title{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;line-height:1.5rem;width:100%;outline:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--granite-color-text);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-bold);cursor:default}:host.cdk-program-focused,:host.cdk-keyboard-focused,:host.granite-menu-item-highlighted{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}:host granite-icon{position:absolute;font-size:var(--granite-font-size-body-small);color:inherit;top:50%;transform:translateY(-50%)}:host.granite-menu-item-submenu-trigger{padding-inline-end:var(--granite-spacing-24)}html[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-menu-item-submenu-trigger granite-icon{right:var(--granite-spacing-4)}html[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-menu-item-submenu-trigger granite-icon{left:var(--granite-spacing-4)}[dir=rtl] :host.granite-menu-item-submenu-trigger granite-icon.caret-right{display:none}[dir=ltr] :host.granite-menu-item-submenu-trigger granite-icon.caret-left{display:none}:host.granite-divider-top{border-top:.0625rem solid var(--granite-color-border-soft)}:host.granite-divider-bottom{border-bottom:.0625rem solid var(--granite-color-border-soft)}:host.granite-device-output-touch{line-height:3rem;font-size:var(--granite-font-size-body-small);text-align:center;padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-title{padding:0;justify-content:center;line-height:1.5rem;font-size:var(--granite-font-size-micro)}:host.granite-device-output-touch.granite-menu-item-back-trigger,:host.granite-device-output-touch.granite-menu-item-submenu-trigger{padding:0 var(--granite-spacing-24)}:host.granite-device-output-touch.granite-menu-item-title{line-height:3rem;height:3rem;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}@media (hover: none) and (pointer: coarse){:host.granite-device-output-touch.granite-menu-item-title:active{background:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}}html[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}:host-context([dir=ltr]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{left:var(--granite-spacing-4)}html[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}:host-context([dir=rtl]) :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon{right:var(--granite-spacing-4)}[dir=rtl] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-left{display:none}[dir=ltr] :host.granite-device-output-touch.granite-menu-item-back-trigger granite-icon.caret-right{display:none}:host:disabled:not(.granite-menu-item-title){opacity:.4;cursor:default}\n"] }]
|
|
1236
1232
|
}], ctorParameters: () => [{ type: _MenuBaseComponent, decorators: [{
|
|
1237
1233
|
type: Inject,
|
|
1238
1234
|
args: [GRANITE_MENU_PANEL]
|
|
@@ -1241,8 +1237,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1241
1237
|
}] }] });
|
|
1242
1238
|
|
|
1243
1239
|
class GraniteMenuComponent extends _MenuBaseComponent {
|
|
1244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1240
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1241
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteMenuComponent, selector: "granite-menu", providers: [
|
|
1246
1242
|
{ provide: GRANITE_MENU_PANEL, useExisting: GraniteMenuComponent },
|
|
1247
1243
|
], exportAs: ["graniteMenu"], usesInheritance: true, ngImport: i0, template: "<!--\n Using separate template part for desktop and touch output, because of\n animation triggers and slightly different content.\n-->\n<ng-template>\n <!-- Desktop -->\n <ng-container *ngIf=\"_clientOutput.device === 'desktop'\">\n <div\n #menu\n class=\"granite-menu\"\n [class.is-menu-empty]=\"_isMenuEmpty$ | async\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuDesktop]=\"_transformMenu | async\"\n (@transformMenuDesktop.start)=\"_onAnimationStart($event)\"\n (@transformMenuDesktop.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Touch -->\n <ng-container *ngIf=\"_clientOutput?.device === 'touch'\">\n <div\n #menu\n class=\"granite-menu granite-device-output-touch\"\n tabindex=\"-1\"\n [id]=\"panelId\"\n [@transformMenuTouch]=\"_transformMenu | async\"\n (@transformMenuTouch.start)=\"_onAnimationStart($event)\"\n (@transformMenuTouch.done)=\"_onAnimationDone($event)\"\n (click)=\"_handleClick()\"\n (keydown)=\"_handleKeydown($event)\"\n >\n <div class=\"granite-menu-content\">\n <div *ngIf=\"showTitle\" class=\"header-container\">\n <button\n [disabled]=\"!showBackButton\"\n graniteMenuTouchTitleItem\n (click)=\"_handleBackClick($event)\"\n >\n {{ title }}\n </button>\n </div>\n\n <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n\n <div class=\"footer-container\"></div>\n </div>\n </div>\n\n <!-- Close button -->\n <div class=\"close\" [@transformCloseButton]=\"_transformMenu | async\">\n <button\n *ngIf=\"showCloseButton\"\n graniteMenuTouchCloseItem\n (click)=\"_handleCloseClick()\"\n >\n {{ closeLabel }}\n </button>\n </div>\n </ng-container>\n\n <!--\n Content template shared between desktop and touch parts, as <ng-content>\n can't be used in two places in the same template\n -->\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n</ng-template>\n", styles: [".granite-menu:not(.granite-device-output-touch){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));min-width:7rem;overflow-x:hidden;overflow-y:hidden}.granite-menu:not(.granite-device-output-touch).ng-animating{pointer-events:none}.granite-menu:not(.granite-device-output-touch):not(.is-menu-empty){min-height:2rem}.granite-menu:not(.granite-device-output-touch):hover{overflow-y:auto}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar{width:var(--granite-spacing-4)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-thumb{background-color:var(--granite-color-border-hard);border-radius:calc(var(--granite-spacing-16) * .125)}.granite-menu:not(.granite-device-output-touch)::-webkit-scrollbar-track{background-color:var(--granite-color-background-hover)}.granite-menu.granite-device-output-touch{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.granite-menu.granite-device-output-touch.ng-animating{pointer-events:none}.granite-menu.granite-device-output-touch:not(.is-menu-empty){min-height:3rem}.granite-menu.granite-device-output-touch:not(.close){margin:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch.close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}.granite-menu.granite-device-output-touch .header-container{position:sticky;top:0;background-color:var(--granite-color-background-variant);z-index:1}.granite-menu.granite-device-output-touch .footer-container{position:sticky;bottom:0;height:0}.close:not(:empty){background-color:var(--granite-color-background-variant);color:var(--granite-color-text);overflow:auto;-webkit-overflow-scrolling:touch;outline:0;-webkit-user-select:none;user-select:none;filter:drop-shadow(var(--granite-shadow-l));border-radius:.25rem}.close:not(:empty).ng-animating{pointer-events:none}.close:not(:empty):not(.is-menu-empty){min-height:3rem}.close:not(:empty):not(.close){margin:var(--granite-spacing-4)}.close:not(:empty).close{margin-inline-start:var(--granite-spacing-4);margin-inline-end:var(--granite-spacing-4);margin-block-end:var(--granite-spacing-4)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteMenuTouchCloseComponent, selector: "[graniteMenuTouchCloseItem]", exportAs: ["graniteMenuTouchCloseItem"] }, { kind: "component", type: GraniteMenuTouchTitleItemComponent, selector: "[graniteMenuTouchTitleItem]", exportAs: ["graniteMenuTouchTitleItem"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [
|
|
1248
1244
|
graniteMenuDesktopAnimations.transformMenuDesktop,
|
|
@@ -1250,7 +1246,7 @@ class GraniteMenuComponent extends _MenuBaseComponent {
|
|
|
1250
1246
|
graniteMenuTouchAnimations.transformCloseButton,
|
|
1251
1247
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1252
1248
|
}
|
|
1253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuComponent, decorators: [{
|
|
1254
1250
|
type: Component,
|
|
1255
1251
|
args: [{ selector: 'granite-menu', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'graniteMenu', animations: [
|
|
1256
1252
|
graniteMenuDesktopAnimations.transformMenuDesktop,
|
|
@@ -1473,12 +1469,10 @@ class GraniteMenuTriggerForDirective {
|
|
|
1473
1469
|
: of([null]);
|
|
1474
1470
|
runningAnimationDone
|
|
1475
1471
|
.pipe(take(1), delay(0, asapScheduler))
|
|
1476
|
-
// eslint-disable-next-line rxjs/no-nested-subscribe
|
|
1477
1472
|
.subscribe(() => {
|
|
1478
1473
|
this.animateCloseMenu(reason !== 'keydown', reason === 'click');
|
|
1479
1474
|
this.menu._animationDone
|
|
1480
1475
|
.pipe(take(1), delay(0, asapScheduler))
|
|
1481
|
-
// eslint-disable-next-line rxjs/no-nested-subscribe
|
|
1482
1476
|
.subscribe(() => this._destroyMenu());
|
|
1483
1477
|
});
|
|
1484
1478
|
}
|
|
@@ -1678,7 +1672,6 @@ class GraniteMenuTriggerForDirective {
|
|
|
1678
1672
|
// 'changed after checked' errors in some cases. See Angular Material #12194.
|
|
1679
1673
|
this.menu._animationDone
|
|
1680
1674
|
.pipe(take(1), delay(0, asapScheduler), takeUntil(this._parentMenu._hovered()))
|
|
1681
|
-
// eslint-disable-next-line rxjs/no-nested-subscribe
|
|
1682
1675
|
.subscribe(() => this.openMenu());
|
|
1683
1676
|
}
|
|
1684
1677
|
else {
|
|
@@ -1951,10 +1944,10 @@ class GraniteMenuTriggerForDirective {
|
|
|
1951
1944
|
}
|
|
1952
1945
|
}
|
|
1953
1946
|
}
|
|
1954
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1955
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1947
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: GRANITE_MENU_PANEL, optional: true }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: GraniteMenuItemComponent, optional: true, self: true }, { token: i3.Directionality, optional: true }, { token: i1.FocusMonitor }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1948
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteMenuTriggerForDirective, selector: "[graniteMenuTriggerFor]", inputs: { menu: ["graniteMenuTriggerFor", "menu"], openOnClick: "openOnClick" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "isMenuOpened || null", "attr.aria-controls": "isMenuOpened ? menu.panelId : null" }, classAttribute: "granite-menu-trigger" }, exportAs: ["graniteMenuTriggerFor"], usesOnChanges: true, ngImport: i0 }); }
|
|
1956
1949
|
}
|
|
1957
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuTriggerForDirective, decorators: [{
|
|
1958
1951
|
type: Directive,
|
|
1959
1952
|
args: [{
|
|
1960
1953
|
selector: `[graniteMenuTriggerFor]`,
|
|
@@ -2004,10 +1997,10 @@ class GraniteDividerDirective {
|
|
|
2004
1997
|
constructor() {
|
|
2005
1998
|
this.dividerDirection = 'top';
|
|
2006
1999
|
}
|
|
2007
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2008
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2000
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2001
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteDividerDirective, selector: "[graniteDivider]", inputs: { dividerDirection: "dividerDirection" }, host: { properties: { "class.granite-divider-top": "dividerDirection === \"top\"", "class.granite-divider-bottom": "dividerDirection === \"bottom\"" } }, exportAs: ["graniteDivider"], ngImport: i0 }); }
|
|
2009
2002
|
}
|
|
2010
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteDividerDirective, decorators: [{
|
|
2011
2004
|
type: Directive,
|
|
2012
2005
|
args: [{
|
|
2013
2006
|
selector: '[graniteDivider]',
|
|
@@ -2022,11 +2015,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2022
2015
|
}] } });
|
|
2023
2016
|
|
|
2024
2017
|
class GraniteIconModule {
|
|
2025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2026
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2027
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2018
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2019
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconModule, declarations: [GraniteIconComponent], exports: [GraniteIconComponent] }); }
|
|
2020
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconModule }); }
|
|
2028
2021
|
}
|
|
2029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2022
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteIconModule, decorators: [{
|
|
2030
2023
|
type: NgModule,
|
|
2031
2024
|
args: [{
|
|
2032
2025
|
declarations: [GraniteIconComponent],
|
|
@@ -2035,10 +2028,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2035
2028
|
}] });
|
|
2036
2029
|
|
|
2037
2030
|
class GraniteTitleDirective {
|
|
2038
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2039
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2031
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2032
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteTitleDirective, selector: "[graniteTitle]", host: { properties: { "class.granite-title": "true" } }, exportAs: ["graniteTitle"], ngImport: i0 }); }
|
|
2040
2033
|
}
|
|
2041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteTitleDirective, decorators: [{
|
|
2042
2035
|
type: Directive,
|
|
2043
2036
|
args: [{
|
|
2044
2037
|
selector: '[graniteTitle]',
|
|
@@ -2050,8 +2043,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2050
2043
|
}] });
|
|
2051
2044
|
|
|
2052
2045
|
class GraniteMenuModule {
|
|
2053
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2054
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2046
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2047
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuModule, declarations: [GraniteMenuComponent,
|
|
2055
2048
|
GraniteMenuItemComponent,
|
|
2056
2049
|
GraniteMenuTriggerForDirective,
|
|
2057
2050
|
GraniteMenuTouchCloseComponent,
|
|
@@ -2064,9 +2057,9 @@ class GraniteMenuModule {
|
|
|
2064
2057
|
GraniteMenuTouchTitleItemComponent,
|
|
2065
2058
|
GraniteDividerDirective,
|
|
2066
2059
|
GraniteTitleDirective] }); }
|
|
2067
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2060
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuModule, imports: [CommonModule, OverlayModule, PortalModule, GraniteIconModule] }); }
|
|
2068
2061
|
}
|
|
2069
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteMenuModule, decorators: [{
|
|
2070
2063
|
type: NgModule,
|
|
2071
2064
|
args: [{
|
|
2072
2065
|
declarations: [
|
|
@@ -2255,10 +2248,10 @@ class GraniteToggleSwitchComponent {
|
|
|
2255
2248
|
_getInputElement() {
|
|
2256
2249
|
return this._inputElement.nativeElement;
|
|
2257
2250
|
}
|
|
2258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteToggleSwitchComponent, selector: "granite-toggle-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", toggleChange: "toggleChange", toggleBlur: "toggleBlur" }, host: { properties: { "class.granite-toggle-switch-checked": "checked", "class.granite-toggle-switch-disabled": "disabled", "class.granite-toggle-switch-readonly": "readonly", "class.granite-toggle-switch-label-before": "_positionBefore" }, classAttribute: "granite-toggle-switch" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteToggleSwitch"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2260
2253
|
}
|
|
2261
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchComponent, decorators: [{
|
|
2262
2255
|
type: Component,
|
|
2263
2256
|
args: [{ selector: 'granite-toggle-switch', exportAs: 'graniteToggleSwitch', host: {
|
|
2264
2257
|
class: 'granite-toggle-switch',
|
|
@@ -2266,7 +2259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2266
2259
|
'[class.granite-toggle-switch-disabled]': 'disabled',
|
|
2267
2260
|
'[class.granite-toggle-switch-readonly]': 'readonly',
|
|
2268
2261
|
'[class.granite-toggle-switch-label-before]': '_positionBefore',
|
|
2269
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
|
|
2262
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-toggle-switch-label\">\n <div class=\"granite-toggle-switch-bar\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-toggle-switch-input cdk-visually-hidden\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_toggleSwitchDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_toggleSwitchClick()\"\n (change)=\"_toggleSwitchChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-toggle-switch-thumb\"></div>\n </div>\n <span class=\"granite-toggle-switch-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-toggle-switch){color:var(--granite-color-text)}.granite-toggle-switch-bar{width:2rem;height:1rem;border-radius:.5rem;background-color:var(--granite-color-background-inactive);transition:background-color .1s linear;position:relative}.granite-toggle-switch-bar:focus-within{outline:var(--granite-spacing-2) solid var(--granite-color-focus);outline-offset:var(--granite-spacing-2);box-shadow:none}.granite-toggle-switch-thumb{width:1rem;height:1rem;border-radius:1rem;background-color:var(--granite-color-text-static-light);border:.0625rem solid var(--granite-color-background-inactive);transition:float .1s linear}html[dir=ltr] .granite-toggle-switch-thumb{float:left}:host-context([dir=ltr]) .granite-toggle-switch-thumb{float:left}html[dir=rtl] .granite-toggle-switch-thumb{float:right}:host-context([dir=rtl]) .granite-toggle-switch-thumb{float:right}:host(.granite-toggle-switch-checked) .granite-toggle-switch-bar{background-color:var(--granite-color-background-active)}:host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{border:.0625rem solid var(--granite-color-background-active)}html[dir=ltr] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}:host-context([dir=ltr]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:right}html[dir=rtl] :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}:host-context([dir=rtl]) :host(.granite-toggle-switch-checked) .granite-toggle-switch-thumb{float:left}.granite-toggle-switch-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;padding-block:var(--granite-spacing-4)}:host(.granite-toggle-switch-disabled) .granite-toggle-switch-label{opacity:.6}:host(.granite-toggle-switch-disabled) *{cursor:default}:host(.granite-toggle-switch-readonly) *{cursor:default}.granite-toggle-switch-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-toggle-switch-text:empty{display:none}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-toggle-switch-label-before) .granite-toggle-switch-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}\n"] }]
|
|
2270
2263
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
|
|
2271
2264
|
type: Input
|
|
2272
2265
|
}], checked: [{
|
|
@@ -2295,11 +2288,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2295
2288
|
}] } });
|
|
2296
2289
|
|
|
2297
2290
|
class GraniteToggleSwitchModule {
|
|
2298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2299
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2300
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2291
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2292
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchModule, declarations: [GraniteToggleSwitchComponent], exports: [GraniteToggleSwitchComponent] }); }
|
|
2293
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchModule }); }
|
|
2301
2294
|
}
|
|
2302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteToggleSwitchModule, decorators: [{
|
|
2303
2296
|
type: NgModule,
|
|
2304
2297
|
args: [{
|
|
2305
2298
|
declarations: [GraniteToggleSwitchComponent],
|
|
@@ -2376,10 +2369,10 @@ class GraniteRadioButtonComponent {
|
|
|
2376
2369
|
_getInputElement() {
|
|
2377
2370
|
return this._inputElement.nativeElement;
|
|
2378
2371
|
}
|
|
2379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteRadioButtonComponent, selector: "granite-radio-button", inputs: { value: "value", id: "id", name: "name", checked: "checked", required: "required", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { radioChange: "radioChange", radioBlur: "radioBlur" }, host: { properties: { "class.granite-radio-button-disabled": "disabled", "class.granite-radio-button-label-before": "_positionBefore", "class.granite-radio-button-checked": "checked", "class.granite-radio-button-readonly": "readonly" }, classAttribute: "granite-radio-button" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteRadioButton"], usesOnChanges: true, ngImport: i0, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button-label-before) .granite-radio-button-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:grow-animation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-8);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes grow-animation{0%{transform:scale(0)}to{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2381
2374
|
}
|
|
2382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonComponent, decorators: [{
|
|
2383
2376
|
type: Component,
|
|
2384
2377
|
args: [{ selector: 'granite-radio-button', exportAs: 'graniteRadioButton', host: {
|
|
2385
2378
|
class: 'granite-radio-button',
|
|
@@ -2387,7 +2380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2387
2380
|
'[class.granite-radio-button-label-before]': '_positionBefore',
|
|
2388
2381
|
'[class.granite-radio-button-checked]': 'checked',
|
|
2389
2382
|
'[class.granite-radio-button-readonly]': 'readonly',
|
|
2390
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button-label-before) .granite-radio-button-label{flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:grow-animation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-8);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes grow-animation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
|
|
2383
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"granite-radio-button-label\">\n <div class=\"granite-radio-button-outer-circle\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-radio-button-input cdk-visually-hidden\"\n type=\"radio\"\n [attr.name]=\"name\"\n [disabled]=\"_radioDisabled\"\n [checked]=\"checked\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-checked]=\"checked.toString()\"\n [value]=\"value\"\n (change)=\"_radioChange($event.target)\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-radio-button-inner-circle\"></div>\n </div>\n <span class=\"granite-radio-button-text\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle:focus-within{border:.0625rem solid var(--granite-color-focus)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover{cursor:pointer}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button):not(.granite-radio-button-readonly):not(.granite-radio-button-disabled) .granite-radio-button-outer-circle .granite-radio-button-label:hover .granite-radio-button-inner-circle{background-color:var(--granite-color-background-active-hover)}:host(.granite-radio-button-label-before) .granite-radio-button-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-radio-button-label-before) .granite-radio-button-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}:host(.granite-radio-button-checked) .granite-radio-button-inner-circle{visibility:visible;animation:grow-animation .1s}:host(.granite-radio-button-checked) .granite-radio-button-outer-circle{border-color:var(--granite-color-background-active)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-disabled .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text);background-color:transparent}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-inner-circle{background-color:var(--granite-color-text)}:host(.granite-radio-button-checked).granite-radio-button-readonly .granite-radio-button-outer-circle{border:.0625rem solid var(--granite-color-text)}.granite-radio-button-text{padding-inline-start:var(--granite-spacing-8);color:var(--granite-color-text);font-size:var(--granite-font-size-body-small)}.granite-radio-button-text:empty{display:none}.granite-radio-button-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}:host(.granite-radio-button-disabled) .granite-radio-button-text{opacity:.6}:host(.granite-radio-button-disabled) .granite-radio-button-outer-circle{opacity:.3;background-color:var(--granite-color-border-soft)}.granite-radio-button-outer-circle{height:1rem;width:1rem;border-radius:50%;box-sizing:border-box;border:.0625rem solid var(--granite-color-border-hard);display:flex;justify-content:center;position:relative;align-items:center}.granite-radio-button-inner-circle{width:.625rem;height:.625rem;visibility:hidden;position:absolute;border-radius:50%;background-color:var(--granite-color-background-active);margin:auto}@keyframes grow-animation{0%{transform:scale(0)}to{transform:scale(1)}}\n"] }]
|
|
2391
2384
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i2.UniqueSelectionDispatcher }], propDecorators: { value: [{
|
|
2392
2385
|
type: Input
|
|
2393
2386
|
}], id: [{
|
|
@@ -2424,10 +2417,10 @@ class GraniteRadioCheckboxBase {
|
|
|
2424
2417
|
this.layout = 'horizontal';
|
|
2425
2418
|
this.ariaLabelledby = null;
|
|
2426
2419
|
}
|
|
2427
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2428
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioCheckboxBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2421
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteRadioCheckboxBase, inputs: { layout: "layout", ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, ngImport: i0 }); }
|
|
2429
2422
|
}
|
|
2430
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioCheckboxBase, decorators: [{
|
|
2431
2424
|
type: Directive
|
|
2432
2425
|
}], propDecorators: { layout: [{
|
|
2433
2426
|
type: Input
|
|
@@ -2437,25 +2430,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2437
2430
|
}] } });
|
|
2438
2431
|
|
|
2439
2432
|
class GraniteRadioGroupComponent extends GraniteRadioCheckboxBase {
|
|
2440
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2441
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteRadioGroupComponent, selector: "granite-radio-group", host: { properties: { "attr.role": "\"radiogroup\"", "attr.aria-labelledby": "ariaLabelledby", "class.granite-radio-checkbox-base-layout-horizontal": "layout === \"horizontal\"" }, classAttribute: "granite-radio-group" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2442
2435
|
}
|
|
2443
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioGroupComponent, decorators: [{
|
|
2444
2437
|
type: Component,
|
|
2445
2438
|
args: [{ selector: 'granite-radio-group', host: {
|
|
2446
2439
|
class: 'granite-radio-group',
|
|
2447
2440
|
'[attr.role]': '"radiogroup"',
|
|
2448
2441
|
'[attr.aria-labelledby]': 'ariaLabelledby',
|
|
2449
2442
|
'[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
|
|
2450
|
-
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"] }]
|
|
2443
|
+
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start}\n"] }]
|
|
2451
2444
|
}] });
|
|
2452
2445
|
|
|
2453
2446
|
class GraniteRadioButtonModule {
|
|
2454
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2455
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2456
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2447
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2448
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonModule, declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent], exports: [GraniteRadioButtonComponent, GraniteRadioGroupComponent] }); }
|
|
2449
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonModule }); }
|
|
2457
2450
|
}
|
|
2458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteRadioButtonModule, decorators: [{
|
|
2459
2452
|
type: NgModule,
|
|
2460
2453
|
args: [{
|
|
2461
2454
|
declarations: [GraniteRadioButtonComponent, GraniteRadioGroupComponent],
|
|
@@ -2518,10 +2511,10 @@ class GraniteCheckboxComponent {
|
|
|
2518
2511
|
_getInputElement() {
|
|
2519
2512
|
return this._inputElement.nativeElement;
|
|
2520
2513
|
}
|
|
2521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2515
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCheckboxComponent, selector: "granite-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", readonly: "readonly", labelPosition: "labelPosition", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange", checkboxChange: "checkboxChange", checkboxBlur: "checkboxBlur" }, host: { properties: { "class.granite-checkbox-checked": "checked", "class.granite-checkbox-disabled": "disabled", "class.granite-checkbox-readonly": "readonly", "class.granite-checkbox-label-before": "_positionBefore" }, classAttribute: "granite-checkbox" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["graniteCheckbox"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2523
2516
|
}
|
|
2524
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxComponent, decorators: [{
|
|
2525
2518
|
type: Component,
|
|
2526
2519
|
args: [{ selector: 'granite-checkbox', exportAs: 'graniteCheckbox', host: {
|
|
2527
2520
|
class: 'granite-checkbox',
|
|
@@ -2529,7 +2522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2529
2522
|
'[class.granite-checkbox-disabled]': 'disabled',
|
|
2530
2523
|
'[class.granite-checkbox-readonly]': 'readonly',
|
|
2531
2524
|
'[class.granite-checkbox-label-before]': '_positionBefore',
|
|
2532
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2525
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" class=\"granite-checkbox-label\">\n <div class=\"granite-checkbox-box\">\n <input\n #input\n [id]=\"id\"\n class=\"granite-checkbox-input cdk-visually-hidden\"\n role=\"checkbox\"\n type=\"checkbox\"\n [attr.aria-checked]=\"checked.toString()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [checked]=\"checked\"\n [disabled]=\"_checkboxDisabled\"\n [readonly]=\"readonly\"\n (click)=\"_checkboxClick()\"\n (change)=\"_checkboxChange()\"\n (blur)=\"_onBlur()\"\n />\n <div class=\"granite-checkbox-check\"></div>\n </div>\n <span class=\"granite-checkbox-text\"><ng-content></ng-content></span>\n</label>\n", styles: [".cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}:host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host(.granite-checkbox){color:var(--granite-color-text)}:host(.granite-checkbox):not(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{border-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-box{animation:fade-in-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-checked):not(.granite-checkbox-readonly):not(.granite-checkbox-disabled) .granite-checkbox-label:hover .granite-checkbox-box{background-color:var(--granite-color-background-active-hover);border-color:var(--granite-color-background-active-hover)}:host(.granite-checkbox-checked) .granite-checkbox-box{border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-active)}:host(.granite-checkbox-checked) .granite-checkbox-box:focus-within{border-color:var(--granite-color-focus)}:host(.granite-checkbox-checked) .granite-checkbox-check{display:flex}:host(:not(.granite-checkbox-checked)) .granite-checkbox-box{animation:fade-out-animation .2s;animation-iteration-count:1}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box{background-color:var(--granite-color-text);border-color:var(--granite-color-text)}:host(.granite-checkbox-readonly.granite-checkbox-checked) .granite-checkbox-box .granite-checkbox-check{border-color:var(--granite-color-background)}:host(.granite-checkbox-disabled) .granite-checkbox-box{opacity:.3;background-color:var(--granite-color-border-soft)}:host(.granite-checkbox-disabled) .granite-checkbox-label{opacity:.6}:host(.granite-checkbox-disabled) *{cursor:default}:host(.granite-checkbox-readonly) *{cursor:default}:host(.granite-checkbox-label-before) .granite-checkbox-label{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.granite-checkbox-label-before) .granite-checkbox-text{padding-inline-start:0;padding-inline-end:var(--granite-spacing-8)}.granite-checkbox-label{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;width:max-content;margin-inline-end:var(--granite-spacing-32);margin-block-end:var(--granite-spacing-4)}.granite-checkbox-box{width:1rem;height:1rem;border:solid var(--granite-color-background-inactive);border-width:.0625rem;border-radius:.25rem;display:flex;justify-content:center;position:relative}.granite-checkbox-box:focus-within{border:.0625rem solid var(--granite-color-focus)}.granite-checkbox-check{position:relative;display:none;width:.5625rem;height:.3125rem;background-color:transparent;border:solid var(--granite-color-text-static-light);transform:rotate(-45deg);margin-top:var(--granite-spacing-4);border-width:0 0 .125rem .125rem}.granite-checkbox-text{padding-inline-start:var(--granite-spacing-8);font-size:var(--granite-font-size-body-small)}.granite-checkbox-text:empty{display:none}@keyframes fade-in-animation{0%{opacity:0}to{opacity:1}}@keyframes fade-out-animation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2533
2526
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
|
|
2534
2527
|
type: Input
|
|
2535
2528
|
}], checked: [{
|
|
@@ -2558,25 +2551,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2558
2551
|
}] } });
|
|
2559
2552
|
|
|
2560
2553
|
class GraniteCheckboxGroupComponent extends GraniteRadioCheckboxBase {
|
|
2561
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2562
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2554
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCheckboxGroupComponent, selector: "granite-checkbox-group", host: { properties: { "attr.role": "\"group\"", "attr.aria-labelledby": "ariaLabelledby", "class.granite-radio-checkbox-base-layout-horizontal": "layout === \"horizontal\"" }, classAttribute: "granite-checkbox-group" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2563
2556
|
}
|
|
2564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxGroupComponent, decorators: [{
|
|
2565
2558
|
type: Component,
|
|
2566
2559
|
args: [{ selector: 'granite-checkbox-group', host: {
|
|
2567
2560
|
class: 'granite-checkbox-group',
|
|
2568
2561
|
'[attr.role]': '"group"',
|
|
2569
2562
|
'[attr.aria-labelledby]': 'ariaLabelledby',
|
|
2570
2563
|
'[class.granite-radio-checkbox-base-layout-horizontal]': 'layout === "horizontal"',
|
|
2571
|
-
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:flex;align-items:flex-start}\n"] }]
|
|
2564
|
+
}, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host(.granite-radio-checkbox-base-layout-horizontal){display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start}\n"] }]
|
|
2572
2565
|
}] });
|
|
2573
2566
|
|
|
2574
2567
|
class GraniteCheckboxModule {
|
|
2575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2576
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2577
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2569
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxModule, declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent], exports: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent] }); }
|
|
2570
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxModule }); }
|
|
2578
2571
|
}
|
|
2579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCheckboxModule, decorators: [{
|
|
2580
2573
|
type: NgModule,
|
|
2581
2574
|
args: [{
|
|
2582
2575
|
declarations: [GraniteCheckboxComponent, GraniteCheckboxGroupComponent],
|
|
@@ -2597,10 +2590,10 @@ const disabledMixin = (Base = class {
|
|
|
2597
2590
|
this.disabled = coerceBooleanProperty(changes.disabled.currentValue);
|
|
2598
2591
|
}
|
|
2599
2592
|
}
|
|
2600
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2601
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Derived, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2594
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: Derived, inputs: { disabled: "disabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
2602
2595
|
}
|
|
2603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Derived, decorators: [{
|
|
2604
2597
|
type: Directive
|
|
2605
2598
|
}], propDecorators: { disabled: [{
|
|
2606
2599
|
type: Input
|
|
@@ -2641,10 +2634,10 @@ class GraniteButtonComponent extends ButtonComponentMixin {
|
|
|
2641
2634
|
_getHostElement() {
|
|
2642
2635
|
return this._elementRef.nativeElement;
|
|
2643
2636
|
}
|
|
2644
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2637
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: { disabled: "disabled", toggled: "toggled" }, host: { properties: { "class.granite-button-disabled": "disabled", "class.granite-button-toggled": "_buttonToggled", "attr.disabled": "disabled || null" }, classAttribute: "granite-button-base" }, exportAs: ["graniteButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2646
2639
|
}
|
|
2647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonComponent, decorators: [{
|
|
2648
2641
|
type: Component,
|
|
2649
2642
|
args: [{ selector: `button[graniteButton],
|
|
2650
2643
|
button[granitePrimaryButton],
|
|
@@ -2655,7 +2648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2655
2648
|
'[class.granite-button-disabled]': 'disabled',
|
|
2656
2649
|
'[class.granite-button-toggled]': '_buttonToggled',
|
|
2657
2650
|
'[attr.disabled]': 'disabled || null',
|
|
2658
|
-
}, exportAs: 'graniteButton', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width
|
|
2651
|
+
}, exportAs: 'graniteButton', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2659
2652
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { toggled: [{
|
|
2660
2653
|
type: Input
|
|
2661
2654
|
}] } });
|
|
@@ -2673,28 +2666,28 @@ class GraniteAnchorComponent extends GraniteButtonComponent {
|
|
|
2673
2666
|
ngOnChanges(changes) {
|
|
2674
2667
|
super.ngOnChanges(changes);
|
|
2675
2668
|
}
|
|
2676
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAnchorComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteAnchorComponent, selector: "a[graniteButton],\n a[graniteFlatButton]", inputs: { disabled: "disabled" }, host: { listeners: { "click": "_anchorClick($event)" }, properties: { "attr.tabindex": "disabled ? -1 : 0", "class.granite-button-disabled": "disabled" }, classAttribute: "granite-button-base" }, exportAs: ["graniteAnchor"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2678
2671
|
}
|
|
2679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAnchorComponent, decorators: [{
|
|
2680
2673
|
type: Component,
|
|
2681
2674
|
args: [{ selector: `a[graniteButton],
|
|
2682
2675
|
a[graniteFlatButton]`, host: {
|
|
2683
2676
|
class: 'granite-button-base',
|
|
2684
2677
|
'[attr.tabindex]': 'disabled ? -1 : 0',
|
|
2685
2678
|
'[class.granite-button-disabled]': 'disabled',
|
|
2686
|
-
}, exportAs: 'graniteAnchor', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:flex;justify-content:center;align-items:center;width
|
|
2679
|
+
}, exportAs: 'graniteAnchor', template: '<ng-content></ng-content>', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit;cursor:pointer}:host.granite-button-base{border-radius:.25rem;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);padding:var(--granite-spacing-8) var(--granite-spacing-8);position:relative;line-height:var(--granite-font-size-body);display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:fit-content}:host:focus:not(.granite-button-disabled):not(:active){outline-offset:-2px;outline-width:.125rem;outline-color:var(--granite-color-focus);outline-style:solid}button:host{background-color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;font:inherit;border-radius:inherit;height:inherit;font-weight:inherit;line-height:inherit;color:inherit;margin:inherit;cursor:pointer;padding:inherit}button:host.granite-button{background-color:var(--granite-color-background-variant);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled,button:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-primary-button{background-color:var(--granite-color-background-active);color:var(--granite-color-text-on-active);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-primary-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:none;outline:none}}button:host.granite-primary-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:none;outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-primary-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-primary-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:none}button:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-toolbar-button{background-color:var(--granite-color-background);color:var(--granite-color-text);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){button:host.granite-toolbar-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}button:host.granite-toolbar-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled{background-color:var(--granite-color-background-selected);color:var(--granite-color-focus)}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:not(:focus),button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}button:host.granite-toolbar-button.granite-flat-button.granite-button-toggled:hover,button:host.granite-toolbar-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}button:host.granite-button-disabled,button:host.granite-button-disabled:active,button:host.granite-button-disabled:focus,button:host.granite-button-disabled:hover{opacity:.4;cursor:default}a:host{outline:none;text-decoration:none}a:host:hover{text-decoration:underline}a:host.granite-button{background-color:var(--granite-color-background);color:var(--granite-color-text-link);outline:.0625rem solid var(--granite-color-border-soft);outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled,a:host.granite-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-flat-button{background-color:transparent;color:var(--granite-color-text-link);outline:none;outline-offset:-1px}@media (hover: hover) and (pointer: fine){a:host.granite-flat-button:hover:not(.granite-button-disabled){background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active);outline:none}}a:host.granite-flat-button:active:not(.granite-button-disabled){background-color:var(--granite-color-background-active-pressed);color:var(--granite-color-text-on-active);outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled{background-color:none;color:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:not(:focus),a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:not(:focus){outline:none}a:host.granite-flat-button.granite-flat-button.granite-button-toggled:hover,a:host.granite-flat-button.granite-toolbar-button.granite-button-toggled:hover{background-color:var(--granite-color-background-active-hover);color:var(--granite-color-text-on-active)}a:host.granite-button-disabled,a:host.granite-button-disabled:active,a:host.granite-button-disabled:focus,a:host.granite-button-disabled:hover{opacity:.4;text-decoration:none;cursor:default;pointer-events:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}\n"] }]
|
|
2687
2680
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ElementRef }], propDecorators: { _anchorClick: [{
|
|
2688
2681
|
type: HostListener,
|
|
2689
2682
|
args: ['click', ['$event']]
|
|
2690
2683
|
}] } });
|
|
2691
2684
|
|
|
2692
2685
|
class GraniteButtonModule {
|
|
2693
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2694
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2695
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2686
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2687
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonModule, declarations: [GraniteButtonComponent, GraniteAnchorComponent], exports: [GraniteButtonComponent, GraniteAnchorComponent] }); }
|
|
2688
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonModule }); }
|
|
2696
2689
|
}
|
|
2697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteButtonModule, decorators: [{
|
|
2698
2691
|
type: NgModule,
|
|
2699
2692
|
args: [{
|
|
2700
2693
|
declarations: [GraniteButtonComponent, GraniteAnchorComponent],
|
|
@@ -2802,14 +2795,14 @@ class GraniteInputFieldComponent {
|
|
|
2802
2795
|
_getTextareaElement() {
|
|
2803
2796
|
return this._textareaElement.nativeElement;
|
|
2804
2797
|
}
|
|
2805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2799
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteInputFieldComponent, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}:host ::ng-deep button[graniteInputSuffixButton]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative;margin:0;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2807
2800
|
}
|
|
2808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldComponent, decorators: [{
|
|
2809
2802
|
type: Component,
|
|
2810
2803
|
args: [{ selector: 'granite-input-field', exportAs: 'graniteInputField', host: {
|
|
2811
2804
|
class: 'granite-input-field',
|
|
2812
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width
|
|
2805
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"_supported\"\n class=\"granite-input-container\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n>\n <div\n class=\"granite-input-top-row\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n [class.granite-input-disabled]=\"disabled\"\n [class.granite-input-readonly]=\"readonly\"\n [class.granite-input-invalid]=\"invalid\"\n >\n <div\n *ngIf=\"prefixicon\"\n class=\"granite-input-prepend\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n >\n <granite-icon class=\"granite-input-prepend-icon\">\n {{ prefixicon }}\n </granite-icon>\n </div>\n\n <ng-container\n *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n ></ng-container>\n\n <ng-template #inputElement>\n <input\n #input\n [id]=\"id\"\n class=\"granite-input-base\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxlength\"\n [value]=\"value\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n />\n </ng-template>\n\n <button\n *ngIf=\"_passwordField\"\n class=\"granite-input-append\"\n [class.granite-input-required]=\"required\"\n [class.granite-input-empty]=\"_empty\"\n (click)=\"_togglePassword()\"\n >\n <granite-icon class=\"granite-input-password-toggle-icon\">\n {{ _passwordFieldIcon }}\n </granite-icon>\n </button>\n\n <ng-container *ngIf=\"!_passwordField\">\n <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n </ng-container>\n\n <ng-template #textareaElement>\n <textarea\n #textarea\n [id]=\"id\"\n class=\"granite-input-base granite-text-area\"\n [class.granite-input-invalid]=\"invalid\"\n [class.granite-input-empty]=\"_empty\"\n rows=\"1\"\n [name]=\"name\"\n [attr.type]=\"type\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [attr.maxlength]=\"maxlength\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n (input)=\"_onInput($event)\"\n ></textarea>\n </ng-template>\n </div>\n\n <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n <div class=\"granite-input-char-count\">\n {{ _currentCharCount }}/{{ maxlength }}\n </div>\n </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}:host ::ng-deep button[graniteInputSuffixButton]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative;margin:0;border-radius:0}\n"] }]
|
|
2813
2806
|
}], ctorParameters: () => [{ type: i1.FocusMonitor }], propDecorators: { id: [{
|
|
2814
2807
|
type: Input
|
|
2815
2808
|
}], name: [{
|
|
@@ -2851,11 +2844,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
2851
2844
|
}] } });
|
|
2852
2845
|
|
|
2853
2846
|
class GraniteInputFieldModule {
|
|
2854
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2855
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2856
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2848
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldModule, declarations: [GraniteInputFieldComponent], imports: [CommonModule, GraniteIconModule, GraniteButtonModule], exports: [GraniteInputFieldComponent] }); }
|
|
2849
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldModule, imports: [CommonModule, GraniteIconModule, GraniteButtonModule] }); }
|
|
2857
2850
|
}
|
|
2858
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldModule, decorators: [{
|
|
2859
2852
|
type: NgModule,
|
|
2860
2853
|
args: [{
|
|
2861
2854
|
imports: [CommonModule, GraniteIconModule, GraniteButtonModule],
|
|
@@ -3082,10 +3075,10 @@ class GraniteChipComponent {
|
|
|
3082
3075
|
? this.selected.toString()
|
|
3083
3076
|
: null;
|
|
3084
3077
|
}
|
|
3085
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3078
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid" }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "class.granite-chip-removable": "!disabled && (removable || inputChip)", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus);outline-offset:calc(var(--granite-border-width-focus) * -1)}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
3087
3080
|
}
|
|
3088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3081
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipComponent, decorators: [{
|
|
3089
3082
|
type: Component,
|
|
3090
3083
|
args: [{ selector: `granite-chip, granite-input-chip`, inputs: ['tabIndex'], exportAs: 'graniteChip', host: {
|
|
3091
3084
|
class: 'granite-chip',
|
|
@@ -3106,7 +3099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
3106
3099
|
'(keydown)': '_handleKeydown($event)',
|
|
3107
3100
|
'(blur)': '_blur()',
|
|
3108
3101
|
'(focus)': 'focus()',
|
|
3109
|
-
}, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus);outline-offset:calc(var(--granite-border-width-focus) * -1)}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
|
|
3102
|
+
}, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus);outline-offset:calc(var(--granite-border-width-focus) * -1)}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
|
|
3110
3103
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef, decorators: [{
|
|
3111
3104
|
type: Optional
|
|
3112
3105
|
}] }, { type: undefined, decorators: [{
|
|
@@ -3641,10 +3634,10 @@ class GraniteChipListComponent extends GraniteChipListBase {
|
|
|
3641
3634
|
});
|
|
3642
3635
|
}
|
|
3643
3636
|
}
|
|
3644
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3637
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3638
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"], role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.granite-chip-list{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3646
3639
|
}
|
|
3647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipListComponent, decorators: [{
|
|
3648
3641
|
type: Component,
|
|
3649
3642
|
args: [{ selector: 'granite-chip-list', template: `<ng-content></ng-content>`, exportAs: 'graniteChipList', host: {
|
|
3650
3643
|
class: 'granite-chip-list',
|
|
@@ -3660,7 +3653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
3660
3653
|
'(focus)': 'focus()',
|
|
3661
3654
|
'(blur)': '_blur()',
|
|
3662
3655
|
'(keydown)': '_keydown($event)',
|
|
3663
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
|
|
3656
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host.granite-chip-list{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;place-content:center flex-start;align-items:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-regular);overflow:auto;padding:0;margin:0}:host ::ng-deep input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin:var(--granite-spacing-4)}:host ::ng-deep granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
|
|
3664
3657
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3.Directionality, decorators: [{
|
|
3665
3658
|
type: Optional
|
|
3666
3659
|
}] }, { type: i2$1.NgForm, decorators: [{
|
|
@@ -3850,10 +3843,10 @@ class GraniteChipInputDirective {
|
|
|
3850
3843
|
return (!hasModifierKey(event) &&
|
|
3851
3844
|
new Set(this.graniteChipInputSeparatorKeyCodes).has(event.keyCode));
|
|
3852
3845
|
}
|
|
3853
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3854
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3846
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3847
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteChipInputDirective, selector: "input[graniteChipInputFor]", inputs: { id: "id", placeholder: "placeholder", graniteChipInputFor: "graniteChipInputFor", graniteChipInputSeparatorKeyCodes: "graniteChipInputSeparatorKeyCodes", graniteChipInputAddOnBlur: "graniteChipInputAddOnBlur", required: "required", disabled: "disabled" }, outputs: { graniteChipInputTokenEnd: "graniteChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "keyup": "_keyup($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null", "attr.aria-required": "required || null" }, classAttribute: "granite-chip-input" }, exportAs: ["graniteChipInput", "graniteChipInputFor"], usesOnChanges: true, ngImport: i0 }); }
|
|
3855
3848
|
}
|
|
3856
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipInputDirective, decorators: [{
|
|
3857
3850
|
type: Directive,
|
|
3858
3851
|
args: [{
|
|
3859
3852
|
selector: 'input[graniteChipInputFor]',
|
|
@@ -3895,15 +3888,15 @@ const CHIP_DECLARATIONS = [
|
|
|
3895
3888
|
GraniteChipInputDirective,
|
|
3896
3889
|
];
|
|
3897
3890
|
class GraniteChipsModule {
|
|
3898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3899
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3892
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipsModule, declarations: [GraniteChipListComponent,
|
|
3900
3893
|
GraniteChipComponent,
|
|
3901
3894
|
GraniteChipInputDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule], exports: [GraniteChipListComponent,
|
|
3902
3895
|
GraniteChipComponent,
|
|
3903
3896
|
GraniteChipInputDirective] }); }
|
|
3904
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3897
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule] }); }
|
|
3905
3898
|
}
|
|
3906
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteChipsModule, decorators: [{
|
|
3907
3900
|
type: NgModule,
|
|
3908
3901
|
args: [{
|
|
3909
3902
|
imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule],
|
|
@@ -3923,10 +3916,10 @@ class GraniteLabelComponent {
|
|
|
3923
3916
|
this.required = coerceBooleanProperty(changes.required.currentValue);
|
|
3924
3917
|
}
|
|
3925
3918
|
}
|
|
3926
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3927
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3919
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3920
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteLabelComponent, selector: "granite-label", inputs: { for: "for", form: "form", required: "required" }, host: { classAttribute: "granite-label" }, exportAs: ["graniteLabel"], usesOnChanges: true, ngImport: i0, template: "<label [attr.for]=\"for\" [attr.form]=\"form\">\n <i *ngIf=\"required\" aria-label=\"required\">*</i>\n <ng-content></ng-content>\n</label>\n", styles: [":host{box-sizing:border-box;font:inherit;font-size:var(--granite-font-size-micro);color:var(--granite-color-text-weak)}:host *,:host *:before,:host *:after{box-sizing:inherit}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3928
3921
|
}
|
|
3929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3922
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelComponent, decorators: [{
|
|
3930
3923
|
type: Component,
|
|
3931
3924
|
args: [{ selector: 'granite-label', exportAs: 'graniteLabel', host: {
|
|
3932
3925
|
class: 'granite-label',
|
|
@@ -3940,11 +3933,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
3940
3933
|
}] } });
|
|
3941
3934
|
|
|
3942
3935
|
class GraniteLabelModule {
|
|
3943
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3944
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3945
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3936
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3937
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelModule, declarations: [GraniteLabelComponent], imports: [CommonModule], exports: [GraniteLabelComponent] }); }
|
|
3938
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelModule, imports: [CommonModule] }); }
|
|
3946
3939
|
}
|
|
3947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteLabelModule, decorators: [{
|
|
3948
3941
|
type: NgModule,
|
|
3949
3942
|
args: [{
|
|
3950
3943
|
declarations: [GraniteLabelComponent],
|
|
@@ -3964,10 +3957,10 @@ class ContactsTriggerDataComponent {
|
|
|
3964
3957
|
*/
|
|
3965
3958
|
this.panelId = `granite-contacts-panel-${contactsPanelUid++}`;
|
|
3966
3959
|
}
|
|
3967
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3968
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3960
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactsTriggerDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3961
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContactsTriggerDataComponent, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
3969
3962
|
}
|
|
3970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactsTriggerDataComponent, decorators: [{
|
|
3971
3964
|
type: Directive,
|
|
3972
3965
|
args: [{}]
|
|
3973
3966
|
}], propDecorators: { templateRef: [{
|
|
@@ -3979,10 +3972,10 @@ class GraniteCustomStatusDirective {
|
|
|
3979
3972
|
constructor(templateRef) {
|
|
3980
3973
|
this.templateRef = templateRef;
|
|
3981
3974
|
}
|
|
3982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3983
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomStatusDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3976
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCustomStatusDirective, selector: "[graniteCustomStatus]", inputs: { graniteCustomStatus: "graniteCustomStatus" }, ngImport: i0 }); }
|
|
3984
3977
|
}
|
|
3985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomStatusDirective, decorators: [{
|
|
3986
3979
|
type: Directive,
|
|
3987
3980
|
args: [{
|
|
3988
3981
|
selector: '[graniteCustomStatus]',
|
|
@@ -3995,10 +3988,10 @@ class GraniteCustomProfileDirective {
|
|
|
3995
3988
|
constructor(templateRef) {
|
|
3996
3989
|
this.templateRef = templateRef;
|
|
3997
3990
|
}
|
|
3998
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3999
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3991
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomProfileDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3992
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCustomProfileDirective, selector: "[graniteCustomProfile]", ngImport: i0 }); }
|
|
4000
3993
|
}
|
|
4001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomProfileDirective, decorators: [{
|
|
4002
3995
|
type: Directive,
|
|
4003
3996
|
args: [{
|
|
4004
3997
|
selector: '[graniteCustomProfile]',
|
|
@@ -4060,10 +4053,10 @@ class GraniteCustomAvatarStatusDirective {
|
|
|
4060
4053
|
constructor(templateRef) {
|
|
4061
4054
|
this.templateRef = templateRef;
|
|
4062
4055
|
}
|
|
4063
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4064
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomAvatarStatusDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4057
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCustomAvatarStatusDirective, selector: "[graniteCustomAvatarStatus]", inputs: { graniteCustomAvatarStatus: "graniteCustomAvatarStatus" }, ngImport: i0 }); }
|
|
4065
4058
|
}
|
|
4066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCustomAvatarStatusDirective, decorators: [{
|
|
4067
4060
|
type: Directive,
|
|
4068
4061
|
args: [{
|
|
4069
4062
|
selector: '[graniteCustomAvatarStatus]',
|
|
@@ -4097,14 +4090,14 @@ class GraniteAvatarDefaultStatusComponent {
|
|
|
4097
4090
|
}
|
|
4098
4091
|
}
|
|
4099
4092
|
}
|
|
4100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4093
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4094
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: { status: "status" }, host: { properties: { "class": "this.statusClass" }, classAttribute: "granite-avatar-default-status" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;width:calc(var(--granite-size-base-rem)/2);height:calc(var(--granite-size-base-rem)/2);outline:var(--granite-border-width-focus) solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4102
4095
|
}
|
|
4103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarDefaultStatusComponent, decorators: [{
|
|
4104
4097
|
type: Component,
|
|
4105
4098
|
args: [{ selector: 'granite-avatar-default-status', host: {
|
|
4106
4099
|
class: 'granite-avatar-default-status',
|
|
4107
|
-
}, template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width
|
|
4100
|
+
}, template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:calc(var(--granite-size-base-rem)/2);height:calc(var(--granite-size-base-rem)/2);outline:var(--granite-border-width-focus) solid var(--granite-color-background);border-radius:100%}:host.available{background:var(--granite-color-signal-ok)}:host.do-not-disturb{background:var(--granite-color-signal-failure)}:host.disabled{background:var(--granite-color-signal-neutral)}:host.away{background:var(--granite-color-signal-warning)}\n"] }]
|
|
4108
4101
|
}], propDecorators: { status: [{
|
|
4109
4102
|
type: Input
|
|
4110
4103
|
}], statusClass: [{
|
|
@@ -4113,46 +4106,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4113
4106
|
}] } });
|
|
4114
4107
|
|
|
4115
4108
|
class GraniteEmptyAvatarComponent {
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4109
|
+
constructor() {
|
|
4110
|
+
this.ariaLabel = null;
|
|
4111
|
+
}
|
|
4112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteEmptyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: { initials: "initials", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-empty-avatar" }, ngImport: i0, template: `
|
|
4114
|
+
<div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
|
|
4119
4115
|
<span
|
|
4120
4116
|
data-fnd="no-profile-avatar-initials"
|
|
4121
4117
|
class="no-profile-avatar-initials"
|
|
4122
4118
|
>{{ initials }}</span
|
|
4123
4119
|
>
|
|
4124
4120
|
</div>
|
|
4125
|
-
`, isInline: true, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4121
|
+
`, isInline: true, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4126
4122
|
}
|
|
4127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteEmptyAvatarComponent, decorators: [{
|
|
4128
4124
|
type: Component,
|
|
4129
4125
|
args: [{ selector: 'granite-empty-avatar', host: {
|
|
4130
4126
|
class: 'granite-empty-avatar',
|
|
4131
4127
|
}, template: `
|
|
4132
|
-
<div class="no-profile-avatar">
|
|
4128
|
+
<div class="no-profile-avatar" [attr.aria-label]="ariaLabel" role="img">
|
|
4133
4129
|
<span
|
|
4134
4130
|
data-fnd="no-profile-avatar-initials"
|
|
4135
4131
|
class="no-profile-avatar-initials"
|
|
4136
4132
|
>{{ initials }}</span
|
|
4137
4133
|
>
|
|
4138
4134
|
</div>
|
|
4139
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"] }]
|
|
4135
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:inherit;height:inherit}:host .no-profile-avatar{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;width:inherit;height:inherit;border-radius:100%;background:var(--granite-color-background-info);justify-content:center;align-items:center}\n"] }]
|
|
4140
4136
|
}], propDecorators: { initials: [{
|
|
4141
4137
|
type: Input
|
|
4138
|
+
}], ariaLabel: [{
|
|
4139
|
+
type: Input,
|
|
4140
|
+
args: ['aria-label']
|
|
4142
4141
|
}] } });
|
|
4143
4142
|
|
|
4144
4143
|
class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
4145
4144
|
constructor(cd) {
|
|
4146
4145
|
super();
|
|
4147
4146
|
this.cd = cd;
|
|
4147
|
+
this.ariaLabel = null;
|
|
4148
|
+
this.avatarAriaLabel = '';
|
|
4148
4149
|
}
|
|
4149
4150
|
ngOnChanges(changes) {
|
|
4150
|
-
if (changes.firstName ||
|
|
4151
|
-
|
|
4151
|
+
if (changes.firstName ||
|
|
4152
|
+
changes.lastName ||
|
|
4153
|
+
changes.name ||
|
|
4154
|
+
changes.ariaLabel) {
|
|
4155
|
+
const nameData = NamesUtilsService.buildNameData({
|
|
4152
4156
|
firstName: changes.firstName?.currentValue,
|
|
4153
4157
|
lastName: changes.lastName?.currentValue,
|
|
4154
4158
|
name: changes.name?.currentValue,
|
|
4155
|
-
})
|
|
4159
|
+
});
|
|
4160
|
+
this._nameInitials = nameData?.initials;
|
|
4161
|
+
this.avatarAriaLabel =
|
|
4162
|
+
changes.ariaLabel?.currentValue ??
|
|
4163
|
+
`${nameData?.firstName ?? ''} ${nameData?.lastName ?? ''}`.trim();
|
|
4156
4164
|
this.cd.markForCheck();
|
|
4157
4165
|
}
|
|
4158
4166
|
}
|
|
@@ -4166,14 +4174,14 @@ class GraniteAvatarComponent extends ContactsTriggerDataComponent {
|
|
|
4166
4174
|
};
|
|
4167
4175
|
}, {});
|
|
4168
4176
|
}
|
|
4169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: { name: "name", firstName: "firstName", lastName: "lastName", avatar: "avatar", status: "status", ariaLabel: ["aria-label", "ariaLabel"] }, host: { classAttribute: "granite-avatar" }, queries: [{ propertyName: "_customStatusesQueryList", predicate: GraniteCustomAvatarStatusDirective }], exportAs: ["graniteAvatar"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [initials]=\"_nameInitials\"\n [aria-label]=\"avatarAriaLabel\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteAvatarDefaultStatusComponent, selector: "granite-avatar-default-status", inputs: ["status"] }, { kind: "component", type: GraniteEmptyAvatarComponent, selector: "granite-empty-avatar", inputs: ["initials", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4171
4179
|
}
|
|
4172
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarComponent, decorators: [{
|
|
4173
4181
|
type: Component,
|
|
4174
4182
|
args: [{ selector: 'granite-avatar', exportAs: 'graniteAvatar', host: {
|
|
4175
4183
|
class: 'granite-avatar',
|
|
4176
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [initials]=\"_nameInitials\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
4184
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n data-fnd=\"profile-avatar\"\n *ngIf=\"avatar; else noProfileAvatar\"\n [src]=\"avatar\"\n alt=\"avatar\"\n class=\"profile-avatar profile-size\"\n [attr.aria-label]=\"avatarAriaLabel\"\n/>\n\n<ng-template #noProfileAvatar>\n <granite-empty-avatar\n class=\"profile-size\"\n [initials]=\"_nameInitials\"\n [aria-label]=\"avatarAriaLabel\"\n ></granite-empty-avatar>\n</ng-template>\n\n@if (status && _customStatusDirectives[status]) {\n <ng-container *ngTemplateOutlet=\"customStatus\"></ng-container>\n} @else if (status) {\n <ng-container *ngTemplateOutlet=\"defaultStatus\"></ng-container>\n}\n\n<ng-template #defaultStatus>\n <granite-avatar-default-status\n class=\"profile-default-status\"\n [attr.data-fnd]=\"status + '-status'\"\n [status]=\"status\"\n ></granite-avatar-default-status>\n</ng-template>\n\n<ng-template #customStatus>\n <div\n [attr.data-fnd]=\"'profile-status-custom'\"\n [class]=\"'profile-status-' + status\"\n class=\"profile-custom-status\"\n >\n <ng-container\n *ngTemplateOutlet=\"_customStatusDirectives[status]\"\n ></ng-container>\n </div>\n</ng-template>\n", styles: [":host .profile-default-status,:host .profile-custom-status{position:absolute;inset-inline-end:0;bottom:0}:host{display:block;position:relative;width:1.5rem;height:1.5rem;color:var(--granite-color-signal-info);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);object-fit:contain}:host .profile{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}:host .profile-avatar{width:inherit;height:inherit;border-radius:50%}\n"] }]
|
|
4177
4185
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { name: [{
|
|
4178
4186
|
type: Input
|
|
4179
4187
|
}], firstName: [{
|
|
@@ -4184,20 +4192,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4184
4192
|
type: Input
|
|
4185
4193
|
}], status: [{
|
|
4186
4194
|
type: Input
|
|
4195
|
+
}], ariaLabel: [{
|
|
4196
|
+
type: Input,
|
|
4197
|
+
args: ['aria-label']
|
|
4187
4198
|
}], _customStatusesQueryList: [{
|
|
4188
4199
|
type: ContentChildren,
|
|
4189
4200
|
args: [GraniteCustomAvatarStatusDirective]
|
|
4190
4201
|
}] } });
|
|
4191
4202
|
|
|
4192
4203
|
class GraniteContactsProfileComponent {
|
|
4193
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: { profile: "profile", profileClass: "profileClass" }, host: { classAttribute: "granite-contacts-profile" }, ngImport: i0, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [firstName]=\"profile.firstName\"\n [lastName]=\"profile.lastName\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ profile?.initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.firstName }} {{ profile?.lastName }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"], dependencies: [{ kind: "component", type: GraniteAvatarComponent, selector: "granite-avatar", inputs: ["name", "firstName", "lastName", "avatar", "status", "aria-label"], exportAs: ["graniteAvatar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4195
4206
|
}
|
|
4196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsProfileComponent, decorators: [{
|
|
4197
4208
|
type: Component,
|
|
4198
4209
|
args: [{ selector: 'granite-contacts-profile', host: {
|
|
4199
4210
|
class: 'granite-contacts-profile',
|
|
4200
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [firstName]=\"profile.firstName\"\n [lastName]=\"profile.lastName\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ profile?.initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.firstName }} {{ profile?.lastName }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
|
|
4211
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"profileClass\" data-fnd=\"profile\" class=\"profile\">\n <granite-avatar\n data-fnd=\"profile-avatar\"\n class=\"profile-avatar\"\n [firstName]=\"profile.firstName\"\n [lastName]=\"profile.lastName\"\n [avatar]=\"profile.avatar\"\n ></granite-avatar>\n\n <ng-template #noProfileAvatar>\n <div class=\"no-profile-avatar\">\n <span\n data-fnd=\"no-profile-avatar-initials\"\n class=\"no-profile-avatar-initials\"\n >{{ profile?.initials }}</span\n >\n </div>\n </ng-template>\n\n <div class=\"profile-info\">\n <p data-fnd=\"profile-info-names\" class=\"profile-info-names\">\n {{ profile?.firstName }} {{ profile?.lastName }}\n </p>\n <p data-fnd=\"profile-info-job-title\" class=\"profile-info-job-title\">\n {{ profile?.jobTitle }}\n </p>\n </div>\n</div>\n", styles: [".profile{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;margin-bottom:var(--granite-spacing-8);gap:var(--granite-spacing-4)}.profile-avatar{width:3rem;height:3rem;border-radius:50%}.profile-info{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--granite-spacing-8)}.profile-info-names{color:var(--granite-color-text);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);margin:0}.profile-info-job-title{color:var(--granite-color-text-hint);font-size:var(--granite-font-size-body-small);margin:0}.no-profile-avatar{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;width:3rem;height:3rem;border-radius:360px;background:var(--granite-color-background-info);justify-content:center;align-items:center}.no-profile-avatar-initials{font-size:var(--granite-font-size-micro);color:var(--granite-color-signal-info);font-weight:var(--granite-font-weight-regular)}\n"] }]
|
|
4201
4212
|
}], propDecorators: { profile: [{
|
|
4202
4213
|
type: Input
|
|
4203
4214
|
}], profileClass: [{
|
|
@@ -4217,10 +4228,10 @@ class ContactItemDefaultStatusComponent {
|
|
|
4217
4228
|
constructor() {
|
|
4218
4229
|
this.CONTACT_STATUS = CONTACT_DEFAULT_STATUS;
|
|
4219
4230
|
}
|
|
4220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactItemDefaultStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: { status: "status" }, host: { classAttribute: "granite-contact-item-default-status" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"status\">\n <ng-container *ngSwitchCase=\"CONTACT_STATUS.AVAILABLE\">\n <svg\n data-fnd=\"available\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"10\"\n viewBox=\"0 0 9 10\"\n fill=\"none\"\n >\n <path\n d=\"M4.085 0.915009C1.83008 0.915009 0 2.74509 0 5.00001C0 7.25493 1.83008 9.08501 4.085 9.08501C6.33992 9.08501 8.17 7.25493 8.17 5.00001C8.17 2.74509 6.33992 0.915009 4.085 0.915009Z\"\n fill=\"#17A511\"\n />\n <path\n d=\"M2.45099 4.82838L3.47224 6.06418L5.51474 4.21048\"\n stroke=\"white\"\n stroke-linecap=\"round\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"CONTACT_STATUS.BUSY\">\n <svg\n data-fnd=\"busy\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"9\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n >\n <path\n d=\"M4.25504 0.169922C2.00012 0.169922 0.170044 2 0.170044 4.25492C0.170044 6.50984 2.00012 8.33992 4.25504 8.33992C6.50996 8.33992 8.34004 6.50984 8.34004 4.25492C8.34004 2 6.50996 0.169922 4.25504 0.169922Z\"\n fill=\"#D23335\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"CONTACT_STATUS.DO_NOT_DISTURB\">\n <svg\n data-fnd=\"doNotDisturb\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"9\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n >\n <path\n d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n fill=\"#D23335\"\n />\n <path d=\"M2 4L6 4\" stroke=\"white\" stroke-linecap=\"round\" />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"CONTACT_STATUS.AWAY\">\n <svg\n data-fnd=\"away\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"9\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n >\n <path\n d=\"M4.085 0C1.83008 0 0 1.83008 0 4.085C0 6.33992 1.83008 8.17 4.085 8.17C6.33992 8.17 8.17 6.33992 8.17 4.085C8.17 1.83008 6.33992 0 4.085 0Z\"\n fill=\"#EDA000\"\n />\n <path d=\"M4 2L4 3.875L5.5 5.5\" stroke=\"white\" stroke-linecap=\"round\" />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"CONTACT_STATUS.OFFLINE\">\n <svg\n data-fnd=\"offline\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"9\"\n height=\"9\"\n viewBox=\"0 0 9 9\"\n fill=\"none\"\n >\n <path\n d=\"M0.5 4.085C0.5 2.10622 2.10622 0.5 4.085 0.5C6.06378 0.5 7.67 2.10622 7.67 4.085C7.67 6.06378 6.06378 7.67 4.085 7.67C2.10622 7.67 0.5 6.06378 0.5 4.085Z\"\n stroke=\"#7D7D7D\"\n />\n <path d=\"M3 3L5 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n <path d=\"M5 3L3 5\" stroke=\"#7D7D7D\" stroke-linecap=\"round\" />\n </svg>\n </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4222
4233
|
}
|
|
4223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactItemDefaultStatusComponent, decorators: [{
|
|
4224
4235
|
type: Component,
|
|
4225
4236
|
args: [{ selector: 'granite-contact-item-default-status', host: {
|
|
4226
4237
|
class: 'granite-contact-item-default-status',
|
|
@@ -4230,10 +4241,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4230
4241
|
}] } });
|
|
4231
4242
|
|
|
4232
4243
|
class GraniteContactItemTitleComponent {
|
|
4233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4234
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactItemTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: { contact: "contact" }, host: { classAttribute: "granite-contact-item-title" }, ngImport: i0, template: "<button\n tabindex=\"0\"\n data-fnd=\"contact-item-title\"\n [class.title-status-active]=\"!contact.disabled && !contact.options\"\n [class.title-status-disabled]=\"contact.disabled\"\n [class.title-status-parent]=\"!contact.disabled && contact.options\"\n>\n {{ contact.label }}\n</button>\n", styles: [".title-status-parent,.title-status-disabled,.title-status-active{font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular)}.title-status-active{color:var(--granite-color-text-link)}.title-status-active:hover{text-decoration:underline;cursor:pointer}.title-status-disabled{color:var(--granite-color-text-hint)}.title-status-parent{color:var(--granite-color-text)}button{all:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4235
4246
|
}
|
|
4236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactItemTitleComponent, decorators: [{
|
|
4237
4248
|
type: Component,
|
|
4238
4249
|
args: [{ selector: 'granite-contact-item-title', host: {
|
|
4239
4250
|
class: 'granite-contact-item-title',
|
|
@@ -4249,14 +4260,14 @@ class GraniteContactItemComponent {
|
|
|
4249
4260
|
emitSelectedContact(selectedContact) {
|
|
4250
4261
|
this.selectedContact.emit(selectedContact);
|
|
4251
4262
|
}
|
|
4252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: { contact: "contact" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contact-item" }, ngImport: i0, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"], dependencies: [{ kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContactItemDefaultStatusComponent, selector: "granite-contact-item-default-status", inputs: ["status"] }, { kind: "component", type: GraniteContactItemTitleComponent, selector: "granite-contact-item-title", inputs: ["contact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4254
4265
|
}
|
|
4255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactItemComponent, decorators: [{
|
|
4256
4267
|
type: Component,
|
|
4257
4268
|
args: [{ selector: 'granite-contact-item', host: {
|
|
4258
4269
|
class: 'granite-contact-item',
|
|
4259
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:flex;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:flex;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"] }]
|
|
4270
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contact-item\" [attr.data-fnd]=\"contact.name\">\n <div class=\"contact-item-main\">\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: contact,\n testName: 'contact',\n selectedContactOutput: { contact }\n }\n \"\n ></ng-container>\n </div>\n\n <ul *ngIf=\"contact.options\" class=\"contact-item-options\">\n <li\n tabindex=\"0\"\n *ngFor=\"let option of contact.options; let i = index\"\n class=\"option-item\"\n [attr.data-fnd]=\"'contact-option-' + i\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n contactItem;\n context: {\n contact: option,\n testName: 'contact-option-' + i,\n selectedContactOutput: { contact: option, parent: contact }\n }\n \"\n ></ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template\n let-testName=\"testName\"\n let-contact=\"contact\"\n let-selectedContactOutput=\"selectedContactOutput\"\n #contactItem\n>\n <granite-icon\n [attr.data-fnd]=\"testName + '-icon'\"\n fontIcon=\"{{ contact.iconName }}\"\n ></granite-icon>\n\n <granite-contact-item-title\n [attr.data-fnd]=\"testName + '-title'\"\n tabindex=\"0\"\n [contact]=\"contact\"\n [class.contact-item-disabled]=\"contact.options || contact.disabled\"\n (click)=\"emitSelectedContact(selectedContactOutput)\"\n ></granite-contact-item-title>\n\n <ng-container *ngIf=\"contact.statusTemplate; else defaultStatus\">\n <ng-container *ngTemplateOutlet=\"contact.statusTemplate\"></ng-container>\n </ng-container>\n\n <ng-template #defaultStatus>\n <granite-contact-item-default-status\n [attr.data-fnd]=\"testName + '-status'\"\n [status]=\"contact.status\"\n ></granite-contact-item-default-status>\n </ng-template>\n</ng-template>\n", styles: [".contact-item{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--granite-spacing-8)}.contact-item-main{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item-disabled{pointer-events:none}.contact-item-options{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-inline-start:var(--granite-spacing-24);gap:var(--granite-spacing-8);list-style:none}.contact-item-options .option-item{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:var(--granite-spacing-8);align-self:stretch;align-items:center}.contact-item granite-contact-item-title,.contact-item granite-contact-item-default-status{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}granite-icon{padding:0;color:var(--granite-color-text-hint);width:var(--granite-size-base-rem);height:var(--granite-size-base-rem)}\n"] }]
|
|
4260
4271
|
}], propDecorators: { contact: [{
|
|
4261
4272
|
type: Input
|
|
4262
4273
|
}], selectedContact: [{
|
|
@@ -4318,14 +4329,14 @@ class GraniteContactsComponent extends ContactsTriggerDataComponent {
|
|
|
4318
4329
|
avatar: profile.avatar,
|
|
4319
4330
|
};
|
|
4320
4331
|
}
|
|
4321
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteContactsComponent, selector: "granite-contacts", inputs: { contacts: "contacts", contactsClass: "contactsClass", profile: "profile", profileClass: "profileClass", defaultShow: "defaultShow" }, outputs: { selectedContact: "selectedContact" }, host: { classAttribute: "granite-contacts" }, queries: [{ propertyName: "customProfileDirective", first: true, predicate: GraniteCustomProfileDirective, descendants: true }, { propertyName: "_customStatuses", predicate: GraniteCustomStatusDirective }], exportAs: ["graniteContacts"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"_profile\"\n ></granite-contacts-profile>\n </ng-template>\n\n <ul class=\"contact-list\">\n <li *ngFor=\"let contact of _contactsExtended\">\n <granite-contact-item\n [contact]=\"contact\"\n (selectedContact)=\"onSelectedContact($event)\"\n ></granite-contact-item>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);height:fit-content;min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteContactsProfileComponent, selector: "granite-contacts-profile", inputs: ["profile", "profileClass"] }, { kind: "component", type: GraniteContactItemComponent, selector: "granite-contact-item", inputs: ["contact"], outputs: ["selectedContact"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4323
4334
|
}
|
|
4324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsComponent, decorators: [{
|
|
4325
4336
|
type: Component,
|
|
4326
4337
|
args: [{ selector: 'granite-contacts', exportAs: 'graniteContacts', host: {
|
|
4327
4338
|
class: 'granite-contacts',
|
|
4328
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"_profile\"\n ></granite-contacts-profile>\n </ng-template>\n\n <ul class=\"contact-list\">\n <li *ngFor=\"let contact of _contactsExtended\">\n <granite-contact-item\n [contact]=\"contact\"\n (selectedContact)=\"onSelectedContact($event)\"\n ></granite-contact-item>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);height
|
|
4339
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contactsTemplate>\n <div data-fnd=\"contacts\" [class]=\"contactsClass\" class=\"granite-contact\">\n <ng-container *ngIf=\"customProfileDirective; else defaultProfile\">\n <ng-container\n *ngTemplateOutlet=\"customProfileDirective.templateRef\"\n ></ng-container>\n </ng-container>\n\n <ng-template #defaultProfile>\n <granite-contacts-profile\n data-fnd=\"default-profile\"\n [profileClass]=\"profileClass\"\n [profile]=\"_profile\"\n ></granite-contacts-profile>\n </ng-template>\n\n <ul class=\"contact-list\">\n <li *ngFor=\"let contact of _contactsExtended\">\n <granite-contact-item\n [contact]=\"contact\"\n (selectedContact)=\"onSelectedContact($event)\"\n ></granite-contact-item>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"defaultShow\">\n <ng-container *ngTemplateOutlet=\"contactsTemplate\"></ng-container>\n</ng-container>\n", styles: [".granite-contact{display:inline-block;font-size:var(--granite-font-size-body);font-family:var(--granite-font-family-default);color:var(--granite-color-text-weak);height:fit-content;min-width:10rem;max-width:20rem;padding:var(--granite-spacing-16);box-shadow:var(--granite-shadow-popover);background:var(--granite-color-background-variant)}.granite-contact .contact-list{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;align-items:flex-start;gap:var(--granite-spacing-8);list-style-type:none;padding:0;margin:0}\n"] }]
|
|
4329
4340
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { contacts: [{
|
|
4330
4341
|
type: Input
|
|
4331
4342
|
}], contactsClass: [{
|
|
@@ -4532,10 +4543,10 @@ class GraniteContactsTriggerForDirective {
|
|
|
4532
4543
|
_touchPositionStrategy() {
|
|
4533
4544
|
return this._overlay.position().global();
|
|
4534
4545
|
}
|
|
4535
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4536
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4546
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsTriggerForDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$2.OverlayOutsideClickDispatcher }, { token: GRANITE_CLIENT_INPUT, optional: true }, { token: GRANITE_CLIENT_OUTPUT, optional: true }, { token: i3.Directionality, optional: true }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4547
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteContactsTriggerForDirective, selector: "[graniteContactsTriggerFor]", inputs: { contacts: ["graniteContactsTriggerFor", "contacts"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "_handleClick($event)" }, properties: { "attr.aria-expanded": "_isContactsOpen || null", "attr.aria-controls": "_isContactsOpen ? contacts.panelId : null" }, classAttribute: "granite-contacts-trigger" }, ngImport: i0 }); }
|
|
4537
4548
|
}
|
|
4538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4549
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsTriggerForDirective, decorators: [{
|
|
4539
4550
|
type: Directive,
|
|
4540
4551
|
args: [{
|
|
4541
4552
|
selector: `[graniteContactsTriggerFor]`,
|
|
@@ -4566,17 +4577,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4566
4577
|
}] } });
|
|
4567
4578
|
|
|
4568
4579
|
class GraniteAvatarModule {
|
|
4569
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4570
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
4580
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4581
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarModule, declarations: [GraniteAvatarComponent,
|
|
4571
4582
|
GraniteAvatarDefaultStatusComponent,
|
|
4572
4583
|
GraniteCustomAvatarStatusDirective,
|
|
4573
4584
|
GraniteEmptyAvatarComponent], imports: [CommonModule], exports: [GraniteAvatarComponent,
|
|
4574
4585
|
GraniteAvatarDefaultStatusComponent,
|
|
4575
4586
|
GraniteCustomAvatarStatusDirective,
|
|
4576
4587
|
GraniteEmptyAvatarComponent] }); }
|
|
4577
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
4588
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarModule, imports: [CommonModule] }); }
|
|
4578
4589
|
}
|
|
4579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteAvatarModule, decorators: [{
|
|
4580
4591
|
type: NgModule,
|
|
4581
4592
|
args: [{
|
|
4582
4593
|
imports: [CommonModule],
|
|
@@ -4596,8 +4607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4596
4607
|
}] });
|
|
4597
4608
|
|
|
4598
4609
|
class GraniteContactsModule {
|
|
4599
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4600
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
4610
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4611
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsModule, declarations: [GraniteContactsComponent,
|
|
4601
4612
|
GraniteContactsProfileComponent,
|
|
4602
4613
|
GraniteContactItemComponent,
|
|
4603
4614
|
ContactItemDefaultStatusComponent,
|
|
@@ -4609,9 +4620,9 @@ class GraniteContactsModule {
|
|
|
4609
4620
|
GraniteContactItemComponent,
|
|
4610
4621
|
GraniteCustomStatusDirective,
|
|
4611
4622
|
GraniteCustomProfileDirective] }); }
|
|
4612
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
4623
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsModule, imports: [GraniteIconModule, GraniteAvatarModule, CommonModule] }); }
|
|
4613
4624
|
}
|
|
4614
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4625
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteContactsModule, decorators: [{
|
|
4615
4626
|
type: NgModule,
|
|
4616
4627
|
args: [{
|
|
4617
4628
|
imports: [GraniteIconModule, GraniteAvatarModule, CommonModule],
|
|
@@ -4703,10 +4714,10 @@ class GraniteHideOnOverflowDirective {
|
|
|
4703
4714
|
this.mutationObserver.disconnect();
|
|
4704
4715
|
}
|
|
4705
4716
|
}
|
|
4706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4707
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4717
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteHideOnOverflowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4718
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"], ngImport: i0 }); }
|
|
4708
4719
|
}
|
|
4709
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteHideOnOverflowDirective, decorators: [{
|
|
4710
4721
|
type: Directive,
|
|
4711
4722
|
args: [{
|
|
4712
4723
|
selector: '[graniteHideOnOverflow]',
|
|
@@ -4719,10 +4730,10 @@ class OverlayBaseComponent {
|
|
|
4719
4730
|
this.xPosition = 'after';
|
|
4720
4731
|
this.yPosition = 'below';
|
|
4721
4732
|
}
|
|
4722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4723
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4734
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: OverlayBaseComponent, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0 }); }
|
|
4724
4735
|
}
|
|
4725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayBaseComponent, decorators: [{
|
|
4726
4737
|
type: Directive,
|
|
4727
4738
|
args: [{}]
|
|
4728
4739
|
}], propDecorators: { templateRef: [{
|
|
@@ -4737,10 +4748,10 @@ class LegendBaseComponent extends OverlayBaseComponent {
|
|
|
4737
4748
|
this.panelId = `granite-progress-bar-legend-panel-${legendPanelUid++}`;
|
|
4738
4749
|
this.xPosition = 'before';
|
|
4739
4750
|
}
|
|
4740
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4741
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegendBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4752
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: LegendBaseComponent, usesInheritance: true, ngImport: i0 }); }
|
|
4742
4753
|
}
|
|
4743
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LegendBaseComponent, decorators: [{
|
|
4744
4755
|
type: Directive
|
|
4745
4756
|
}] });
|
|
4746
4757
|
|
|
@@ -4749,12 +4760,12 @@ class GraniteProgressBarLegendComponent extends LegendBaseComponent {
|
|
|
4749
4760
|
super(...arguments);
|
|
4750
4761
|
this.legendItems = [];
|
|
4751
4762
|
}
|
|
4752
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4753
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarLegendComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: { legendItems: "legendItems" }, usesInheritance: true, ngImport: i0, template: "<ng-template>\n <div class=\"legend\" data-fnd=\"legend\">\n <div\n *ngFor=\"let item of legendItems\"\n class=\"legend-item\"\n data-fnd=\"legend-item\"\n >\n <div class=\"legend-label-text\">{{ item.label }}</div>\n <div\n [style.background-color]=\"item.backgroundColor\"\n class=\"color-box\"\n ></div>\n </div>\n </div>\n</ng-template>\n", styles: [".legend{display:flex;flex-direction:column;align-items:flex-start;padding:var(--granite-spacing-8);gap:var(--granite-spacing-8);background-color:var(--granite-color-background-page);border:solid var(--granite-border-width-regular) var(--granite-color-border-contrast);border-radius:var(--granite-radius-s);height:fit-content}.legend-item{display:flex;align-items:center;justify-content:space-between;align-self:stretch;flex-wrap:wrap;padding:0 var(--granite-spacing-4);gap:var(--granite-spacing-8)}.legend-label-text{font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);color:var(--granite-color-text);width:max-content}.color-box{width:8px;height:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4754
4765
|
}
|
|
4755
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarLegendComponent, decorators: [{
|
|
4756
4767
|
type: Component,
|
|
4757
|
-
args: [{ selector: 'granite-progress-bar-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div class=\"legend\" data-fnd=\"legend\">\n <div\n *ngFor=\"let item of legendItems\"\n class=\"legend-item\"\n data-fnd=\"legend-item\"\n >\n <div class=\"legend-label-text\">{{ item.label }}</div>\n <div\n [style.background-color]=\"item.backgroundColor\"\n class=\"color-box\"\n ></div>\n </div>\n </div>\n</ng-template>\n", styles: [".legend{display:flex;flex-direction:column;align-items:flex-start;padding:var(--granite-spacing-8);gap:var(--granite-spacing-8);background-color:var(--granite-color-background-page);border:solid var(--granite-border-width-regular) var(--granite-color-border-contrast);border-radius:var(--granite-radius-s);height
|
|
4768
|
+
args: [{ selector: 'granite-progress-bar-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div class=\"legend\" data-fnd=\"legend\">\n <div\n *ngFor=\"let item of legendItems\"\n class=\"legend-item\"\n data-fnd=\"legend-item\"\n >\n <div class=\"legend-label-text\">{{ item.label }}</div>\n <div\n [style.background-color]=\"item.backgroundColor\"\n class=\"color-box\"\n ></div>\n </div>\n </div>\n</ng-template>\n", styles: [".legend{display:flex;flex-direction:column;align-items:flex-start;padding:var(--granite-spacing-8);gap:var(--granite-spacing-8);background-color:var(--granite-color-background-page);border:solid var(--granite-border-width-regular) var(--granite-color-border-contrast);border-radius:var(--granite-radius-s);height:fit-content}.legend-item{display:flex;align-items:center;justify-content:space-between;align-self:stretch;flex-wrap:wrap;padding:0 var(--granite-spacing-4);gap:var(--granite-spacing-8)}.legend-label-text{font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);color:var(--granite-color-text);width:max-content}.color-box{width:8px;height:8px}\n"] }]
|
|
4758
4769
|
}], propDecorators: { legendItems: [{
|
|
4759
4770
|
type: Input
|
|
4760
4771
|
}] } });
|
|
@@ -4832,10 +4843,10 @@ class OverlayService {
|
|
|
4832
4843
|
}
|
|
4833
4844
|
});
|
|
4834
4845
|
}
|
|
4835
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4836
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4846
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, deps: [{ token: i1$2.Overlay }, { token: i1.FocusMonitor }, { token: i1$2.OverlayOutsideClickDispatcher }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4847
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
|
|
4837
4848
|
}
|
|
4838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, decorators: [{
|
|
4839
4850
|
type: Injectable,
|
|
4840
4851
|
args: [{
|
|
4841
4852
|
providedIn: 'root',
|
|
@@ -4941,10 +4952,10 @@ class GraniteOverlayTriggerForBaseDirective {
|
|
|
4941
4952
|
}
|
|
4942
4953
|
this._overlayService.closeOverlay(this._overlayRef, this._element);
|
|
4943
4954
|
}
|
|
4944
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4945
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
4955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteOverlayTriggerForBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4956
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteOverlayTriggerForBaseDirective, selector: "[graniteOverlayTriggerForBase]", ngImport: i0 }); }
|
|
4946
4957
|
}
|
|
4947
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteOverlayTriggerForBaseDirective, decorators: [{
|
|
4948
4959
|
type: Directive,
|
|
4949
4960
|
args: [{
|
|
4950
4961
|
selector: '[graniteOverlayTriggerForBase]',
|
|
@@ -4986,10 +4997,10 @@ class GraniteProgressBarLegendTriggerForDirective extends GraniteOverlayTriggerF
|
|
|
4986
4997
|
getScrollStrategy() {
|
|
4987
4998
|
return this.setScrollStrategy('reposition');
|
|
4988
4999
|
}
|
|
4989
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4990
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5000
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5001
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: { legend: ["graniteProgressBarLegendTriggerFor", "legend"] }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, properties: { "attr.aria-expanded": "isLegendOpen || null", "attr.aria-controls": "isLegendOpen ? legend.panelId : null" }, classAttribute: "granite-progress-bar-legend-trigger" }, usesInheritance: true, ngImport: i0 }); }
|
|
4991
5002
|
}
|
|
4992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5003
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarLegendTriggerForDirective, decorators: [{
|
|
4993
5004
|
type: Directive,
|
|
4994
5005
|
args: [{
|
|
4995
5006
|
selector: '[graniteProgressBarLegendTriggerFor]',
|
|
@@ -5072,10 +5083,10 @@ class GraniteProgressBarComponent {
|
|
|
5072
5083
|
this.setLegendItems();
|
|
5073
5084
|
}
|
|
5074
5085
|
}
|
|
5075
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5076
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5086
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3$1.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3$1.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5077
5088
|
}
|
|
5078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5089
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
5079
5090
|
type: Component,
|
|
5080
5091
|
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
5081
5092
|
'[class.label-present]': 'showLabel',
|
|
@@ -5095,15 +5106,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5095
5106
|
* should be adapted for desktop devices like personal computers.
|
|
5096
5107
|
*/
|
|
5097
5108
|
class ClientOutputDesktopDirective {
|
|
5098
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5099
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientOutputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5110
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClientOutputDesktopDirective, selector: "[graniteClientOutputDesktop]", providers: [
|
|
5100
5111
|
{
|
|
5101
5112
|
provide: GRANITE_CLIENT_OUTPUT,
|
|
5102
5113
|
useValue: deviceDesktop.output,
|
|
5103
5114
|
},
|
|
5104
5115
|
], ngImport: i0 }); }
|
|
5105
5116
|
}
|
|
5106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientOutputDesktopDirective, decorators: [{
|
|
5107
5118
|
type: Directive,
|
|
5108
5119
|
args: [{
|
|
5109
5120
|
selector: `[graniteClientOutputDesktop]`,
|
|
@@ -5121,15 +5132,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5121
5132
|
* should be adapted for touch devices like mobiles and tablets.
|
|
5122
5133
|
*/
|
|
5123
5134
|
class ClientOutputTouchDirective {
|
|
5124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5125
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientOutputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5136
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClientOutputTouchDirective, selector: "[graniteClientOutputTouch]", providers: [
|
|
5126
5137
|
{
|
|
5127
5138
|
provide: GRANITE_CLIENT_OUTPUT,
|
|
5128
5139
|
useValue: deviceTouch.output,
|
|
5129
5140
|
},
|
|
5130
5141
|
], ngImport: i0 }); }
|
|
5131
5142
|
}
|
|
5132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientOutputTouchDirective, decorators: [{
|
|
5133
5144
|
type: Directive,
|
|
5134
5145
|
args: [{
|
|
5135
5146
|
selector: `[graniteClientOutputTouch]`,
|
|
@@ -5147,15 +5158,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5147
5158
|
* should be adapted for desktop devices, like personal computers.
|
|
5148
5159
|
*/
|
|
5149
5160
|
class ClientInputDesktopDirective {
|
|
5150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientInputDesktopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5162
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClientInputDesktopDirective, selector: "[graniteClientInputDesktop]", providers: [
|
|
5152
5163
|
{
|
|
5153
5164
|
provide: GRANITE_CLIENT_INPUT,
|
|
5154
5165
|
useValue: deviceDesktop.input,
|
|
5155
5166
|
},
|
|
5156
5167
|
], ngImport: i0 }); }
|
|
5157
5168
|
}
|
|
5158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientInputDesktopDirective, decorators: [{
|
|
5159
5170
|
type: Directive,
|
|
5160
5171
|
args: [{
|
|
5161
5172
|
selector: `[graniteClientInputDesktop]`,
|
|
@@ -5173,15 +5184,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5173
5184
|
* should be adapted for touch devices, like mobiles and tablets.
|
|
5174
5185
|
*/
|
|
5175
5186
|
class ClientInputTouchDirective {
|
|
5176
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5177
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientInputTouchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5188
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ClientInputTouchDirective, selector: "[graniteClientInputTouch]", providers: [
|
|
5178
5189
|
{
|
|
5179
5190
|
provide: GRANITE_CLIENT_INPUT,
|
|
5180
5191
|
useValue: deviceTouch.input,
|
|
5181
5192
|
},
|
|
5182
5193
|
], ngImport: i0 }); }
|
|
5183
5194
|
}
|
|
5184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClientInputTouchDirective, decorators: [{
|
|
5185
5196
|
type: Directive,
|
|
5186
5197
|
args: [{
|
|
5187
5198
|
selector: `[graniteClientInputTouch]`,
|
|
@@ -5196,8 +5207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5196
5207
|
|
|
5197
5208
|
// TODO: Move client devices into a separate module
|
|
5198
5209
|
class GraniteCoreModule {
|
|
5199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5200
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5211
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteCoreModule, declarations: [ClientOutputDesktopDirective,
|
|
5201
5212
|
ClientOutputTouchDirective,
|
|
5202
5213
|
ClientInputDesktopDirective,
|
|
5203
5214
|
ClientInputTouchDirective,
|
|
@@ -5207,9 +5218,9 @@ class GraniteCoreModule {
|
|
|
5207
5218
|
ClientInputDesktopDirective,
|
|
5208
5219
|
ClientInputTouchDirective,
|
|
5209
5220
|
GraniteHideOnOverflowDirective] }); }
|
|
5210
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5221
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCoreModule }); }
|
|
5211
5222
|
}
|
|
5212
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCoreModule, decorators: [{
|
|
5213
5224
|
type: NgModule,
|
|
5214
5225
|
args: [{
|
|
5215
5226
|
declarations: [
|
|
@@ -5231,21 +5242,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5231
5242
|
}] });
|
|
5232
5243
|
|
|
5233
5244
|
class GraniteProgressBarModule {
|
|
5234
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5235
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5246
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarModule, declarations: [GraniteProgressBarComponent,
|
|
5236
5247
|
GraniteProgressBarLegendComponent,
|
|
5237
5248
|
GraniteProgressBarLegendTriggerForDirective], imports: [CommonModule,
|
|
5238
5249
|
GraniteCoreModule,
|
|
5239
5250
|
GraniteTooltipModule,
|
|
5240
5251
|
GraniteIconModule,
|
|
5241
5252
|
GraniteButtonModule], exports: [GraniteProgressBarComponent] }); }
|
|
5242
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5253
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarModule, imports: [CommonModule,
|
|
5243
5254
|
GraniteCoreModule,
|
|
5244
5255
|
GraniteTooltipModule,
|
|
5245
5256
|
GraniteIconModule,
|
|
5246
5257
|
GraniteButtonModule] }); }
|
|
5247
5258
|
}
|
|
5248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteProgressBarModule, decorators: [{
|
|
5249
5260
|
type: NgModule,
|
|
5250
5261
|
args: [{
|
|
5251
5262
|
declarations: [
|
|
@@ -5273,10 +5284,10 @@ class GraniteTitlePipe {
|
|
|
5273
5284
|
.map((word) => word.charAt(0).toLocaleUpperCase() + word.slice(1))
|
|
5274
5285
|
.join(' ');
|
|
5275
5286
|
}
|
|
5276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5277
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
5287
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteTitlePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5288
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteTitlePipe, name: "graniteTitle" }); }
|
|
5278
5289
|
}
|
|
5279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteTitlePipe, decorators: [{
|
|
5280
5291
|
type: Pipe,
|
|
5281
5292
|
args: [{
|
|
5282
5293
|
name: 'graniteTitle',
|
|
@@ -5284,11 +5295,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5284
5295
|
}] });
|
|
5285
5296
|
|
|
5286
5297
|
class PurePipesModule {
|
|
5287
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5288
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5289
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PurePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5299
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PurePipesModule, declarations: [GraniteTitlePipe], exports: [GraniteTitlePipe] }); }
|
|
5300
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PurePipesModule }); }
|
|
5290
5301
|
}
|
|
5291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5302
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PurePipesModule, decorators: [{
|
|
5292
5303
|
type: NgModule,
|
|
5293
5304
|
args: [{
|
|
5294
5305
|
exports: [GraniteTitlePipe],
|
|
@@ -5297,12 +5308,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5297
5308
|
}] });
|
|
5298
5309
|
|
|
5299
5310
|
class GraniteCardComponent {
|
|
5300
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardComponent, selector: "granite-card", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);border:var(--granite-border-width-regular) solid var(--granite-color-border-soft);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }); }
|
|
5302
5313
|
}
|
|
5303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardComponent, decorators: [{
|
|
5304
5315
|
type: Component,
|
|
5305
|
-
args: [{ selector: 'granite-card', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);border:var(--granite-border-width-regular) solid var(--granite-color-border-soft);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }]
|
|
5316
|
+
args: [{ selector: 'granite-card', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;border-radius:var(--granite-radius-m);border:var(--granite-border-width-regular) solid var(--granite-color-border-soft);background:var(--granite-color-background);padding:var(--granite-spacing-8)}\n"] }]
|
|
5306
5317
|
}] });
|
|
5307
5318
|
|
|
5308
5319
|
class GraniteCardListComponent {
|
|
@@ -5312,12 +5323,12 @@ class GraniteCardListComponent {
|
|
|
5312
5323
|
this.wrap = 'nowrap';
|
|
5313
5324
|
this.gap = 'small';
|
|
5314
5325
|
}
|
|
5315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5326
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5327
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardListComponent, selector: "granite-card-list", inputs: { orientation: "orientation", wrap: "wrap", gap: "gap" }, ngImport: i0, template: "<div\n class=\"card-list-wrapper\"\n [class.vertical]=\"orientation === 'vertical'\"\n [class.horizontal]=\"orientation === 'horizontal'\"\n [class.wrap]=\"wrap === 'wrap'\"\n [class.nowrap]=\"wrap === 'nowrap'\"\n [class.small]=\"gap === 'small'\"\n [class.medium]=\"gap === 'medium'\"\n [class.large]=\"gap === 'large'\"\n cdkScrollable\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
|
|
5317
5328
|
}
|
|
5318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListComponent, decorators: [{
|
|
5319
5330
|
type: Component,
|
|
5320
|
-
args: [{ selector: 'granite-card-list', template: "<div\n class=\"card-list-wrapper\"\n [class.vertical]=\"orientation === 'vertical'\"\n [class.horizontal]=\"orientation === 'horizontal'\"\n [class.wrap]=\"wrap === 'wrap'\"\n [class.nowrap]=\"wrap === 'nowrap'\"\n [class.small]=\"gap === 'small'\"\n [class.medium]=\"gap === 'medium'\"\n [class.large]=\"gap === 'large'\"\n cdkScrollable\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"] }]
|
|
5331
|
+
args: [{ selector: 'granite-card-list', template: "<div\n class=\"card-list-wrapper\"\n [class.vertical]=\"orientation === 'vertical'\"\n [class.horizontal]=\"orientation === 'horizontal'\"\n [class.wrap]=\"wrap === 'wrap'\"\n [class.nowrap]=\"wrap === 'nowrap'\"\n [class.small]=\"gap === 'small'\"\n [class.medium]=\"gap === 'medium'\"\n [class.large]=\"gap === 'large'\"\n cdkScrollable\n>\n <ng-content></ng-content>\n</div>\n", styles: [":host{width:100%}.card-list-wrapper{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;padding:var(--granite-spacing-4)}.card-list-wrapper.horizontal.nowrap{overflow-x:auto}.card-list-wrapper.horizontal.wrap{overflow-y:auto}.card-list-wrapper.vertical{flex-direction:column}.card-list-wrapper.vertical.nowrap{overflow-y:auto}.card-list-wrapper.vertical.wrap{overflow-x:auto}.card-list-wrapper.small{gap:var(--granite-spacing-2)}.card-list-wrapper.medium{gap:var(--granite-spacing-4)}.card-list-wrapper.large{gap:var(--granite-spacing-8)}.card-list-wrapper.wrap{flex-wrap:wrap}.card-list-wrapper.nowrap{flex-wrap:nowrap}.card-list-wrapper::-webkit-scrollbar{width:calc(var(--granite-size-base-rem) * .25);height:calc(var(--granite-size-base-rem) * .25);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-thumb{background:var(--granite-color-border-hard);border-radius:var(--granite-radius-s)}.card-list-wrapper::-webkit-scrollbar-track{background:var(--granite-color-background-page)}\n"] }]
|
|
5321
5332
|
}], propDecorators: { orientation: [{
|
|
5322
5333
|
type: Input
|
|
5323
5334
|
}], wrap: [{
|
|
@@ -5327,80 +5338,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5327
5338
|
}] } });
|
|
5328
5339
|
|
|
5329
5340
|
class GraniteCardContentComponent {
|
|
5330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5342
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardContentComponent, selector: "granite-card-content", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;flex-grow:3;font-family:var(--granite-font-family-default);gap:var(--granite-spacing-8)}\n"] }); }
|
|
5332
5343
|
}
|
|
5333
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardContentComponent, decorators: [{
|
|
5334
5345
|
type: Component,
|
|
5335
|
-
args: [{ selector: 'granite-card-content', template: '<ng-content></ng-content>', styles: [":host{display:flex;flex-direction:column;flex-grow:3;font-family:var(--granite-font-family-default);gap:var(--granite-spacing-8)}\n"] }]
|
|
5346
|
+
args: [{ selector: 'granite-card-content', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;flex-grow:3;font-family:var(--granite-font-family-default);gap:var(--granite-spacing-8)}\n"] }]
|
|
5336
5347
|
}] });
|
|
5337
5348
|
|
|
5338
5349
|
class GraniteCardHeaderComponent {
|
|
5339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5340
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardHeaderComponent, selector: "granite-card-header", ngImport: i0, template: "<div class=\"title-container\">\n <ng-content select=\"granite-card-header-title\"></ng-content>\n <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto}.title-container{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }); }
|
|
5341
5352
|
}
|
|
5342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderComponent, decorators: [{
|
|
5343
5354
|
type: Component,
|
|
5344
|
-
args: [{ selector: 'granite-card-header', template: "<div class=\"title-container\">\n <ng-content select=\"granite-card-header-title\"></ng-content>\n <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:flex;font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto}.title-container{display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }]
|
|
5355
|
+
args: [{ selector: 'granite-card-header', template: "<div class=\"title-container\">\n <ng-content select=\"granite-card-header-title\"></ng-content>\n <ng-content select=\"granite-card-header-sub-title\"></ng-content>\n</div>\n<div class=\"content-container\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);flex-direction:row;justify-content:space-between;flex:0 auto}.title-container{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;gap:var(--granite-spacing-4)}.content-container{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;gap:var(--granite-spacing-8);align-self:center}\n"] }]
|
|
5345
5356
|
}] });
|
|
5346
5357
|
|
|
5347
5358
|
class GraniteCardActionsComponent {
|
|
5348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardActionsComponent, selector: "granite-card-actions", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4)}\n"] }); }
|
|
5350
5361
|
}
|
|
5351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardActionsComponent, decorators: [{
|
|
5352
5363
|
type: Component,
|
|
5353
|
-
args: [{ selector: 'granite-card-actions', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4)}\n"] }]
|
|
5364
|
+
args: [{ selector: 'granite-card-actions', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-weight:var(--granite-font-weight-regular);font-size:var(--granite-font-size-body-small);flex-direction:row;gap:var(--granite-spacing-4)}\n"] }]
|
|
5354
5365
|
}] });
|
|
5355
5366
|
|
|
5356
5367
|
class GraniteCardBodyComponent {
|
|
5357
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5368
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardBodyComponent, selector: "granite-card-body", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }); }
|
|
5359
5370
|
}
|
|
5360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardBodyComponent, decorators: [{
|
|
5361
5372
|
type: Component,
|
|
5362
|
-
args: [{ selector: 'granite-card-body', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }]
|
|
5373
|
+
args: [{ selector: 'granite-card-body', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;color:var(--granite-colors-background-inverse);flex-direction:column;gap:var(--granite-spacing-4);justify-content:space-between}\n"] }]
|
|
5363
5374
|
}] });
|
|
5364
5375
|
|
|
5365
5376
|
class GraniteCardFooterComponent {
|
|
5366
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardFooterComponent, selector: "granite-card-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }); }
|
|
5368
5379
|
}
|
|
5369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5380
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardFooterComponent, decorators: [{
|
|
5370
5381
|
type: Component,
|
|
5371
|
-
args: [{ selector: 'granite-card-footer', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }]
|
|
5382
|
+
args: [{ selector: 'granite-card-footer', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);text-align:start;flex-direction:row;color:var(--granite-colors-background-inverse);gap:var(--granite-spacing-4)}\n"] }]
|
|
5372
5383
|
}] });
|
|
5373
5384
|
|
|
5374
5385
|
class GraniteCardAvatarComponent {
|
|
5375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5386
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5387
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardAvatarComponent, selector: "granite-card-avatar", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);flex-grow:0;padding:var(--granite-spacing-4);width:min-content}\n"] }); }
|
|
5377
5388
|
}
|
|
5378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardAvatarComponent, decorators: [{
|
|
5379
5390
|
type: Component,
|
|
5380
5391
|
args: [{ selector: 'granite-card-avatar', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);flex-grow:0;padding:var(--granite-spacing-4);width:min-content}\n"] }]
|
|
5381
5392
|
}] });
|
|
5382
5393
|
|
|
5383
5394
|
class GraniteCardHeaderTitleComponent {
|
|
5384
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5385
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5395
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5396
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardHeaderTitleComponent, selector: "granite-card-header-title", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-regular);color:var(--granite-color-text-weak)}\n"] }); }
|
|
5386
5397
|
}
|
|
5387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderTitleComponent, decorators: [{
|
|
5388
5399
|
type: Component,
|
|
5389
5400
|
args: [{ selector: 'granite-card-header-title', template: '<ng-content></ng-content>', styles: [":host{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-regular);color:var(--granite-color-text-weak)}\n"] }]
|
|
5390
5401
|
}] });
|
|
5391
5402
|
|
|
5392
5403
|
class GraniteCardHeaderSubTitleComponent {
|
|
5393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5404
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderSubTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5405
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCardHeaderSubTitleComponent, selector: "granite-card-header-sub-title", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);flex-direction:column}\n"] }); }
|
|
5395
5406
|
}
|
|
5396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5407
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardHeaderSubTitleComponent, decorators: [{
|
|
5397
5408
|
type: Component,
|
|
5398
|
-
args: [{ selector: 'granite-card-header-sub-title', template: '<ng-content></ng-content>', styles: [":host{display:flex;font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);flex-direction:column}\n"] }]
|
|
5409
|
+
args: [{ selector: 'granite-card-header-sub-title', template: '<ng-content></ng-content>', styles: [":host{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-family:var(--granite-font-family-default);color:var(--granite-color-text-hint);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular);flex-direction:column}\n"] }]
|
|
5399
5410
|
}] });
|
|
5400
5411
|
|
|
5401
5412
|
class GraniteCardListModule {
|
|
5402
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5403
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5414
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListModule, declarations: [GraniteCardComponent,
|
|
5404
5415
|
GraniteCardListComponent,
|
|
5405
5416
|
GraniteCardContentComponent,
|
|
5406
5417
|
GraniteCardHeaderComponent,
|
|
@@ -5419,9 +5430,9 @@ class GraniteCardListModule {
|
|
|
5419
5430
|
GraniteCardAvatarComponent,
|
|
5420
5431
|
GraniteCardHeaderTitleComponent,
|
|
5421
5432
|
GraniteCardHeaderSubTitleComponent] }); }
|
|
5422
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5433
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListModule, imports: [CommonModule, ScrollingModule] }); }
|
|
5423
5434
|
}
|
|
5424
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCardListModule, decorators: [{
|
|
5425
5436
|
type: NgModule,
|
|
5426
5437
|
args: [{
|
|
5427
5438
|
declarations: [
|
|
@@ -5563,10 +5574,10 @@ class GraniteFileDragAndDropDirective {
|
|
|
5563
5574
|
this.droppedFiles.emit(this.currentFiles);
|
|
5564
5575
|
}
|
|
5565
5576
|
}
|
|
5566
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5567
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5578
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: { multiFileUploadEnabled: "multiFileUploadEnabled", accept: "accept", currentFiles: "currentFiles" }, outputs: { droppedFiles: "droppedFiles", isFileOver: "isFileOver", fileUploadValidation: "fileUploadValidation" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.file-over": "this.fileOver", "class.file-error": "this.fileBrowseError" } }, exportAs: ["graniteFileDragAndDrop"], ngImport: i0 }); }
|
|
5568
5579
|
}
|
|
5569
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileDragAndDropDirective, decorators: [{
|
|
5570
5581
|
type: Directive,
|
|
5571
5582
|
args: [{
|
|
5572
5583
|
selector: '[graniteFileDragAndDrop]',
|
|
@@ -5720,10 +5731,10 @@ class GraniteFileUploadComponent {
|
|
|
5720
5731
|
const exp = Math.floor(Math.log(bytes) / Math.log(bytesPerKB));
|
|
5721
5732
|
return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
|
|
5722
5733
|
}
|
|
5723
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5724
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n @if (!isFileOnDropzone && !fileError) {\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n @if (previewFile?.imageUrl) {\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </div>\n }\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.upload-failed{border-color:var(--granite-color-categorical-4)}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
5734
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5735
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n @if (!isFileOnDropzone && !fileError) {\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n @if (previewFile?.imageUrl) {\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </div>\n }\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.upload-failed{border-color:var(--granite-color-categorical-4)}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
5725
5736
|
}
|
|
5726
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
|
|
5727
5738
|
type: Component,
|
|
5728
5739
|
args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n @if (!isFileOnDropzone && !fileError) {\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n @if (previewFile?.imageUrl) {\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </div>\n }\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.upload-failed{border-color:var(--granite-color-categorical-4)}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
|
|
5729
5740
|
}], propDecorators: { fileDropRef: [{
|
|
@@ -5768,11 +5779,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5768
5779
|
}] } });
|
|
5769
5780
|
|
|
5770
5781
|
class GraniteFileUploadModule {
|
|
5771
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5772
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5773
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5783
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective], imports: [CommonModule, GraniteButtonModule, GraniteIconModule], exports: [GraniteFileUploadComponent] }); }
|
|
5784
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, imports: [CommonModule, GraniteButtonModule, GraniteIconModule] }); }
|
|
5774
5785
|
}
|
|
5775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5786
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, decorators: [{
|
|
5776
5787
|
type: NgModule,
|
|
5777
5788
|
args: [{
|
|
5778
5789
|
declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective],
|
|
@@ -5785,10 +5796,10 @@ class GraniteCollapsibleConditionalBodyDirective {
|
|
|
5785
5796
|
constructor() {
|
|
5786
5797
|
this.template = inject(TemplateRef);
|
|
5787
5798
|
}
|
|
5788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5789
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5799
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleConditionalBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5800
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCollapsibleConditionalBodyDirective, selector: "[graniteCollapsibleGroupBody]", exportAs: ["graniteCollapsibleGroupBody"], ngImport: i0 }); }
|
|
5790
5801
|
}
|
|
5791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleConditionalBodyDirective, decorators: [{
|
|
5792
5803
|
type: Directive,
|
|
5793
5804
|
args: [{
|
|
5794
5805
|
selector: '[graniteCollapsibleGroupBody]',
|
|
@@ -5800,10 +5811,10 @@ class GraniteCollapsibleConditionalHeaderDirective {
|
|
|
5800
5811
|
constructor() {
|
|
5801
5812
|
this.template = inject(TemplateRef);
|
|
5802
5813
|
}
|
|
5803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5804
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
5814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleConditionalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
5815
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCollapsibleConditionalHeaderDirective, selector: "[graniteCollapsibleGroupHeader]", exportAs: ["graniteCollapsibleGroupHeader"], ngImport: i0 }); }
|
|
5805
5816
|
}
|
|
5806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleConditionalHeaderDirective, decorators: [{
|
|
5807
5818
|
type: Directive,
|
|
5808
5819
|
args: [{
|
|
5809
5820
|
selector: '[graniteCollapsibleGroupHeader]',
|
|
@@ -5829,12 +5840,12 @@ class GraniteCollapsibleGroupComponent {
|
|
|
5829
5840
|
this.toggleCollapsibleGroup();
|
|
5830
5841
|
}
|
|
5831
5842
|
}
|
|
5832
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5833
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n <div\n data-fnd=\"collapsible-group-header\"\n class=\"collapsible-group-header\"\n [class]=\"collapsed ? 'collapsed-header' : 'expanded-header'\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n (keydown)=\"_toogleCollapsing($event)\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n tabindex=\"0\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n data-fnd=\"collapsible-group-body\"\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus)}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-header.expanded-header{border-start-start-radius:var(--granite-radius-s);border-start-end-radius:var(--granite-radius-s);border-end-start-radius:0;border-end-end-radius:0}.collapsible-wrapper .collapsible-group-header.collapsed-header{border-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background);border-end-start-radius:var(--granite-radius-s);border-end-end-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
5834
5845
|
}
|
|
5835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupComponent, decorators: [{
|
|
5836
5847
|
type: Component,
|
|
5837
|
-
args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n data-fnd=\"collapsible-group-header\"\n class=\"collapsible-group-header\"\n [class]=\"collapsed ? 'collapsed-header' : 'expanded-header'\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n (keydown)=\"_toogleCollapsing($event)\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n tabindex=\"0\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n data-fnd=\"collapsible-group-body\"\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus)}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-header.expanded-header{border-start-start-radius:var(--granite-radius-s);border-start-end-radius:var(--granite-radius-s);border-end-start-radius:0;border-end-end-radius:0}.collapsible-wrapper .collapsible-group-header.collapsed-header{border-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background);border-end-start-radius:var(--granite-radius-s);border-end-end-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
|
|
5848
|
+
args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n data-fnd=\"collapsible-group-header\"\n class=\"collapsible-group-header\"\n [class]=\"collapsed ? 'collapsed-header' : 'expanded-header'\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n (keydown)=\"_toogleCollapsing($event)\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n tabindex=\"0\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n data-fnd=\"collapsible-group-body\"\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus)}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-header.expanded-header{border-start-start-radius:var(--granite-radius-s);border-start-end-radius:var(--granite-radius-s);border-end-start-radius:0;border-end-end-radius:0}.collapsible-wrapper .collapsible-group-header.collapsed-header{border-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background);border-end-start-radius:var(--granite-radius-s);border-end-end-radius:var(--granite-radius-s)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
|
|
5838
5849
|
}], propDecorators: { collapsed: [{
|
|
5839
5850
|
type: Input
|
|
5840
5851
|
}], id: [{
|
|
@@ -5852,15 +5863,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5852
5863
|
}] } });
|
|
5853
5864
|
|
|
5854
5865
|
class GraniteCollapsibleGroupModule {
|
|
5855
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5856
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
5866
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
5867
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupModule, declarations: [GraniteCollapsibleGroupComponent,
|
|
5857
5868
|
GraniteCollapsibleConditionalHeaderDirective,
|
|
5858
5869
|
GraniteCollapsibleConditionalBodyDirective], imports: [CommonModule, GraniteIconModule], exports: [GraniteCollapsibleGroupComponent,
|
|
5859
5870
|
GraniteCollapsibleConditionalHeaderDirective,
|
|
5860
5871
|
GraniteCollapsibleConditionalBodyDirective] }); }
|
|
5861
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
5872
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupModule, imports: [CommonModule, GraniteIconModule] }); }
|
|
5862
5873
|
}
|
|
5863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteCollapsibleGroupModule, decorators: [{
|
|
5864
5875
|
type: NgModule,
|
|
5865
5876
|
args: [{
|
|
5866
5877
|
imports: [CommonModule, GraniteIconModule],
|