@skyux/tiles 12.0.0-alpha.8 → 12.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-tiles.mjs +52 -52
- package/fesm2022/skyux-tiles.mjs.map +1 -1
- package/package.json +28 -31
- package/documentation.json +0 -9255
package/fesm2022/skyux-tiles.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, InjectionToken, inject, NgModule, EventEmitter, computed, effect,
|
|
2
|
+
import { Component, InjectionToken, inject, NgModule, EventEmitter, computed, effect, Output, Injectable, ElementRef, ContentChild, ViewChild, Input, Optional, ViewContainerRef, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@skyux/core';
|
|
4
|
-
import { SkyTrimModule, SkyMediaQueryService, SkyDynamicComponentService, SkyUIConfigService, SkyDynamicComponentLocation, SkyLogService,
|
|
4
|
+
import { SkyTrimModule, SkyMediaQueryService, SkyDynamicComponentService, SkyUIConfigService, SkyDynamicComponentLocation, SkyLogService, SkyIdModule, SkyIdService } from '@skyux/core';
|
|
5
5
|
import * as i3 from '@angular/common';
|
|
6
6
|
import { CommonModule } from '@angular/common';
|
|
7
7
|
import { skyAnimationSlide } from '@skyux/animations';
|
|
@@ -25,10 +25,10 @@ import { DragulaService, DragulaModule } from 'ng2-dragula';
|
|
|
25
25
|
* Specifies content to display in the tile's summary.
|
|
26
26
|
*/
|
|
27
27
|
class SkyTileSummaryComponent {
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyTileSummaryComponent, isStandalone: true, selector: "sky-tile-summary", ngImport: i0, template: "<ng-content />\n" }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileSummaryComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
args: [{ standalone: true, selector: 'sky-tile-summary', template: "<ng-content />\n" }]
|
|
34
34
|
}] });
|
|
@@ -42,10 +42,10 @@ class SkyTileTitleComponent {
|
|
|
42
42
|
constructor() {
|
|
43
43
|
this.tileTitleId = inject(SKY_TILE_TITLE_ID);
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyTileTitleComponent, isStandalone: true, selector: "sky-tile-title", ngImport: i0, template: "<h2 class=\"sky-tile-title sky-font-heading-2\">\n <span skyTrim [id]=\"tileTitleId\"><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</h2>\n", styles: [".sky-tile-title{margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1.λ4, selector: "[skyTrim]" }] }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileTitleComponent, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'sky-tile-title', imports: [SkyTrimModule], template: "<h2 class=\"sky-tile-title sky-font-heading-2\">\n <span skyTrim [id]=\"tileTitleId\"><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</h2>\n", styles: [".sky-tile-title{margin:0;padding:0}\n"] }]
|
|
51
51
|
}] });
|
|
@@ -96,11 +96,11 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
96
96
|
* Import into any component library module that needs to use resource strings.
|
|
97
97
|
*/
|
|
98
98
|
class SkyTilesResourcesModule {
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
100
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
101
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
99
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
100
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesResourcesModule, exports: [SkyI18nModule] }); }
|
|
101
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesResourcesModule, imports: [SkyI18nModule] }); }
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesResourcesModule, decorators: [{
|
|
104
104
|
type: NgModule,
|
|
105
105
|
args: [{
|
|
106
106
|
exports: [SkyI18nModule],
|
|
@@ -639,10 +639,10 @@ class SkyTileDashboardService {
|
|
|
639
639
|
}
|
|
640
640
|
}
|
|
641
641
|
}
|
|
642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
643
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
642
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
643
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardService }); }
|
|
644
644
|
}
|
|
645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardService, decorators: [{
|
|
646
646
|
type: Injectable
|
|
647
647
|
}], ctorParameters: () => [], propDecorators: { dashboardInitialized: [{
|
|
648
648
|
type: Output
|
|
@@ -788,8 +788,8 @@ class SkyTileComponent {
|
|
|
788
788
|
#focusHandle() {
|
|
789
789
|
this.grabHandle?.nativeElement.focus();
|
|
790
790
|
}
|
|
791
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
792
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
791
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: SkyTileDashboardService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTileComponent, isStandalone: true, selector: "sky-tile", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", showSettings: "showSettings", showHelp: "showHelp", tileName: "tileName", isCollapsed: "isCollapsed" }, outputs: { settingsClick: "settingsClick", isCollapsedChange: "isCollapsedChange", helpClick: "helpClick" }, providers: [
|
|
793
793
|
{
|
|
794
794
|
provide: SKY_TILE_TITLE_ID,
|
|
795
795
|
useFactory() {
|
|
@@ -797,9 +797,9 @@ class SkyTileComponent {
|
|
|
797
797
|
return idService.generateId();
|
|
798
798
|
},
|
|
799
799
|
},
|
|
800
|
-
], queries: [{ propertyName: "titleRef", first: true, predicate: SkyTileTitleComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n }\"\n>\n <header class=\"sky-tile-header\">\n <div class=\"sky-tile-header-content\" (click)=\"titleClick($event)\">\n <div #titleContainer class=\"sky-tile-header-title\">\n <ng-content select=\"sky-tile-title\" />\n @if (tileName && (helpKey || helpPopoverContent)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n </div>\n <div class=\"sky-tile-summary sky-font-display-3\">\n <ng-content select=\"sky-tile-summary\" />\n </div>\n </div>\n <div class=\"sky-tile-header-column-tools\">\n <div class=\"sky-tile-tools\">\n <ng-container *skyThemeIf=\"'default'\">\n @if (hasHelp) {\n <button\n class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_help' | skyLibResources: tileName)\n : ('skyux_tile_help_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"helpButtonClicked()\"\n >\n <sky-icon icon=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n [ariaControls]=\"tileContent.id\"\n [ariaLabel]=\"\n tileName\n ? ('skyux_tile_expand' | skyLibResources: tileName)\n : ('skyux_tile_expand_default' | skyLibResources)\n \"\n [direction]=\"isCollapsed ? 'down' : 'up'\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-margin-inline-default': 'modern'\n }\"\n (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n }\"\n (click)=\"settingsButtonClicked()\"\n >\n <sky-icon icon=\"cog\" />\n </button>\n }\n @if (isInDashboardColumn) {\n <button\n #grabHandle\n class=\"sky-btn sky-tile-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_move' | skyLibResources: tileName)\n : ('skyux_tile_move_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"moveTile($event)\"\n >\n <sky-icon icon=\"tile-drag\" />\n </button>\n }\n </div>\n </div>\n </header>\n <div\n #tileContent=\"skyId\"\n class=\"sky-tile-content\"\n role=\"region\"\n skyId\n [attr.aria-label]=\"tileName\"\n [attr.aria-labelledby]=\"!tileName && titleRef ? tileTitleId : undefined\"\n [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n >\n <ng-content select=\"sky-tile-content\" />\n </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:0}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:20px}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-theme-default){padding-top:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex;align-items:baseline;padding:10px 15px}.sky-tile-header-title>sky-help-inline{margin-left:var(--sky-margin-inline-xs)}.sky-tile-summary{color:#0974a1;display:none;padding-right:15px;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-title{padding:0;margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-title{padding:0;margin:0 30px 0 0}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyChevronModule }, { kind: "component", type: i3$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "ngmodule", type: SkyTilesResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide] }); }
|
|
800
|
+
], queries: [{ propertyName: "titleRef", first: true, predicate: SkyTileTitleComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "grabHandle", first: true, predicate: ["grabHandle"], descendants: true, read: ElementRef }, { propertyName: "title", first: true, predicate: ["titleContainer"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n }\"\n>\n <header class=\"sky-tile-header\">\n <div class=\"sky-tile-header-content\" (click)=\"titleClick($event)\">\n <div #titleContainer class=\"sky-tile-header-title\">\n <ng-content select=\"sky-tile-title\" />\n @if (tileName && (helpKey || helpPopoverContent)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n </div>\n <div class=\"sky-tile-summary sky-font-display-3\">\n <ng-content select=\"sky-tile-summary\" />\n </div>\n </div>\n <div class=\"sky-tile-header-column-tools\">\n <div class=\"sky-tile-tools\">\n <ng-container *skyThemeIf=\"'default'\">\n @if (hasHelp) {\n <button\n class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_help' | skyLibResources: tileName)\n : ('skyux_tile_help_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n [ariaControls]=\"tileContent.id\"\n [ariaLabel]=\"\n tileName\n ? ('skyux_tile_expand' | skyLibResources: tileName)\n : ('skyux_tile_expand_default' | skyLibResources)\n \"\n [direction]=\"isCollapsed ? 'down' : 'up'\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-margin-inline-default': 'modern'\n }\"\n (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n }\"\n (click)=\"settingsButtonClicked()\"\n >\n <sky-icon iconName=\"settings\" />\n </button>\n }\n @if (isInDashboardColumn) {\n <button\n #grabHandle\n class=\"sky-btn sky-tile-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_move' | skyLibResources: tileName)\n : ('skyux_tile_move_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"moveTile($event)\"\n >\n <sky-icon iconName=\"re-order-dots-vertical\" iconSize=\"s\" />\n </button>\n }\n </div>\n </div>\n </header>\n <div\n #tileContent=\"skyId\"\n class=\"sky-tile-content\"\n role=\"region\"\n skyId\n [attr.aria-label]=\"tileName\"\n [attr.aria-labelledby]=\"!tileName && titleRef ? tileTitleId : undefined\"\n [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n >\n <ng-content select=\"sky-tile-content\" />\n </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px;--sky-background-color-page-default: #fff}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:0}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:20px}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-theme-default){padding-top:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex;align-items:baseline;padding:10px 15px}.sky-tile-header-title>sky-help-inline{margin-left:var(--sky-margin-inline-xs)}.sky-tile-summary{color:#0974a1;display:none;padding-right:15px;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;--sky-expansion-indicator-color: var(--sky-text-color-deemphasized);color:var(--sky-text-color-deemphasized);border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-title{padding:0;margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-title{padding:0;margin:0 30px 0 0}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyChevronModule }, { kind: "component", type: i3$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i7.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "ngmodule", type: SkyTilesResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [skyAnimationSlide] }); }
|
|
801
801
|
}
|
|
802
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileComponent, decorators: [{
|
|
803
803
|
type: Component,
|
|
804
804
|
args: [{ selector: 'sky-tile', animations: [skyAnimationSlide], imports: [
|
|
805
805
|
CommonModule,
|
|
@@ -817,7 +817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
817
817
|
return idService.generateId();
|
|
818
818
|
},
|
|
819
819
|
},
|
|
820
|
-
], template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n }\"\n>\n <header class=\"sky-tile-header\">\n <div class=\"sky-tile-header-content\" (click)=\"titleClick($event)\">\n <div #titleContainer class=\"sky-tile-header-title\">\n <ng-content select=\"sky-tile-title\" />\n @if (tileName && (helpKey || helpPopoverContent)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n </div>\n <div class=\"sky-tile-summary sky-font-display-3\">\n <ng-content select=\"sky-tile-summary\" />\n </div>\n </div>\n <div class=\"sky-tile-header-column-tools\">\n <div class=\"sky-tile-tools\">\n <ng-container *skyThemeIf=\"'default'\">\n @if (hasHelp) {\n <button\n class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_help' | skyLibResources: tileName)\n : ('skyux_tile_help_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"helpButtonClicked()\"\n >\n <sky-icon
|
|
820
|
+
], template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered sky-padding-even-xl': 'modern'\n }\"\n>\n <header class=\"sky-tile-header\">\n <div class=\"sky-tile-header-content\" (click)=\"titleClick($event)\">\n <div #titleContainer class=\"sky-tile-header-title\">\n <ng-content select=\"sky-tile-title\" />\n @if (tileName && (helpKey || helpPopoverContent)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n </div>\n <div class=\"sky-tile-summary sky-font-display-3\">\n <ng-content select=\"sky-tile-summary\" />\n </div>\n </div>\n <div class=\"sky-tile-header-column-tools\">\n <div class=\"sky-tile-tools\">\n <ng-container *skyThemeIf=\"'default'\">\n @if (hasHelp) {\n <button\n class=\"sky-btn sky-tile-tools-control sky-tile-help\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_help' | skyLibResources: tileName)\n : ('skyux_tile_help_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n [ariaControls]=\"tileContent.id\"\n [ariaLabel]=\"\n tileName\n ? ('skyux_tile_expand' | skyLibResources: tileName)\n : ('skyux_tile_expand_default' | skyLibResources)\n \"\n [direction]=\"isCollapsed ? 'down' : 'up'\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-margin-inline-default': 'modern'\n }\"\n (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\n \"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless sky-margin-inline-default': 'modern'\n }\"\n (click)=\"settingsButtonClicked()\"\n >\n <sky-icon iconName=\"settings\" />\n </button>\n }\n @if (isInDashboardColumn) {\n <button\n #grabHandle\n class=\"sky-btn sky-tile-grab-handle\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_move' | skyLibResources: tileName)\n : ('skyux_tile_move_default' | skyLibResources)\n \"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [skyThemeClass]=\"{\n 'sky-tile-tools-control': 'default',\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"moveTile($event)\"\n >\n <sky-icon iconName=\"re-order-dots-vertical\" iconSize=\"s\" />\n </button>\n }\n </div>\n </div>\n </header>\n <div\n #tileContent=\"skyId\"\n class=\"sky-tile-content\"\n role=\"region\"\n skyId\n [attr.aria-label]=\"tileName\"\n [attr.aria-labelledby]=\"!tileName && titleRef ? tileTitleId : undefined\"\n [@skyAnimationSlide]=\"isCollapsed ? 'up' : 'down'\"\n >\n <ng-content select=\"sky-tile-content\" />\n </div>\n</section>\n", styles: [".sky-tile{background-color:#fff;margin-bottom:20px;--sky-background-color-page-default: #fff}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:0}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:20px}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-theme-default){padding-top:20px}.sky-tile-header{border-color:#cdcfd2;border-style:solid solid none;border-width:4px 0 0;display:flex}.sky-tile-header-content{display:flex;flex:1;align-items:baseline;cursor:pointer}.sky-tile-header-title{display:inline-flex;align-items:baseline;padding:10px 15px}.sky-tile-header-title>sky-help-inline{margin-left:var(--sky-margin-inline-xs)}.sky-tile-summary{color:#0974a1;display:none;padding-right:15px;max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:center;flex:0 0 auto}.sky-tile-tools{display:flex;padding-right:15px}.sky-tile-tools-control{color:#cdcfd2;cursor:pointer;--sky-expansion-indicator-color: var(--sky-text-color-deemphasized);color:var(--sky-text-color-deemphasized);border:0;width:24px;height:24px;padding:0;display:block;margin:0 0 0 9px}.sky-tile-tools-control:hover{color:#979ba2;transition:color .15s}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;font-size:15px}.sky-tile-content{border-color:#e2e3e4;border-image:none;border-style:solid solid none;border-width:1px 0}:host-context(.sky-theme-modern) .sky-tile-header,:host-context(.sky-theme-modern) .sky-tile-content{border:none}:host-context(.sky-theme-modern) .sky-tile-header-title{padding:0;margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-tile-header-column-tools{align-items:flex-start}:host-context(.sky-theme-modern) .sky-tile-tools{padding:0}:host-context(.sky-theme-modern) .sky-tile-tools-control{font-size:18px;color:#686c73}:host-context(.sky-theme-modern) .sky-tile-grab-handle{font-size:16px}:host-context(.sky-theme-modern) :host .sky-tile{border-radius:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-tile{border-radius:6px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}.sky-theme-modern .sky-tile-header,.sky-theme-modern .sky-tile-content{border:none}.sky-theme-modern .sky-tile-header-title{padding:0;margin:0 30px 0 0}.sky-theme-modern .sky-tile-header-column-tools{align-items:flex-start}.sky-theme-modern .sky-tile-tools{padding:0}.sky-theme-modern .sky-tile-tools-control{font-size:18px;color:#686c73}.sky-theme-modern .sky-tile-grab-handle{font-size:16px}.sky-theme-modern :host .sky-tile{border-radius:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:0}@media (min-width: 768px){.sky-theme-modern :host .sky-tile{border-radius:6px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-tile,.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-tile{border-radius:6px}:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-single) .sky-tile,:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) :host-context(.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:30px}\n"] }]
|
|
821
821
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: SkyTileDashboardService, decorators: [{
|
|
822
822
|
type: Optional
|
|
823
823
|
}] }], propDecorators: { helpKey: [{
|
|
@@ -858,11 +858,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
858
858
|
}] } });
|
|
859
859
|
|
|
860
860
|
class SkyTileModule {
|
|
861
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
862
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
863
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
862
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTileModule, imports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent], exports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent] }); }
|
|
863
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileModule, imports: [SkyTileComponent, SkyTileTitleComponent] }); }
|
|
864
864
|
}
|
|
865
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileModule, decorators: [{
|
|
866
866
|
type: NgModule,
|
|
867
867
|
args: [{
|
|
868
868
|
imports: [SkyTileComponent, SkyTileSummaryComponent, SkyTileTitleComponent],
|
|
@@ -874,10 +874,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
874
874
|
* Specifies content to display inside a padded section of a SkyTileContentComponent.
|
|
875
875
|
*/
|
|
876
876
|
class SkyTileContentSectionComponent {
|
|
877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyTileContentSectionComponent, isStandalone: true, selector: "sky-tile-content-section", ngImport: i0, template: "<div\n class=\"sky-tile-content-section\"\n [skyThemeClass]=\"{\n 'sky-padding-even-large': 'default'\n }\"\n>\n <ng-content />\n</div>\n", styles: [":host:not(:last-child) .sky-tile-content-section{border-bottom:1px solid #e2e3e4}:host-context(.sky-theme-modern sky-tile-content) .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern sky-tile-content) :host:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern sky-tile-content) :host:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) .sky-tile-content-section{border-bottom:1px dotted #c0c2c5;padding:15px 0}.sky-theme-modern .sky-tile-content-section{border-bottom:1px dotted #c0c2c5;padding:15px 0}\n"], dependencies: [{ kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
879
879
|
}
|
|
880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentSectionComponent, decorators: [{
|
|
881
881
|
type: Component,
|
|
882
882
|
args: [{ selector: 'sky-tile-content-section', imports: [SkyThemeModule], template: "<div\n class=\"sky-tile-content-section\"\n [skyThemeClass]=\"{\n 'sky-padding-even-large': 'default'\n }\"\n>\n <ng-content />\n</div>\n", styles: [":host:not(:last-child) .sky-tile-content-section{border-bottom:1px solid #e2e3e4}:host-context(.sky-theme-modern sky-tile-content) .sky-tile-content-section{border-bottom:1px dotted #c0c2c5}:host-context(.sky-theme-modern sky-tile-content) :host:first-child .sky-tile-content-section{margin-top:15px}:host-context(.sky-theme-modern sky-tile-content) :host:last-child .sky-tile-content-section{padding-bottom:0;border-bottom:none}:host-context(.sky-theme-modern) .sky-tile-content-section{border-bottom:1px dotted #c0c2c5;padding:15px 0}.sky-theme-modern .sky-tile-content-section{border-bottom:1px dotted #c0c2c5;padding:15px 0}\n"] }]
|
|
883
883
|
}] });
|
|
@@ -886,20 +886,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
886
886
|
* Specifies content to display in the tile's body.
|
|
887
887
|
*/
|
|
888
888
|
class SkyTileContentComponent {
|
|
889
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
889
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
890
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyTileContentComponent, isStandalone: true, selector: "sky-tile-content", ngImport: i0, template: "<ng-content />\n" }); }
|
|
891
891
|
}
|
|
892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentComponent, decorators: [{
|
|
893
893
|
type: Component,
|
|
894
894
|
args: [{ standalone: true, selector: 'sky-tile-content', template: "<ng-content />\n" }]
|
|
895
895
|
}] });
|
|
896
896
|
|
|
897
897
|
class SkyTileContentModule {
|
|
898
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
899
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
900
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
899
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentModule, imports: [SkyTileContentComponent, SkyTileContentSectionComponent], exports: [SkyTileContentComponent, SkyTileContentSectionComponent] }); }
|
|
900
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentModule, imports: [SkyTileContentSectionComponent] }); }
|
|
901
901
|
}
|
|
902
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileContentModule, decorators: [{
|
|
903
903
|
type: NgModule,
|
|
904
904
|
args: [{
|
|
905
905
|
imports: [SkyTileContentComponent, SkyTileContentSectionComponent],
|
|
@@ -934,10 +934,10 @@ class SkyTileDashboardColumnComponent {
|
|
|
934
934
|
this.columnId = `tile-dashboard-column-${++columnIdIndex}`;
|
|
935
935
|
this.bagId = this.#dashboardService.bagId;
|
|
936
936
|
}
|
|
937
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
938
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.EnvironmentInjector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyTileDashboardColumnComponent, isStandalone: true, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-multi-first{padding-left:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-multi-last{padding-right:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-single{padding-left:0;padding-right:0}}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-multi-first,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-multi-first,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-multi-first{padding-left:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-multi-last,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-multi-last,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-multi-last{padding-right:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-single,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-single,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-single{padding-left:0;padding-right:0}\n"], dependencies: [{ kind: "ngmodule", type: DragulaModule }, { kind: "directive", type: i2$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }] }); }
|
|
939
939
|
}
|
|
940
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnComponent, decorators: [{
|
|
941
941
|
type: Component,
|
|
942
942
|
args: [{ selector: 'sky-tile-dashboard-column', imports: [DragulaModule], template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host{display:flex;flex-grow:1;overflow:hidden}:host{padding:0}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0}@media (min-width: 768px){:host{padding:0 10px}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:0 10px}.sky-tile-dashboard-column{min-height:100px;width:100%}@media (min-width: 768px){:host-context(.sky-theme-modern) :host{padding:0 15px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){.sky-theme-modern :host{padding:0 15px}}.sky-theme-modern :host-context(.sky-responsive-container-sm),.sky-theme-modern :host-context(.sky-responsive-container-md),.sky-theme-modern :host-context(.sky-responsive-container-lg){padding:0 15px}@media (min-width: 768px){:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-multi-first{padding-left:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-multi-last{padding-right:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host.sky-tile-dashboard-layout-single{padding-left:0;padding-right:0}}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-multi-first,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-multi-first,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-multi-first{padding-left:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-multi-last,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-multi-last,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-multi-last{padding-right:0}:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-single,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-single,:host-context(.sky-theme-modern .sky-layout-host-blocks) :host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-single{padding-left:0;padding-right:0}\n"] }]
|
|
943
943
|
}], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: SkyTileDashboardService }], propDecorators: { content: [{
|
|
@@ -1060,10 +1060,10 @@ class SkyTileDashboardComponent {
|
|
|
1060
1060
|
break;
|
|
1061
1061
|
}
|
|
1062
1062
|
}
|
|
1063
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
1063
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1064
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTileDashboardComponent, isStandalone: false, selector: "sky-tile-dashboard", inputs: { config: "config", messageStream: "messageStream", settingsKey: "settingsKey" }, outputs: { configChange: "configChange" }, host: { properties: { "class": "layoutClassName()" } }, providers: [SkyTileDashboardService], viewQueries: [{ propertyName: "singleColumn", first: true, predicate: ["singleColumn"], descendants: true, read: SkyTileDashboardColumnComponent }, { propertyName: "columns", predicate: SkyTileDashboardColumnComponent, descendants: true }], ngImport: i0, template: "@if (config) {\n <span aria-live=\"assertive\" class=\"sky-assistive-text\">\n {{ tileMovedReport }}\n </span>\n @for (\n column of config.layout.multiColumn;\n track column;\n let first = $first, last = $last\n ) {\n <sky-tile-dashboard-column\n class=\"sky-tile-dashboard-layout-multi\"\n [ngClass]=\"{\n 'sky-tile-dashboard-layout-multi-first': first,\n 'sky-tile-dashboard-layout-multi-last': last\n }\"\n [ngStyle]=\"{\n 'flex-basis': 100 / config.layout.multiColumn.length + '%'\n }\"\n />\n }\n <sky-tile-dashboard-column\n #singleColumn\n class=\"sky-tile-dashboard-layout-single\"\n />\n <span class=\"sky-screen-reader-only\" [id]=\"moveInstructionsId\">{{\n 'skyux_tile_move_instructions' | skyLibResources\n }}</span>\n <ng-content />\n}\n", styles: [":host{display:block;padding:0}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-tile-dashboard-gt-xs) :host-context(.sky-theme-default){padding-top:20px}:host-context(.sky-tile-dashboard-multi-column){display:flex;padding:0 10px}:host-context(.sky-tile-dashboard-multi-column) .sky-tile-dashboard-layout-multi{display:block}:host-context(.sky-tile-dashboard-multi-column) .sky-tile-dashboard-layout-single{display:none}@media screen{.sky-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}}:host-context(.sky-theme-default){background-color:#eeeeef}:host-context(.sky-theme-modern .sky-layout-host-blocks){padding:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1065
1065
|
}
|
|
1066
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardComponent, decorators: [{
|
|
1067
1067
|
type: Component,
|
|
1068
1068
|
args: [{ selector: 'sky-tile-dashboard', providers: [SkyTileDashboardService], host: {
|
|
1069
1069
|
'[class]': 'layoutClassName()',
|
|
@@ -1090,15 +1090,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1090
1090
|
}] } });
|
|
1091
1091
|
|
|
1092
1092
|
class SkyTileDashboardModule {
|
|
1093
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1094
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1093
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1094
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardModule, declarations: [SkyTileDashboardComponent], imports: [CommonModule,
|
|
1095
1095
|
SkyTileDashboardColumnComponent,
|
|
1096
1096
|
SkyTilesResourcesModule], exports: [SkyTileDashboardComponent] }); }
|
|
1097
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1097
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardModule, providers: [DragulaService], imports: [CommonModule,
|
|
1098
1098
|
SkyTileDashboardColumnComponent,
|
|
1099
1099
|
SkyTilesResourcesModule] }); }
|
|
1100
1100
|
}
|
|
1101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardModule, decorators: [{
|
|
1102
1102
|
type: NgModule,
|
|
1103
1103
|
args: [{
|
|
1104
1104
|
declarations: [SkyTileDashboardComponent],
|
|
@@ -1113,11 +1113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1113
1113
|
}] });
|
|
1114
1114
|
|
|
1115
1115
|
class SkyTileDashboardColumnModule {
|
|
1116
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1117
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1118
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1117
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnModule, imports: [SkyTileDashboardColumnComponent], exports: [SkyTileDashboardColumnComponent] }); }
|
|
1118
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnModule, imports: [SkyTileDashboardColumnComponent] }); }
|
|
1119
1119
|
}
|
|
1120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTileDashboardColumnModule, decorators: [{
|
|
1121
1121
|
type: NgModule,
|
|
1122
1122
|
args: [{
|
|
1123
1123
|
imports: [SkyTileDashboardColumnComponent],
|
|
@@ -1126,17 +1126,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1126
1126
|
}] });
|
|
1127
1127
|
|
|
1128
1128
|
class SkyTilesModule {
|
|
1129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1130
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1130
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesModule, exports: [SkyTileContentModule,
|
|
1131
1131
|
SkyTileModule,
|
|
1132
1132
|
SkyTileDashboardColumnModule,
|
|
1133
1133
|
SkyTileDashboardModule] }); }
|
|
1134
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1134
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesModule, imports: [SkyTileContentModule,
|
|
1135
1135
|
SkyTileModule,
|
|
1136
1136
|
SkyTileDashboardColumnModule,
|
|
1137
1137
|
SkyTileDashboardModule] }); }
|
|
1138
1138
|
}
|
|
1139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTilesModule, decorators: [{
|
|
1140
1140
|
type: NgModule,
|
|
1141
1141
|
args: [{
|
|
1142
1142
|
exports: [
|