@skyux/pages 12.0.0-alpha.0 → 12.0.0-alpha.2

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.
Files changed (24) hide show
  1. package/documentation.json +4082 -1113
  2. package/fesm2022/skyux-pages-testing.mjs +179 -3
  3. package/fesm2022/skyux-pages-testing.mjs.map +1 -1
  4. package/fesm2022/skyux-pages.mjs +36 -30
  5. package/fesm2022/skyux-pages.mjs.map +1 -1
  6. package/index.d.ts +3 -0
  7. package/lib/modules/link-list/link-list-item.component.d.ts +2 -1
  8. package/lib/modules/link-list/link-list.component.d.ts +2 -1
  9. package/lib/modules/needs-attention/needs-attention.component.d.ts +3 -0
  10. package/lib/modules/needs-attention/needs-attention.module.d.ts +3 -0
  11. package/lib/modules/page-header/page-header-alerts.component.d.ts +2 -1
  12. package/lib/modules/page-header/page-header-avatar.component.d.ts +2 -1
  13. package/lib/modules/page-header/page-header-details.component.d.ts +2 -1
  14. package/package.json +9 -9
  15. package/testing/modules/action-hub/action-hub-harness-filters.d.ts +6 -0
  16. package/testing/modules/action-hub/action-hub-harness.d.ts +43 -0
  17. package/testing/modules/link-list/link-list-harness.d.ts +6 -0
  18. package/testing/modules/link-list/link-list-item-harness-filters.d.ts +10 -0
  19. package/testing/modules/link-list/link-list-item-harness.d.ts +25 -0
  20. package/testing/modules/needs-attention/needs-attention-harness-filters.d.ts +6 -0
  21. package/testing/modules/needs-attention/needs-attention-harness.d.ts +30 -0
  22. package/testing/modules/needs-attention/needs-attention-item-harness-filters.d.ts +10 -0
  23. package/testing/modules/needs-attention/needs-attention-item-harness.d.ts +25 -0
  24. package/testing/public-api.d.ts +7 -0
@@ -1,23 +1,23 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
3
- import * as i3 from '@skyux/indicators';
3
+ import * as i4 from '@skyux/indicators';
4
4
  import { SkyWaitModule } from '@skyux/indicators';
5
- import * as i3$1 from '@skyux/layout';
5
+ import * as i3 from '@skyux/layout';
6
6
  import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
7
- import * as i5 from '@skyux/theme';
8
- import { SkyThemeModule } from '@skyux/theme';
7
+ import * as i1 from '@skyux/theme';
8
+ import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
9
9
  import { Subject } from 'rxjs';
10
10
  import { takeUntil } from 'rxjs/operators';
11
11
  import * as i2 from '@skyux/router';
12
12
  import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
13
- import * as i1$1 from '@angular/common';
13
+ import * as i1$2 from '@angular/common';
14
14
  import { NgTemplateOutlet, CommonModule, DOCUMENT } from '@angular/common';
15
- import * as i1 from '@skyux/i18n';
15
+ import * as i1$1 from '@skyux/i18n';
16
16
  import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
17
- import * as i1$2 from '@skyux/core';
17
+ import * as i1$3 from '@skyux/core';
18
18
  import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyResponsiveHostDirective, SkyLayoutHostService, SkyHelpService, provideSkyBreakpointObserver, SkyContainerBreakpointObserver } from '@skyux/core';
19
19
  import { SkyModalService, SkyModalLegacyService } from '@skyux/modals';
20
- import * as i4 from '@skyux/icon';
20
+ import * as i4$1 from '@skyux/icon';
21
21
  import { SkyIconModule } from '@skyux/icon';
22
22
  import { RouterModule } from '@angular/router';
23
23
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -164,13 +164,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
164
164
  */
165
165
  class SkyLinkListItemComponent {
166
166
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyLinkListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
167
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyLinkListItemComponent, isStandalone: true, selector: "sky-link-list-item", host: { properties: { "attr.role": "\"listitem\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;margin:0 0 var(--sky-margin-stacked-sm) 0}\n"] }); }
167
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyLinkListItemComponent, isStandalone: true, selector: "sky-link-list-item", host: { properties: { "attr.role": "\"listitem\"" } }, hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"] }); }
168
168
  }
169
169
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyLinkListItemComponent, decorators: [{
170
170
  type: Component,
171
171
  args: [{ standalone: true, selector: 'sky-link-list-item', template: `<ng-content />`, host: {
172
172
  '[attr.role]': '"listitem"',
173
- }, styles: [":host{display:block;margin:0 0 var(--sky-margin-stacked-sm) 0}\n"] }]
173
+ }, hostDirectives: [SkyThemeComponentClassDirective], styles: [":host.sky-cmp-theme-default{--sky-override-link-item-space-below: var(--sky-margin-stacked-sm)}:host{display:block;margin:0 0 var(--sky-override-link-item-space-below, var(--sky-space-stacked-s)) 0}\n"] }]
174
174
  }] });
175
175
 
176
176
  /**
@@ -204,7 +204,7 @@ class SkyLinkListComponent {
204
204
  });
205
205
  }
206
206
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyLinkListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
207
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyLinkListComponent, isStandalone: true, selector: "sky-link-list", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "linkItems", predicate: SkyLinkListItemComponent, isSignal: true }], ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (hasLinks()) {\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 [skyHref]=\"link.permalink.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a [href]=\"link.permalink.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink.route) {\n <a\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 }\n </li>\n }\n <ng-content select=\"sky-link-list-item\" />\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">{{ headingText() }}</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}\n"], dependencies: [{ kind: "ngmodule", type: LinkAsModule }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
207
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyLinkListComponent, isStandalone: true, selector: "sky-link-list", inputs: { headingText: { classPropertyName: "headingText", publicName: "headingText", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "linkItems", predicate: SkyLinkListItemComponent, isSignal: true }], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (hasLinks()) {\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.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 }\n </li>\n }\n <ng-content select=\"sky-link-list-item\" />\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"], dependencies: [{ kind: "ngmodule", type: LinkAsModule }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i4.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
208
208
  }
209
209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyLinkListComponent, decorators: [{
210
210
  type: Component,
@@ -214,7 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
214
214
  SkyAppLinkModule,
215
215
  SkyHrefModule,
216
216
  SkyWaitModule,
217
- ], template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (hasLinks()) {\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 [skyHref]=\"link.permalink.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a [href]=\"link.permalink.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink.route) {\n <a\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 }\n </li>\n }\n <ng-content select=\"sky-link-list-item\" />\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">{{ headingText() }}</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}\n"] }]
217
+ ], hostDirectives: [SkyThemeComponentClassDirective], template: "<sky-wait [isWaiting]=\"links() === 'loading'\" />\n@if (links() === 'loading') {\n <ng-container [ngTemplateOutlet]=\"headingTemplateRef\" />\n} @else {\n @if (hasLinks()) {\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.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 }\n </li>\n }\n <ng-content select=\"sky-link-list-item\" />\n </ul>\n }\n}\n\n<ng-template #headingTemplateRef>\n <h2 class=\"sky-font-heading-4\">{{ headingText() }}</h2>\n</ng-template>\n", styles: [".sky-link-list:not(.sky-theme-modern *){--sky-override-link-list-space-below: var(--sky-margin-stacked-xl)}:host.sky-cmp-theme-default{--sky-override-link-list-heading-space: var(--sky-margin-stacked-sm)}ul.sky-link-list{list-style:none;margin:0 0 var(--sky-override-link-list-space-below, var(--sky-space-stacked-xl)) 0;padding-left:0}h2,li{margin:0 0 var(--sky-override-link-list-heading-space, var(--sky-space-stacked-s)) 0}ul.sky-link-list>li:has(>a[hidden]){display:none}\n"] }]
218
218
  }] });
219
219
 
220
220
  /* istanbul ignore file */
@@ -269,7 +269,7 @@ class SkyLinkListRecentlyAccessedComponent {
269
269
  [links]="recentLinks() | skyActionHubRecentLinksResolve"
270
270
  [headingText]="'sky_action_hub_recent_links' | skyLibResources"
271
271
  />
272
- `, isInline: true, dependencies: [{ kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
272
+ `, isInline: true, dependencies: [{ kind: "pipe", type: SkyActionHubRecentLinksResolvePipe, name: "skyActionHubRecentLinksResolve" }, { kind: "component", type: SkyLinkListComponent, selector: "sky-link-list", inputs: ["headingText", "links"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
273
273
  }
274
274
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyLinkListRecentlyAccessedComponent, decorators: [{
275
275
  type: Component,
@@ -345,11 +345,11 @@ class SkyModalLinkListComponent {
345
345
  }
346
346
  }
347
347
  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", title: "title" }, 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 [skyHref]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a [href]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink && link.permalink.route) {\n <a\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\"\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 {{ title }}\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}\n"], dependencies: [{ kind: "directive", type: i1$1.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: i3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }] }); }
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", title: "title" }, 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 {{ title }}\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
349
  }
350
350
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyModalLinkListComponent, decorators: [{
351
351
  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 [skyHref]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link | linkAs: 'href') {\n <a [href]=\"link.permalink?.url\">\n {{ link.label }}\n </a>\n } @else if (link.permalink && link.permalink.route) {\n <a\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\"\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 {{ title }}\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}\n"] }]
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 {{ title }}\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"] }]
353
353
  }], propDecorators: { links: [{
354
354
  type: Input
355
355
  }], title: [{
@@ -384,6 +384,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
384
384
  }]
385
385
  }] });
386
386
 
387
+ /**
388
+ * @internal
389
+ */
387
390
  class SkyNeedsAttentionComponent {
388
391
  set items(value) {
389
392
  this.#items = value;
@@ -401,15 +404,18 @@ class SkyNeedsAttentionComponent {
401
404
  #items;
402
405
  #logService = inject(SkyLogService);
403
406
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
404
- 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 === 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" }] }); }
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: [":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-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: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$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" }] }); }
405
408
  }
406
409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
407
410
  type: Component,
408
- 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 === 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"] }]
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: [":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-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: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"] }]
409
412
  }], propDecorators: { items: [{
410
413
  type: Input
411
414
  }] } });
412
415
 
416
+ /**
417
+ * @internal
418
+ */
413
419
  class SkyNeedsAttentionModule {
414
420
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
415
421
  static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: SkyNeedsAttentionModule, declarations: [SkyNeedsAttentionComponent], imports: [CommonModule,
@@ -459,11 +465,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
459
465
  */
460
466
  class SkyPageHeaderActionsComponent {
461
467
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
462
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderActionsComponent, isStandalone: false, selector: "sky-page-header-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-margin-stacked-xl);margin-bottom:calc(var(--sky-margin-stacked-sm) * -1)}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-margin-stacked-sm)}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-margin-inline-sm)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
468
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderActionsComponent, isStandalone: false, selector: "sky-page-header-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"], encapsulation: i0.ViewEncapsulation.None }); }
463
469
  }
464
470
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderActionsComponent, decorators: [{
465
471
  type: Component,
466
- args: [{ selector: 'sky-page-header-actions', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-margin-stacked-xl);margin-bottom:calc(var(--sky-margin-stacked-sm) * -1)}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-margin-stacked-sm)}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-margin-inline-sm)}\n"] }]
472
+ args: [{ selector: 'sky-page-header-actions', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, standalone: false, styles: ["sky-page-header-actions:not(.sky-theme-modern *){--sky-override-page-header-actions-button-space-bottom: var( --sky-margin-stacked-sm );--sky-override-page-header-actions-button-space-right: var( --sky-margin-inline-sm );--sky-override-page-header-actions-space-bottom: calc( var(--sky-margin-stacked-sm) * -1 );--sky-override-page-header-actions-space-top: var(--sky-margin-stacked-xl)}sky-page-header-actions{display:block}sky-page-header-actions:not(:empty){margin-top:var(--sky-override-page-header-actions-space-top, var(--sky-space-stacked-xl));margin-bottom:var(--sky-override-page-header-actions-space-bottom, calc(var(--sky-space-stacked-s) * -1))}sky-page-header-actions>sky-dropdown{display:inline-block}sky-page-header-actions>:is(.sky-btn,sky-dropdown){margin-bottom:var(--sky-override-page-header-actions-button-space-bottom, var(--sky-space-stacked-s))}sky-page-header-actions>:is(.sky-btn,sky-dropdown):not(:last-child){margin-right:var(--sky-override-page-header-actions-button-space-right, var(--sky-space-gap-action_group-m))}\n"] }]
467
473
  }] });
468
474
 
469
475
  /**
@@ -471,11 +477,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
471
477
  */
472
478
  class SkyPageHeaderAlertsComponent {
473
479
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
474
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderAlertsComponent, isStandalone: false, selector: "sky-page-header-alerts", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-lg)}:host:not(:empty) ::ng-deep sky-alert+sky-alert{margin-top:var(--sky-margin-stacked-lg)}\n"] }); }
480
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderAlertsComponent, isStandalone: false, selector: "sky-page-header-alerts", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"] }); }
475
481
  }
476
482
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderAlertsComponent, decorators: [{
477
483
  type: Component,
478
- args: [{ selector: 'sky-page-header-alerts', standalone: false, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-bottom:var(--sky-margin-stacked-lg)}:host:not(:empty) ::ng-deep sky-alert+sky-alert{margin-top:var(--sky-margin-stacked-lg)}\n"] }]
484
+ args: [{ selector: 'sky-page-header-alerts', standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-alert-space-below: var(--sky-margin-stacked-lg);--sky-override-page-header-alert-space-between: var(--sky-margin-stacked-lg)}:host{display:flex;flex-direction:column;row-gap:var(--sky-override-page-header-alert-space-between, var(--sky-space-stacked-l))}:host:not(:empty){margin-bottom:var(--sky-override-page-header-alert-space-below, var(--sky-space-stacked-l))}\n"] }]
479
485
  }] });
480
486
 
481
487
  /**
@@ -498,11 +504,11 @@ class SkyPageHeaderAvatarComponent {
498
504
  });
499
505
  }
500
506
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
501
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderAvatarComponent, isStandalone: false, 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"] }); }
507
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderAvatarComponent, isStandalone: false, selector: "sky-page-header-avatar", providers: [SkyDefaultInputProvider], hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"] }); }
502
508
  }
503
509
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderAvatarComponent, decorators: [{
504
510
  type: Component,
505
- args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], standalone: false, 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"] }]
511
+ args: [{ selector: 'sky-page-header-avatar', providers: [SkyDefaultInputProvider], standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-avatar-space-above: 5px;--sky-override-page-header-avatar-space-right-sm: var(--sky-margin-inline-lg);--sky-override-page-header-avatar-space-right-xs: var(--sky-margin-inline-sm)}:host{display:block}:host:not(:empty){padding-top:var(--sky-override-page-header-avatar-space-above, var(--sky-space-stacked-xs));margin-right:var(--sky-override-page-header-avatar-space-right-xs, var(--sky-space-inline-s))}@media (min-width: 768px){:host:not(:empty){margin-right:var(--sky-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}}: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-override-page-header-avatar-space-right-sm, var(--sky-space-inline-l))}\n"] }]
506
512
  }], ctorParameters: () => [] });
507
513
 
508
514
  /**
@@ -511,11 +517,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
511
517
  */
512
518
  class SkyPageHeaderDetailsComponent {
513
519
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
514
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderDetailsComponent, isStandalone: false, selector: "sky-page-header-details", ngImport: i0, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }); }
520
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageHeaderDetailsComponent, isStandalone: false, selector: "sky-page-header-details", hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"] }); }
515
521
  }
516
522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderDetailsComponent, decorators: [{
517
523
  type: Component,
518
- args: [{ selector: 'sky-page-header-details', standalone: false, template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }]
524
+ args: [{ selector: 'sky-page-header-details', standalone: false, hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content />\n", styles: [":host.sky-cmp-theme-default{--sky-override-page-header-details-space-above: var(--sky-margin-stacked-sm)}:host{display:block}:host:not(:empty){margin-top:var(--sky-override-page-header-details-space-above, var(--sky-space-stacked-s))}\n"] }]
519
525
  }] });
520
526
 
521
527
  /**
@@ -523,11 +529,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
523
529
  */
524
530
  class SkyPageHeaderComponent {
525
531
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
526
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$2.SkyResponsiveHostDirective }], 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"] }] }); }
532
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$3.SkyResponsiveHostDirective }], 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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-chevron-size: 16px;--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));font-size:var(--sky-override-page-header-chevron-size, var(--sky-size-icon-s));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"], dependencies: [{ kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
527
533
  }
528
534
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
529
535
  type: Component,
530
- args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', standalone: false, 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"] }]
536
+ args: [{ hostDirectives: [SkyResponsiveHostDirective], selector: 'sky-page-header', standalone: false, 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: [".sky-page-header:not(.sky-theme-modern *){--sky-override-page-header-chevron-color: var(--sky-text-color-default);--sky-override-page-header-chevron-size: 16px;--sky-override-page-header-hub-spoke-spacing: 10px;--sky-override-page-header-parent-color: #0974a1}: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-wrapper:has(a[hidden]){display:none}.sky-page-header-parent-link{color:var(--sky-override-page-header-parent-color, var(--sky-color-text-action))}.sky-page-header-chevron{color:var(--sky-override-page-header-chevron-color, var(--sky-color-icon-default));font-size:var(--sky-override-page-header-chevron-size, var(--sky-size-icon-s));margin:0 var(--sky-override-page-header-hub-spoke-spacing, var(--sky-space-gap-icon-m))}.sky-page-header-chevron,.sky-page-header-parent-link,.sky-page-header-page-title{vertical-align:middle}.sky-page-header-content:empty{display:none}\n"] }]
531
537
  }], propDecorators: { parentLink: [{
532
538
  type: Input
533
539
  }], pageTitle: [{
@@ -588,7 +594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
588
594
  */
589
595
  class SkyPageContentComponent {
590
596
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
591
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageContentComponent, isStandalone: false, selector: "sky-page-content", hostDirectives: [{ directive: i1$2.SkyResponsiveHostDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
597
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyPageContentComponent, isStandalone: false, selector: "sky-page-content", hostDirectives: [{ directive: i1$3.SkyResponsiveHostDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;padding:var(--sky-layout-host-content-spacing, 0);flex-grow:var(--sky-layout-host-content-flex-grow, 0);overflow:var(--sky-layout-host-content-overflow, visible);position:var(--sky-layout-host-content-position, static)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
592
598
  }
593
599
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyPageContentComponent, decorators: [{
594
600
  type: Component,
@@ -871,7 +877,7 @@ class SkyActionHubComponent {
871
877
  }
872
878
  #_needsAttention;
873
879
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyActionHubComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
874
- 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 [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 }); }
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 [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: 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 }); }
875
881
  }
876
882
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyActionHubComponent, decorators: [{
877
883
  type: Component,
@@ -953,5 +959,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
953
959
  * Generated bundle index. Do not edit.
954
960
  */
955
961
 
956
- export { SkyActionHubModule, SkyLinkListModule, SkyPageHeaderModule, SkyPageModule, SkyActionHubComponent as λ1, SkyPageHeaderAvatarComponent as λ10, SkyPageHeaderAlertsComponent as λ11, SkyPageLinksComponent as λ12, SkyLinkListComponent as λ13, SkyLinkListItemComponent as λ14, SkyLinkListRecentlyAccessedComponent as λ15, SkyActionHubButtonsComponent as λ2, SkyActionHubContentComponent as λ3, SkyPageHeaderComponent as λ4, SkyModalLinkListComponent as λ5, SkyPageComponent as λ6, SkyPageContentComponent as λ7, SkyPageHeaderDetailsComponent as λ8, SkyPageHeaderActionsComponent as λ9 };
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 };
957
963
  //# sourceMappingURL=skyux-pages.mjs.map