@skyux/pages 11.43.1 → 11.45.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,8 @@
1
- import { Component, HostBinding, Input, inject, } from '@angular/core';
2
- import { SkyContainerBreakpointObserver, SkyHelpService, SkyLayoutHostService, provideSkyBreakpointObserver, } from '@skyux/core';
3
- import { Subject } from 'rxjs';
4
- import { takeUntil } from 'rxjs/operators';
1
+ import { Component, Input, inject, input, } from '@angular/core';
2
+ import { SkyContainerBreakpointObserver, SkyHelpService, SkyLayoutHostDirective, provideSkyBreakpointObserver, } from '@skyux/core';
5
3
  import { SkyPageThemeAdapterService } from './page-theme-adapter.service';
6
4
  import * as i0 from "@angular/core";
7
- const LAYOUT_DEFAULT = 'none';
8
- const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
9
- const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
10
- const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
5
+ import * as i1 from "@skyux/core";
11
6
  /**
12
7
  * Displays a page using the specified layout. The page component is a responsive container,
13
8
  * meaning content will respect the breakpoints within the page element instead of the window.
@@ -15,65 +10,37 @@ const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
15
10
  */
16
11
  export class SkyPageComponent {
17
12
  constructor() {
18
- this.cssClass = LAYOUT_CLASS_DEFAULT;
19
- this.#ngUnsubscribe = new Subject();
13
+ /**
14
+ * The page layout that applies spacing to the page header and content. Use the layout
15
+ * that corresponds with the top-level component type used on the page, or use `fit` to
16
+ * constrain the page contents to the available viewport.
17
+ * Use `none` for custom content that does not adhere to predefined spacing or constraints.
18
+ * @default "none"
19
+ */
20
+ this.layout = input('none');
20
21
  this.#themeAdapter = inject(SkyPageThemeAdapterService);
21
- this.#layoutHostSvc = inject(SkyLayoutHostService);
22
22
  this.#helpSvc = inject(SkyHelpService, { optional: true });
23
23
  }
24
- /**
25
- * The page layout that applies spacing to the page header and content. Use the layout
26
- * that corresponds with the top-level component type used on the page, or use `fit` to
27
- * constrain the page contents to the available viewport.
28
- * Use `none` for custom content that does not adhere to predefined spacing or constraints.
29
- * @default "none"
30
- */
31
- set layout(value) {
32
- this.#layout = value;
33
- this.#updateCssClass();
34
- }
35
24
  /**
36
25
  * A help key that identifies the page's default [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help) content to display.
37
26
  */
38
27
  set helpKey(value) {
39
28
  this.#helpSvc?.updateHelp({ pageDefaultHelpKey: value });
40
29
  }
41
- #layout;
42
- #layoutForChild;
43
- #ngUnsubscribe;
44
30
  #themeAdapter;
45
- #layoutHostSvc;
46
31
  #helpSvc;
47
32
  ngOnInit() {
48
33
  this.#themeAdapter.addTheme();
49
- this.#layoutHostSvc.hostLayoutForChild
50
- .pipe(takeUntil(this.#ngUnsubscribe))
51
- .subscribe((args) => {
52
- this.#layoutForChild = args.layout;
53
- this.#updateCssClass();
54
- });
55
34
  }
56
35
  ngOnDestroy() {
57
36
  this.#themeAdapter.removeTheme();
58
- this.#ngUnsubscribe.next();
59
- this.#ngUnsubscribe.complete();
60
37
  this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
61
38
  }
62
- #updateCssClass() {
63
- let cssClass = this.#layout
64
- ? `${LAYOUT_CLASS_PREFIX}${this.#layout}`
65
- : LAYOUT_CLASS_DEFAULT;
66
- if (this.#layoutForChild) {
67
- cssClass = `${cssClass} ${LAYOUT_FOR_CHILD_CLASS_PREFIX}${this.#layoutForChild}`;
68
- }
69
- this.cssClass = cssClass;
70
- }
71
39
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
72
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [
40
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SkyPageComponent, selector: "sky-page", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
73
41
  SkyPageThemeAdapterService,
74
- SkyLayoutHostService,
75
42
  provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
76
- ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
43
+ ], hostDirectives: [{ directive: i1.SkyLayoutHostDirective, inputs: ["layout", "layout"] }], ngImport: i0, template: `<ng-content />`, isInline: true }); }
77
44
  }
78
45
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyPageComponent, decorators: [{
79
46
  type: Component,
@@ -82,16 +49,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
82
49
  template: `<ng-content />`,
83
50
  providers: [
84
51
  SkyPageThemeAdapterService,
85
- SkyLayoutHostService,
86
52
  provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
87
53
  ],
54
+ hostDirectives: [
55
+ {
56
+ directive: SkyLayoutHostDirective,
57
+ inputs: ['layout'],
58
+ },
59
+ ],
88
60
  }]
89
- }], propDecorators: { layout: [{
90
- type: Input
91
- }], helpKey: [{
61
+ }], propDecorators: { helpKey: [{
92
62
  type: Input
93
- }], cssClass: [{
94
- type: HostBinding,
95
- args: ['class']
96
63
  }] } });
97
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUdMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsOEJBQThCLEVBQzlCLGNBQWMsRUFFZCxvQkFBb0IsRUFDcEIsNEJBQTRCLEdBQzdCLE1BQU0sYUFBYSxDQUFDO0FBRXJCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTNDLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQUcxRSxNQUFNLGNBQWMsR0FBc0IsTUFBTSxDQUFDO0FBRWpELE1BQU0sNkJBQTZCLEdBQUcsNEJBQTRCLENBQUM7QUFDbkUsTUFBTSxtQkFBbUIsR0FBRyxrQkFBa0IsQ0FBQztBQUMvQyxNQUFNLG9CQUFvQixHQUFHLEdBQUcsbUJBQW1CLEdBQUcsY0FBYyxFQUFFLENBQUM7QUFFdkU7Ozs7R0FJRztBQVVILE1BQU0sT0FBTyxnQkFBZ0I7SUFUN0I7UUFnQ1MsYUFBUSxHQUFHLG9CQUFvQixDQUFDO1FBS3ZDLG1CQUFjLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztRQUVyQyxrQkFBYSxHQUFHLE1BQU0sQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBQ25ELG1CQUFjLEdBQUcsTUFBTSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDOUMsYUFBUSxHQUFHLE1BQU0sQ0FBQyxjQUFjLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQztLQWlDdkQ7SUFoRUM7Ozs7OztPQU1HO0lBQ0gsSUFDVyxNQUFNLENBQUMsS0FBb0M7UUFDcEQsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ3pCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQ1csT0FBTyxDQUFDLEtBQXlCO1FBQzFDLElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUMzRCxDQUFDO0lBS0QsT0FBTyxDQUFnQztJQUN2QyxlQUFlLENBQWdDO0lBRS9DLGNBQWMsQ0FBdUI7SUFFckMsYUFBYSxDQUFzQztJQUNuRCxjQUFjLENBQWdDO0lBQzlDLFFBQVEsQ0FBOEM7SUFFL0MsUUFBUTtRQUNiLElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFOUIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxrQkFBa0I7YUFDbkMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7YUFDcEMsU0FBUyxDQUFDLENBQUMsSUFBK0IsRUFBRSxFQUFFO1lBQzdDLElBQUksQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLE1BQTJCLENBQUM7WUFDeEQsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVNLFdBQVc7UUFDaEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUVqQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzNCLElBQUksQ0FBQyxjQUFjLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFL0IsSUFBSSxDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsRUFBRSxrQkFBa0IsRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQy9ELENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU87WUFDekIsQ0FBQyxDQUFDLEdBQUcsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUN6QyxDQUFDLENBQUMsb0JBQW9CLENBQUM7UUFFekIsSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDekIsUUFBUSxHQUFHLEdBQUcsUUFBUSxJQUFJLDZCQUE2QixHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUNuRixDQUFDO1FBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7SUFDM0IsQ0FBQzsrR0FoRVUsZ0JBQWdCO21HQUFoQixnQkFBZ0IseUlBTmhCO1lBQ1QsMEJBQTBCO1lBQzFCLG9CQUFvQjtZQUNwQiw0QkFBNEIsQ0FBQyw4QkFBOEIsQ0FBQztTQUM3RCwwQkFMUyxnQkFBZ0I7OzRGQU9mLGdCQUFnQjtrQkFUNUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsVUFBVTtvQkFDcEIsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsU0FBUyxFQUFFO3dCQUNULDBCQUEwQjt3QkFDMUIsb0JBQW9CO3dCQUNwQiw0QkFBNEIsQ0FBQyw4QkFBOEIsQ0FBQztxQkFDN0Q7aUJBQ0Y7OEJBVVksTUFBTTtzQkFEaEIsS0FBSztnQkFVSyxPQUFPO3NCQURqQixLQUFLO2dCQU1DLFFBQVE7c0JBRGQsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5Q29udGFpbmVyQnJlYWtwb2ludE9ic2VydmVyLFxuICBTa3lIZWxwU2VydmljZSxcbiAgU2t5TGF5b3V0SG9zdEZvckNoaWxkQXJncyxcbiAgU2t5TGF5b3V0SG9zdFNlcnZpY2UsXG4gIHByb3ZpZGVTa3lCcmVha3BvaW50T2JzZXJ2ZXIsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSB9IGZyb20gJy4vcGFnZS10aGVtZS1hZGFwdGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgU2t5UGFnZUxheW91dFR5cGUgfSBmcm9tICcuL3R5cGVzL3BhZ2UtbGF5b3V0LXR5cGUnO1xuXG5jb25zdCBMQVlPVVRfREVGQVVMVDogU2t5UGFnZUxheW91dFR5cGUgPSAnbm9uZSc7XG5cbmNvbnN0IExBWU9VVF9GT1JfQ0hJTERfQ0xBU1NfUFJFRklYID0gJ3NreS1sYXlvdXQtaG9zdC1mb3ItY2hpbGQtJztcbmNvbnN0IExBWU9VVF9DTEFTU19QUkVGSVggPSAnc2t5LWxheW91dC1ob3N0LSc7XG5jb25zdCBMQVlPVVRfQ0xBU1NfREVGQVVMVCA9IGAke0xBWU9VVF9DTEFTU19QUkVGSVh9JHtMQVlPVVRfREVGQVVMVH1gO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgcGFnZSB1c2luZyB0aGUgc3BlY2lmaWVkIGxheW91dC4gVGhlIHBhZ2UgY29tcG9uZW50IGlzIGEgcmVzcG9uc2l2ZSBjb250YWluZXIsXG4gKiBtZWFuaW5nIGNvbnRlbnQgd2lsbCByZXNwZWN0IHRoZSBicmVha3BvaW50cyB3aXRoaW4gdGhlIHBhZ2UgZWxlbWVudCBpbnN0ZWFkIG9mIHRoZSB3aW5kb3cuXG4gKiBUaGlzIGlzIGhlbHBmdWwgaWYgdGhlcmUgaXMgb3RoZXIgY29udGVudCB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcGFnZS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LXBhZ2UnLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50IC8+YCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UsXG4gICAgU2t5TGF5b3V0SG9zdFNlcnZpY2UsXG4gICAgcHJvdmlkZVNreUJyZWFrcG9pbnRPYnNlcnZlcihTa3lDb250YWluZXJCcmVha3BvaW50T2JzZXJ2ZXIpLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lQYWdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogVGhlIHBhZ2UgbGF5b3V0IHRoYXQgYXBwbGllcyBzcGFjaW5nIHRvIHRoZSBwYWdlIGhlYWRlciBhbmQgY29udGVudC4gVXNlIHRoZSBsYXlvdXRcbiAgICogdGhhdCBjb3JyZXNwb25kcyB3aXRoIHRoZSB0b3AtbGV2ZWwgY29tcG9uZW50IHR5cGUgdXNlZCBvbiB0aGUgcGFnZSwgb3IgdXNlIGBmaXRgIHRvXG4gICAqIGNvbnN0cmFpbiB0aGUgcGFnZSBjb250ZW50cyB0byB0aGUgYXZhaWxhYmxlIHZpZXdwb3J0LlxuICAgKiBVc2UgYG5vbmVgIGZvciBjdXN0b20gY29udGVudCB0aGF0IGRvZXMgbm90IGFkaGVyZSB0byBwcmVkZWZpbmVkIHNwYWNpbmcgb3IgY29uc3RyYWludHMuXG4gICAqIEBkZWZhdWx0IFwibm9uZVwiXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgc2V0IGxheW91dCh2YWx1ZTogU2t5UGFnZUxheW91dFR5cGUgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNsYXlvdXQgPSB2YWx1ZTtcbiAgICB0aGlzLiN1cGRhdGVDc3NDbGFzcygpO1xuICB9XG5cbiAgLyoqXG4gICAqIEEgaGVscCBrZXkgdGhhdCBpZGVudGlmaWVzIHRoZSBwYWdlJ3MgZGVmYXVsdCBbZ2xvYmFsIGhlbHBdKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvbGVhcm4vZGV2ZWxvcC9nbG9iYWwtaGVscCkgY29udGVudCB0byBkaXNwbGF5LlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBoZWxwS2V5KHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNoZWxwU3ZjPy51cGRhdGVIZWxwKHsgcGFnZURlZmF1bHRIZWxwS2V5OiB2YWx1ZSB9KTtcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBwdWJsaWMgY3NzQ2xhc3MgPSBMQVlPVVRfQ0xBU1NfREVGQVVMVDtcblxuICAjbGF5b3V0OiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZDtcbiAgI2xheW91dEZvckNoaWxkOiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZDtcblxuICAjbmdVbnN1YnNjcmliZSA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgI3RoZW1lQWRhcHRlciA9IGluamVjdChTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSk7XG4gICNsYXlvdXRIb3N0U3ZjID0gaW5qZWN0KFNreUxheW91dEhvc3RTZXJ2aWNlKTtcbiAgI2hlbHBTdmMgPSBpbmplY3QoU2t5SGVscFNlcnZpY2UsIHsgb3B0aW9uYWw6IHRydWUgfSk7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5hZGRUaGVtZSgpO1xuXG4gICAgdGhpcy4jbGF5b3V0SG9zdFN2Yy5ob3N0TGF5b3V0Rm9yQ2hpbGRcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLiNuZ1Vuc3Vic2NyaWJlKSlcbiAgICAgIC5zdWJzY3JpYmUoKGFyZ3M6IFNreUxheW91dEhvc3RGb3JDaGlsZEFyZ3MpID0+IHtcbiAgICAgICAgdGhpcy4jbGF5b3V0Rm9yQ2hpbGQgPSBhcmdzLmxheW91dCBhcyBTa3lQYWdlTGF5b3V0VHlwZTtcbiAgICAgICAgdGhpcy4jdXBkYXRlQ3NzQ2xhc3MoKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5yZW1vdmVUaGVtZSgpO1xuXG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5uZXh0KCk7XG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5jb21wbGV0ZSgpO1xuXG4gICAgdGhpcy4jaGVscFN2Yz8udXBkYXRlSGVscCh7IHBhZ2VEZWZhdWx0SGVscEtleTogdW5kZWZpbmVkIH0pO1xuICB9XG5cbiAgI3VwZGF0ZUNzc0NsYXNzKCk6IHZvaWQge1xuICAgIGxldCBjc3NDbGFzcyA9IHRoaXMuI2xheW91dFxuICAgICAgPyBgJHtMQVlPVVRfQ0xBU1NfUFJFRklYfSR7dGhpcy4jbGF5b3V0fWBcbiAgICAgIDogTEFZT1VUX0NMQVNTX0RFRkFVTFQ7XG5cbiAgICBpZiAodGhpcy4jbGF5b3V0Rm9yQ2hpbGQpIHtcbiAgICAgIGNzc0NsYXNzID0gYCR7Y3NzQ2xhc3N9ICR7TEFZT1VUX0ZPUl9DSElMRF9DTEFTU19QUkVGSVh9JHt0aGlzLiNsYXlvdXRGb3JDaGlsZH1gO1xuICAgIH1cblxuICAgIHRoaXMuY3NzQ2xhc3MgPSBjc3NDbGFzcztcbiAgfVxufVxuIl19
64
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBR0wsTUFBTSxFQUNOLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsOEJBQThCLEVBQzlCLGNBQWMsRUFDZCxzQkFBc0IsRUFDdEIsNEJBQTRCLEdBQzdCLE1BQU0sYUFBYSxDQUFDO0FBRXJCLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7QUFHMUU7Ozs7R0FJRztBQWVILE1BQU0sT0FBTyxnQkFBZ0I7SUFkN0I7UUFlRTs7Ozs7O1dBTUc7UUFDSSxXQUFNLEdBQUcsS0FBSyxDQUFvQixNQUFNLENBQUMsQ0FBQztRQVV4QyxrQkFBYSxHQUFHLE1BQU0sQ0FBQywwQkFBMEIsQ0FBQyxDQUFDO1FBQ25ELGFBQVEsR0FBRyxNQUFNLENBQUMsY0FBYyxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7S0FVaEU7SUFuQkM7O09BRUc7SUFDSCxJQUNXLE9BQU8sQ0FBQyxLQUF5QjtRQUMxQyxJQUFJLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxFQUFFLGtCQUFrQixFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUVRLGFBQWEsQ0FBc0M7SUFDbkQsUUFBUSxDQUE4QztJQUV4RCxRQUFRO1FBQ2IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRU0sV0FBVztRQUNoQixJQUFJLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxRQUFRLEVBQUUsVUFBVSxDQUFDLEVBQUUsa0JBQWtCLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztJQUMvRCxDQUFDOytHQTVCVSxnQkFBZ0I7bUdBQWhCLGdCQUFnQix5U0FYaEI7WUFDVCwwQkFBMEI7WUFDMUIsNEJBQTRCLENBQUMsOEJBQThCLENBQUM7U0FDN0Qsb0hBSlMsZ0JBQWdCOzs0RkFZZixnQkFBZ0I7a0JBZDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFVBQVU7b0JBQ3BCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFNBQVMsRUFBRTt3QkFDVCwwQkFBMEI7d0JBQzFCLDRCQUE0QixDQUFDLDhCQUE4QixDQUFDO3FCQUM3RDtvQkFDRCxjQUFjLEVBQUU7d0JBQ2Q7NEJBQ0UsU0FBUyxFQUFFLHNCQUFzQjs0QkFDakMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDO3lCQUNuQjtxQkFDRjtpQkFDRjs4QkFlWSxPQUFPO3NCQURqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIGluamVjdCxcbiAgaW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5Q29udGFpbmVyQnJlYWtwb2ludE9ic2VydmVyLFxuICBTa3lIZWxwU2VydmljZSxcbiAgU2t5TGF5b3V0SG9zdERpcmVjdGl2ZSxcbiAgcHJvdmlkZVNreUJyZWFrcG9pbnRPYnNlcnZlcixcbn0gZnJvbSAnQHNreXV4L2NvcmUnO1xuXG5pbXBvcnQgeyBTa3lQYWdlVGhlbWVBZGFwdGVyU2VydmljZSB9IGZyb20gJy4vcGFnZS10aGVtZS1hZGFwdGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgU2t5UGFnZUxheW91dFR5cGUgfSBmcm9tICcuL3R5cGVzL3BhZ2UtbGF5b3V0LXR5cGUnO1xuXG4vKipcbiAqIERpc3BsYXlzIGEgcGFnZSB1c2luZyB0aGUgc3BlY2lmaWVkIGxheW91dC4gVGhlIHBhZ2UgY29tcG9uZW50IGlzIGEgcmVzcG9uc2l2ZSBjb250YWluZXIsXG4gKiBtZWFuaW5nIGNvbnRlbnQgd2lsbCByZXNwZWN0IHRoZSBicmVha3BvaW50cyB3aXRoaW4gdGhlIHBhZ2UgZWxlbWVudCBpbnN0ZWFkIG9mIHRoZSB3aW5kb3cuXG4gKiBUaGlzIGlzIGhlbHBmdWwgaWYgdGhlcmUgaXMgb3RoZXIgY29udGVudCB0byB0aGUgbGVmdCBvciByaWdodCBvZiB0aGUgcGFnZS5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LXBhZ2UnLFxuICB0ZW1wbGF0ZTogYDxuZy1jb250ZW50IC8+YCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UsXG4gICAgcHJvdmlkZVNreUJyZWFrcG9pbnRPYnNlcnZlcihTa3lDb250YWluZXJCcmVha3BvaW50T2JzZXJ2ZXIpLFxuICBdLFxuICBob3N0RGlyZWN0aXZlczogW1xuICAgIHtcbiAgICAgIGRpcmVjdGl2ZTogU2t5TGF5b3V0SG9zdERpcmVjdGl2ZSxcbiAgICAgIGlucHV0czogWydsYXlvdXQnXSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lQYWdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvKipcbiAgICogVGhlIHBhZ2UgbGF5b3V0IHRoYXQgYXBwbGllcyBzcGFjaW5nIHRvIHRoZSBwYWdlIGhlYWRlciBhbmQgY29udGVudC4gVXNlIHRoZSBsYXlvdXRcbiAgICogdGhhdCBjb3JyZXNwb25kcyB3aXRoIHRoZSB0b3AtbGV2ZWwgY29tcG9uZW50IHR5cGUgdXNlZCBvbiB0aGUgcGFnZSwgb3IgdXNlIGBmaXRgIHRvXG4gICAqIGNvbnN0cmFpbiB0aGUgcGFnZSBjb250ZW50cyB0byB0aGUgYXZhaWxhYmxlIHZpZXdwb3J0LlxuICAgKiBVc2UgYG5vbmVgIGZvciBjdXN0b20gY29udGVudCB0aGF0IGRvZXMgbm90IGFkaGVyZSB0byBwcmVkZWZpbmVkIHNwYWNpbmcgb3IgY29uc3RyYWludHMuXG4gICAqIEBkZWZhdWx0IFwibm9uZVwiXG4gICAqL1xuICBwdWJsaWMgbGF5b3V0ID0gaW5wdXQ8U2t5UGFnZUxheW91dFR5cGU+KCdub25lJyk7XG5cbiAgLyoqXG4gICAqIEEgaGVscCBrZXkgdGhhdCBpZGVudGlmaWVzIHRoZSBwYWdlJ3MgZGVmYXVsdCBbZ2xvYmFsIGhlbHBdKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvbGVhcm4vZGV2ZWxvcC9nbG9iYWwtaGVscCkgY29udGVudCB0byBkaXNwbGF5LlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHNldCBoZWxwS2V5KHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNoZWxwU3ZjPy51cGRhdGVIZWxwKHsgcGFnZURlZmF1bHRIZWxwS2V5OiB2YWx1ZSB9KTtcbiAgfVxuXG4gIHJlYWRvbmx5ICN0aGVtZUFkYXB0ZXIgPSBpbmplY3QoU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UpO1xuICByZWFkb25seSAjaGVscFN2YyA9IGluamVjdChTa3lIZWxwU2VydmljZSwgeyBvcHRpb25hbDogdHJ1ZSB9KTtcblxuICBwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy4jdGhlbWVBZGFwdGVyLmFkZFRoZW1lKCk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy4jdGhlbWVBZGFwdGVyLnJlbW92ZVRoZW1lKCk7XG4gICAgdGhpcy4jaGVscFN2Yz8udXBkYXRlSGVscCh7IHBhZ2VEZWZhdWx0SGVscEtleTogdW5kZWZpbmVkIH0pO1xuICB9XG59XG4iXX0=
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject, HostBinding } from '@angular/core';
2
+ import { Pipe, Optional, NgModule, Component, input, contentChildren, computed, inject, isStandalone, Input, ViewEncapsulation, ChangeDetectionStrategy, CSP_NONCE, Injectable, Inject } from '@angular/core';
3
3
  import * as i3 from '@skyux/indicators';
4
4
  import { SkyWaitModule } from '@skyux/indicators';
5
5
  import * as i3$1 from '@skyux/layout';
@@ -15,7 +15,7 @@ import { NgTemplateOutlet, CommonModule, DOCUMENT } from '@angular/common';
15
15
  import * as i1 from '@skyux/i18n';
16
16
  import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
17
17
  import * as i1$2 from '@skyux/core';
18
- import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyResponsiveHostDirective, SkyLayoutHostService, SkyHelpService, provideSkyBreakpointObserver, SkyContainerBreakpointObserver } from '@skyux/core';
18
+ import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyResponsiveHostDirective, SkyHelpService, provideSkyBreakpointObserver, SkyContainerBreakpointObserver, SkyLayoutHostDirective } from '@skyux/core';
19
19
  import { SkyModalService, SkyModalLegacyService } from '@skyux/modals';
20
20
  import * as i4 from '@skyux/icon';
21
21
  import { SkyIconModule } from '@skyux/icon';
@@ -673,10 +673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
673
673
  args: [DOCUMENT]
674
674
  }] }] });
675
675
 
676
- const LAYOUT_DEFAULT = 'none';
677
- const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
678
- const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
679
- const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
680
676
  /**
681
677
  * Displays a page using the specified layout. The page component is a responsive container,
682
678
  * meaning content will respect the breakpoints within the page element instead of the window.
@@ -684,65 +680,37 @@ const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
684
680
  */
685
681
  class SkyPageComponent {
686
682
  constructor() {
687
- this.cssClass = LAYOUT_CLASS_DEFAULT;
688
- this.#ngUnsubscribe = new Subject();
683
+ /**
684
+ * The page layout that applies spacing to the page header and content. Use the layout
685
+ * that corresponds with the top-level component type used on the page, or use `fit` to
686
+ * constrain the page contents to the available viewport.
687
+ * Use `none` for custom content that does not adhere to predefined spacing or constraints.
688
+ * @default "none"
689
+ */
690
+ this.layout = input('none');
689
691
  this.#themeAdapter = inject(SkyPageThemeAdapterService);
690
- this.#layoutHostSvc = inject(SkyLayoutHostService);
691
692
  this.#helpSvc = inject(SkyHelpService, { optional: true });
692
693
  }
693
- /**
694
- * The page layout that applies spacing to the page header and content. Use the layout
695
- * that corresponds with the top-level component type used on the page, or use `fit` to
696
- * constrain the page contents to the available viewport.
697
- * Use `none` for custom content that does not adhere to predefined spacing or constraints.
698
- * @default "none"
699
- */
700
- set layout(value) {
701
- this.#layout = value;
702
- this.#updateCssClass();
703
- }
704
694
  /**
705
695
  * A help key that identifies the page's default [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help) content to display.
706
696
  */
707
697
  set helpKey(value) {
708
698
  this.#helpSvc?.updateHelp({ pageDefaultHelpKey: value });
709
699
  }
710
- #layout;
711
- #layoutForChild;
712
- #ngUnsubscribe;
713
700
  #themeAdapter;
714
- #layoutHostSvc;
715
701
  #helpSvc;
716
702
  ngOnInit() {
717
703
  this.#themeAdapter.addTheme();
718
- this.#layoutHostSvc.hostLayoutForChild
719
- .pipe(takeUntil(this.#ngUnsubscribe))
720
- .subscribe((args) => {
721
- this.#layoutForChild = args.layout;
722
- this.#updateCssClass();
723
- });
724
704
  }
725
705
  ngOnDestroy() {
726
706
  this.#themeAdapter.removeTheme();
727
- this.#ngUnsubscribe.next();
728
- this.#ngUnsubscribe.complete();
729
707
  this.#helpSvc?.updateHelp({ pageDefaultHelpKey: undefined });
730
708
  }
731
- #updateCssClass() {
732
- let cssClass = this.#layout
733
- ? `${LAYOUT_CLASS_PREFIX}${this.#layout}`
734
- : LAYOUT_CLASS_DEFAULT;
735
- if (this.#layoutForChild) {
736
- cssClass = `${cssClass} ${LAYOUT_FOR_CHILD_CLASS_PREFIX}${this.#layoutForChild}`;
737
- }
738
- this.cssClass = cssClass;
739
- }
740
709
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
741
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout", helpKey: "helpKey" }, host: { properties: { "class": "this.cssClass" } }, providers: [
710
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SkyPageComponent, selector: "sky-page", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
742
711
  SkyPageThemeAdapterService,
743
- SkyLayoutHostService,
744
712
  provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
745
- ], ngImport: i0, template: `<ng-content />`, isInline: true }); }
713
+ ], hostDirectives: [{ directive: i1$2.SkyLayoutHostDirective, inputs: ["layout", "layout"] }], ngImport: i0, template: `<ng-content />`, isInline: true }); }
746
714
  }
747
715
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyPageComponent, decorators: [{
748
716
  type: Component,
@@ -751,17 +719,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
751
719
  template: `<ng-content />`,
752
720
  providers: [
753
721
  SkyPageThemeAdapterService,
754
- SkyLayoutHostService,
755
722
  provideSkyBreakpointObserver(SkyContainerBreakpointObserver),
756
723
  ],
724
+ hostDirectives: [
725
+ {
726
+ directive: SkyLayoutHostDirective,
727
+ inputs: ['layout'],
728
+ },
729
+ ],
757
730
  }]
758
- }], propDecorators: { layout: [{
759
- type: Input
760
- }], helpKey: [{
731
+ }], propDecorators: { helpKey: [{
761
732
  type: Input
762
- }], cssClass: [{
763
- type: HostBinding,
764
- args: ['class']
765
733
  }] } });
766
734
 
767
735
  class SkyPageModule {