@skyux/layout 9.8.0 → 9.9.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.
- package/documentation.json +465 -386
- package/esm2022/lib/modules/box/box-header-id-token.mjs +3 -0
- package/esm2022/lib/modules/box/box-header.component.mjs +8 -4
- package/esm2022/lib/modules/box/box.component.mjs +35 -4
- package/fesm2022/skyux-layout.mjs +39 -6
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/lib/modules/box/box-header-id-token.d.ts +2 -0
- package/lib/modules/box/box-header.component.d.ts +1 -0
- package/lib/modules/box/box.component.d.ts +4 -1
- package/package.json +9 -9
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { InjectionToken } from '@angular/core';
|
|
2
|
+
export const SKY_BOX_HEADER_ID = new InjectionToken('SKY_BOX_HEADER_ID');
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LWhlYWRlci1pZC10b2tlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2JveC9ib3gtaGVhZGVyLWlkLXRva2VuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0MsTUFBTSxDQUFDLE1BQU0saUJBQWlCLEdBQUcsSUFBSSxjQUFjLENBQ2pELG1CQUFtQixDQUNwQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0aW9uVG9rZW4gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGNvbnN0IFNLWV9CT1hfSEVBREVSX0lEID0gbmV3IEluamVjdGlvblRva2VuPHN0cmluZz4oXG4gICdTS1lfQk9YX0hFQURFUl9JRCdcbik7XG4iXX0=
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
-
import { Component, ViewEncapsulation } from '@angular/core';
|
|
1
|
+
import { Component, ViewEncapsulation, inject } from '@angular/core';
|
|
2
|
+
import { SKY_BOX_HEADER_ID } from './box-header-id-token';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
import * as i1 from "@skyux/core";
|
|
4
5
|
/**
|
|
5
6
|
* Specifies a header for the box.
|
|
6
7
|
*/
|
|
7
8
|
export class SkyBoxHeaderComponent {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.boxHeaderId = inject(SKY_BOX_HEADER_ID);
|
|
11
|
+
}
|
|
8
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n <span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.λ4, selector: "[skyTrim]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n <span [id]=\"boxHeaderId\" skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.λ4, selector: "[skyTrim]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10
14
|
}
|
|
11
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxHeaderComponent, decorators: [{
|
|
12
16
|
type: Component,
|
|
13
|
-
args: [{ selector: 'sky-box-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-box-header\">\n <span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"] }]
|
|
17
|
+
args: [{ selector: 'sky-box-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-box-header\">\n <span [id]=\"boxHeaderId\" skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"] }]
|
|
14
18
|
}] });
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LWhlYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbGF5b3V0L3NyYy9saWIvbW9kdWxlcy9ib3gvYm94LWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbGF5b3V0L3NyYy9saWIvbW9kdWxlcy9ib3gvYm94LWhlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVyRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7O0FBRTFEOztHQUVHO0FBT0gsTUFBTSxPQUFPLHFCQUFxQjtJQU5sQztRQU9xQixnQkFBVyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0tBQzVEOzhHQUZZLHFCQUFxQjtrR0FBckIscUJBQXFCLHNEQ2JsQyw0TkFNQTs7MkZET2EscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLGdCQUFnQixpQkFHWCxpQkFBaUIsQ0FBQyxJQUFJIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBWaWV3RW5jYXBzdWxhdGlvbiwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNLWV9CT1hfSEVBREVSX0lEIH0gZnJvbSAnLi9ib3gtaGVhZGVyLWlkLXRva2VuJztcblxuLyoqXG4gKiBTcGVjaWZpZXMgYSBoZWFkZXIgZm9yIHRoZSBib3guXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1ib3gtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JveC1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ib3gtaGVhZGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG59KVxuZXhwb3J0IGNsYXNzIFNreUJveEhlYWRlckNvbXBvbmVudCB7XG4gIHByb3RlY3RlZCByZWFkb25seSBib3hIZWFkZXJJZCA9IGluamVjdChTS1lfQk9YX0hFQURFUl9JRCk7XG59XG4iLCI8ZGl2IGNsYXNzPVwic2t5LWJveC1oZWFkZXJcIj5cbiAgPHNwYW4gW2lkXT1cImJveEhlYWRlcklkXCIgc2t5VHJpbT48bmctY29udGVudCAvPjwvc3BhblxuICA+PHNwYW4gY2xhc3M9XCJza3ktY29udHJvbC1oZWxwLWNvbnRhaW5lclwiXG4gICAgPjxuZy1jb250ZW50IHNlbGVjdD1cIi5za3ktY29udHJvbC1oZWxwXCI+PC9uZy1jb250ZW50XG4gID48L3NwYW4+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1,21 +1,52 @@
|
|
|
1
|
-
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
1
|
+
import { Component, ContentChild, ElementRef, Input, ViewEncapsulation, inject, } from '@angular/core';
|
|
2
|
+
import { SkyContentInfoProvider, SkyIdService } from '@skyux/core';
|
|
3
|
+
import { SKY_BOX_HEADER_ID } from './box-header-id-token';
|
|
4
|
+
import { SkyBoxHeaderComponent } from './box-header.component';
|
|
2
5
|
import * as i0 from "@angular/core";
|
|
3
6
|
import * as i1 from "@skyux/theme";
|
|
4
7
|
/**
|
|
5
8
|
* Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.
|
|
6
9
|
*/
|
|
7
10
|
export class SkyBoxComponent {
|
|
11
|
+
set boxHeaderRef(value) {
|
|
12
|
+
this.#contentInfoProvider.patchInfo({
|
|
13
|
+
descriptor: { type: 'elementId', value: this.#boxTitleId },
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
#contentInfoProvider = inject(SkyContentInfoProvider);
|
|
17
|
+
#boxTitleId = inject(SKY_BOX_HEADER_ID);
|
|
8
18
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" },
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, providers: [
|
|
20
|
+
SkyContentInfoProvider,
|
|
21
|
+
{
|
|
22
|
+
provide: SKY_BOX_HEADER_ID,
|
|
23
|
+
useFactory() {
|
|
24
|
+
const idService = inject(SkyIdService);
|
|
25
|
+
return idService.generateId();
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n <ng-content select=\"sky-box-header\" />\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:var(--sky-padding-even-xl)}\n"], dependencies: [{ kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
10
29
|
}
|
|
11
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
12
31
|
type: Component,
|
|
13
|
-
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None,
|
|
32
|
+
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, providers: [
|
|
33
|
+
SkyContentInfoProvider,
|
|
34
|
+
{
|
|
35
|
+
provide: SKY_BOX_HEADER_ID,
|
|
36
|
+
useFactory() {
|
|
37
|
+
const idService = inject(SkyIdService);
|
|
38
|
+
return idService.generateId();
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
], template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n <ng-content select=\"sky-box-header\" />\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:var(--sky-padding-even-xl)}\n"] }]
|
|
14
42
|
}], propDecorators: { ariaLabel: [{
|
|
15
43
|
type: Input
|
|
16
44
|
}], ariaLabelledBy: [{
|
|
17
45
|
type: Input
|
|
18
46
|
}], ariaRole: [{
|
|
19
47
|
type: Input
|
|
48
|
+
}], boxHeaderRef: [{
|
|
49
|
+
type: ContentChild,
|
|
50
|
+
args: [SkyBoxHeaderComponent, { read: ElementRef }]
|
|
20
51
|
}] } });
|
|
21
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2JveC9ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2xheW91dC9zcmMvbGliL21vZHVsZXMvYm94L2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLGlCQUFpQixFQUNqQixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHNCQUFzQixFQUFFLFlBQVksRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUVuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBRS9EOztHQUVHO0FBaUJILE1BQU0sT0FBTyxlQUFlO0lBOEIxQixJQUNXLFlBQVksQ0FBQyxLQUE2QjtRQUNuRCxJQUFJLENBQUMsb0JBQW9CLENBQUMsU0FBUyxDQUFDO1lBQ2xDLFVBQVUsRUFBRSxFQUFFLElBQUksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxXQUFXLEVBQUU7U0FDM0QsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVRLG9CQUFvQixHQUFHLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQ3RELFdBQVcsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQzs4R0F0Q3RDLGVBQWU7a0dBQWYsZUFBZSw4SEFYZjtZQUNULHNCQUFzQjtZQUN0QjtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixVQUFVO29CQUNSLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxZQUFZLENBQUMsQ0FBQztvQkFDdkMsT0FBTyxTQUFTLENBQUMsVUFBVSxFQUFFLENBQUM7Z0JBQ2hDLENBQUM7YUFDRjtTQUNGLG9FQWdDYSxxQkFBcUIsMkJBQVUsVUFBVSw2QkM5RHpELHNiQWdCQTs7MkZEZ0JhLGVBQWU7a0JBaEIzQixTQUFTOytCQUNFLFNBQVMsaUJBR0osaUJBQWlCLENBQUMsSUFBSSxhQUMxQjt3QkFDVCxzQkFBc0I7d0JBQ3RCOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFVBQVU7Z0NBQ1IsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO2dDQUN2QyxPQUFPLFNBQVMsQ0FBQyxVQUFVLEVBQUUsQ0FBQzs0QkFDaEMsQ0FBQzt5QkFDRjtxQkFDRjs4QkFVTSxTQUFTO3NCQURmLEtBQUs7Z0JBV0MsY0FBYztzQkFEcEIsS0FBSztnQkFXQyxRQUFRO3NCQURkLEtBQUs7Z0JBSUssWUFBWTtzQkFEdEIsWUFBWTt1QkFBQyxxQkFBcUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZCxcbiAgRWxlbWVudFJlZixcbiAgSW5wdXQsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxuICBpbmplY3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5Q29udGVudEluZm9Qcm92aWRlciwgU2t5SWRTZXJ2aWNlIH0gZnJvbSAnQHNreXV4L2NvcmUnO1xuXG5pbXBvcnQgeyBTS1lfQk9YX0hFQURFUl9JRCB9IGZyb20gJy4vYm94LWhlYWRlci1pZC10b2tlbic7XG5pbXBvcnQgeyBTa3lCb3hIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuL2JveC1oZWFkZXIuY29tcG9uZW50JztcblxuLyoqXG4gKiBQcm92aWRlcyBhIGNvbW1vbiBsb29rLWFuZC1mZWVsIGZvciBib3ggY29udGVudCB3aXRoIG9wdGlvbnMgdG8gZGlzcGxheSBhIGNvbW1vbiBib3ggaGVhZGVyLCBzcGVjaWZ5IGJvZHkgY29udGVudCwgYW5kIGRpc3BsYXkgY29tbW9uIGJveCBjb250cm9scy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LWJveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9ib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ib3guY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgU2t5Q29udGVudEluZm9Qcm92aWRlcixcbiAgICB7XG4gICAgICBwcm92aWRlOiBTS1lfQk9YX0hFQURFUl9JRCxcbiAgICAgIHVzZUZhY3RvcnkoKTogc3RyaW5nIHtcbiAgICAgICAgY29uc3QgaWRTZXJ2aWNlID0gaW5qZWN0KFNreUlkU2VydmljZSk7XG4gICAgICAgIHJldHVybiBpZFNlcnZpY2UuZ2VuZXJhdGVJZCgpO1xuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lCb3hDb21wb25lbnQge1xuICAvKipcbiAgICogVGhlIEFSSUEgbGFiZWwgZm9yIHRoZSBib3guIFRoaXMgc2V0cyB0aGUgYm94J3MgYGFyaWEtbGFiZWxgIGF0dHJpYnV0ZSB0byBwcm92aWRlIGEgdGV4dCBlcXVpdmFsZW50IGZvciBzY3JlZW4gcmVhZGVyc1xuICAgKiBbdG8gc3VwcG9ydCBhY2Nlc3NpYmlsaXR5XShodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2xlYXJuL2FjY2Vzc2liaWxpdHkpLlxuICAgKiBJZiB0aGUgYm94IGluY2x1ZGVzIGEgdmlzaWJsZSBsYWJlbCwgdXNlIGBhcmlhTGFiZWxsZWRCeWAgaW5zdGVhZC5cbiAgICogRm9yIG1vcmUgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGBhcmlhLWxhYmVsYCBhdHRyaWJ1dGUsIHNlZSB0aGUgW1dBSS1BUklBIGRlZmluaXRpb25dKGh0dHBzOi8vd3d3LnczLm9yZy9UUi93YWktYXJpYS8jYXJpYS1sYWJlbCkuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgYXJpYUxhYmVsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBIVE1MIGVsZW1lbnQgSUQgb2YgdGhlIGVsZW1lbnQgdGhhdCBsYWJlbHNcbiAgICogdGhlIGJveC4gVGhpcyBzZXRzIHRoZSBib3gncyBgYXJpYS1sYWJlbGxlZGJ5YCBhdHRyaWJ1dGUgdG8gcHJvdmlkZSBhIHRleHQgZXF1aXZhbGVudCBmb3Igc2NyZWVuIHJlYWRlcnNcbiAgICogW3RvIHN1cHBvcnQgYWNjZXNzaWJpbGl0eV0oaHR0cHM6Ly9kZXZlbG9wZXIuYmxhY2tiYXVkLmNvbS9za3l1eC9sZWFybi9hY2Nlc3NpYmlsaXR5KS5cbiAgICogSWYgdGhlIGJveCBkb2VzIG5vdCBpbmNsdWRlIGEgdmlzaWJsZSBsYWJlbCwgdXNlIGBhcmlhTGFiZWxgIGluc3RlYWQuXG4gICAqIEZvciBtb3JlIGluZm9ybWF0aW9uIGFib3V0IHRoZSBgYXJpYS1sYWJlbGxlZGJ5YCBhdHRyaWJ1dGUsIHNlZSB0aGUgW1dBSS1BUklBIGRlZmluaXRpb25dKGh0dHBzOi8vd3d3LnczLm9yZy9UUi93YWktYXJpYS8jYXJpYS1sYWJlbGxlZGJ5KS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhcmlhTGFiZWxsZWRCeTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgQVJJQSByb2xlIGZvciB0aGUgYm94XG4gICAqIFt0byBzdXBwb3J0IGFjY2Vzc2liaWxpdHldKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvbGVhcm4vYWNjZXNzaWJpbGl0eSlcbiAgICogYnkgaW5kaWNhdGluZyB3aGF0IHRoZSBib3ggY29udGFpbnMuIEZvciBpbmZvcm1hdGlvbiBhYm91dFxuICAgKiBob3cgYW4gQVJJQSByb2xlIGluZGljYXRlcyB3aGF0IGFuIGl0ZW0gcmVwcmVzZW50cyBvbiBhIHdlYiBwYWdlLFxuICAgKiBzZWUgdGhlIFtXQUktQVJJQSByb2xlcyBtb2RlbF0oaHR0cHM6Ly93d3cudzMub3JnL1dBSS9QRi9hcmlhLyNyb2xlcykuXG4gICAqL1xuICBASW5wdXQoKVxuICBwdWJsaWMgYXJpYVJvbGU6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICBAQ29udGVudENoaWxkKFNreUJveEhlYWRlckNvbXBvbmVudCwgeyByZWFkOiBFbGVtZW50UmVmIH0pXG4gIHB1YmxpYyBzZXQgYm94SGVhZGVyUmVmKHZhbHVlOiBFbGVtZW50UmVmIHwgdW5kZWZpbmVkKSB7XG4gICAgdGhpcy4jY29udGVudEluZm9Qcm92aWRlci5wYXRjaEluZm8oe1xuICAgICAgZGVzY3JpcHRvcjogeyB0eXBlOiAnZWxlbWVudElkJywgdmFsdWU6IHRoaXMuI2JveFRpdGxlSWQgfSxcbiAgICB9KTtcbiAgfVxuXG4gIHJlYWRvbmx5ICNjb250ZW50SW5mb1Byb3ZpZGVyID0gaW5qZWN0KFNreUNvbnRlbnRJbmZvUHJvdmlkZXIpO1xuICByZWFkb25seSAjYm94VGl0bGVJZCA9IGluamVjdChTS1lfQk9YX0hFQURFUl9JRCk7XG59XG4iLCI8c2VjdGlvblxuICBjbGFzcz1cInNreS1ib3hcIlxuICBbYXR0ci5hcmlhLWxhYmVsXT1cImFyaWFMYWJlbFwiXG4gIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJhcmlhTGFiZWxsZWRCeVwiXG4gIFthdHRyLnJvbGVdPVwiYXJpYVJvbGVcIlxuICBbc2t5VGhlbWVDbGFzc109XCJ7XG4gICAgJ3NreS1zaGFkb3cgc2t5LWJvcmRlci1kYXJrJzogJ2RlZmF1bHQnLFxuICAgICdza3ktZWxldmF0aW9uLTEtYm9yZGVyZWQnOiAnbW9kZXJuJ1xuICB9XCJcbj5cbiAgPGRpdiBjbGFzcz1cInNreS1ib3gtaGVhZGVyLWNvbnRlbnRcIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktYm94LWhlYWRlclwiIC8+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic2t5LWJveC1jb250cm9sc1wiIC8+XG4gIDwvZGl2PlxuICA8bmctY29udGVudCAvPlxuPC9zZWN0aW9uPlxuIl19
|
|
@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { Injectable, EventEmitter, Component, ViewEncapsulation, SkipSelf, HostBinding, Input, Output, ElementRef, Optional, ContentChildren, ViewChild, HostListener, NgModule, ChangeDetectionStrategy, Directive,
|
|
6
|
+
import { Injectable, EventEmitter, Component, ViewEncapsulation, SkipSelf, HostBinding, Input, Output, ElementRef, Optional, ContentChildren, ViewChild, HostListener, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, inject, ContentChild, TemplateRef, Inject } from '@angular/core';
|
|
7
7
|
import * as i2 from '@angular/router';
|
|
8
8
|
import { RouterModule } from '@angular/router';
|
|
9
9
|
import * as i2$1 from '@skyux/indicators';
|
|
@@ -15,7 +15,7 @@ import { SkyThemeModule } from '@skyux/theme';
|
|
|
15
15
|
import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
|
|
16
16
|
import { takeUntil, take } from 'rxjs/operators';
|
|
17
17
|
import * as i1$2 from '@skyux/core';
|
|
18
|
-
import { SkyMediaBreakpoints, SkyTrimModule, SkyCoreAdapterService, SkyLogService
|
|
18
|
+
import { SkyMediaBreakpoints, SkyContentInfoProvider, SkyIdService, SkyTrimModule, SkyCoreAdapterService, SkyLogService } from '@skyux/core';
|
|
19
19
|
import * as i1$3 from '@skyux/i18n';
|
|
20
20
|
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
21
21
|
import * as i3$1 from '@angular/forms';
|
|
@@ -666,34 +666,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
666
666
|
args: [{ selector: 'sky-box-controls', template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }]
|
|
667
667
|
}] });
|
|
668
668
|
|
|
669
|
+
const SKY_BOX_HEADER_ID = new InjectionToken('SKY_BOX_HEADER_ID');
|
|
670
|
+
|
|
669
671
|
/**
|
|
670
672
|
* Specifies a header for the box.
|
|
671
673
|
*/
|
|
672
674
|
class SkyBoxHeaderComponent {
|
|
675
|
+
constructor() {
|
|
676
|
+
this.boxHeaderId = inject(SKY_BOX_HEADER_ID);
|
|
677
|
+
}
|
|
673
678
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n <span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
679
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n <span [id]=\"boxHeaderId\" skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
675
680
|
}
|
|
676
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxHeaderComponent, decorators: [{
|
|
677
682
|
type: Component,
|
|
678
|
-
args: [{ selector: 'sky-box-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-box-header\">\n <span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"] }]
|
|
683
|
+
args: [{ selector: 'sky-box-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-box-header\">\n <span [id]=\"boxHeaderId\" skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"] }]
|
|
679
684
|
}] });
|
|
680
685
|
|
|
681
686
|
/**
|
|
682
687
|
* Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.
|
|
683
688
|
*/
|
|
684
689
|
class SkyBoxComponent {
|
|
690
|
+
set boxHeaderRef(value) {
|
|
691
|
+
this.#contentInfoProvider.patchInfo({
|
|
692
|
+
descriptor: { type: 'elementId', value: this.#boxTitleId },
|
|
693
|
+
});
|
|
694
|
+
}
|
|
695
|
+
#contentInfoProvider = inject(SkyContentInfoProvider);
|
|
696
|
+
#boxTitleId = inject(SKY_BOX_HEADER_ID);
|
|
685
697
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" },
|
|
698
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, providers: [
|
|
699
|
+
SkyContentInfoProvider,
|
|
700
|
+
{
|
|
701
|
+
provide: SKY_BOX_HEADER_ID,
|
|
702
|
+
useFactory() {
|
|
703
|
+
const idService = inject(SkyIdService);
|
|
704
|
+
return idService.generateId();
|
|
705
|
+
},
|
|
706
|
+
},
|
|
707
|
+
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n <ng-content select=\"sky-box-header\" />\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:var(--sky-padding-even-xl)}\n"], dependencies: [{ kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
687
708
|
}
|
|
688
709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
689
710
|
type: Component,
|
|
690
|
-
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None,
|
|
711
|
+
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, providers: [
|
|
712
|
+
SkyContentInfoProvider,
|
|
713
|
+
{
|
|
714
|
+
provide: SKY_BOX_HEADER_ID,
|
|
715
|
+
useFactory() {
|
|
716
|
+
const idService = inject(SkyIdService);
|
|
717
|
+
return idService.generateId();
|
|
718
|
+
},
|
|
719
|
+
},
|
|
720
|
+
], template: "<section\n class=\"sky-box\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n <ng-content select=\"sky-box-header\" />\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:var(--sky-padding-even-xl)}\n"] }]
|
|
691
721
|
}], propDecorators: { ariaLabel: [{
|
|
692
722
|
type: Input
|
|
693
723
|
}], ariaLabelledBy: [{
|
|
694
724
|
type: Input
|
|
695
725
|
}], ariaRole: [{
|
|
696
726
|
type: Input
|
|
727
|
+
}], boxHeaderRef: [{
|
|
728
|
+
type: ContentChild,
|
|
729
|
+
args: [SkyBoxHeaderComponent, { read: ElementRef }]
|
|
697
730
|
}] } });
|
|
698
731
|
|
|
699
732
|
class SkyBoxModule {
|