@skyux/pages 13.0.0-alpha.4 → 13.0.0-alpha.5
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
|
@@ -440,7 +440,7 @@ class SkyNeedsAttentionComponent {
|
|
|
440
440
|
});
|
|
441
441
|
}
|
|
442
442
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
443
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyNeedsAttentionComponent, isStandalone: true, selector: "sky-needs-attention", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, 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 @let itemsToDisplay = displayItems | async;\n @if (!itemsToDisplay?.length) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\n @for (\n item of itemsToDisplay;\n track displayItemsTrackByFn(item);\n let isLast = $last\n ) {\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 | linkAs: 'skyHref') {\n <a class=\"sky-needs-attention-item\" [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 } @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 class=\"sky-needs-attention-item-icon\"\n iconName=\"chevron-right\"\n iconSize=\"s\"\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;margin-left:auto;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: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i1.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i2.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i2.λ42, selector: "sky-box-header" }, { kind: "component", type: i2.λ43, selector: "sky-box-content" }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["
|
|
443
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyNeedsAttentionComponent, isStandalone: true, selector: "sky-needs-attention", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, 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 @let itemsToDisplay = displayItems | async;\n @if (!itemsToDisplay?.length) {\n {{ 'sky_action_hub_needs_attention_empty' | skyLibResources }}\n } @else {\n <ul class=\"sky-needs-attention-list\">\n @for (\n item of itemsToDisplay;\n track displayItemsTrackByFn(item);\n let isLast = $last\n ) {\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 | linkAs: 'skyHref') {\n <a class=\"sky-needs-attention-item\" [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 } @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 class=\"sky-needs-attention-item-icon\"\n iconName=\"chevron-right\"\n iconSize=\"s\"\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;margin-left:auto;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: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i1.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i2.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i2.λ42, selector: "sky-box-header" }, { kind: "component", type: i2.λ43, selector: "sky-box-content" }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i1.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyPagesResourcesModule }, { kind: "pipe", type: i1$2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "ngmodule", type: LinkAsModule }, { kind: "pipe", type: LinkAsPipe, name: "linkAs" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
444
444
|
}
|
|
445
445
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyNeedsAttentionComponent, decorators: [{
|
|
446
446
|
type: Component,
|
|
@@ -545,11 +545,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
545
545
|
*/
|
|
546
546
|
class SkyPageHeaderComponent {
|
|
547
547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$4.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 iconName=\"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-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));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: i1.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["
|
|
548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: SkyPageHeaderComponent, isStandalone: false, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, hostDirectives: [{ directive: i1$4.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 iconName=\"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-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-and-content{flex-grow:1}.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));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: i1.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i1.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
|
|
549
549
|
}
|
|
550
550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
|
|
551
551
|
type: Component,
|
|
552
|
-
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 iconName=\"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-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));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"] }]
|
|
552
|
+
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 iconName=\"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-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-and-content{flex-grow:1}.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));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"] }]
|
|
553
553
|
}], propDecorators: { parentLink: [{
|
|
554
554
|
type: Input
|
|
555
555
|
}], pageTitle: [{
|