@skyux/pages 8.7.2 → 8.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +398 -200
- package/esm2020/lib/modules/page/page-content.component.mjs +32 -4
- package/esm2020/lib/modules/page/page.component.mjs +5 -3
- package/esm2020/lib/modules/page-header/page-header.component.mjs +32 -4
- package/fesm2015/skyux-pages.mjs +62 -8
- package/fesm2015/skyux-pages.mjs.map +1 -1
- package/fesm2020/skyux-pages.mjs +62 -8
- package/fesm2020/skyux-pages.mjs.map +1 -1
- package/lib/modules/page/page-content.component.d.ts +5 -1
- package/lib/modules/page/page.component.d.ts +4 -2
- package/lib/modules/page-header/page-header.component.d.ts +5 -1
- package/package.json +8 -8
|
@@ -1,15 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
var _SkyPageContentComponent_elementRef, _SkyPageContentComponent_mediaQueryService;
|
|
2
|
+
import { __classPrivateFieldGet } from "tslib";
|
|
3
|
+
import { ChangeDetectionStrategy, Component, ElementRef, inject, } from '@angular/core';
|
|
4
|
+
import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
|
|
2
5
|
import * as i0 from "@angular/core";
|
|
3
6
|
/**
|
|
4
7
|
* Displays page contents using spacing that corresponds to the parent
|
|
5
8
|
* page's layout.
|
|
6
9
|
*/
|
|
7
10
|
export class SkyPageContentComponent {
|
|
11
|
+
constructor() {
|
|
12
|
+
_SkyPageContentComponent_elementRef.set(this, inject(ElementRef));
|
|
13
|
+
_SkyPageContentComponent_mediaQueryService.set(this, inject(SkyResizeObserverMediaQueryService));
|
|
14
|
+
}
|
|
15
|
+
ngOnInit() {
|
|
16
|
+
__classPrivateFieldGet(this, _SkyPageContentComponent_mediaQueryService, "f").observe(__classPrivateFieldGet(this, _SkyPageContentComponent_elementRef, "f"), {
|
|
17
|
+
updateResponsiveClasses: true,
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
ngOnDestroy() {
|
|
21
|
+
__classPrivateFieldGet(this, _SkyPageContentComponent_mediaQueryService, "f").unobserve();
|
|
22
|
+
}
|
|
8
23
|
}
|
|
24
|
+
_SkyPageContentComponent_elementRef = new WeakMap(), _SkyPageContentComponent_mediaQueryService = new WeakMap();
|
|
9
25
|
SkyPageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
-
SkyPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageContentComponent, selector: "sky-page-content",
|
|
26
|
+
SkyPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageContentComponent, selector: "sky-page-content", providers: [
|
|
27
|
+
SkyResizeObserverMediaQueryService,
|
|
28
|
+
{
|
|
29
|
+
provide: SkyMediaQueryService,
|
|
30
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
31
|
+
},
|
|
32
|
+
], 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 });
|
|
11
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageContentComponent, decorators: [{
|
|
12
34
|
type: Component,
|
|
13
|
-
args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
|
+
args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
36
|
+
SkyResizeObserverMediaQueryService,
|
|
37
|
+
{
|
|
38
|
+
provide: SkyMediaQueryService,
|
|
39
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
40
|
+
},
|
|
41
|
+
], 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"] }]
|
|
14
42
|
}] });
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9wYWdlcy9zcmMvbGliL21vZHVsZXMvcGFnZS9wYWdlLWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUdWLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLGtDQUFrQyxHQUNuQyxNQUFNLGFBQWEsQ0FBQzs7QUFFckI7OztHQUdHO0FBY0gsTUFBTSxPQUFPLHVCQUF1QjtJQWJwQztRQWNFLDhDQUFjLE1BQU0sQ0FBQyxVQUFVLENBQUMsRUFBQztRQUNqQyxxREFBcUIsTUFBTSxDQUFDLGtDQUFrQyxDQUFDLEVBQUM7S0FXakU7SUFUUSxRQUFRO1FBQ2IsdUJBQUEsSUFBSSxrREFBbUIsQ0FBQyxPQUFPLENBQUMsdUJBQUEsSUFBSSwyQ0FBWSxFQUFFO1lBQ2hELHVCQUF1QixFQUFFLElBQUk7U0FDOUIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLFdBQVc7UUFDaEIsdUJBQUEsSUFBSSxrREFBbUIsQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUN0QyxDQUFDOzs7b0hBWlUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsMkNBUnZCO1FBQ1Qsa0NBQWtDO1FBQ2xDO1lBQ0UsT0FBTyxFQUFFLG9CQUFvQjtZQUM3QixXQUFXLEVBQUUsa0NBQWtDO1NBQ2hEO0tBQ0YsMEJBVFMsZ0JBQWdCOzJGQVdmLHVCQUF1QjtrQkFibkMsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEIsZ0JBQWdCLG1CQUVULHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Qsa0NBQWtDO3dCQUNsQzs0QkFDRSxPQUFPLEVBQUUsb0JBQW9COzRCQUM3QixXQUFXLEVBQUUsa0NBQWtDO3lCQUNoRDtxQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgU2t5TWVkaWFRdWVyeVNlcnZpY2UsXG4gIFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UsXG59IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuLyoqXG4gKiBEaXNwbGF5cyBwYWdlIGNvbnRlbnRzIHVzaW5nIHNwYWNpbmcgdGhhdCBjb3JyZXNwb25kcyB0byB0aGUgcGFyZW50XG4gKiBwYWdlJ3MgbGF5b3V0LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktcGFnZS1jb250ZW50JyxcbiAgdGVtcGxhdGU6IGA8bmctY29udGVudCAvPmAsXG4gIHN0eWxlVXJsczogWycuL3BhZ2UtY29udGVudC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5UmVzaXplT2JzZXJ2ZXJNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBTa3lNZWRpYVF1ZXJ5U2VydmljZSxcbiAgICAgIHVzZUV4aXN0aW5nOiBTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNreVBhZ2VDb250ZW50Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAjZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgI21lZGlhUXVlcnlTZXJ2aWNlID0gaW5qZWN0KFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UpO1xuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLiNtZWRpYVF1ZXJ5U2VydmljZS5vYnNlcnZlKHRoaXMuI2VsZW1lbnRSZWYsIHtcbiAgICAgIHVwZGF0ZVJlc3BvbnNpdmVDbGFzc2VzOiB0cnVlLFxuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI21lZGlhUXVlcnlTZXJ2aWNlLnVub2JzZXJ2ZSgpO1xuICB9XG59XG4iXX0=
|
|
@@ -11,7 +11,9 @@ const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
|
|
|
11
11
|
const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
|
|
12
12
|
const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
|
|
13
13
|
/**
|
|
14
|
-
* Displays a page using the specified layout.
|
|
14
|
+
* Displays a page using the specified layout. The page component is a responsive container,
|
|
15
|
+
* meaning content will respect the breakpoints within the page element instead of the window.
|
|
16
|
+
* This is helpful if there is other content to the left or right of the page.
|
|
15
17
|
*/
|
|
16
18
|
export class SkyPageComponent {
|
|
17
19
|
constructor() {
|
|
@@ -25,7 +27,7 @@ export class SkyPageComponent {
|
|
|
25
27
|
}
|
|
26
28
|
/**
|
|
27
29
|
* The page layout that applies spacing to the page header and content. Use the layout
|
|
28
|
-
* that corresponds with the top-level component type used on the page,
|
|
30
|
+
* that corresponds with the top-level component type used on the page, or use `fit` to
|
|
29
31
|
* constrain the page contents to the available viewport.
|
|
30
32
|
* Use `none` for custom content that does not adhere to predefined spacing or constraints.
|
|
31
33
|
* @default "none"
|
|
@@ -73,4 +75,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
73
75
|
type: HostBinding,
|
|
74
76
|
args: ['class']
|
|
75
77
|
}] } });
|
|
76
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
78
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFdBQVcsRUFDWCxLQUFLLEVBR0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBNkIsb0JBQW9CLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFOUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMvQixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFM0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sOEJBQThCLENBQUM7O0FBRzFFLE1BQU0sY0FBYyxHQUFzQixNQUFNLENBQUM7QUFFakQsTUFBTSw2QkFBNkIsR0FBRyw0QkFBNEIsQ0FBQztBQUNuRSxNQUFNLG1CQUFtQixHQUFHLGtCQUFrQixDQUFDO0FBQy9DLE1BQU0sb0JBQW9CLEdBQUcsR0FBRyxtQkFBbUIsR0FBRyxjQUFjLEVBQUUsQ0FBQztBQUV2RTs7OztHQUlHO0FBTUgsTUFBTSxPQUFPLGdCQUFnQjtJQUw3Qjs7UUFvQlMsYUFBUSxHQUFHLG9CQUFvQixDQUFDO1FBRXZDLDJDQUF1QztRQUN2QyxtREFBK0M7UUFFL0MsMENBQWlCLElBQUksT0FBTyxFQUFRLEVBQUM7UUFFckMseUNBQWdCLE1BQU0sQ0FBQywwQkFBMEIsQ0FBQyxFQUFDO1FBQ25ELDBDQUFpQixNQUFNLENBQUMsb0JBQW9CLENBQUMsRUFBQztLQWlDL0M7SUF2REM7Ozs7OztPQU1HO0lBQ0gsSUFDVyxNQUFNLENBQUMsS0FBb0M7UUFDcEQsdUJBQUEsSUFBSSw0QkFBVyxLQUFLLE1BQUEsQ0FBQztRQUNyQix1QkFBQSxJQUFJLHFFQUFnQixNQUFwQixJQUFJLENBQWtCLENBQUM7SUFDekIsQ0FBQztJQWFNLFFBQVE7UUFDYix1QkFBQSxJQUFJLHNDQUFjLENBQUMsUUFBUSxFQUFFLENBQUM7UUFFOUIsdUJBQUEsSUFBSSx1Q0FBZSxDQUFDLGtCQUFrQjthQUNuQyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUFBLElBQUksdUNBQWUsQ0FBQyxDQUFDO2FBQ3BDLFNBQVMsQ0FBQyxDQUFDLElBQStCLEVBQUUsRUFBRTtZQUM3Qyx1QkFBQSxJQUFJLG9DQUFtQixJQUFJLENBQUMsTUFBMkIsTUFBQSxDQUFDO1lBQ3hELHVCQUFBLElBQUkscUVBQWdCLE1BQXBCLElBQUksQ0FBa0IsQ0FBQztRQUN6QixDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTSxXQUFXO1FBQ2hCLHVCQUFBLElBQUksc0NBQWMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUVqQyx1QkFBQSxJQUFJLHVDQUFlLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDM0IsdUJBQUEsSUFBSSx1Q0FBZSxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ2pDLENBQUM7OztJQUdDLElBQUksUUFBUSxHQUFHLHVCQUFBLElBQUksZ0NBQVE7UUFDekIsQ0FBQyxDQUFDLEdBQUcsbUJBQW1CLEdBQUcsdUJBQUEsSUFBSSxnQ0FBUSxFQUFFO1FBQ3pDLENBQUMsQ0FBQyxvQkFBb0IsQ0FBQztJQUV6QixJQUFJLHVCQUFBLElBQUksd0NBQWdCLEVBQUU7UUFDeEIsUUFBUSxHQUFHLEdBQUcsUUFBUSxJQUFJLDZCQUE2QixHQUNyRCx1QkFBQSxJQUFJLHdDQUNOLEVBQUUsQ0FBQztLQUNKO0lBRUQsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7QUFDM0IsQ0FBQzs2R0F2RFUsZ0JBQWdCO2lHQUFoQixnQkFBZ0IscUhBRmhCLENBQUMsMEJBQTBCLEVBQUUsb0JBQW9CLENBQUMsMEJBRG5ELGdCQUFnQjsyRkFHZixnQkFBZ0I7a0JBTDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFVBQVU7b0JBQ3BCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFNBQVMsRUFBRSxDQUFDLDBCQUEwQixFQUFFLG9CQUFvQixDQUFDO2lCQUM5RDs4QkFVWSxNQUFNO3NCQURoQixLQUFLO2dCQU9DLFFBQVE7c0JBRGQsV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5TGF5b3V0SG9zdEZvckNoaWxkQXJncywgU2t5TGF5b3V0SG9zdFNlcnZpY2UgfSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHsgU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UgfSBmcm9tICcuL3BhZ2UtdGhlbWUtYWRhcHRlci5zZXJ2aWNlJztcbmltcG9ydCB7IFNreVBhZ2VMYXlvdXRUeXBlIH0gZnJvbSAnLi90eXBlcy9wYWdlLWxheW91dC10eXBlJztcblxuY29uc3QgTEFZT1VUX0RFRkFVTFQ6IFNreVBhZ2VMYXlvdXRUeXBlID0gJ25vbmUnO1xuXG5jb25zdCBMQVlPVVRfRk9SX0NISUxEX0NMQVNTX1BSRUZJWCA9ICdza3ktbGF5b3V0LWhvc3QtZm9yLWNoaWxkLSc7XG5jb25zdCBMQVlPVVRfQ0xBU1NfUFJFRklYID0gJ3NreS1sYXlvdXQtaG9zdC0nO1xuY29uc3QgTEFZT1VUX0NMQVNTX0RFRkFVTFQgPSBgJHtMQVlPVVRfQ0xBU1NfUFJFRklYfSR7TEFZT1VUX0RFRkFVTFR9YDtcblxuLyoqXG4gKiBEaXNwbGF5cyBhIHBhZ2UgdXNpbmcgdGhlIHNwZWNpZmllZCBsYXlvdXQuIFRoZSBwYWdlIGNvbXBvbmVudCBpcyBhIHJlc3BvbnNpdmUgY29udGFpbmVyLFxuICogbWVhbmluZyBjb250ZW50IHdpbGwgcmVzcGVjdCB0aGUgYnJlYWtwb2ludHMgd2l0aGluIHRoZSBwYWdlIGVsZW1lbnQgaW5zdGVhZCBvZiB0aGUgd2luZG93LlxuICogVGhpcyBpcyBoZWxwZnVsIGlmIHRoZXJlIGlzIG90aGVyIGNvbnRlbnQgdG8gdGhlIGxlZnQgb3IgcmlnaHQgb2YgdGhlIHBhZ2UuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1wYWdlJyxcbiAgdGVtcGxhdGU6IGA8bmctY29udGVudCAvPmAsXG4gIHByb3ZpZGVyczogW1NreVBhZ2VUaGVtZUFkYXB0ZXJTZXJ2aWNlLCBTa3lMYXlvdXRIb3N0U2VydmljZV0sXG59KVxuZXhwb3J0IGNsYXNzIFNreVBhZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBUaGUgcGFnZSBsYXlvdXQgdGhhdCBhcHBsaWVzIHNwYWNpbmcgdG8gdGhlIHBhZ2UgaGVhZGVyIGFuZCBjb250ZW50LiBVc2UgdGhlIGxheW91dFxuICAgKiB0aGF0IGNvcnJlc3BvbmRzIHdpdGggdGhlIHRvcC1sZXZlbCBjb21wb25lbnQgdHlwZSB1c2VkIG9uIHRoZSBwYWdlLCBvciB1c2UgYGZpdGAgdG9cbiAgICogY29uc3RyYWluIHRoZSBwYWdlIGNvbnRlbnRzIHRvIHRoZSBhdmFpbGFibGUgdmlld3BvcnQuXG4gICAqIFVzZSBgbm9uZWAgZm9yIGN1c3RvbSBjb250ZW50IHRoYXQgZG9lcyBub3QgYWRoZXJlIHRvIHByZWRlZmluZWQgc3BhY2luZyBvciBjb25zdHJhaW50cy5cbiAgICogQGRlZmF1bHQgXCJub25lXCJcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzZXQgbGF5b3V0KHZhbHVlOiBTa3lQYWdlTGF5b3V0VHlwZSB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI2xheW91dCA9IHZhbHVlO1xuICAgIHRoaXMuI3VwZGF0ZUNzc0NsYXNzKCk7XG4gIH1cblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgcHVibGljIGNzc0NsYXNzID0gTEFZT1VUX0NMQVNTX0RFRkFVTFQ7XG5cbiAgI2xheW91dDogU2t5UGFnZUxheW91dFR5cGUgfCB1bmRlZmluZWQ7XG4gICNsYXlvdXRGb3JDaGlsZDogU2t5UGFnZUxheW91dFR5cGUgfCB1bmRlZmluZWQ7XG5cbiAgI25nVW5zdWJzY3JpYmUgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICN0aGVtZUFkYXB0ZXIgPSBpbmplY3QoU2t5UGFnZVRoZW1lQWRhcHRlclNlcnZpY2UpO1xuICAjbGF5b3V0SG9zdFN2YyA9IGluamVjdChTa3lMYXlvdXRIb3N0U2VydmljZSk7XG5cbiAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5hZGRUaGVtZSgpO1xuXG4gICAgdGhpcy4jbGF5b3V0SG9zdFN2Yy5ob3N0TGF5b3V0Rm9yQ2hpbGRcbiAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLiNuZ1Vuc3Vic2NyaWJlKSlcbiAgICAgIC5zdWJzY3JpYmUoKGFyZ3M6IFNreUxheW91dEhvc3RGb3JDaGlsZEFyZ3MpID0+IHtcbiAgICAgICAgdGhpcy4jbGF5b3V0Rm9yQ2hpbGQgPSBhcmdzLmxheW91dCBhcyBTa3lQYWdlTGF5b3V0VHlwZTtcbiAgICAgICAgdGhpcy4jdXBkYXRlQ3NzQ2xhc3MoKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI3RoZW1lQWRhcHRlci5yZW1vdmVUaGVtZSgpO1xuXG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5uZXh0KCk7XG4gICAgdGhpcy4jbmdVbnN1YnNjcmliZS5jb21wbGV0ZSgpO1xuICB9XG5cbiAgI3VwZGF0ZUNzc0NsYXNzKCk6IHZvaWQge1xuICAgIGxldCBjc3NDbGFzcyA9IHRoaXMuI2xheW91dFxuICAgICAgPyBgJHtMQVlPVVRfQ0xBU1NfUFJFRklYfSR7dGhpcy4jbGF5b3V0fWBcbiAgICAgIDogTEFZT1VUX0NMQVNTX0RFRkFVTFQ7XG5cbiAgICBpZiAodGhpcy4jbGF5b3V0Rm9yQ2hpbGQpIHtcbiAgICAgIGNzc0NsYXNzID0gYCR7Y3NzQ2xhc3N9ICR7TEFZT1VUX0ZPUl9DSElMRF9DTEFTU19QUkVGSVh9JHtcbiAgICAgICAgdGhpcy4jbGF5b3V0Rm9yQ2hpbGRcbiAgICAgIH1gO1xuICAgIH1cblxuICAgIHRoaXMuY3NzQ2xhc3MgPSBjc3NDbGFzcztcbiAgfVxufVxuIl19
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
var _SkyPageHeaderComponent_elementRef, _SkyPageHeaderComponent_mediaQueryService;
|
|
2
|
+
import { __classPrivateFieldGet } from "tslib";
|
|
3
|
+
import { Component, ElementRef, Input, inject, } from '@angular/core';
|
|
4
|
+
import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, } from '@skyux/core';
|
|
2
5
|
import * as i0 from "@angular/core";
|
|
3
6
|
import * as i1 from "@angular/common";
|
|
4
7
|
import * as i2 from "@skyux/router";
|
|
@@ -8,15 +11,40 @@ let parentLink;
|
|
|
8
11
|
* Displays page heading's contents using spacing that corresponds to the parent page's layout
|
|
9
12
|
*/
|
|
10
13
|
export class SkyPageHeaderComponent {
|
|
14
|
+
constructor() {
|
|
15
|
+
_SkyPageHeaderComponent_elementRef.set(this, inject(ElementRef));
|
|
16
|
+
_SkyPageHeaderComponent_mediaQueryService.set(this, inject(SkyResizeObserverMediaQueryService));
|
|
17
|
+
}
|
|
18
|
+
ngOnInit() {
|
|
19
|
+
__classPrivateFieldGet(this, _SkyPageHeaderComponent_mediaQueryService, "f").observe(__classPrivateFieldGet(this, _SkyPageHeaderComponent_elementRef, "f"), {
|
|
20
|
+
updateResponsiveClasses: true,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
ngOnDestroy() {
|
|
24
|
+
__classPrivateFieldGet(this, _SkyPageHeaderComponent_mediaQueryService, "f").unobserve();
|
|
25
|
+
}
|
|
11
26
|
}
|
|
27
|
+
_SkyPageHeaderComponent_elementRef = new WeakMap(), _SkyPageHeaderComponent_mediaQueryService = new WeakMap();
|
|
12
28
|
SkyPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
SkyPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" },
|
|
29
|
+
SkyPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, providers: [
|
|
30
|
+
SkyResizeObserverMediaQueryService,
|
|
31
|
+
{
|
|
32
|
+
provide: SkyMediaQueryService,
|
|
33
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
34
|
+
},
|
|
35
|
+
], ngImport: i0, template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\"></ng-content>\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\"></ng-content>\n <div>\n <h1 class=\"sky-page-header-text\">\n <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n <a\n *ngIf=\"parentLink.permalink?.url\"\n [skyHref]=\"parentLink.permalink.url\"\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <a\n *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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 class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n </span>\n </span>\n <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n <ng-content select=\"sky-page-header-actions\"></ng-content>\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, var(--sky-compat-page-header-margin-top-and-bottom, 0) 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:-moz-fit-content;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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }] });
|
|
14
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
|
|
15
37
|
type: Component,
|
|
16
|
-
args: [{ selector: 'sky-page-header',
|
|
38
|
+
args: [{ selector: 'sky-page-header', providers: [
|
|
39
|
+
SkyResizeObserverMediaQueryService,
|
|
40
|
+
{
|
|
41
|
+
provide: SkyMediaQueryService,
|
|
42
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
43
|
+
},
|
|
44
|
+
], template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\"></ng-content>\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\"></ng-content>\n <div>\n <h1 class=\"sky-page-header-text\">\n <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n <a\n *ngIf=\"parentLink.permalink?.url\"\n [skyHref]=\"parentLink.permalink.url\"\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <a\n *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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 class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n </span>\n </span>\n <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n <ng-content select=\"sky-page-header-actions\"></ng-content>\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, var(--sky-compat-page-header-margin-top-and-bottom, 0) 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:-moz-fit-content;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"] }]
|
|
17
45
|
}], propDecorators: { parentLink: [{
|
|
18
46
|
type: Input
|
|
19
47
|
}], pageTitle: [{
|
|
20
48
|
type: Input
|
|
21
49
|
}] } });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL3BhZ2VzL3NyYy9saWIvbW9kdWxlcy9wYWdlLWhlYWRlci9wYWdlLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvcGFnZXMvc3JjL2xpYi9tb2R1bGVzL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxVQUFVLEVBQ1YsS0FBSyxFQUdMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsb0JBQW9CLEVBQ3BCLGtDQUFrQyxHQUNuQyxNQUFNLGFBQWEsQ0FBQzs7Ozs7QUFJckIsSUFBSSxVQUF1QixDQUFDO0FBRTVCOztHQUVHO0FBYUgsTUFBTSxPQUFPLHNCQUFzQjtJQVpuQztRQXlCRSw2Q0FBYyxNQUFNLENBQUMsVUFBVSxDQUFDLEVBQUM7UUFDakMsb0RBQXFCLE1BQU0sQ0FBQyxrQ0FBa0MsQ0FBQyxFQUFDO0tBV2pFO0lBVFEsUUFBUTtRQUNiLHVCQUFBLElBQUksaURBQW1CLENBQUMsT0FBTyxDQUFDLHVCQUFBLElBQUksMENBQVksRUFBRTtZQUNoRCx1QkFBdUIsRUFBRSxJQUFJO1NBQzlCLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFTSxXQUFXO1FBQ2hCLHVCQUFBLElBQUksaURBQW1CLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDdEMsQ0FBQzs7O21IQXhCVSxzQkFBc0I7dUdBQXRCLHNCQUFzQix3R0FSdEI7UUFDVCxrQ0FBa0M7UUFDbEM7WUFDRSxPQUFPLEVBQUUsb0JBQW9CO1lBQzdCLFdBQVcsRUFBRSxrQ0FBa0M7U0FDaEQ7S0FDRiwwQkM5QkgsazFEQTBDQTsyRkRWYSxzQkFBc0I7a0JBWmxDLFNBQVM7K0JBQ0UsaUJBQWlCLGFBR2hCO3dCQUNULGtDQUFrQzt3QkFDbEM7NEJBQ0UsT0FBTyxFQUFFLG9CQUFvQjs0QkFDN0IsV0FBVyxFQUFFLGtDQUFrQzt5QkFDaEQ7cUJBQ0Y7OEJBT00sVUFBVTtzQkFEaEIsS0FBSztnQkFPQyxTQUFTO3NCQURmLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBPbkRlc3Ryb3ksXG4gIE9uSW5pdCxcbiAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIFNreU1lZGlhUXVlcnlTZXJ2aWNlLFxuICBTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLFxufSBmcm9tICdAc2t5dXgvY29yZSc7XG5cbmltcG9ydCB7IFNreVBhZ2VMaW5rIH0gZnJvbSAnLi4vYWN0aW9uLWh1Yi90eXBlcy9wYWdlLWxpbmsnO1xuXG5sZXQgcGFyZW50TGluazogU2t5UGFnZUxpbms7XG5cbi8qKlxuICogRGlzcGxheXMgcGFnZSBoZWFkaW5nJ3MgY29udGVudHMgdXNpbmcgc3BhY2luZyB0aGF0IGNvcnJlc3BvbmRzIHRvIHRoZSBwYXJlbnQgcGFnZSdzIGxheW91dFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktcGFnZS1oZWFkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wYWdlLWhlYWRlci5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICBTa3lSZXNpemVPYnNlcnZlck1lZGlhUXVlcnlTZXJ2aWNlLFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IFNreU1lZGlhUXVlcnlTZXJ2aWNlLFxuICAgICAgdXNlRXhpc3Rpbmc6IFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5UGFnZUhlYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIEEgbGluayB0byB0aGUgcGFyZW50IHBhZ2Ugb2YgdGhlIGN1cnJlbnQgcGFnZS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBwYXJlbnRMaW5rPzogdHlwZW9mIHBhcmVudExpbms7XG5cbiAgLyoqXG4gICAqIFRoZSB0aXRsZSBvZiB0aGUgY3VycmVudCBwYWdlLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIHBhZ2VUaXRsZSE6IHN0cmluZztcblxuICAjZWxlbWVudFJlZiA9IGluamVjdChFbGVtZW50UmVmKTtcbiAgI21lZGlhUXVlcnlTZXJ2aWNlID0gaW5qZWN0KFNreVJlc2l6ZU9ic2VydmVyTWVkaWFRdWVyeVNlcnZpY2UpO1xuXG4gIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLiNtZWRpYVF1ZXJ5U2VydmljZS5vYnNlcnZlKHRoaXMuI2VsZW1lbnRSZWYsIHtcbiAgICAgIHVwZGF0ZVJlc3BvbnNpdmVDbGFzc2VzOiB0cnVlLFxuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuI21lZGlhUXVlcnlTZXJ2aWNlLnVub2JzZXJ2ZSgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyXCI+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1wYWdlLWhlYWRlci1hbGVydHNcIj48L25nLWNvbnRlbnQ+XG4gIDxkaXYgY2xhc3M9XCJza3ktcGFnZS1oZWFkZXItaW5mb1wiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1wYWdlLWhlYWRlci1hdmF0YXJcIj48L25nLWNvbnRlbnQ+XG4gICAgPGRpdj5cbiAgICAgIDxoMSBjbGFzcz1cInNreS1wYWdlLWhlYWRlci10ZXh0XCI+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwicGFyZW50TGlua1wiIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLXBhcmVudC1saW5rLXdyYXBwZXJcIj5cbiAgICAgICAgICA8YVxuICAgICAgICAgICAgKm5nSWY9XCJwYXJlbnRMaW5rLnBlcm1hbGluaz8udXJsXCJcbiAgICAgICAgICAgIFtza3lIcmVmXT1cInBhcmVudExpbmsucGVybWFsaW5rLnVybFwiXG4gICAgICAgICAgICBjbGFzcz1cInNreS1mb250LWhlYWRpbmctMSBza3ktcGFnZS1oZWFkZXItcGFyZW50LWxpbmtcIlxuICAgICAgICAgICAgPnt7IHBhcmVudExpbmsubGFiZWwgfX08L2FcbiAgICAgICAgICA+XG4gICAgICAgICAgPGFcbiAgICAgICAgICAgICpuZ0lmPVwicGFyZW50TGluay5wZXJtYWxpbms/LnJvdXRlIGFzIHBlcm1hbGlua1JvdXRlXCJcbiAgICAgICAgICAgIFtza3lBcHBMaW5rXT1cInBlcm1hbGlua1JvdXRlLmNvbW1hbmRzXCJcbiAgICAgICAgICAgIFtxdWVyeVBhcmFtc109XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnF1ZXJ5UGFyYW1zXCJcbiAgICAgICAgICAgIFtxdWVyeVBhcmFtc0hhbmRsaW5nXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8ucXVlcnlQYXJhbXNIYW5kbGluZ1wiXG4gICAgICAgICAgICBbZnJhZ21lbnRdPVwicGVybWFsaW5rUm91dGUuZXh0cmFzPy5mcmFnbWVudFwiXG4gICAgICAgICAgICBbcHJlc2VydmVGcmFnbWVudF09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnByZXNlcnZlRnJhZ21lbnRcIlxuICAgICAgICAgICAgW3NraXBMb2NhdGlvbkNoYW5nZV09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnNraXBMb2NhdGlvbkNoYW5nZVwiXG4gICAgICAgICAgICBbcmVwbGFjZVVybF09XCJwZXJtYWxpbmtSb3V0ZS5leHRyYXM/LnJlcGxhY2VVcmxcIlxuICAgICAgICAgICAgW3N0YXRlXT1cInBlcm1hbGlua1JvdXRlLmV4dHJhcz8uc3RhdGVcIlxuICAgICAgICAgICAgY2xhc3M9XCJza3ktZm9udC1oZWFkaW5nLTEgc2t5LXBhZ2UtaGVhZGVyLXBhcmVudC1saW5rXCJcbiAgICAgICAgICAgID57eyBwYXJlbnRMaW5rLmxhYmVsIH19PC9hXG4gICAgICAgICAgPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLWNoZXZyb25cIj5cbiAgICAgICAgICAgIDxza3ktaWNvbiBpY29uPVwiY2hldnJvbi1yaWdodFwiIGljb25UeXBlPVwic2t5dXhcIiAvPlxuICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8d2JyICpuZ0lmPVwicGFyZW50TGlua1wiIC8+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLXBhZ2UtdGl0bGUgc2t5LWZvbnQtaGVhZGluZy0xXCI+XG4gICAgICAgICAge3sgcGFnZVRpdGxlIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvaDE+XG4gICAgICA8ZGl2IGNsYXNzPVwic2t5LXBhZ2UtaGVhZGVyLWNvbnRlbnRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LXBhZ2UtaGVhZGVyLWRldGFpbHNcIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1wYWdlLWhlYWRlci1hY3Rpb25zXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
package/fesm2015/skyux-pages.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Pipe, NgModule, Component, Input, inject, Optional, ChangeDetectionStrategy, Injectable, Inject, HostBinding } from '@angular/core';
|
|
4
|
+
import { Pipe, NgModule, Component, Input, inject, ElementRef, Optional, ChangeDetectionStrategy, Injectable, Inject, HostBinding } from '@angular/core';
|
|
5
5
|
import * as i6 from '@skyux/i18n';
|
|
6
6
|
import { SkyI18nModule, getLibStringForLocale, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
7
7
|
import * as i4 from '@skyux/indicators';
|
|
@@ -14,7 +14,7 @@ import * as i2 from '@skyux/router';
|
|
|
14
14
|
import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
|
|
15
15
|
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
16
16
|
import * as i1$1 from '@skyux/modals';
|
|
17
|
-
import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyMediaBreakpoints, SkyLayoutHostService } from '@skyux/core';
|
|
17
|
+
import { SkyLogService, SkyTrimModule, SkyDefaultInputProvider, SkyMediaQueryService, SkyMediaBreakpoints, SkyResizeObserverMediaQueryService, SkyLayoutHostService } from '@skyux/core';
|
|
18
18
|
import { RouterModule } from '@angular/router';
|
|
19
19
|
import { Subject } from 'rxjs';
|
|
20
20
|
import { takeUntil } from 'rxjs/operators';
|
|
@@ -380,17 +380,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
380
380
|
args: [{ selector: 'sky-page-header-details', template: "<ng-content />\n", styles: [":host{display:block}:host:not(:empty){margin-top:var(--sky-margin-stacked-sm)}\n"] }]
|
|
381
381
|
}] });
|
|
382
382
|
|
|
383
|
+
var _SkyPageHeaderComponent_elementRef, _SkyPageHeaderComponent_mediaQueryService;
|
|
383
384
|
let parentLink;
|
|
384
385
|
/**
|
|
385
386
|
* Displays page heading's contents using spacing that corresponds to the parent page's layout
|
|
386
387
|
*/
|
|
387
388
|
class SkyPageHeaderComponent {
|
|
389
|
+
constructor() {
|
|
390
|
+
_SkyPageHeaderComponent_elementRef.set(this, inject(ElementRef));
|
|
391
|
+
_SkyPageHeaderComponent_mediaQueryService.set(this, inject(SkyResizeObserverMediaQueryService));
|
|
392
|
+
}
|
|
393
|
+
ngOnInit() {
|
|
394
|
+
__classPrivateFieldGet(this, _SkyPageHeaderComponent_mediaQueryService, "f").observe(__classPrivateFieldGet(this, _SkyPageHeaderComponent_elementRef, "f"), {
|
|
395
|
+
updateResponsiveClasses: true,
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
ngOnDestroy() {
|
|
399
|
+
__classPrivateFieldGet(this, _SkyPageHeaderComponent_mediaQueryService, "f").unobserve();
|
|
400
|
+
}
|
|
388
401
|
}
|
|
402
|
+
_SkyPageHeaderComponent_elementRef = new WeakMap(), _SkyPageHeaderComponent_mediaQueryService = new WeakMap();
|
|
389
403
|
SkyPageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
390
|
-
SkyPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" },
|
|
404
|
+
SkyPageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageHeaderComponent, selector: "sky-page-header", inputs: { parentLink: "parentLink", pageTitle: "pageTitle" }, providers: [
|
|
405
|
+
SkyResizeObserverMediaQueryService,
|
|
406
|
+
{
|
|
407
|
+
provide: SkyMediaQueryService,
|
|
408
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
409
|
+
},
|
|
410
|
+
], ngImport: i0, template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\"></ng-content>\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\"></ng-content>\n <div>\n <h1 class=\"sky-page-header-text\">\n <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n <a\n *ngIf=\"parentLink.permalink?.url\"\n [skyHref]=\"parentLink.permalink.url\"\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <a\n *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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 class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n </span>\n </span>\n <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n <ng-content select=\"sky-page-header-actions\"></ng-content>\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, var(--sky-compat-page-header-margin-top-and-bottom, 0) 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:-moz-fit-content;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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "component", type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i2.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }] });
|
|
391
411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageHeaderComponent, decorators: [{
|
|
392
412
|
type: Component,
|
|
393
|
-
args: [{ selector: 'sky-page-header',
|
|
413
|
+
args: [{ selector: 'sky-page-header', providers: [
|
|
414
|
+
SkyResizeObserverMediaQueryService,
|
|
415
|
+
{
|
|
416
|
+
provide: SkyMediaQueryService,
|
|
417
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
418
|
+
},
|
|
419
|
+
], template: "<div class=\"sky-page-header\">\n <ng-content select=\"sky-page-header-alerts\"></ng-content>\n <div class=\"sky-page-header-info\">\n <ng-content select=\"sky-page-header-avatar\"></ng-content>\n <div>\n <h1 class=\"sky-page-header-text\">\n <span *ngIf=\"parentLink\" class=\"sky-page-header-parent-link-wrapper\">\n <a\n *ngIf=\"parentLink.permalink?.url\"\n [skyHref]=\"parentLink.permalink.url\"\n class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <a\n *ngIf=\"parentLink.permalink?.route as permalinkRoute\"\n [skyAppLink]=\"permalinkRoute.commands\"\n [queryParams]=\"permalinkRoute.extras?.queryParams\"\n [queryParamsHandling]=\"permalinkRoute.extras?.queryParamsHandling\"\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 class=\"sky-font-heading-1 sky-page-header-parent-link\"\n >{{ parentLink.label }}</a\n >\n <span class=\"sky-page-header-chevron\">\n <sky-icon icon=\"chevron-right\" iconType=\"skyux\" />\n </span>\n </span>\n <wbr *ngIf=\"parentLink\" />\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\"></ng-content>\n <ng-content select=\"sky-page-header-actions\"></ng-content>\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, var(--sky-compat-page-header-margin-top-and-bottom, 0) 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:-moz-fit-content;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"] }]
|
|
394
420
|
}], propDecorators: { parentLink: [{
|
|
395
421
|
type: Input
|
|
396
422
|
}], pageTitle: [{
|
|
@@ -722,17 +748,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
722
748
|
}]
|
|
723
749
|
}] });
|
|
724
750
|
|
|
751
|
+
var _SkyPageContentComponent_elementRef, _SkyPageContentComponent_mediaQueryService;
|
|
725
752
|
/**
|
|
726
753
|
* Displays page contents using spacing that corresponds to the parent
|
|
727
754
|
* page's layout.
|
|
728
755
|
*/
|
|
729
756
|
class SkyPageContentComponent {
|
|
757
|
+
constructor() {
|
|
758
|
+
_SkyPageContentComponent_elementRef.set(this, inject(ElementRef));
|
|
759
|
+
_SkyPageContentComponent_mediaQueryService.set(this, inject(SkyResizeObserverMediaQueryService));
|
|
760
|
+
}
|
|
761
|
+
ngOnInit() {
|
|
762
|
+
__classPrivateFieldGet(this, _SkyPageContentComponent_mediaQueryService, "f").observe(__classPrivateFieldGet(this, _SkyPageContentComponent_elementRef, "f"), {
|
|
763
|
+
updateResponsiveClasses: true,
|
|
764
|
+
});
|
|
765
|
+
}
|
|
766
|
+
ngOnDestroy() {
|
|
767
|
+
__classPrivateFieldGet(this, _SkyPageContentComponent_mediaQueryService, "f").unobserve();
|
|
768
|
+
}
|
|
730
769
|
}
|
|
770
|
+
_SkyPageContentComponent_elementRef = new WeakMap(), _SkyPageContentComponent_mediaQueryService = new WeakMap();
|
|
731
771
|
SkyPageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
732
|
-
SkyPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageContentComponent, selector: "sky-page-content",
|
|
772
|
+
SkyPageContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SkyPageContentComponent, selector: "sky-page-content", providers: [
|
|
773
|
+
SkyResizeObserverMediaQueryService,
|
|
774
|
+
{
|
|
775
|
+
provide: SkyMediaQueryService,
|
|
776
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
777
|
+
},
|
|
778
|
+
], 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 });
|
|
733
779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyPageContentComponent, decorators: [{
|
|
734
780
|
type: Component,
|
|
735
|
-
args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
781
|
+
args: [{ selector: 'sky-page-content', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
782
|
+
SkyResizeObserverMediaQueryService,
|
|
783
|
+
{
|
|
784
|
+
provide: SkyMediaQueryService,
|
|
785
|
+
useExisting: SkyResizeObserverMediaQueryService,
|
|
786
|
+
},
|
|
787
|
+
], 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"] }]
|
|
736
788
|
}] });
|
|
737
789
|
|
|
738
790
|
var _SkyPageThemeAdapterService_styleEl, _SkyPageThemeAdapterService_document;
|
|
@@ -782,7 +834,9 @@ const LAYOUT_FOR_CHILD_CLASS_PREFIX = 'sky-layout-host-for-child-';
|
|
|
782
834
|
const LAYOUT_CLASS_PREFIX = 'sky-layout-host-';
|
|
783
835
|
const LAYOUT_CLASS_DEFAULT = `${LAYOUT_CLASS_PREFIX}${LAYOUT_DEFAULT}`;
|
|
784
836
|
/**
|
|
785
|
-
* Displays a page using the specified layout.
|
|
837
|
+
* Displays a page using the specified layout. The page component is a responsive container,
|
|
838
|
+
* meaning content will respect the breakpoints within the page element instead of the window.
|
|
839
|
+
* This is helpful if there is other content to the left or right of the page.
|
|
786
840
|
*/
|
|
787
841
|
class SkyPageComponent {
|
|
788
842
|
constructor() {
|
|
@@ -796,7 +850,7 @@ class SkyPageComponent {
|
|
|
796
850
|
}
|
|
797
851
|
/**
|
|
798
852
|
* The page layout that applies spacing to the page header and content. Use the layout
|
|
799
|
-
* that corresponds with the top-level component type used on the page,
|
|
853
|
+
* that corresponds with the top-level component type used on the page, or use `fit` to
|
|
800
854
|
* constrain the page contents to the available viewport.
|
|
801
855
|
* Use `none` for custom content that does not adhere to predefined spacing or constraints.
|
|
802
856
|
* @default "none"
|