@skyux/tiles 13.0.0-alpha.3 → 13.0.0-alpha.4
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
CHANGED
|
@@ -770,7 +770,7 @@ class SkyTileComponent {
|
|
|
770
770
|
return idService.generateId();
|
|
771
771
|
},
|
|
772
772
|
},
|
|
773
|
-
], 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': '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 <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\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-btn-icon-borderless 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 (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n class=\"sky-tile-tools-control\"\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 (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings sky-btn-icon-borderless sky-tile-tools-control\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\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-btn-icon-borderless sky-tile-tools-control 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 (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:not(.sky-theme-modern *){--sky-override-tile-background-color: #fff;--sky-override-tile-border-radius: 0;--sky-override-tile-border-radius-xs-first: 0;--sky-override-tile-border-radius-xs-last: 0;--sky-override-tile-content-border-color: #e2e3e4;--sky-override-tile-content-border-style: solid solid none;--sky-override-tile-content-border-width: 1px 0;--sky-override-tile-header-border-color: #cdcfd2;--sky-override-tile-header-border-style: solid solid none;--sky-override-tile-header-border-width: 4px 0 0;--sky-override-tile-header-column-tools-align-items: center;--sky-override-tile-header-title-margin: 0;--sky-override-tile-header-title-padding: 10px 15px;--sky-override-tile-margin-bottom-base: 20px;--sky-override-tile-margin-bottom-gt-xs: 20px;--sky-override-tile-margin-bottom-xs: 0;--sky-override-tile-padding: 0;--sky-override-tile-summary-color: #0974a1;--sky-override-tile-summary-padding-left: 15px;--sky-override-tile-tools-control-color: var(--sky-text-color-deemphasized);--sky-override-tile-tools-control-height: 24px;--sky-override-tile-tools-control-margin-right: 9px;--sky-override-tile-tools-control-size: 24px;--sky-override-tile-tools-control-width: 24px;--sky-override-tile-tools-padding-right: 15px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-tile{--sky-override-tile-border-radius-xs-first: 0;--sky-override-tile-border-radius-xs-last: 0;--sky-override-tile-margin-bottom-base: 20px;--sky-override-tile-summary-color: #0974a1;--sky-override-tile-tools-control-margin-right: 10px;--sky-override-tile-tools-control-size: 26px}.sky-tile{background-color:var(--sky-override-tile-background-color, var(--sky-color-background-container-base));margin-bottom:var(--sky-override-tile-margin-bottom-base, var(--sky-space-stacked-xl));padding:var(--sky-override-tile-padding, var(--sky-comp-tile-space-inset-top) var(--sky-comp-tile-space-inset-right) var(--sky-comp-tile-space-inset-bottom) var(--sky-comp-tile-space-inset-left));--sky-background-color-page-default: var( --sky-override-tile-background-color, var(--sky-color-background-container-base) )}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:var(--sky-override-tile-margin-bottom-xs, var(--sky-space-stacked-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:var(--sky-override-tile-margin-bottom-gt-xs, var(--sky-space-stacked-xl))}.sky-tile-header{border-color:var(--sky-override-tile-header-border-color, none);border-style:var(--sky-override-tile-header-border-style, none);border-width:var(--sky-override-tile-header-border-width, 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:var(--sky-override-tile-header-title-padding, 0);margin:var(--sky-override-tile-header-title-margin, 0 var(--sky-space-inline-xl) 0 0)}.sky-tile-summary{color:var(--sky-override-tile-summary-color, var(--sky-color-text-action));display:none;padding-right:var(--sky-override-tile-summary-padding-left, var(--sky-space-inline-m));max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:var(--sky-override-tile-header-column-tools-align-items, flex-start);flex:0 0 auto}.sky-tile-tools{align-items:center;display:flex;padding:0 var(--sky-override-tile-tools-padding-right, 0) 0 0}.sky-tile-tools-control{--sky-expansion-indicator-color: var( --sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized) );color:var(--sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized));height:var(--sky-override-tile-tools-control-size, auto);width:var(--sky-override-tile-tools-control-size, auto)}.sky-tile-tools-control:not(:last-child){margin-right:var(--sky-override-tile-tools-control-margin-right, var(--sky-space-gap-action_group-s))}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab}.sky-tile-content{border-color:var(--sky-override-tile-content-border-color, none);border-style:var(--sky-override-tile-content-border-style, none);border-width:var(--sky-override-tile-content-border-width, 0);border-image:none}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-first, var(--sky-border-radius-s) var(--sky-border-radius-s) var(--sky-border-radius-0) var(--sky-border-radius-0))}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-last-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-last, var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-s) var(--sky-border-radius-s))}:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}:host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}@media (min-width: 768px){:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}}:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyChevronModule }, { kind: "component", type: i3.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4$1.λ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] }); }
|
|
773
|
+
], 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': '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 <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\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-btn-icon-borderless 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 (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n class=\"sky-tile-tools-control\"\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 (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings sky-btn-icon-borderless sky-tile-tools-control\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\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-btn-icon-borderless sky-tile-tools-control 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 (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:not(.sky-theme-modern *){--sky-override-tile-background-color: #fff;--sky-override-tile-border-radius: 0;--sky-override-tile-border-radius-xs-first: 0;--sky-override-tile-border-radius-xs-last: 0;--sky-override-tile-content-border-color: #e2e3e4;--sky-override-tile-content-border-style: solid solid none;--sky-override-tile-content-border-width: 1px 0;--sky-override-tile-header-border-color: #cdcfd2;--sky-override-tile-header-border-style: solid solid none;--sky-override-tile-header-border-width: 4px 0 0;--sky-override-tile-header-column-tools-align-items: center;--sky-override-tile-header-title-margin: 0;--sky-override-tile-header-title-padding: 10px 15px;--sky-override-tile-margin-bottom-base: 20px;--sky-override-tile-margin-bottom-gt-xs: 20px;--sky-override-tile-margin-bottom-xs: 0;--sky-override-tile-padding: 0;--sky-override-tile-summary-color: #0974a1;--sky-override-tile-summary-padding-left: 15px;--sky-override-tile-tools-control-color: var(--sky-text-color-deemphasized);--sky-override-tile-tools-control-margin-right: 9px;--sky-override-tile-tools-control-size: 24px;--sky-override-tile-tools-padding-right: 15px}.sky-tile{--sky-comp-override-list-header-background-color: initial;background-color:var(--sky-override-tile-background-color, var(--sky-color-background-container-base));margin-bottom:var(--sky-override-tile-margin-bottom-base, var(--sky-space-stacked-xl));padding:var(--sky-override-tile-padding, var(--sky-comp-tile-space-inset-top) var(--sky-comp-tile-space-inset-right) var(--sky-comp-tile-space-inset-bottom) var(--sky-comp-tile-space-inset-left));--sky-background-color-page-default: var( --sky-override-tile-background-color, var(--sky-color-background-container-base) )}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:var(--sky-override-tile-margin-bottom-xs, var(--sky-space-stacked-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:var(--sky-override-tile-margin-bottom-gt-xs, var(--sky-space-stacked-xl))}.sky-tile-header{border-color:var(--sky-override-tile-header-border-color, none);border-style:var(--sky-override-tile-header-border-style, none);border-width:var(--sky-override-tile-header-border-width, 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:var(--sky-override-tile-header-title-padding, 0);margin:var(--sky-override-tile-header-title-margin, 0 var(--sky-space-inline-xl) 0 0)}.sky-tile-summary{color:var(--sky-override-tile-summary-color, var(--sky-color-text-action));display:none;padding-right:var(--sky-override-tile-summary-padding-left, var(--sky-space-inline-m));max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:var(--sky-override-tile-header-column-tools-align-items, flex-start);flex:0 0 auto}.sky-tile-tools{align-items:center;display:flex;padding:0 var(--sky-override-tile-tools-padding-right, 0) 0 0}.sky-tile-tools-control{--sky-expansion-indicator-color: var( --sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized) );color:var(--sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized));height:var(--sky-override-tile-tools-control-size, auto);width:var(--sky-override-tile-tools-control-size, auto)}.sky-tile-tools-control:not(:last-child){margin-right:var(--sky-override-tile-tools-control-margin-right, var(--sky-space-gap-action_group-s))}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab}.sky-tile-content{border-color:var(--sky-override-tile-content-border-color, none);border-style:var(--sky-override-tile-content-border-style, none);border-width:var(--sky-override-tile-content-border-width, 0);border-image:none}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-first, var(--sky-border-radius-s) var(--sky-border-radius-s) var(--sky-border-radius-0) var(--sky-border-radius-0))}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-last-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-last, var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-s) var(--sky-border-radius-s))}:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}:host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}@media (min-width: 768px){:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}}:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyChevronModule }, { kind: "component", type: i3.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4$1.λ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] }); }
|
|
774
774
|
}
|
|
775
775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTileComponent, decorators: [{
|
|
776
776
|
type: Component,
|
|
@@ -790,7 +790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
790
790
|
return idService.generateId();
|
|
791
791
|
},
|
|
792
792
|
},
|
|
793
|
-
], template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered': '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 <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\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-btn-icon-borderless 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 (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n class=\"sky-tile-tools-control\"\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 (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings sky-btn-icon-borderless sky-tile-tools-control\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\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-btn-icon-borderless sky-tile-tools-control 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 (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:not(.sky-theme-modern *){--sky-override-tile-background-color: #fff;--sky-override-tile-border-radius: 0;--sky-override-tile-border-radius-xs-first: 0;--sky-override-tile-border-radius-xs-last: 0;--sky-override-tile-content-border-color: #e2e3e4;--sky-override-tile-content-border-style: solid solid none;--sky-override-tile-content-border-width: 1px 0;--sky-override-tile-header-border-color: #cdcfd2;--sky-override-tile-header-border-style: solid solid none;--sky-override-tile-header-border-width: 4px 0 0;--sky-override-tile-header-column-tools-align-items: center;--sky-override-tile-header-title-margin: 0;--sky-override-tile-header-title-padding: 10px 15px;--sky-override-tile-margin-bottom-base: 20px;--sky-override-tile-margin-bottom-gt-xs: 20px;--sky-override-tile-margin-bottom-xs: 0;--sky-override-tile-padding: 0;--sky-override-tile-summary-color: #0974a1;--sky-override-tile-summary-padding-left: 15px;--sky-override-tile-tools-control-color: var(--sky-text-color-deemphasized);--sky-override-tile-tools-control-
|
|
793
|
+
], template: "<section\n class=\"sky-tile\"\n [ngClass]=\"{\n 'sky-tile-collapsed': isCollapsed\n }\"\n [skyThemeClass]=\"{\n 'sky-box sky-elevation-1-bordered': '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 <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"tileName\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n </span>\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-btn-icon-borderless 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 (click)=\"helpButtonClicked()\"\n >\n <sky-icon iconName=\"question-circle\" />\n </button>\n }\n </ng-container>\n <sky-chevron\n class=\"sky-tile-tools-control\"\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 (directionChange)=\"chevronDirectionChange($event)\"\n />\n @if (hasSettings) {\n <button\n class=\"sky-btn sky-tile-settings sky-btn-icon-borderless sky-tile-tools-control\"\n type=\"button\"\n [attr.aria-label]=\"\n tileName\n ? ('skyux_tile_settings' | skyLibResources: tileName)\n : ('skyux_tile_settings_default' | skyLibResources)\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-btn-icon-borderless sky-tile-tools-control 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 (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:not(.sky-theme-modern *){--sky-override-tile-background-color: #fff;--sky-override-tile-border-radius: 0;--sky-override-tile-border-radius-xs-first: 0;--sky-override-tile-border-radius-xs-last: 0;--sky-override-tile-content-border-color: #e2e3e4;--sky-override-tile-content-border-style: solid solid none;--sky-override-tile-content-border-width: 1px 0;--sky-override-tile-header-border-color: #cdcfd2;--sky-override-tile-header-border-style: solid solid none;--sky-override-tile-header-border-width: 4px 0 0;--sky-override-tile-header-column-tools-align-items: center;--sky-override-tile-header-title-margin: 0;--sky-override-tile-header-title-padding: 10px 15px;--sky-override-tile-margin-bottom-base: 20px;--sky-override-tile-margin-bottom-gt-xs: 20px;--sky-override-tile-margin-bottom-xs: 0;--sky-override-tile-padding: 0;--sky-override-tile-summary-color: #0974a1;--sky-override-tile-summary-padding-left: 15px;--sky-override-tile-tools-control-color: var(--sky-text-color-deemphasized);--sky-override-tile-tools-control-margin-right: 9px;--sky-override-tile-tools-control-size: 24px;--sky-override-tile-tools-padding-right: 15px}.sky-tile{--sky-comp-override-list-header-background-color: initial;background-color:var(--sky-override-tile-background-color, var(--sky-color-background-container-base));margin-bottom:var(--sky-override-tile-margin-bottom-base, var(--sky-space-stacked-xl));padding:var(--sky-override-tile-padding, var(--sky-comp-tile-space-inset-top) var(--sky-comp-tile-space-inset-right) var(--sky-comp-tile-space-inset-bottom) var(--sky-comp-tile-space-inset-left));--sky-background-color-page-default: var( --sky-override-tile-background-color, var(--sky-color-background-container-base) )}:host-context(.sky-tile-dashboard-layout-single,.sky-tile-dashboard-layout-multi) .sky-tile{margin-bottom:var(--sky-override-tile-margin-bottom-xs, var(--sky-space-stacked-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:var(--sky-override-tile-margin-bottom-gt-xs, var(--sky-space-stacked-xl))}.sky-tile-header{border-color:var(--sky-override-tile-header-border-color, none);border-style:var(--sky-override-tile-header-border-style, none);border-width:var(--sky-override-tile-header-border-width, 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:var(--sky-override-tile-header-title-padding, 0);margin:var(--sky-override-tile-header-title-margin, 0 var(--sky-space-inline-xl) 0 0)}.sky-tile-summary{color:var(--sky-override-tile-summary-color, var(--sky-color-text-action));display:none;padding-right:var(--sky-override-tile-summary-padding-left, var(--sky-space-inline-m));max-height:30px;overflow:hidden}.sky-tile-collapsed .sky-tile-summary{display:block}.sky-tile-header-column-tools{display:flex;align-items:var(--sky-override-tile-header-column-tools-align-items, flex-start);flex:0 0 auto}.sky-tile-tools{align-items:center;display:flex;padding:0 var(--sky-override-tile-tools-padding-right, 0) 0 0}.sky-tile-tools-control{--sky-expansion-indicator-color: var( --sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized) );color:var(--sky-override-tile-tools-control-color, var(--sky-color-icon-deemphasized));height:var(--sky-override-tile-tools-control-size, auto);width:var(--sky-override-tile-tools-control-size, auto)}.sky-tile-tools-control:not(:last-child){margin-right:var(--sky-override-tile-tools-control-margin-right, var(--sky-space-gap-action_group-s))}.sky-tile-grab-handle{cursor:move;cursor:-webkit-grab;cursor:-moz-grab}.sky-tile-content{border-color:var(--sky-override-tile-content-border-color, none);border-style:var(--sky-override-tile-content-border-style, none);border-width:var(--sky-override-tile-content-border-width, 0);border-image:none}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-first, var(--sky-border-radius-s) var(--sky-border-radius-s) var(--sky-border-radius-0) var(--sky-border-radius-0))}:host-context(.sky-tile-dashboard-xs .sky-tile-dashboard-column > *:has(.sky-tile):nth-last-child(1 of .sky-tile-parent)) .sky-tile{border-radius:var(--sky-override-tile-border-radius-xs-last, var(--sky-border-radius-0) var(--sky-border-radius-0) var(--sky-border-radius-s) var(--sky-border-radius-s))}:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}:host-context(.sky-responsive-container-xs) .sky-tile,:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-0))}@media (min-width: 768px){:host .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}}:host-context(.sky-responsive-container-sm) .sky-tile,:host-context(.sky-responsive-container-md) .sky-tile,:host-context(.sky-responsive-container-lg) .sky-tile{border-radius:var(--sky-override-tile-border-radius, var(--sky-border-radius-s))}\n"] }]
|
|
794
794
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: SkyTileDashboardService, decorators: [{
|
|
795
795
|
type: Optional
|
|
796
796
|
}] }], propDecorators: { helpKey: [{
|
|
@@ -908,11 +908,11 @@ class SkyTileDashboardColumnComponent {
|
|
|
908
908
|
this.bagId = this.#dashboardService.bagId;
|
|
909
909
|
}
|
|
910
910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTileDashboardColumnComponent, deps: [{ token: i0.EnvironmentInjector }, { token: SkyTileDashboardService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
911
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyTileDashboardColumnComponent, isStandalone: true, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], hostDirectives: [{ directive: i7.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-tile-dashboard-column-padding-gt-sm: 0 10px;--sky-override-tile-dashboard-column-padding-xs: 0}:host{display:flex;flex-grow:1;overflow:hidden}:host{padding:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) var(--sky-comp-tile-dashboard-column-space-inset-xs-right) var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-column-space-inset-xs-left))}: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:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) var(--sky-comp-tile-dashboard-column-space-inset-
|
|
911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyTileDashboardColumnComponent, isStandalone: true, selector: "sky-tile-dashboard-column", viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }], hostDirectives: [{ directive: i7.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-tile-dashboard-column-padding-gt-sm: 0 10px;--sky-override-tile-dashboard-column-padding-xs: 0}:host{display:flex;flex-grow:1;overflow:hidden}:host{padding:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) + var(--sky-comp-tile-dashboard-column-space-inset-xs-right)) calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom)) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) + var(--sky-comp-tile-dashboard-column-space-inset-xs-left)))}: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:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) + var(--sky-comp-tile-dashboard-column-space-inset-xs-right)) calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom)) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) + var(--sky-comp-tile-dashboard-column-space-inset-xs-left)))}@media (min-width: 768px){:host{padding:var(--sky-override-tile-dashboard-column-padding-gt-sm, var(--sky-comp-tile-dashboard-column-space-inset-sm-top) var(--sky-comp-tile-dashboard-column-space-inset-sm-right) var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-column-space-inset-sm-left))}:host.sky-tile-dashboard-layout-single{padding-bottom:calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom))}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:var(--sky-override-tile-dashboard-column-padding-gt-sm, var(--sky-comp-tile-dashboard-column-space-inset-sm-top) var(--sky-comp-tile-dashboard-column-space-inset-sm-right) var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-column-space-inset-sm-left))}:host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-single{padding-bottom:calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom))}.sky-tile-dashboard-column{min-height:100px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: DragulaModule }, { kind: "directive", type: i3$1.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel"], outputs: ["dragulaModelChange"] }] }); }
|
|
912
912
|
}
|
|
913
913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTileDashboardColumnComponent, decorators: [{
|
|
914
914
|
type: Component,
|
|
915
|
-
args: [{ selector: 'sky-tile-dashboard-column', imports: [DragulaModule], hostDirectives: [SkyThemeComponentClassDirective], template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-tile-dashboard-column-padding-gt-sm: 0 10px;--sky-override-tile-dashboard-column-padding-xs: 0}:host{display:flex;flex-grow:1;overflow:hidden}:host{padding:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) var(--sky-comp-tile-dashboard-column-space-inset-xs-right) var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-column-space-inset-xs-left))}: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:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) var(--sky-comp-tile-dashboard-column-space-inset-
|
|
915
|
+
args: [{ selector: 'sky-tile-dashboard-column', imports: [DragulaModule], hostDirectives: [SkyThemeComponentClassDirective], template: "<div class=\"sky-tile-dashboard-column\" [dragula]=\"bagId\">\n <div #content></div>\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-tile-dashboard-column-padding-gt-sm: 0 10px;--sky-override-tile-dashboard-column-padding-xs: 0}:host{display:flex;flex-grow:1;overflow:hidden}:host{padding:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) + var(--sky-comp-tile-dashboard-column-space-inset-xs-right)) calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom)) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) + var(--sky-comp-tile-dashboard-column-space-inset-xs-left)))}: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:var(--sky-override-tile-dashboard-column-padding-xs, var(--sky-comp-tile-dashboard-column-space-inset-xs-top) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) + var(--sky-comp-tile-dashboard-column-space-inset-xs-right)) calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-xs-bottom)) calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) + var(--sky-comp-tile-dashboard-column-space-inset-xs-left)))}@media (min-width: 768px){:host{padding:var(--sky-override-tile-dashboard-column-padding-gt-sm, var(--sky-comp-tile-dashboard-column-space-inset-sm-top) var(--sky-comp-tile-dashboard-column-space-inset-sm-right) var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-column-space-inset-sm-left))}:host.sky-tile-dashboard-layout-single{padding-bottom:calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom))}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){padding:var(--sky-override-tile-dashboard-column-padding-gt-sm, var(--sky-comp-tile-dashboard-column-space-inset-sm-top) var(--sky-comp-tile-dashboard-column-space-inset-sm-right) var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-column-space-inset-sm-left))}:host-context(.sky-responsive-container-sm).sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-md).sky-tile-dashboard-layout-single,:host-context(.sky-responsive-container-lg).sky-tile-dashboard-layout-single{padding-bottom:calc(var(--sky-space-stacked-xl) + var(--sky-comp-tile-dashboard-column-space-inset-sm-bottom))}.sky-tile-dashboard-column{min-height:100px;width:100%}\n"] }]
|
|
916
916
|
}], ctorParameters: () => [{ type: i0.EnvironmentInjector }, { type: SkyTileDashboardService }], propDecorators: { content: [{
|
|
917
917
|
type: ViewChild,
|
|
918
918
|
args: ['content', {
|
|
@@ -1036,13 +1036,13 @@ class SkyTileDashboardComponent {
|
|
|
1036
1036
|
}
|
|
1037
1037
|
}
|
|
1038
1038
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTileDashboardComponent, deps: [{ token: SkyTileDashboardService }, { token: i2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 }], hostDirectives: [{ directive: i7.SkyThemeComponentClassDirective }], 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.sky-cmp-theme-default{--sky-override-tile-dashboard-background-color: #eeeeef;--sky-override-tile-dashboard-column-padding: 0;--sky-override-tile-dashboard-multi-column-padding: 0 10px;--sky-override-tile-dashboard-padding-top: 20px}:host{background-color:var(--sky-override-tile-dashboard-background-color, transparent);display:block;padding:var(--sky-override-tile-dashboard-column-padding, var(--sky-comp-tile-dashboard-space-inset-xs-top) var(--sky-comp-tile-dashboard-space-inset-xs-right) var(--sky-comp-tile-dashboard-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-space-inset-xs-left))}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-tile-dashboard-gt-xs){padding-top:var(--sky-override-tile-dashboard-padding-top, var(--sky-comp-tile-dashboard-space-inset-xs-top))!important}:host-context(.sky-tile-dashboard-multi-column){display:flex;padding:var(--sky-override-tile-dashboard-multi-column-padding, var(--sky-comp-tile-dashboard-space-inset-sm-top) var(--sky-comp-tile-dashboard-space-inset-sm-right) var(--sky-comp-tile-dashboard-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-space-inset-sm-left))}: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-modern .sky-layout-host-blocks){padding:0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1039
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", 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 }], hostDirectives: [{ directive: i7.SkyThemeComponentClassDirective }], 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.sky-cmp-theme-default{--sky-override-tile-dashboard-background-color: #eeeeef;--sky-override-tile-dashboard-column-padding: 0;--sky-override-tile-dashboard-multi-column-padding: 0 10px;--sky-override-tile-dashboard-padding-top: 20px}:host{background-color:var(--sky-override-tile-dashboard-background-color, transparent);display:block;padding:var(--sky-override-tile-dashboard-column-padding, var(--sky-comp-tile-dashboard-space-inset-xs-top) var(--sky-comp-tile-dashboard-space-inset-xs-right) var(--sky-comp-tile-dashboard-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-space-inset-xs-left));margin-bottom:calc(var(--sky-space-stacked-xl) * -1)}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-tile-dashboard-gt-xs){padding-top:var(--sky-override-tile-dashboard-padding-top, var(--sky-comp-tile-dashboard-space-inset-xs-top))!important}:host{margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}@media (min-width: 768px){:host{margin-left:0;margin-right:0}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){margin-left:0;margin-right:0}:host-context(.sky-tile-dashboard-multi-column){display:flex;padding:var(--sky-override-tile-dashboard-multi-column-padding, var(--sky-comp-tile-dashboard-space-inset-sm-top) var(--sky-comp-tile-dashboard-space-inset-sm-right) var(--sky-comp-tile-dashboard-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-space-inset-sm-left));margin-bottom:0}: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-modern .sky-layout-host-blocks){padding:0;margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SkyTileDashboardColumnComponent, selector: "sky-tile-dashboard-column" }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1040
1040
|
}
|
|
1041
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyTileDashboardComponent, decorators: [{
|
|
1042
1042
|
type: Component,
|
|
1043
1043
|
args: [{ selector: 'sky-tile-dashboard', providers: [SkyTileDashboardService], host: {
|
|
1044
1044
|
'[class]': 'layoutClassName()',
|
|
1045
|
-
}, standalone: false, hostDirectives: [SkyThemeComponentClassDirective], 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.sky-cmp-theme-default{--sky-override-tile-dashboard-background-color: #eeeeef;--sky-override-tile-dashboard-column-padding: 0;--sky-override-tile-dashboard-multi-column-padding: 0 10px;--sky-override-tile-dashboard-padding-top: 20px}:host{background-color:var(--sky-override-tile-dashboard-background-color, transparent);display:block;padding:var(--sky-override-tile-dashboard-column-padding, var(--sky-comp-tile-dashboard-space-inset-xs-top) var(--sky-comp-tile-dashboard-space-inset-xs-right) var(--sky-comp-tile-dashboard-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-space-inset-xs-left))}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-tile-dashboard-gt-xs){padding-top:var(--sky-override-tile-dashboard-padding-top, var(--sky-comp-tile-dashboard-space-inset-xs-top))!important}:host-context(.sky-tile-dashboard-multi-column){display:flex;padding:var(--sky-override-tile-dashboard-multi-column-padding, var(--sky-comp-tile-dashboard-space-inset-sm-top) var(--sky-comp-tile-dashboard-space-inset-sm-right) var(--sky-comp-tile-dashboard-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-space-inset-sm-left))}: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-modern .sky-layout-host-blocks){padding:0}\n"] }]
|
|
1045
|
+
}, standalone: false, hostDirectives: [SkyThemeComponentClassDirective], 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.sky-cmp-theme-default{--sky-override-tile-dashboard-background-color: #eeeeef;--sky-override-tile-dashboard-column-padding: 0;--sky-override-tile-dashboard-multi-column-padding: 0 10px;--sky-override-tile-dashboard-padding-top: 20px}:host{background-color:var(--sky-override-tile-dashboard-background-color, transparent);display:block;padding:var(--sky-override-tile-dashboard-column-padding, var(--sky-comp-tile-dashboard-space-inset-xs-top) var(--sky-comp-tile-dashboard-space-inset-xs-right) var(--sky-comp-tile-dashboard-space-inset-xs-bottom) var(--sky-comp-tile-dashboard-space-inset-xs-left));margin-bottom:calc(var(--sky-space-stacked-xl) * -1)}:host .sky-tile-dashboard-layout-multi{display:none}:host .sky-tile-dashboard-layout-single{display:block}:host-context(.sky-tile-dashboard-gt-xs){padding-top:var(--sky-override-tile-dashboard-padding-top, var(--sky-comp-tile-dashboard-space-inset-xs-top))!important}:host{margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}:host-context(.sky-responsive-container-xs),:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}@media (min-width: 768px){:host{margin-left:0;margin-right:0}}:host-context(.sky-responsive-container-sm),:host-context(.sky-responsive-container-md),:host-context(.sky-responsive-container-lg){margin-left:0;margin-right:0}:host-context(.sky-tile-dashboard-multi-column){display:flex;padding:var(--sky-override-tile-dashboard-multi-column-padding, var(--sky-comp-tile-dashboard-space-inset-sm-top) var(--sky-comp-tile-dashboard-space-inset-sm-right) var(--sky-comp-tile-dashboard-space-inset-sm-bottom) var(--sky-comp-tile-dashboard-space-inset-sm-left));margin-bottom:0}: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-modern .sky-layout-host-blocks){padding:0;margin-left:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-left) * -1);margin-right:calc(var(--sky-comp-tile-dashboard-column-space-inset-sm-right) * -1)}\n"] }]
|
|
1046
1046
|
}], ctorParameters: () => [{ type: SkyTileDashboardService }, { type: i2.SkyLibResourcesService, decorators: [{
|
|
1047
1047
|
type: Optional
|
|
1048
1048
|
}] }], propDecorators: { config: [{
|