@skyux/pages 11.12.0 → 11.13.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/documentation.json +358 -273
- package/esm2022/lib/modules/action-hub/action-hub-buttons.component.mjs +2 -2
- package/esm2022/lib/modules/action-hub/action-hub.component.mjs +13 -10
- package/esm2022/lib/modules/action-hub/action-hub.module.mjs +7 -3
- package/esm2022/lib/modules/needs-attention/needs-attention.component.mjs +2 -2
- package/esm2022/lib/modules/page-header/page-header-avatar.component.mjs +2 -2
- package/esm2022/lib/modules/page-header/page-header.component.mjs +2 -2
- package/fesm2022/skyux-pages.mjs +179 -176
- package/fesm2022/skyux-pages.mjs.map +1 -1
- package/lib/modules/action-hub/action-hub.module.d.ts +2 -1
- package/package.json +9 -9
package/fesm2022/skyux-pages.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation,
|
|
2
|
+
import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ElementRef, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i3 from '@skyux/indicators';
|
|
4
4
|
import { SkyWaitModule } from '@skyux/indicators';
|
|
5
5
|
import * as i3$1 from '@skyux/layout';
|
|
@@ -419,11 +419,11 @@ class SkyNeedsAttentionComponent {
|
|
|
419
419
|
#items;
|
|
420
420
|
#logService = inject(SkyLogService);
|
|
421
421
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
422
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">\n {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n </h2>\n </sky-box-header>\n <sky-box-content>\n @if (items?.length === 0) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul>\n @for (item of items; track item; let isLast = $last) {\n <li\n class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n [ngClass]=\"{\n 'sky-border-bottom-row': !isLast\n }\"\n >\n @if (\n (item | linkAs: 'skyAppLink') && item.permalink?.route;\n as permalinkRoute\n ) {\n <a\n class=\"sky-needs-attention-item\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item.permalink) {\n @if (item | linkAs: 'skyHref') {\n <a\n class=\"sky-needs-attention-item\"\n [skyHref]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item | linkAs: 'href') {\n <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n }\n } @else if (item | linkAs: 'button') {\n <button\n class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"item?.click({ item })\"\n >\n {{ item.title }} {{ item.message }}\n </button>\n }\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"caret-right\"\n />\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"chevron-right\"\n />\n </li>\n }\n </ul>\n }\n </sky-box-content>\n</sky-box>\n", styles: ["
|
|
422
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: { items: "items" }, ngImport: i0, template: "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">\n {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n </h2>\n </sky-box-header>\n <sky-box-content>\n @if (items?.length === 0) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul>\n @for (item of items; track item; let isLast = $last) {\n <li\n class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n [ngClass]=\"{\n 'sky-border-bottom-row': !isLast\n }\"\n >\n @if (\n (item | linkAs: 'skyAppLink') && item.permalink?.route;\n as permalinkRoute\n ) {\n <a\n class=\"sky-needs-attention-item\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item.permalink) {\n @if (item | linkAs: 'skyHref') {\n <a\n class=\"sky-needs-attention-item\"\n [skyHref]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item | linkAs: 'href') {\n <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n }\n } @else if (item | linkAs: 'button') {\n <button\n class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"item?.click({ item })\"\n >\n {{ item.title }} {{ item.message }}\n </button>\n }\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"caret-right\"\n />\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"chevron-right\"\n />\n </li>\n }\n </ul>\n }\n </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3$1.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3$1.λ42, selector: "sky-box-header" }, { kind: "component", type: i3$1.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i5.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
|
|
423
423
|
}
|
|
424
424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
|
|
425
425
|
type: Component,
|
|
426
|
-
args: [{ selector: 'sky-needs-attention', template: "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">\n {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n </h2>\n </sky-box-header>\n <sky-box-content>\n @if (items?.length === 0) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul>\n @for (item of items; track item; let isLast = $last) {\n <li\n class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n [ngClass]=\"{\n 'sky-border-bottom-row': !isLast\n }\"\n >\n @if (\n (item | linkAs: 'skyAppLink') && item.permalink?.route;\n as permalinkRoute\n ) {\n <a\n class=\"sky-needs-attention-item\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item.permalink) {\n @if (item | linkAs: 'skyHref') {\n <a\n class=\"sky-needs-attention-item\"\n [skyHref]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item | linkAs: 'href') {\n <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n }\n } @else if (item | linkAs: 'button') {\n <button\n class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"item?.click({ item })\"\n >\n {{ item.title }} {{ item.message }}\n </button>\n }\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"caret-right\"\n />\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"chevron-right\"\n />\n </li>\n }\n </ul>\n }\n </sky-box-content>\n</sky-box>\n", styles: ["
|
|
426
|
+
args: [{ selector: 'sky-needs-attention', template: "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">\n {{ 'sky_action_hub_needs_attention' | skyLibResources }}\n </h2>\n </sky-box-header>\n <sky-box-content>\n @if (items?.length === 0) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul>\n @for (item of items; track item; let isLast = $last) {\n <li\n class=\"sky-needs-attention-item-wrapper sky-font-emphasized\"\n [ngClass]=\"{\n 'sky-border-bottom-row': !isLast\n }\"\n >\n @if (\n (item | linkAs: 'skyAppLink') && item.permalink?.route;\n as permalinkRoute\n ) {\n <a\n class=\"sky-needs-attention-item\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item.permalink) {\n @if (item | linkAs: 'skyHref') {\n <a\n class=\"sky-needs-attention-item\"\n [skyHref]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n } @else if (item | linkAs: 'href') {\n <a class=\"sky-needs-attention-item\" [href]=\"item.permalink.url\"\n >{{ item.title }} {{ item.message }}</a\n >\n }\n } @else if (item | linkAs: 'button') {\n <button\n class=\"sky-needs-attention-item sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"item?.click({ item })\"\n >\n {{ item.title }} {{ item.message }}\n </button>\n }\n <sky-icon\n *skyThemeIf=\"'default'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"caret-right\"\n />\n <sky-icon\n *skyThemeIf=\"'modern'\"\n class=\"sky-needs-attention-item-icon\"\n icon=\"chevron-right\"\n />\n </li>\n }\n </ul>\n }\n </sky-box-content>\n</sky-box>\n", styles: [":host{display:block;margin-bottom:var(--sky-margin-stacked-xl)}h2{margin:0}ul{list-style:none;padding:0;margin:0}ul li{margin:0}.sky-needs-attention-item-wrapper{position:relative;display:grid;grid-template-columns:5fr 1fr;grid-template-areas:\"action icon\"}.sky-needs-attention-item-wrapper:not(:first-child){padding-top:var(--sky-margin-stacked-lg)}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-margin-stacked-lg)}.sky-needs-attention-item{grid-area:action;text-align:left;width:100%;white-space:normal}.sky-needs-attention-item-icon{grid-area:icon;text-align:right;color:#686c73}.sky-needs-attention-item:focus-visible{outline:none}.sky-needs-attention-item:focus-visible:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}.sky-needs-attention-item:before{content:\" \";position:absolute;inset:0;cursor:pointer}button.sky-needs-attention-item.sky-border-bottom-row{border-bottom:1px dotted #cdcfd2}\n"] }]
|
|
427
427
|
}], propDecorators: { items: [{
|
|
428
428
|
type: Input
|
|
429
429
|
}] } });
|
|
@@ -519,11 +519,11 @@ class SkyPageHeaderAvatarComponent {
|
|
|
519
519
|
this.#mediaQuerySubscription.unsubscribe();
|
|
520
520
|
}
|
|
521
521
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageHeaderAvatarComponent, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], ngImport: i0, template: "<ng-content />\n", styles: ["
|
|
522
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyPageHeaderAvatarComponent, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }); }
|
|
523
523
|
}
|
|
524
524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
|
|
525
525
|
type: Component,
|
|
526
|
-
args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], template: "<ng-content />\n", styles: ["
|
|
526
|
+
args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){padding-top:5px;margin-right:var(--sky-margin-inline-sm)}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-margin-inline-lg)}}:host-context(.sky-responsive-container-sm):not(:empty),:host-context(.sky-responsive-container-md):not(:empty),:host-context(.sky-responsive-container-lg):not(:empty){margin-right:var(--sky-margin-inline-lg)}\n"] }]
|
|
527
527
|
}], ctorParameters: () => [] });
|
|
528
528
|
|
|
529
529
|
/**
|
|
@@ -544,11 +544,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
544
544
|
*/
|
|
545
545
|
class SkyPageHeaderComponent {
|
|
546
546
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\" />\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\" />\n <div class=\"sky-page-header-text-and-content\">\n <h1 class=\"sky-page-header-text\">\n @if (parentLink) {\n <span class=\"sky-page-header-parent-link-wrapper\">\n @if (parentLink.permalink?.route; as permalinkRoute) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ parentLink.label }}</a\n >\n } @else if (parentLink.permalink?.url) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyHref]=\"parentLink.permalink.url\"\n >{{ parentLink.label }}</a\n >\n }\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" />\n </span>\n </span>\n <wbr />\n }\n <span class=\"sky-page-header-page-title sky-font-heading-1\">\n {{ pageTitle }}\n </span>\n </h1>\n <div class=\"sky-page-header-content\">\n <ng-content select=\"sky-page-header-details\" />\n <ng-content select=\"sky-page-header-actions\" />\n </div>\n </div>\n </div>\n</div>\n", styles: ["
|
|
547
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, ngImport: i0, template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\" />\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\" />\n <div class=\"sky-page-header-text-and-content\">\n <h1 class=\"sky-page-header-text\">\n @if (parentLink) {\n <span class=\"sky-page-header-parent-link-wrapper\">\n @if (parentLink.permalink?.route; as permalinkRoute) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ parentLink.label }}</a\n >\n } @else if (parentLink.permalink?.url) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyHref]=\"parentLink.permalink.url\"\n >{{ parentLink.label }}</a\n >\n }\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" />\n </span>\n </span>\n <wbr />\n }\n <span class=\"sky-page-header-page-title sky-font-heading-1\">\n {{ pageTitle }}\n </span>\n </h1>\n <div class=\"sky-page-header-content\">\n <ng-content select=\"sky-page-header-details\" />\n <ng-content select=\"sky-page-header-actions\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
|
|
548
548
|
}
|
|
549
549
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
|
|
550
550
|
type: Component,
|
|
551
|
-
args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\" />\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\" />\n <div class=\"sky-page-header-text-and-content\">\n <h1 class=\"sky-page-header-text\">\n @if (parentLink) {\n <span class=\"sky-page-header-parent-link-wrapper\">\n @if (parentLink.permalink?.route; as permalinkRoute) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ parentLink.label }}</a\n >\n } @else if (parentLink.permalink?.url) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyHref]=\"parentLink.permalink.url\"\n >{{ parentLink.label }}</a\n >\n }\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" />\n </span>\n </span>\n <wbr />\n }\n <span class=\"sky-page-header-page-title sky-font-heading-1\">\n {{ pageTitle }}\n </span>\n </h1>\n <div class=\"sky-page-header-content\">\n <ng-content select=\"sky-page-header-details\" />\n <ng-content select=\"sky-page-header-actions\" />\n </div>\n </div>\n </div>\n</div>\n", styles: ["
|
|
551
|
+
args: [{ selector: 'sky-page-header', template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\" />\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\" />\n <div class=\"sky-page-header-text-and-content\">\n <h1 class=\"sky-page-header-text\">\n @if (parentLink) {\n <span class=\"sky-page-header-parent-link-wrapper\">\n @if (parentLink.permalink?.route; as permalinkRoute) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"\n permalinkRoute.extras?.queryParamsHandling\n \"\n [fragment]=\"permalinkRoute.extras?.fragment\"\n [preserveFragment]=\"permalinkRoute.extras?.preserveFragment\"\n [skipLocationChange]=\"permalinkRoute.extras?.skipLocationChange\"\n [replaceUrl]=\"permalinkRoute.extras?.replaceUrl\"\n [state]=\"permalinkRoute.extras?.state\"\n >{{ parentLink.label }}</a\n >\n } @else if (parentLink.permalink?.url) {\n <a\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n [skyHref]=\"parentLink.permalink.url\"\n >{{ parentLink.label }}</a\n >\n }\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" />\n </span>\n </span>\n <wbr />\n }\n <span class=\"sky-page-header-page-title sky-font-heading-1\">\n {{ pageTitle }}\n </span>\n </h1>\n <div class=\"sky-page-header-content\">\n <ng-content select=\"sky-page-header-details\" />\n <ng-content select=\"sky-page-header-actions\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{flex-grow:var(--sky-layout-host-header-flex-grow, 0);display:block}.sky-page-header{margin:var(--sky-layout-host-header-spacing, 0)}.sky-page-header-info{display:flex}.sky-page-header-text{margin:0}.sky-page-header-page-title,.sky-page-header-parent-link-wrapper{display:inline-block;block-size:fit-content}.sky-page-header-parent-link{color:#0974a1}.sky-page-header-chevron{font-size:16px;margin:0 10px}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}:host-context(.sky-theme-modern) .sky-page-header-parent-link{color:#1870b8}.sky-theme-modern .sky-page-header-parent-link{color:#1870b8}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-page-header-parent-link{color:#009cd1}.sky-theme-modern.sky-theme-mode-dark .sky-page-header-parent-link{color:#009cd1}\n"] }]
|
|
552
552
|
}], propDecorators: { parentLink: [{
|
|
553
553
|
type: Input
|
|
554
554
|
}], pageTitle: [{
|
|
@@ -603,175 +603,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
603
603
|
}]
|
|
604
604
|
}] });
|
|
605
605
|
|
|
606
|
-
/**
|
|
607
|
-
* Displays buttons after the page title.
|
|
608
|
-
*
|
|
609
|
-
* Example:
|
|
610
|
-
*
|
|
611
|
-
* ```html
|
|
612
|
-
* <a class="sky-btn sky-btn-default" href="path/to/new">New</a>
|
|
613
|
-
* ```
|
|
614
|
-
*/
|
|
615
|
-
class SkyActionHubButtonsComponent {
|
|
616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
617
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-xl)}\n"] }); }
|
|
618
|
-
}
|
|
619
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
|
|
620
|
-
type: Component,
|
|
621
|
-
args: [{ selector: 'sky-action-hub-buttons', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-xl)}\n"] }]
|
|
622
|
-
}] });
|
|
623
|
-
|
|
624
|
-
/**
|
|
625
|
-
* Displays additional content after the action items.
|
|
626
|
-
*/
|
|
627
|
-
class SkyActionHubContentComponent {
|
|
628
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n" }); }
|
|
630
|
-
}
|
|
631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
|
|
632
|
-
type: Component,
|
|
633
|
-
args: [{ selector: 'sky-action-hub-content', template: "<ng-content />\n" }]
|
|
634
|
-
}] });
|
|
635
|
-
|
|
636
|
-
class SkyActionHubRelatedLinksSortPipe {
|
|
637
|
-
transform(relatedLinks) {
|
|
638
|
-
if (relatedLinks === 'loading') {
|
|
639
|
-
return 'loading';
|
|
640
|
-
}
|
|
641
|
-
if (!relatedLinks || relatedLinks.length === 0) {
|
|
642
|
-
return [];
|
|
643
|
-
}
|
|
644
|
-
return relatedLinks.slice(0).sort((a, b) => {
|
|
645
|
-
const aLabel = a.label.trim().toUpperCase();
|
|
646
|
-
const bLabel = b.label.trim().toUpperCase();
|
|
647
|
-
if (aLabel === bLabel) {
|
|
648
|
-
return 0;
|
|
649
|
-
}
|
|
650
|
-
return aLabel < bLabel ? -1 : 1;
|
|
651
|
-
});
|
|
652
|
-
}
|
|
653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
654
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }); }
|
|
655
|
-
}
|
|
656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, decorators: [{
|
|
657
|
-
type: Pipe,
|
|
658
|
-
args: [{
|
|
659
|
-
name: 'skyActionHubRelatedLinksSort',
|
|
660
|
-
}]
|
|
661
|
-
}] });
|
|
662
|
-
|
|
663
|
-
/**
|
|
664
|
-
* Creates an action hub to direct user attention to important
|
|
665
|
-
* actions and provide quick access to common tasks.
|
|
666
|
-
*/
|
|
667
|
-
class SkyActionHubComponent {
|
|
668
|
-
constructor() {
|
|
669
|
-
/**
|
|
670
|
-
* The list of recently accessed links, or `"loading"` to display a wait indicator.
|
|
671
|
-
*/
|
|
672
|
-
this.recentLinks = [];
|
|
673
|
-
/**
|
|
674
|
-
* The list of related links, or `"loading"` to display a wait indicator.
|
|
675
|
-
*/
|
|
676
|
-
this.relatedLinks = [];
|
|
677
|
-
/**
|
|
678
|
-
* The list of settings with modal parameters, or `"loading"` to display a wait indicator.
|
|
679
|
-
*/
|
|
680
|
-
this.settingsLinks = [];
|
|
681
|
-
/**
|
|
682
|
-
* The page title.
|
|
683
|
-
* @default ""
|
|
684
|
-
*/
|
|
685
|
-
this.title = '';
|
|
686
|
-
this.needsAttentionArray = [];
|
|
687
|
-
}
|
|
688
|
-
/**
|
|
689
|
-
* The list of actions that users must perform based on business requirements or best practices, or `"loading"` to display a wait indicator.
|
|
690
|
-
*/
|
|
691
|
-
set needsAttention(value) {
|
|
692
|
-
this.#_needsAttention = value;
|
|
693
|
-
this.needsAttentionArray = Array.isArray(value) ? value : [];
|
|
694
|
-
}
|
|
695
|
-
get needsAttention() {
|
|
696
|
-
return this.#_needsAttention;
|
|
697
|
-
}
|
|
698
|
-
#_needsAttention;
|
|
699
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
700
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-fluid-grid [disableMargin]=\"true\">\n <sky-row>\n <sky-column>\n <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-buttons\" />\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n @if (needsAttention !== 'loading') {\n <sky-needs-attention [items]=\"needsAttentionArray\" />\n }\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-content\" />\n </div>\n </sky-column>\n <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n <sky-link-list\n [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n />\n <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n <sky-modal-link-list\n [links]=\"settingsLinks\"\n [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n />\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"], dependencies: [{ kind: "component", type: i3$1.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i3$1.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i3$1.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: SkyLinkListRecentlyAccessedComponent, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
701
|
-
}
|
|
702
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, decorators: [{
|
|
703
|
-
type: Component,
|
|
704
|
-
args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-fluid-grid [disableMargin]=\"true\">\n <sky-row>\n <sky-column>\n <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\" />\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenLarge]=\"9\" [screenXSmall]=\"12\">\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-buttons\" />\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n @if (needsAttention !== 'loading') {\n <sky-needs-attention [items]=\"needsAttentionArray\" />\n }\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-content\" />\n </div>\n </sky-column>\n <sky-column [screenLarge]=\"3\" [screenXSmall]=\"12\">\n <sky-link-list\n [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n />\n <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n <sky-modal-link-list\n [links]=\"settingsLinks\"\n [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n />\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: ["body:not(.sky-theme-modern){--sky-override-required-color: var(--sky-highlight-color-danger);--sky-override-required-space: 5px}:host{display:block;margin:var(--sky-padding-even-xl)}[aria-busy=true]{display:block;min-height:60px;margin-bottom:var(--sky-margin-stacked-xl)}sky-page-header{margin:0 0 var(--sky-margin-stacked-lg) 0}.sky-margin-stacked-xl:empty{margin-bottom:0}\n"] }]
|
|
705
|
-
}], propDecorators: { needsAttention: [{
|
|
706
|
-
type: Input
|
|
707
|
-
}], parentLink: [{
|
|
708
|
-
type: Input
|
|
709
|
-
}], recentLinks: [{
|
|
710
|
-
type: Input
|
|
711
|
-
}], relatedLinks: [{
|
|
712
|
-
type: Input
|
|
713
|
-
}], settingsLinks: [{
|
|
714
|
-
type: Input
|
|
715
|
-
}], title: [{
|
|
716
|
-
type: Input
|
|
717
|
-
}] } });
|
|
718
|
-
|
|
719
|
-
class SkyActionHubModule {
|
|
720
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
721
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
|
|
722
|
-
SkyActionHubComponent,
|
|
723
|
-
SkyActionHubContentComponent,
|
|
724
|
-
SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
|
|
725
|
-
SkyBoxModule,
|
|
726
|
-
SkyFluidGridModule,
|
|
727
|
-
SkyLinkListModule,
|
|
728
|
-
SkyModalLinkListModule,
|
|
729
|
-
SkyNeedsAttentionModule,
|
|
730
|
-
SkyPageHeaderModule,
|
|
731
|
-
SkyPagesResourcesModule,
|
|
732
|
-
SkyThemeModule,
|
|
733
|
-
SkyWaitModule], exports: [SkyActionHubButtonsComponent,
|
|
734
|
-
SkyActionHubComponent,
|
|
735
|
-
SkyActionHubContentComponent] }); }
|
|
736
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
|
|
737
|
-
SkyFluidGridModule,
|
|
738
|
-
SkyLinkListModule,
|
|
739
|
-
SkyModalLinkListModule,
|
|
740
|
-
SkyNeedsAttentionModule,
|
|
741
|
-
SkyPageHeaderModule,
|
|
742
|
-
SkyPagesResourcesModule,
|
|
743
|
-
SkyThemeModule,
|
|
744
|
-
SkyWaitModule] }); }
|
|
745
|
-
}
|
|
746
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, decorators: [{
|
|
747
|
-
type: NgModule,
|
|
748
|
-
args: [{
|
|
749
|
-
imports: [
|
|
750
|
-
SkyActionHubRecentLinksResolvePipe,
|
|
751
|
-
SkyBoxModule,
|
|
752
|
-
SkyFluidGridModule,
|
|
753
|
-
SkyLinkListModule,
|
|
754
|
-
SkyModalLinkListModule,
|
|
755
|
-
SkyNeedsAttentionModule,
|
|
756
|
-
SkyPageHeaderModule,
|
|
757
|
-
SkyPagesResourcesModule,
|
|
758
|
-
SkyThemeModule,
|
|
759
|
-
SkyWaitModule,
|
|
760
|
-
],
|
|
761
|
-
declarations: [
|
|
762
|
-
SkyActionHubButtonsComponent,
|
|
763
|
-
SkyActionHubComponent,
|
|
764
|
-
SkyActionHubContentComponent,
|
|
765
|
-
SkyActionHubRelatedLinksSortPipe,
|
|
766
|
-
],
|
|
767
|
-
exports: [
|
|
768
|
-
SkyActionHubButtonsComponent,
|
|
769
|
-
SkyActionHubComponent,
|
|
770
|
-
SkyActionHubContentComponent,
|
|
771
|
-
],
|
|
772
|
-
}]
|
|
773
|
-
}] });
|
|
774
|
-
|
|
775
606
|
/**
|
|
776
607
|
* Displays page contents using spacing that corresponds to the parent
|
|
777
608
|
* page's layout.
|
|
@@ -1007,6 +838,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
|
|
|
1007
838
|
}]
|
|
1008
839
|
}] });
|
|
1009
840
|
|
|
841
|
+
/**
|
|
842
|
+
* Displays buttons after the page title.
|
|
843
|
+
*
|
|
844
|
+
* Example:
|
|
845
|
+
*
|
|
846
|
+
* ```html
|
|
847
|
+
* <a class="sky-btn sky-btn-default" href="path/to/new">New</a>
|
|
848
|
+
* ```
|
|
849
|
+
*/
|
|
850
|
+
class SkyActionHubButtonsComponent {
|
|
851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubButtonsComponent, selector: "sky-action-hub-buttons", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}\n"] }); }
|
|
853
|
+
}
|
|
854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubButtonsComponent, decorators: [{
|
|
855
|
+
type: Component,
|
|
856
|
+
args: [{ selector: 'sky-action-hub-buttons', template: "<ng-content />\n", styles: [":host{display:block}\n"] }]
|
|
857
|
+
}] });
|
|
858
|
+
|
|
859
|
+
/**
|
|
860
|
+
* Displays additional content after the action items.
|
|
861
|
+
*/
|
|
862
|
+
class SkyActionHubContentComponent {
|
|
863
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
864
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SkyActionHubContentComponent, selector: "sky-action-hub-content", ngImport: i0, template: "<ng-content />\n" }); }
|
|
865
|
+
}
|
|
866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubContentComponent, decorators: [{
|
|
867
|
+
type: Component,
|
|
868
|
+
args: [{ selector: 'sky-action-hub-content', template: "<ng-content />\n" }]
|
|
869
|
+
}] });
|
|
870
|
+
|
|
871
|
+
class SkyActionHubRelatedLinksSortPipe {
|
|
872
|
+
transform(relatedLinks) {
|
|
873
|
+
if (relatedLinks === 'loading') {
|
|
874
|
+
return 'loading';
|
|
875
|
+
}
|
|
876
|
+
if (!relatedLinks || relatedLinks.length === 0) {
|
|
877
|
+
return [];
|
|
878
|
+
}
|
|
879
|
+
return relatedLinks.slice(0).sort((a, b) => {
|
|
880
|
+
const aLabel = a.label.trim().toUpperCase();
|
|
881
|
+
const bLabel = b.label.trim().toUpperCase();
|
|
882
|
+
if (aLabel === bLabel) {
|
|
883
|
+
return 0;
|
|
884
|
+
}
|
|
885
|
+
return aLabel < bLabel ? -1 : 1;
|
|
886
|
+
});
|
|
887
|
+
}
|
|
888
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
889
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }); }
|
|
890
|
+
}
|
|
891
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubRelatedLinksSortPipe, decorators: [{
|
|
892
|
+
type: Pipe,
|
|
893
|
+
args: [{
|
|
894
|
+
name: 'skyActionHubRelatedLinksSort',
|
|
895
|
+
}]
|
|
896
|
+
}] });
|
|
897
|
+
|
|
898
|
+
/**
|
|
899
|
+
* Creates an action hub to direct user attention to important
|
|
900
|
+
* actions and provide quick access to common tasks.
|
|
901
|
+
*/
|
|
902
|
+
class SkyActionHubComponent {
|
|
903
|
+
constructor() {
|
|
904
|
+
/**
|
|
905
|
+
* The list of recently accessed links, or `"loading"` to display a wait indicator.
|
|
906
|
+
*/
|
|
907
|
+
this.recentLinks = [];
|
|
908
|
+
/**
|
|
909
|
+
* The list of related links, or `"loading"` to display a wait indicator.
|
|
910
|
+
*/
|
|
911
|
+
this.relatedLinks = [];
|
|
912
|
+
/**
|
|
913
|
+
* The list of settings with modal parameters, or `"loading"` to display a wait indicator.
|
|
914
|
+
*/
|
|
915
|
+
this.settingsLinks = [];
|
|
916
|
+
/**
|
|
917
|
+
* The page title.
|
|
918
|
+
* @default ""
|
|
919
|
+
*/
|
|
920
|
+
this.title = '';
|
|
921
|
+
this.needsAttentionArray = [];
|
|
922
|
+
}
|
|
923
|
+
/**
|
|
924
|
+
* The list of actions that users must perform based on business requirements or best practices, or `"loading"` to display a wait indicator.
|
|
925
|
+
*/
|
|
926
|
+
set needsAttention(value) {
|
|
927
|
+
this.#_needsAttention = value;
|
|
928
|
+
this.needsAttentionArray = Array.isArray(value) ? value : [];
|
|
929
|
+
}
|
|
930
|
+
get needsAttention() {
|
|
931
|
+
return this.#_needsAttention;
|
|
932
|
+
}
|
|
933
|
+
#_needsAttention;
|
|
934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyActionHubComponent, selector: "sky-action-hub", inputs: { needsAttention: "needsAttention", parentLink: "parentLink", recentLinks: "recentLinks", relatedLinks: "relatedLinks", settingsLinks: "settingsLinks", title: "title" }, ngImport: i0, template: "<sky-page layout=\"blocks\">\n <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\">\n <sky-page-header-actions>\n <div class=\"sky-margin-stacked-sm\">\n <ng-content select=\"sky-action-hub-buttons\" />\n </div>\n </sky-page-header-actions>\n </sky-page-header>\n <sky-page-content>\n <div class=\"sky-margin-stacked-xl\">\n <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n @if (needsAttention !== 'loading') {\n <sky-needs-attention [items]=\"needsAttentionArray\" />\n }\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-content\" />\n </div>\n </sky-page-content>\n <sky-page-links>\n <sky-link-list\n [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n />\n <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n <sky-modal-link-list\n [links]=\"settingsLinks\"\n [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n />\n </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "component", type: SkyLinkListRecentlyAccessedComponent, selector: "sky-link-list-recently-accessed", inputs: ["recentLinks"] }, { kind: "component", type: SkyModalLinkListComponent, selector: "sky-modal-link-list", inputs: ["links", "title"] }, { kind: "component", type: SkyNeedsAttentionComponent, selector: "sky-needs-attention", inputs: ["items"] }, { kind: "component", type: SkyPageHeaderActionsComponent, selector: "sky-page-header-actions" }, { kind: "component", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: ["parentLink", "pageTitle"] }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyPageComponent, selector: "sky-page", inputs: ["layout", "helpKey"] }, { kind: "component", type: SkyPageContentComponent, selector: "sky-page-content" }, { kind: "component", type: SkyPageLinksComponent, selector: "sky-page-links" }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
936
|
+
}
|
|
937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubComponent, decorators: [{
|
|
938
|
+
type: Component,
|
|
939
|
+
args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-page layout=\"blocks\">\n <sky-page-header [pageTitle]=\"title\" [parentLink]=\"parentLink\">\n <sky-page-header-actions>\n <div class=\"sky-margin-stacked-sm\">\n <ng-content select=\"sky-action-hub-buttons\" />\n </div>\n </sky-page-header-actions>\n </sky-page-header>\n <sky-page-content>\n <div class=\"sky-margin-stacked-xl\">\n <sky-wait [isWaiting]=\"needsAttention === 'loading'\" />\n @if (needsAttention !== 'loading') {\n <sky-needs-attention [items]=\"needsAttentionArray\" />\n }\n </div>\n\n <div class=\"sky-margin-stacked-xl\">\n <ng-content select=\"sky-action-hub-content\" />\n </div>\n </sky-page-content>\n <sky-page-links>\n <sky-link-list\n [links]=\"relatedLinks | skyActionHubRelatedLinksSort\"\n [headingText]=\"'sky_action_hub_related_links' | skyLibResources\"\n />\n <sky-link-list-recently-accessed [recentLinks]=\"recentLinks\" />\n <sky-modal-link-list\n [links]=\"settingsLinks\"\n [title]=\"'sky_action_hub_settings_links' | skyLibResources\"\n />\n </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"] }]
|
|
940
|
+
}], propDecorators: { needsAttention: [{
|
|
941
|
+
type: Input
|
|
942
|
+
}], parentLink: [{
|
|
943
|
+
type: Input
|
|
944
|
+
}], recentLinks: [{
|
|
945
|
+
type: Input
|
|
946
|
+
}], relatedLinks: [{
|
|
947
|
+
type: Input
|
|
948
|
+
}], settingsLinks: [{
|
|
949
|
+
type: Input
|
|
950
|
+
}], title: [{
|
|
951
|
+
type: Input
|
|
952
|
+
}] } });
|
|
953
|
+
|
|
954
|
+
class SkyActionHubModule {
|
|
955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
956
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, declarations: [SkyActionHubButtonsComponent,
|
|
957
|
+
SkyActionHubComponent,
|
|
958
|
+
SkyActionHubContentComponent,
|
|
959
|
+
SkyActionHubRelatedLinksSortPipe], imports: [SkyActionHubRecentLinksResolvePipe,
|
|
960
|
+
SkyBoxModule,
|
|
961
|
+
SkyFluidGridModule,
|
|
962
|
+
SkyLinkListModule,
|
|
963
|
+
SkyModalLinkListModule,
|
|
964
|
+
SkyNeedsAttentionModule,
|
|
965
|
+
SkyPageHeaderModule,
|
|
966
|
+
SkyPagesResourcesModule,
|
|
967
|
+
SkyThemeModule,
|
|
968
|
+
SkyWaitModule,
|
|
969
|
+
SkyPageModule], exports: [SkyActionHubButtonsComponent,
|
|
970
|
+
SkyActionHubComponent,
|
|
971
|
+
SkyActionHubContentComponent] }); }
|
|
972
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, imports: [SkyBoxModule,
|
|
973
|
+
SkyFluidGridModule,
|
|
974
|
+
SkyLinkListModule,
|
|
975
|
+
SkyModalLinkListModule,
|
|
976
|
+
SkyNeedsAttentionModule,
|
|
977
|
+
SkyPageHeaderModule,
|
|
978
|
+
SkyPagesResourcesModule,
|
|
979
|
+
SkyThemeModule,
|
|
980
|
+
SkyWaitModule,
|
|
981
|
+
SkyPageModule] }); }
|
|
982
|
+
}
|
|
983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyActionHubModule, decorators: [{
|
|
984
|
+
type: NgModule,
|
|
985
|
+
args: [{
|
|
986
|
+
imports: [
|
|
987
|
+
SkyActionHubRecentLinksResolvePipe,
|
|
988
|
+
SkyBoxModule,
|
|
989
|
+
SkyFluidGridModule,
|
|
990
|
+
SkyLinkListModule,
|
|
991
|
+
SkyModalLinkListModule,
|
|
992
|
+
SkyNeedsAttentionModule,
|
|
993
|
+
SkyPageHeaderModule,
|
|
994
|
+
SkyPagesResourcesModule,
|
|
995
|
+
SkyThemeModule,
|
|
996
|
+
SkyWaitModule,
|
|
997
|
+
SkyPageModule,
|
|
998
|
+
],
|
|
999
|
+
declarations: [
|
|
1000
|
+
SkyActionHubButtonsComponent,
|
|
1001
|
+
SkyActionHubComponent,
|
|
1002
|
+
SkyActionHubContentComponent,
|
|
1003
|
+
SkyActionHubRelatedLinksSortPipe,
|
|
1004
|
+
],
|
|
1005
|
+
exports: [
|
|
1006
|
+
SkyActionHubButtonsComponent,
|
|
1007
|
+
SkyActionHubComponent,
|
|
1008
|
+
SkyActionHubContentComponent,
|
|
1009
|
+
],
|
|
1010
|
+
}]
|
|
1011
|
+
}] });
|
|
1012
|
+
|
|
1010
1013
|
/**
|
|
1011
1014
|
* Generated bundle index. Do not edit.
|
|
1012
1015
|
*/
|