@skyux/pages 12.0.0-alpha.2 → 12.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-pages.mjs
CHANGED
|
@@ -315,20 +315,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
315
315
|
}]
|
|
316
316
|
}] });
|
|
317
317
|
|
|
318
|
+
/**
|
|
319
|
+
* A component that displays a list of links such as within a `<sky-page-links>` component.
|
|
320
|
+
*/
|
|
318
321
|
class SkyModalLinkListComponent {
|
|
319
322
|
constructor() {
|
|
320
|
-
|
|
323
|
+
/**
|
|
324
|
+
* Option to pass links as an array of `SkyPageModalLink` objects or `'loading'` to display a loading indicator.
|
|
325
|
+
*/
|
|
326
|
+
this.links = input();
|
|
327
|
+
/**
|
|
328
|
+
* The text to display as the list's heading.
|
|
329
|
+
*/
|
|
330
|
+
this.headingText = input();
|
|
331
|
+
this.linksArray = computed(() => {
|
|
332
|
+
const links = this.links();
|
|
333
|
+
if (Array.isArray(links)) {
|
|
334
|
+
return links;
|
|
335
|
+
}
|
|
336
|
+
else {
|
|
337
|
+
return [];
|
|
338
|
+
}
|
|
339
|
+
});
|
|
321
340
|
this.#logger = inject(SkyLogService, { optional: true });
|
|
322
341
|
this.#modalSvc = inject(SkyModalService);
|
|
323
342
|
}
|
|
324
|
-
set links(value) {
|
|
325
|
-
this.#_links = value;
|
|
326
|
-
this.linksArray = Array.isArray(value) ? value : [];
|
|
327
|
-
}
|
|
328
|
-
get links() {
|
|
329
|
-
return this.#_links;
|
|
330
|
-
}
|
|
331
|
-
#_links;
|
|
332
343
|
#logger;
|
|
333
344
|
#modalSvc;
|
|
334
345
|
openModal(link) {
|
|
@@ -345,16 +356,12 @@ class SkyModalLinkListComponent {
|
|
|
345
356
|
}
|
|
346
357
|
}
|
|
347
358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyModalLinkListComponent, isStandalone: false, selector: "sky-modal-link-list", inputs: { links: "links",
|
|
359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyModalLinkListComponent, isStandalone: false, selector: "sky-modal-link-list", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (linksArray().length > 0) {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n <ul class=\"sky-link-list\">\n @for (link of linksArray(); track link) {\n <li>\n @if (link | linkAs: 'skyHref') {\n <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink && link.permalink.route) {\n <a\n class=\"sky-link-list-item\"\n [skyAppLink]=\"link.permalink.route.commands\"\n [queryParams]=\"link.permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"\n link.permalink.route.extras?.queryParamsHandling\n \"\n [fragment]=\"link.permalink.route.extras?.fragment\"\n [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n [skipLocationChange]=\"\n link.permalink.route.extras?.skipLocationChange\n \"\n [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n [state]=\"link.permalink.route.extras?.state\"\n >\n {{ link.label }}\n </a>\n } @else if (link.modal) {\n <button\n class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n type=\"button\"\n (click)=\"openModal(link)\"\n >\n {{ link.label }}\n </button>\n }\n </li>\n }\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">\n {{ headingText() }}\n </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
|
|
349
360
|
}
|
|
350
361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
|
|
351
362
|
type: Component,
|
|
352
|
-
args: [{ selector: 'sky-modal-link-list', standalone: false, template: "<sky-wait [isWaiting]=\"links === 'loading'\" />\n@if (links === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (linksArray.length > 0) {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n <ul class=\"sky-link-list\">\n @for (link of linksArray; track link) {\n <li>\n @if (link | linkAs: 'skyHref') {\n <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink && link.permalink.route) {\n <a\n class=\"sky-link-list-item\"\n [skyAppLink]=\"link.permalink.route.commands\"\n [queryParams]=\"link.permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"\n link.permalink.route.extras?.queryParamsHandling\n \"\n [fragment]=\"link.permalink.route.extras?.fragment\"\n [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n [skipLocationChange]=\"\n link.permalink.route.extras?.skipLocationChange\n \"\n [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n [state]=\"link.permalink.route.extras?.state\"\n >\n {{ link.label }}\n </a>\n } @else if (link.modal) {\n <button\n class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n type=\"button\"\n (click)=\"openModal(link)\"\n >\n {{ link.label }}\n </button>\n }\n </li>\n }\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">\n {{
|
|
353
|
-
}]
|
|
354
|
-
type: Input
|
|
355
|
-
}], title: [{
|
|
356
|
-
type: Input
|
|
357
|
-
}] } });
|
|
363
|
+
args: [{ selector: 'sky-modal-link-list', standalone: false, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (linksArray().length > 0) {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n <ul class=\"sky-link-list\">\n @for (link of linksArray(); track link) {\n <li>\n @if (link | linkAs: 'skyHref') {\n <a class=\"sky-link-list-item\" [skyHref]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a class=\"sky-link-list-item\" [href]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink && link.permalink.route) {\n <a\n class=\"sky-link-list-item\"\n [skyAppLink]=\"link.permalink.route.commands\"\n [queryParams]=\"link.permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"\n link.permalink.route.extras?.queryParamsHandling\n \"\n [fragment]=\"link.permalink.route.extras?.fragment\"\n [preserveFragment]=\"link.permalink.route.extras?.preserveFragment\"\n [skipLocationChange]=\"\n link.permalink.route.extras?.skipLocationChange\n \"\n [replaceUrl]=\"link.permalink.route.extras?.replaceUrl\"\n [state]=\"link.permalink.route.extras?.state\"\n >\n {{ link.label }}\n </a>\n } @else if (link.modal) {\n <button\n class=\"sky-btn sky-btn-link-inline sky-link-list-item\"\n type=\"button\"\n (click)=\"openModal(link)\"\n >\n {{ link.label }}\n </button>\n }\n </li>\n }\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">\n {{ headingText() }}\n </h2>\n</ng-template>\n", styles: ["ul.sky-link-list{list-style:none;margin:0 0 var(--sky-margin-stacked-xl) 0;padding-left:0}h2,li{margin:0 0 var(--sky-margin-stacked-sm) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
|
|
364
|
+
}] });
|
|
358
365
|
|
|
359
366
|
class SkyModalLinkListModule {
|
|
360
367
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLinkListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -404,11 +411,11 @@ class SkyNeedsAttentionComponent {
|
|
|
404
411
|
#items;
|
|
405
412
|
#logService = inject(SkyLogService);
|
|
406
413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
407
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyNeedsAttentionComponent, isStandalone: false, 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) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\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: [":
|
|
414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyNeedsAttentionComponent, isStandalone: false, 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) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\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: [".sky-needs-attention-list:not(.sky-theme-modern *){--sky-override-needs-attention-item-icon-color: #686c73;--sky-override-needs-attention-item-wrapper-padding: var( --sky-margin-stacked-lg )}:host{display:block}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-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:has(a[hidden]){display:none}.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-icon .sky-needs-attention-item-icon{color:var(--sky-override-needs-attention-item-icon-color, var(--sky-color-icon-deemphasized))}.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}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i3.λ42, selector: "sky-box-header" }, { kind: "component", type: i3.λ43, selector: "sky-box-content" }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
|
|
408
415
|
}
|
|
409
416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
|
|
410
417
|
type: Component,
|
|
411
|
-
args: [{ selector: 'sky-needs-attention', standalone: false, 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) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\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: [":
|
|
418
|
+
args: [{ selector: 'sky-needs-attention', standalone: false, 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) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\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: [".sky-needs-attention-list:not(.sky-theme-modern *){--sky-override-needs-attention-item-icon-color: #686c73;--sky-override-needs-attention-item-wrapper-padding: var( --sky-margin-stacked-lg )}:host{display:block}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-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:not(:last-child){padding-bottom:var(--sky-override-needs-attention-item-wrapper-padding, var(--sky-space-stacked-l))}.sky-needs-attention-item-wrapper:has(a[hidden]){display:none}.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-icon .sky-needs-attention-item-icon{color:var(--sky-override-needs-attention-item-icon-color, var(--sky-color-icon-deemphasized))}.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}\n"] }]
|
|
412
419
|
}], propDecorators: { items: [{
|
|
413
420
|
type: Input
|
|
414
421
|
}] } });
|
|
@@ -749,33 +756,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
749
756
|
|
|
750
757
|
class SkyPageModule {
|
|
751
758
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
752
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [
|
|
759
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent, SkyPageContentComponent], imports: [SkyLinkListModule,
|
|
760
|
+
SkyPageLinksComponent,
|
|
753
761
|
SkyLinkListComponent,
|
|
754
762
|
SkyLinkListItemComponent,
|
|
755
|
-
SkyLinkListRecentlyAccessedComponent
|
|
763
|
+
SkyLinkListRecentlyAccessedComponent,
|
|
764
|
+
SkyModalLinkListModule], exports: [SkyLinkListComponent,
|
|
756
765
|
SkyLinkListItemComponent,
|
|
757
766
|
SkyLinkListRecentlyAccessedComponent,
|
|
767
|
+
SkyLinkListModule,
|
|
768
|
+
SkyModalLinkListModule,
|
|
758
769
|
SkyPageComponent,
|
|
759
770
|
SkyPageHeaderModule,
|
|
760
771
|
SkyPageContentComponent,
|
|
761
772
|
SkyPageLinksComponent] }); }
|
|
762
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, imports: [
|
|
763
|
-
|
|
773
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, imports: [SkyLinkListModule,
|
|
774
|
+
SkyLinkListComponent,
|
|
775
|
+
SkyLinkListRecentlyAccessedComponent,
|
|
776
|
+
SkyModalLinkListModule, SkyLinkListModule,
|
|
777
|
+
SkyModalLinkListModule,
|
|
778
|
+
SkyPageHeaderModule] }); }
|
|
764
779
|
}
|
|
765
780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageModule, decorators: [{
|
|
766
781
|
type: NgModule,
|
|
767
782
|
args: [{
|
|
768
783
|
declarations: [SkyPageComponent, SkyPageContentComponent],
|
|
769
784
|
imports: [
|
|
785
|
+
SkyLinkListModule,
|
|
770
786
|
SkyPageLinksComponent,
|
|
771
787
|
SkyLinkListComponent,
|
|
772
788
|
SkyLinkListItemComponent,
|
|
773
789
|
SkyLinkListRecentlyAccessedComponent,
|
|
790
|
+
SkyModalLinkListModule,
|
|
774
791
|
],
|
|
775
792
|
exports: [
|
|
776
793
|
SkyLinkListComponent,
|
|
777
794
|
SkyLinkListItemComponent,
|
|
778
795
|
SkyLinkListRecentlyAccessedComponent,
|
|
796
|
+
SkyLinkListModule,
|
|
797
|
+
SkyModalLinkListModule,
|
|
779
798
|
SkyPageComponent,
|
|
780
799
|
SkyPageHeaderModule,
|
|
781
800
|
SkyPageContentComponent,
|
|
@@ -877,11 +896,11 @@ class SkyActionHubComponent {
|
|
|
877
896
|
}
|
|
878
897
|
#_needsAttention;
|
|
879
898
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
880
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyActionHubComponent, isStandalone: false, 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 [
|
|
899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyActionHubComponent, isStandalone: false, 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 [headingText]=\"'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", "headingText"] }, { 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: i4.λ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$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyActionHubRelatedLinksSortPipe, name: "skyActionHubRelatedLinksSort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
881
900
|
}
|
|
882
901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyActionHubComponent, decorators: [{
|
|
883
902
|
type: Component,
|
|
884
|
-
args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 [
|
|
903
|
+
args: [{ selector: 'sky-action-hub', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 [headingText]=\"'sky_action_hub_settings_links' | skyLibResources\"\n />\n </sky-page-links>\n</sky-page>\n", styles: [":host{display:block}\n"] }]
|
|
885
904
|
}], propDecorators: { needsAttention: [{
|
|
886
905
|
type: Input
|
|
887
906
|
}], parentLink: [{
|
|
@@ -959,5 +978,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
959
978
|
* Generated bundle index. Do not edit.
|
|
960
979
|
*/
|
|
961
980
|
|
|
962
|
-
export { SkyActionHubModule, SkyLinkListModule, SkyNeedsAttentionModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyPageLinksComponent as λ12, SkyLinkListComponent as λ13, SkyLinkListItemComponent as λ14, SkyLinkListRecentlyAccessedComponent as λ15, SkyNeedsAttentionComponent as λ16, SkyActionHubButtonsComponent as λ2, SkyActionHubContentComponent as λ3, SkyPageHeaderComponent as λ4, SkyModalLinkListComponent as λ5, SkyPageComponent as λ6, SkyPageContentComponent as λ7, SkyPageHeaderDetailsComponent as λ8, SkyPageHeaderActionsComponent as λ9 };
|
|
981
|
+
export { SkyActionHubModule, SkyLinkListModule, SkyModalLinkListModule, SkyNeedsAttentionModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyPageLinksComponent as λ12, SkyLinkListComponent as λ13, SkyLinkListItemComponent as λ14, SkyLinkListRecentlyAccessedComponent as λ15, SkyNeedsAttentionComponent as λ16, SkyActionHubButtonsComponent as λ2, SkyActionHubContentComponent as λ3, SkyPageHeaderComponent as λ4, SkyModalLinkListComponent as λ5, SkyPageComponent as λ6, SkyPageContentComponent as λ7, SkyPageHeaderDetailsComponent as λ8, SkyPageHeaderActionsComponent as λ9 };
|
|
963
982
|
//# sourceMappingURL=skyux-pages.mjs.map
|