@skyux/layout 10.10.0 → 10.12.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 +1514 -1378
- package/esm2022/lib/modules/box/box-controls.component.mjs +18 -4
- package/esm2022/lib/modules/box/box.component.mjs +19 -10
- package/esm2022/lib/modules/card/card.component.mjs +1 -1
- package/fesm2022/skyux-layout.mjs +33 -13
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/lib/modules/box/box-controls.component.d.ts +2 -0
- package/lib/modules/box/box.component.d.ts +3 -1
- package/package.json +9 -9
|
@@ -1,14 +1,28 @@
|
|
|
1
|
-
import { Component } from '@angular/core';
|
|
1
|
+
import { Component, inject } from '@angular/core';
|
|
2
|
+
import { SkyContentInfoProvider } from '@skyux/core';
|
|
3
|
+
import { SKY_BOX_HEADER_ID } from './box-header-id-token';
|
|
2
4
|
import * as i0 from "@angular/core";
|
|
3
5
|
/**
|
|
4
6
|
* Specifies the controls to display in upper right corner of the box. These buttons typically let users edit the box content.
|
|
5
7
|
*/
|
|
6
8
|
export class SkyBoxControlsComponent {
|
|
9
|
+
boxHasHeader(value) {
|
|
10
|
+
if (value) {
|
|
11
|
+
this.#contentInfoProvider.patchInfo({
|
|
12
|
+
descriptor: { type: 'elementId', value: this.#boxHeaderId },
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
this.#contentInfoProvider.patchInfo({ descriptor: undefined });
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
#contentInfoProvider = inject(SkyContentInfoProvider);
|
|
20
|
+
#boxHeaderId = inject(SKY_BOX_HEADER_ID);
|
|
7
21
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxControlsComponent, selector: "sky-box-controls", ngImport: i0, template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }); }
|
|
22
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxControlsComponent, selector: "sky-box-controls", providers: [SkyContentInfoProvider], ngImport: i0, template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }); }
|
|
9
23
|
}
|
|
10
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxControlsComponent, decorators: [{
|
|
11
25
|
type: Component,
|
|
12
|
-
args: [{ selector: 'sky-box-controls', template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }]
|
|
26
|
+
args: [{ selector: 'sky-box-controls', providers: [SkyContentInfoProvider], template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }]
|
|
13
27
|
}] });
|
|
14
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LWNvbnRyb2xzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2JveC9ib3gtY29udHJvbHMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2xheW91dC9zcmMvbGliL21vZHVsZXMvYm94L2JveC1jb250cm9scy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFckQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7O0FBRTFEOztHQUVHO0FBTUgsTUFBTSxPQUFPLHVCQUF1QjtJQUMzQixZQUFZLENBQUMsS0FBYztRQUNoQyxJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsSUFBSSxDQUFDLG9CQUFvQixDQUFDLFNBQVMsQ0FBQztnQkFDbEMsVUFBVSxFQUFFLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRTthQUM1RCxDQUFDLENBQUM7UUFDTCxDQUFDO2FBQU0sQ0FBQztZQUNOLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxTQUFTLENBQUMsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztRQUNqRSxDQUFDO0lBQ0gsQ0FBQztJQUVRLG9CQUFvQixHQUFHLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQ3RELFlBQVksR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQzs4R0FadkMsdUJBQXVCO2tHQUF2Qix1QkFBdUIsMkNBRnZCLENBQUMsc0JBQXNCLENBQUMsMEJDWHJDLDhEQUdBOzsyRkRVYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0Usa0JBQWtCLGFBRWpCLENBQUMsc0JBQXNCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2t5Q29udGVudEluZm9Qcm92aWRlciB9IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU0tZX0JPWF9IRUFERVJfSUQgfSBmcm9tICcuL2JveC1oZWFkZXItaWQtdG9rZW4nO1xuXG4vKipcbiAqIFNwZWNpZmllcyB0aGUgY29udHJvbHMgdG8gZGlzcGxheSBpbiB1cHBlciByaWdodCBjb3JuZXIgb2YgdGhlIGJveC4gVGhlc2UgYnV0dG9ucyB0eXBpY2FsbHkgbGV0IHVzZXJzIGVkaXQgdGhlIGJveCBjb250ZW50LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdza3ktYm94LWNvbnRyb2xzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JveC1jb250cm9scy5jb21wb25lbnQuaHRtbCcsXG4gIHByb3ZpZGVyczogW1NreUNvbnRlbnRJbmZvUHJvdmlkZXJdLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lCb3hDb250cm9sc0NvbXBvbmVudCB7XG4gIHB1YmxpYyBib3hIYXNIZWFkZXIodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMuI2NvbnRlbnRJbmZvUHJvdmlkZXIucGF0Y2hJbmZvKHtcbiAgICAgICAgZGVzY3JpcHRvcjogeyB0eXBlOiAnZWxlbWVudElkJywgdmFsdWU6IHRoaXMuI2JveEhlYWRlcklkIH0sXG4gICAgICB9KTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy4jY29udGVudEluZm9Qcm92aWRlci5wYXRjaEluZm8oeyBkZXNjcmlwdG9yOiB1bmRlZmluZWQgfSk7XG4gICAgfVxuICB9XG5cbiAgcmVhZG9ubHkgI2NvbnRlbnRJbmZvUHJvdmlkZXIgPSBpbmplY3QoU2t5Q29udGVudEluZm9Qcm92aWRlcik7XG4gIHJlYWRvbmx5ICNib3hIZWFkZXJJZCA9IGluamVjdChTS1lfQk9YX0hFQURFUl9JRCk7XG59XG4iLCI8ZGl2IGNsYXNzPVwic2t5LWJveC1jb250cm9sc1wiPlxuICA8bmctY29udGVudCAvPlxuPC9kaXY+XG4iXX0=
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Component, ContentChild, ElementRef, Input, ViewEncapsulation, inject, } from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { SkyIdService } from '@skyux/core';
|
|
3
|
+
import { SkyBoxControlsComponent } from './box-controls.component';
|
|
3
4
|
import { SKY_BOX_HEADER_ID } from './box-header-id-token';
|
|
4
5
|
import { SkyBoxHeaderComponent } from './box-header.component';
|
|
5
6
|
import * as i0 from "@angular/core";
|
|
@@ -9,15 +10,21 @@ import * as i1 from "@skyux/theme";
|
|
|
9
10
|
*/
|
|
10
11
|
export class SkyBoxComponent {
|
|
11
12
|
set boxHeaderRef(value) {
|
|
12
|
-
this.#
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
this.#boxHeaderRef = value;
|
|
14
|
+
if (this.#boxControls) {
|
|
15
|
+
this.#boxControls.boxHasHeader(!!value);
|
|
16
|
+
}
|
|
15
17
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
set boxControls(value) {
|
|
19
|
+
this.#boxControls = value;
|
|
20
|
+
if (value) {
|
|
21
|
+
value.boxHasHeader(!!this.#boxHeaderRef);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
#boxControls;
|
|
25
|
+
#boxHeaderRef;
|
|
18
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
27
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, providers: [
|
|
20
|
-
SkyContentInfoProvider,
|
|
21
28
|
{
|
|
22
29
|
provide: SKY_BOX_HEADER_ID,
|
|
23
30
|
useFactory() {
|
|
@@ -25,12 +32,11 @@ export class SkyBoxComponent {
|
|
|
25
32
|
return idService.generateId();
|
|
26
33
|
},
|
|
27
34
|
},
|
|
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 }); }
|
|
35
|
+
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }, { propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], 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 }); }
|
|
29
36
|
}
|
|
30
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
31
38
|
type: Component,
|
|
32
39
|
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, providers: [
|
|
33
|
-
SkyContentInfoProvider,
|
|
34
40
|
{
|
|
35
41
|
provide: SKY_BOX_HEADER_ID,
|
|
36
42
|
useFactory() {
|
|
@@ -48,5 +54,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
48
54
|
}], boxHeaderRef: [{
|
|
49
55
|
type: ContentChild,
|
|
50
56
|
args: [SkyBoxHeaderComponent, { read: ElementRef }]
|
|
57
|
+
}], boxControls: [{
|
|
58
|
+
type: ContentChild,
|
|
59
|
+
args: [SkyBoxControlsComponent]
|
|
51
60
|
}] } });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
61
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm94LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2JveC9ib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21wb25lbnRzL2xheW91dC9zcmMvbGliL21vZHVsZXMvYm94L2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLGlCQUFpQixFQUNqQixNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUUzQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7O0FBRS9EOztHQUVHO0FBZ0JILE1BQU0sT0FBTyxlQUFlO0lBOEIxQixJQUNXLFlBQVksQ0FBQyxLQUE2QjtRQUNuRCxJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDMUMsQ0FBQztJQUNILENBQUM7SUFFRCxJQUNXLFdBQVcsQ0FBQyxLQUEwQztRQUMvRCxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztRQUUxQixJQUFJLEtBQUssRUFBRSxDQUFDO1lBQ1YsS0FBSyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzNDLENBQUM7SUFDSCxDQUFDO0lBRUQsWUFBWSxDQUFzQztJQUNsRCxhQUFhLENBQXlCOzhHQWhEM0IsZUFBZTtrR0FBZixlQUFlLDhIQVZmO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsVUFBVTtvQkFDUixNQUFNLFNBQVMsR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLENBQUM7b0JBQ3ZDLE9BQU8sU0FBUyxDQUFDLFVBQVUsRUFBRSxDQUFDO2dCQUNoQyxDQUFDO2FBQ0Y7U0FDRixvRUFnQ2EscUJBQXFCLDJCQUFVLFVBQVUsMkRBUXpDLHVCQUF1QixnREN0RXZDLHNiQWdCQTs7MkZEZ0JhLGVBQWU7a0JBZjNCLFNBQVM7K0JBQ0UsU0FBUyxpQkFHSixpQkFBaUIsQ0FBQyxJQUFJLGFBQzFCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFVBQVU7Z0NBQ1IsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLFlBQVksQ0FBQyxDQUFDO2dDQUN2QyxPQUFPLFNBQVMsQ0FBQyxVQUFVLEVBQUUsQ0FBQzs0QkFDaEMsQ0FBQzt5QkFDRjtxQkFDRjs4QkFVTSxTQUFTO3NCQURmLEtBQUs7Z0JBV0MsY0FBYztzQkFEcEIsS0FBSztnQkFXQyxRQUFRO3NCQURkLEtBQUs7Z0JBSUssWUFBWTtzQkFEdEIsWUFBWTt1QkFBQyxxQkFBcUIsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBUzlDLFdBQVc7c0JBRHJCLFlBQVk7dUJBQUMsdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIEVsZW1lbnRSZWYsXG4gIElucHV0LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgaW5qZWN0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNreUlkU2VydmljZSB9IGZyb20gJ0Bza3l1eC9jb3JlJztcblxuaW1wb3J0IHsgU2t5Qm94Q29udHJvbHNDb21wb25lbnQgfSBmcm9tICcuL2JveC1jb250cm9scy5jb21wb25lbnQnO1xuaW1wb3J0IHsgU0tZX0JPWF9IRUFERVJfSUQgfSBmcm9tICcuL2JveC1oZWFkZXItaWQtdG9rZW4nO1xuaW1wb3J0IHsgU2t5Qm94SGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9ib3gtaGVhZGVyLmNvbXBvbmVudCc7XG5cbi8qKlxuICogUHJvdmlkZXMgYSBjb21tb24gbG9vay1hbmQtZmVlbCBmb3IgYm94IGNvbnRlbnQgd2l0aCBvcHRpb25zIHRvIGRpc3BsYXkgYSBjb21tb24gYm94IGhlYWRlciwgc3BlY2lmeSBib2R5IGNvbnRlbnQsIGFuZCBkaXNwbGF5IGNvbW1vbiBib3ggY29udHJvbHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NreS1ib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYm94LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IFNLWV9CT1hfSEVBREVSX0lELFxuICAgICAgdXNlRmFjdG9yeSgpOiBzdHJpbmcge1xuICAgICAgICBjb25zdCBpZFNlcnZpY2UgPSBpbmplY3QoU2t5SWRTZXJ2aWNlKTtcbiAgICAgICAgcmV0dXJuIGlkU2VydmljZS5nZW5lcmF0ZUlkKCk7XG4gICAgICB9LFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNreUJveENvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBUaGUgQVJJQSBsYWJlbCBmb3IgdGhlIGJveC4gVGhpcyBzZXRzIHRoZSBib3gncyBgYXJpYS1sYWJlbGAgYXR0cmlidXRlIHRvIHByb3ZpZGUgYSB0ZXh0IGVxdWl2YWxlbnQgZm9yIHNjcmVlbiByZWFkZXJzXG4gICAqIFt0byBzdXBwb3J0IGFjY2Vzc2liaWxpdHldKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvbGVhcm4vYWNjZXNzaWJpbGl0eSkuXG4gICAqIElmIHRoZSBib3ggaW5jbHVkZXMgYSB2aXNpYmxlIGxhYmVsLCB1c2UgYGFyaWFMYWJlbGxlZEJ5YCBpbnN0ZWFkLlxuICAgKiBGb3IgbW9yZSBpbmZvcm1hdGlvbiBhYm91dCB0aGUgYGFyaWEtbGFiZWxgIGF0dHJpYnV0ZSwgc2VlIHRoZSBbV0FJLUFSSUEgZGVmaW5pdGlvbl0oaHR0cHM6Ly93d3cudzMub3JnL1RSL3dhaS1hcmlhLyNhcmlhLWxhYmVsKS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhcmlhTGFiZWw6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIEhUTUwgZWxlbWVudCBJRCBvZiB0aGUgZWxlbWVudCB0aGF0IGxhYmVsc1xuICAgKiB0aGUgYm94LiBUaGlzIHNldHMgdGhlIGJveCdzIGBhcmlhLWxhYmVsbGVkYnlgIGF0dHJpYnV0ZSB0byBwcm92aWRlIGEgdGV4dCBlcXVpdmFsZW50IGZvciBzY3JlZW4gcmVhZGVyc1xuICAgKiBbdG8gc3VwcG9ydCBhY2Nlc3NpYmlsaXR5XShodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2xlYXJuL2FjY2Vzc2liaWxpdHkpLlxuICAgKiBJZiB0aGUgYm94IGRvZXMgbm90IGluY2x1ZGUgYSB2aXNpYmxlIGxhYmVsLCB1c2UgYGFyaWFMYWJlbGAgaW5zdGVhZC5cbiAgICogRm9yIG1vcmUgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGBhcmlhLWxhYmVsbGVkYnlgIGF0dHJpYnV0ZSwgc2VlIHRoZSBbV0FJLUFSSUEgZGVmaW5pdGlvbl0oaHR0cHM6Ly93d3cudzMub3JnL1RSL3dhaS1hcmlhLyNhcmlhLWxhYmVsbGVkYnkpLlxuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGFyaWFMYWJlbGxlZEJ5OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIFRoZSBBUklBIHJvbGUgZm9yIHRoZSBib3hcbiAgICogW3RvIHN1cHBvcnQgYWNjZXNzaWJpbGl0eV0oaHR0cHM6Ly9kZXZlbG9wZXIuYmxhY2tiYXVkLmNvbS9za3l1eC9sZWFybi9hY2Nlc3NpYmlsaXR5KVxuICAgKiBieSBpbmRpY2F0aW5nIHdoYXQgdGhlIGJveCBjb250YWlucy4gRm9yIGluZm9ybWF0aW9uIGFib3V0XG4gICAqIGhvdyBhbiBBUklBIHJvbGUgaW5kaWNhdGVzIHdoYXQgYW4gaXRlbSByZXByZXNlbnRzIG9uIGEgd2ViIHBhZ2UsXG4gICAqIHNlZSB0aGUgW1dBSS1BUklBIHJvbGVzIG1vZGVsXShodHRwczovL3d3dy53My5vcmcvV0FJL1BGL2FyaWEvI3JvbGVzKS5cbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBhcmlhUm9sZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuXG4gIEBDb250ZW50Q2hpbGQoU2t5Qm94SGVhZGVyQ29tcG9uZW50LCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSlcbiAgcHVibGljIHNldCBib3hIZWFkZXJSZWYodmFsdWU6IEVsZW1lbnRSZWYgfCB1bmRlZmluZWQpIHtcbiAgICB0aGlzLiNib3hIZWFkZXJSZWYgPSB2YWx1ZTtcbiAgICBpZiAodGhpcy4jYm94Q29udHJvbHMpIHtcbiAgICAgIHRoaXMuI2JveENvbnRyb2xzLmJveEhhc0hlYWRlcighIXZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBAQ29udGVudENoaWxkKFNreUJveENvbnRyb2xzQ29tcG9uZW50KVxuICBwdWJsaWMgc2V0IGJveENvbnRyb2xzKHZhbHVlOiBTa3lCb3hDb250cm9sc0NvbXBvbmVudCB8IHVuZGVmaW5lZCkge1xuICAgIHRoaXMuI2JveENvbnRyb2xzID0gdmFsdWU7XG5cbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHZhbHVlLmJveEhhc0hlYWRlcighIXRoaXMuI2JveEhlYWRlclJlZik7XG4gICAgfVxuICB9XG5cbiAgI2JveENvbnRyb2xzOiBTa3lCb3hDb250cm9sc0NvbXBvbmVudCB8IHVuZGVmaW5lZDtcbiAgI2JveEhlYWRlclJlZjogRWxlbWVudFJlZiB8IHVuZGVmaW5lZDtcbn1cbiIsIjxzZWN0aW9uXG4gIGNsYXNzPVwic2t5LWJveFwiXG4gIFthdHRyLmFyaWEtbGFiZWxdPVwiYXJpYUxhYmVsXCJcbiAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cImFyaWFMYWJlbGxlZEJ5XCJcbiAgW2F0dHIucm9sZV09XCJhcmlhUm9sZVwiXG4gIFtza3lUaGVtZUNsYXNzXT1cIntcbiAgICAnc2t5LXNoYWRvdyBza3ktYm9yZGVyLWRhcmsnOiAnZGVmYXVsdCcsXG4gICAgJ3NreS1lbGV2YXRpb24tMS1ib3JkZXJlZCc6ICdtb2Rlcm4nXG4gIH1cIlxuPlxuICA8ZGl2IGNsYXNzPVwic2t5LWJveC1oZWFkZXItY29udGVudFwiPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInNreS1ib3gtaGVhZGVyXCIgLz5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJza3ktYm94LWNvbnRyb2xzXCIgLz5cbiAgPC9kaXY+XG4gIDxuZy1jb250ZW50IC8+XG48L3NlY3Rpb24+XG4iXX0=
|
|
@@ -84,7 +84,7 @@ export class SkyCardComponent {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
87
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n <div\n *ngIf=\"selectable || showTitle\"\n class=\"sky-card-header\"\n (click)=\"contentClick()\"\n >\n <div class=\"sky-card-heading-middle\">\n <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n </div>\n <div *ngIf=\"selectable\" class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n ></sky-checkbox>\n </div>\n </div>\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n #actionsEl\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
87
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n <div\n *ngIf=\"selectable || showTitle\"\n class=\"sky-card-header\"\n (click)=\"contentClick()\"\n >\n <div class=\"sky-card-heading-middle\">\n <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n </div>\n <div *ngIf=\"selectable\" class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n ></sky-checkbox>\n </div>\n </div>\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n #actionsEl\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
88
88
|
}
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCardComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
@@ -654,20 +654,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
654
654
|
args: [{ selector: 'sky-box-content', template: "<div class=\"sky-box-content\">\n <ng-content />\n</div>\n" }]
|
|
655
655
|
}] });
|
|
656
656
|
|
|
657
|
+
const SKY_BOX_HEADER_ID = new InjectionToken('SKY_BOX_HEADER_ID');
|
|
658
|
+
|
|
657
659
|
/**
|
|
658
660
|
* Specifies the controls to display in upper right corner of the box. These buttons typically let users edit the box content.
|
|
659
661
|
*/
|
|
660
662
|
class SkyBoxControlsComponent {
|
|
663
|
+
boxHasHeader(value) {
|
|
664
|
+
if (value) {
|
|
665
|
+
this.#contentInfoProvider.patchInfo({
|
|
666
|
+
descriptor: { type: 'elementId', value: this.#boxHeaderId },
|
|
667
|
+
});
|
|
668
|
+
}
|
|
669
|
+
else {
|
|
670
|
+
this.#contentInfoProvider.patchInfo({ descriptor: undefined });
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
#contentInfoProvider = inject(SkyContentInfoProvider);
|
|
674
|
+
#boxHeaderId = inject(SKY_BOX_HEADER_ID);
|
|
661
675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxControlsComponent, selector: "sky-box-controls", ngImport: i0, template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }); }
|
|
676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxControlsComponent, selector: "sky-box-controls", providers: [SkyContentInfoProvider], ngImport: i0, template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }); }
|
|
663
677
|
}
|
|
664
678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxControlsComponent, decorators: [{
|
|
665
679
|
type: Component,
|
|
666
|
-
args: [{ selector: 'sky-box-controls', template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }]
|
|
680
|
+
args: [{ selector: 'sky-box-controls', providers: [SkyContentInfoProvider], template: "<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n" }]
|
|
667
681
|
}] });
|
|
668
682
|
|
|
669
|
-
const SKY_BOX_HEADER_ID = new InjectionToken('SKY_BOX_HEADER_ID');
|
|
670
|
-
|
|
671
683
|
/**
|
|
672
684
|
* Specifies a header for the box.
|
|
673
685
|
*/
|
|
@@ -688,15 +700,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
688
700
|
*/
|
|
689
701
|
class SkyBoxComponent {
|
|
690
702
|
set boxHeaderRef(value) {
|
|
691
|
-
this.#
|
|
692
|
-
|
|
693
|
-
|
|
703
|
+
this.#boxHeaderRef = value;
|
|
704
|
+
if (this.#boxControls) {
|
|
705
|
+
this.#boxControls.boxHasHeader(!!value);
|
|
706
|
+
}
|
|
694
707
|
}
|
|
695
|
-
|
|
696
|
-
|
|
708
|
+
set boxControls(value) {
|
|
709
|
+
this.#boxControls = value;
|
|
710
|
+
if (value) {
|
|
711
|
+
value.boxHasHeader(!!this.#boxHeaderRef);
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
#boxControls;
|
|
715
|
+
#boxHeaderRef;
|
|
697
716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
698
717
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, providers: [
|
|
699
|
-
SkyContentInfoProvider,
|
|
700
718
|
{
|
|
701
719
|
provide: SKY_BOX_HEADER_ID,
|
|
702
720
|
useFactory() {
|
|
@@ -704,12 +722,11 @@ class SkyBoxComponent {
|
|
|
704
722
|
return idService.generateId();
|
|
705
723
|
},
|
|
706
724
|
},
|
|
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 }); }
|
|
725
|
+
], queries: [{ propertyName: "boxHeaderRef", first: true, predicate: SkyBoxHeaderComponent, descendants: true, read: ElementRef }, { propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], 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 }); }
|
|
708
726
|
}
|
|
709
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
710
728
|
type: Component,
|
|
711
729
|
args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, providers: [
|
|
712
|
-
SkyContentInfoProvider,
|
|
713
730
|
{
|
|
714
731
|
provide: SKY_BOX_HEADER_ID,
|
|
715
732
|
useFactory() {
|
|
@@ -727,6 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
727
744
|
}], boxHeaderRef: [{
|
|
728
745
|
type: ContentChild,
|
|
729
746
|
args: [SkyBoxHeaderComponent, { read: ElementRef }]
|
|
747
|
+
}], boxControls: [{
|
|
748
|
+
type: ContentChild,
|
|
749
|
+
args: [SkyBoxControlsComponent]
|
|
730
750
|
}] } });
|
|
731
751
|
|
|
732
752
|
class SkyBoxModule {
|
|
@@ -1179,7 +1199,7 @@ class SkyCardComponent {
|
|
|
1179
1199
|
}
|
|
1180
1200
|
}
|
|
1181
1201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$2.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1182
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n <div\n *ngIf=\"selectable || showTitle\"\n class=\"sky-card-header\"\n (click)=\"contentClick()\"\n >\n <div class=\"sky-card-heading-middle\">\n <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n </div>\n <div *ngIf=\"selectable\" class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n ></sky-checkbox>\n </div>\n </div>\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n #actionsEl\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n class=\"sky-card sky-shadow\"\n [ngClass]=\"\n {\n 'sky-card-small': size === 'small',\n 'sky-card-selectable': selectable,\n 'sky-card-selected': selectable && selected\n }\"\n>\n <ng-content select=\"sky-inline-delete\" />\n <header>\n <div\n *ngIf=\"selectable || showTitle\"\n class=\"sky-card-header\"\n (click)=\"contentClick()\"\n >\n <div class=\"sky-card-heading-middle\">\n <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n <ng-content select=\"sky-card-title\" />\n </h1>\n </div>\n <div *ngIf=\"selectable\" class=\"sky-card-check\">\n <sky-checkbox\n [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n [ngModel]=\"selected\"\n (click)=\"$event.stopPropagation()\"\n (ngModelChange)=\"onCheckboxChange($event)\"\n ></sky-checkbox>\n </div>\n </div>\n </header>\n <div\n class=\"sky-card-content sky-padding-even-default\"\n (click)=\"contentClick()\"\n >\n <ng-content select=\"sky-card-content\" />\n </div>\n <div\n class=\"sky-card-actions\"\n [hidden]=\"actionsEl.children.length === 0\"\n #actionsEl\n >\n <ng-content select=\"sky-card-actions\" />\n </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1183
1203
|
}
|
|
1184
1204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyCardComponent, decorators: [{
|
|
1185
1205
|
type: Component,
|