@skyux/layout 10.32.0 → 10.33.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 +1408 -1245
- package/esm2022/lib/modules/description-list/description-list-content.component.mjs +9 -3
- package/esm2022/lib/modules/description-list/description-list-term.component.mjs +13 -5
- package/esm2022/lib/modules/description-list/description-list.component.mjs +2 -2
- package/esm2022/lib/modules/description-list/description-list.module.mjs +9 -2
- package/fesm2022/skyux-layout.mjs +25 -6
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/lib/modules/description-list/description-list-content.component.d.ts +21 -2
- package/lib/modules/description-list/description-list-term.component.d.ts +2 -0
- package/lib/modules/description-list/description-list.module.d.ts +5 -4
- package/package.json +11 -10
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, ContentChildren } from '@angular/core';
|
|
1
|
+
import { Component, ContentChildren, Input, } from '@angular/core';
|
|
2
2
|
import { SkyDescriptionListDescriptionComponent } from './description-list-description.component';
|
|
3
3
|
import { SkyDescriptionListTermComponent } from './description-list-term.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
|
|
|
7
7
|
*/
|
|
8
8
|
export class SkyDescriptionListContentComponent {
|
|
9
9
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListContentComponent, selector: "sky-description-list-content", queries: [{ propertyName: "termComponents", predicate: SkyDescriptionListTermComponent }, { propertyName: "descriptionComponents", predicate: SkyDescriptionListDescriptionComponent }], ngImport: i0, template: "<ng-content />\n" }); }
|
|
10
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListContentComponent, selector: "sky-description-list-content", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle" }, queries: [{ propertyName: "termComponents", predicate: SkyDescriptionListTermComponent }, { propertyName: "descriptionComponents", predicate: SkyDescriptionListDescriptionComponent }], ngImport: i0, template: "<ng-content />\n" }); }
|
|
11
11
|
}
|
|
12
12
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListContentComponent, decorators: [{
|
|
13
13
|
type: Component,
|
|
@@ -18,5 +18,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
18
18
|
}], descriptionComponents: [{
|
|
19
19
|
type: ContentChildren,
|
|
20
20
|
args: [SkyDescriptionListDescriptionComponent]
|
|
21
|
+
}], helpKey: [{
|
|
22
|
+
type: Input
|
|
23
|
+
}], helpPopoverContent: [{
|
|
24
|
+
type: Input
|
|
25
|
+
}], helpPopoverTitle: [{
|
|
26
|
+
type: Input
|
|
21
27
|
}] } });
|
|
22
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzY3JpcHRpb24tbGlzdC1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2Rlc2NyaXB0aW9uLWxpc3QvZGVzY3JpcHRpb24tbGlzdC1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2Rlc2NyaXB0aW9uLWxpc3QvZGVzY3JpcHRpb24tbGlzdC1jb250ZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUNsRyxPQUFPLEVBQUUsK0JBQStCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQzs7QUFFcEY7O0dBRUc7QUFLSCxNQUFNLE9BQU8sa0NBQWtDOzhHQUFsQyxrQ0FBa0M7a0dBQWxDLGtDQUFrQyxtTkFDNUIsK0JBQStCLHdEQUcvQixzQ0FBc0MsNkJDdEJ6RCxrQkFDQTs7MkZEaUJhLGtDQUFrQztrQkFKOUMsU0FBUzsrQkFDRSw4QkFBOEI7OEJBS2pDLGNBQWM7c0JBRHBCLGVBQWU7dUJBQUMsK0JBQStCO2dCQUl6QyxxQkFBcUI7c0JBRDNCLGVBQWU7dUJBQUMsc0NBQXNDO2dCQVdoRCxPQUFPO3NCQURiLEtBQUs7Z0JBVUMsa0JBQWtCO3NCQUR4QixLQUFLO2dCQVNDLGdCQUFnQjtzQkFEdEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkcmVuLFxuICBJbnB1dCxcbiAgUXVlcnlMaXN0LFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNreURlc2NyaXB0aW9uTGlzdERlc2NyaXB0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi9kZXNjcmlwdGlvbi1saXN0LWRlc2NyaXB0aW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTa3lEZXNjcmlwdGlvbkxpc3RUZXJtQ29tcG9uZW50IH0gZnJvbSAnLi9kZXNjcmlwdGlvbi1saXN0LXRlcm0uY29tcG9uZW50JztcblxuLyoqXG4gKiBXcmFwcyB0aGUgdGVybS1kZXNjcmlwdGlvbiBwYWlycyBpbiB0aGUgZGVzY3JpcHRpb24gbGlzdC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LWRlc2NyaXB0aW9uLWxpc3QtY29udGVudCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZXNjcmlwdGlvbi1saXN0LWNvbnRlbnQuY29tcG9uZW50Lmh0bWwnLFxufSlcbmV4cG9ydCBjbGFzcyBTa3lEZXNjcmlwdGlvbkxpc3RDb250ZW50Q29tcG9uZW50IHtcbiAgQENvbnRlbnRDaGlsZHJlbihTa3lEZXNjcmlwdGlvbkxpc3RUZXJtQ29tcG9uZW50KVxuICBwdWJsaWMgdGVybUNvbXBvbmVudHM6IFF1ZXJ5TGlzdDxTa3lEZXNjcmlwdGlvbkxpc3RUZXJtQ29tcG9uZW50PiB8IHVuZGVmaW5lZDtcblxuICBAQ29udGVudENoaWxkcmVuKFNreURlc2NyaXB0aW9uTGlzdERlc2NyaXB0aW9uQ29tcG9uZW50KVxuICBwdWJsaWMgZGVzY3JpcHRpb25Db21wb25lbnRzOlxuICAgIHwgUXVlcnlMaXN0PFNreURlc2NyaXB0aW9uTGlzdERlc2NyaXB0aW9uQ29tcG9uZW50PlxuICAgIHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBBIGhlbHAga2V5IHRoYXQgaWRlbnRpZmllcyB0aGUgZ2xvYmFsIGhlbHAgY29udGVudCB0byBkaXNwbGF5LiBXaGVuIHNwZWNpZmllZCwgYSBbaGVscCBpbmxpbmVdKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvY29tcG9uZW50cy9oZWxwLWlubGluZSkgYnV0dG9uIGlzXG4gICAqIHBsYWNlZCBiZXNpZGUgdGhlIGRlc2NyaXB0aW9uIGxpc3QgY29udGVudCBsYWJlbC4gQ2xpY2tpbmcgdGhlIGJ1dHRvbiBpbnZva2VzIGdsb2JhbCBoZWxwIGFzIGNvbmZpZ3VyZWQgYnkgdGhlIGFwcGxpY2F0aW9uLlxuICAgKiBAcHJldmlld1xuICAgKi9cbiAgQElucHV0KClcbiAgcHVibGljIGhlbHBLZXk6IHN0cmluZyB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGhlbHAgcG9wb3Zlci4gV2hlbiBzcGVjaWZpZWQsIGEgW2hlbHAgaW5saW5lXShodHRwczovL2RldmVsb3Blci5ibGFja2JhdWQuY29tL3NreXV4L2NvbXBvbmVudHMvaGVscC1pbmxpbmUpXG4gICAqIGJ1dHRvbiBpcyBhZGRlZCB0byB0aGUgZGVzY3JpcHRpb24gbGlzdCBjb250ZW50LiBUaGUgaGVscCBpbmxpbmUgYnV0dG9uIGRpc3BsYXlzIGEgW3BvcG92ZXJdKGh0dHBzOi8vZGV2ZWxvcGVyLmJsYWNrYmF1ZC5jb20vc2t5dXgvY29tcG9uZW50cy9wb3BvdmVyKVxuICAgKiB3aGVuIGNsaWNrZWQgdXNpbmcgdGhlIHNwZWNpZmllZCBjb250ZW50IGFuZCBvcHRpb25hbCB0aXRsZS5cbiAgICogQHByZXZpZXdcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBoZWxwUG9wb3ZlckNvbnRlbnQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPHVua25vd24+IHwgdW5kZWZpbmVkO1xuXG4gIC8qKlxuICAgKiBUaGUgdGl0bGUgb2YgdGhlIGhlbHAgcG9wb3Zlci4gVGhpcyBwcm9wZXJ0eSBvbmx5IGFwcGxpZXMgd2hlbiBgaGVscFBvcG92ZXJDb250ZW50YCBpc1xuICAgKiBhbHNvIHNwZWNpZmllZC5cbiAgICogQHByZXZpZXdcbiAgICovXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBoZWxwUG9wb3ZlclRpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG59XG4iLCI8bmctY29udGVudCAvPlxuIl19
|
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject, } from '@angular/core';
|
|
2
|
+
import { SkyDescriptionListContentComponent } from './description-list-content.component';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
|
-
import * as i1 from "@
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
import * as i2 from "@skyux/help-inline";
|
|
6
|
+
import * as i3 from "@skyux/core";
|
|
4
7
|
/**
|
|
5
8
|
* Specifies the term in a term-description pair. To display a help button beside
|
|
6
9
|
* the term, include a help button element in the sky-description-list-term element
|
|
7
10
|
* and a sky-control-help CSS class on that element.
|
|
8
11
|
*/
|
|
9
12
|
export class SkyDescriptionListTermComponent {
|
|
13
|
+
constructor() {
|
|
14
|
+
this.content = inject(SkyDescriptionListContentComponent, {
|
|
15
|
+
optional: true,
|
|
16
|
+
});
|
|
17
|
+
}
|
|
10
18
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span skyTrim skyId #term=\"skyId\" class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><sky-help-inline\n *ngIf=\"content?.helpPopoverContent || content?.helpKey; else helpContent\"\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\" /></span\n></ng-template>\n<ng-template #helpContent\n ><ng-content select=\".sky-control-help\"\n/></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12
20
|
}
|
|
13
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
|
|
14
22
|
type: Component,
|
|
15
|
-
args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"
|
|
23
|
+
args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n ><span skyTrim skyId #term=\"skyId\" class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><sky-help-inline\n *ngIf=\"content?.helpPopoverContent || content?.helpKey; else helpContent\"\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\" /></span\n></ng-template>\n<ng-template #helpContent\n ><ng-content select=\".sky-control-help\"\n/></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"] }]
|
|
16
24
|
}], propDecorators: { templateRef: [{
|
|
17
25
|
type: ViewChild,
|
|
18
26
|
args: ['termTemplateRef', {
|
|
@@ -20,4 +28,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
20
28
|
static: true,
|
|
21
29
|
}]
|
|
22
30
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzY3JpcHRpb24tbGlzdC10ZXJtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2Rlc2NyaXB0aW9uLWxpc3QvZGVzY3JpcHRpb24tbGlzdC10ZXJtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9sYXlvdXQvc3JjL2xpYi9tb2R1bGVzL2Rlc2NyaXB0aW9uLWxpc3QvZGVzY3JpcHRpb24tbGlzdC10ZXJtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFdBQVcsRUFDWCxTQUFTLEVBQ1QsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxrQ0FBa0MsRUFBRSxNQUFNLHNDQUFzQyxDQUFDOzs7OztBQUUxRjs7OztHQUlHO0FBT0gsTUFBTSxPQUFPLCtCQUErQjtJQU41QztRQWFxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGtDQUFrQyxFQUFFO1lBQ3RFLFFBQVEsRUFBRSxJQUFJO1NBQ2YsQ0FBQyxDQUFDO0tBQ0o7OEdBVlksK0JBQStCO2tHQUEvQiwrQkFBK0IsNEpBRWxDLFdBQVcsMkNDdkJyQixta0JBY0E7OzJGRE9hLCtCQUErQjtrQkFOM0MsU0FBUzsrQkFDRSwyQkFBMkIsbUJBR3BCLHVCQUF1QixDQUFDLE1BQU07OEJBT3hDLFdBQVc7c0JBSmpCLFNBQVM7dUJBQUMsaUJBQWlCLEVBQUU7d0JBQzVCLElBQUksRUFBRSxXQUFXO3dCQUNqQixNQUFNLEVBQUUsSUFBSTtxQkFDYiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGQsXG4gIGluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFNreURlc2NyaXB0aW9uTGlzdENvbnRlbnRDb21wb25lbnQgfSBmcm9tICcuL2Rlc2NyaXB0aW9uLWxpc3QtY29udGVudC5jb21wb25lbnQnO1xuXG4vKipcbiAqIFNwZWNpZmllcyB0aGUgdGVybSBpbiBhIHRlcm0tZGVzY3JpcHRpb24gcGFpci4gVG8gZGlzcGxheSBhIGhlbHAgYnV0dG9uIGJlc2lkZVxuICogdGhlIHRlcm0sIGluY2x1ZGUgYSBoZWxwIGJ1dHRvbiBlbGVtZW50IGluIHRoZSBza3ktZGVzY3JpcHRpb24tbGlzdC10ZXJtIGVsZW1lbnRcbiAqIGFuZCBhIHNreS1jb250cm9sLWhlbHAgQ1NTIGNsYXNzIG9uIHRoYXQgZWxlbWVudC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2t5LWRlc2NyaXB0aW9uLWxpc3QtdGVybScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZXNjcmlwdGlvbi1saXN0LXRlcm0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZGVzY3JpcHRpb24tbGlzdC10ZXJtLmNvbXBvbmVudC5zY3NzJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNreURlc2NyaXB0aW9uTGlzdFRlcm1Db21wb25lbnQge1xuICBAVmlld0NoaWxkKCd0ZXJtVGVtcGxhdGVSZWYnLCB7XG4gICAgcmVhZDogVGVtcGxhdGVSZWYsXG4gICAgc3RhdGljOiB0cnVlLFxuICB9KVxuICBwdWJsaWMgdGVtcGxhdGVSZWY6IFRlbXBsYXRlUmVmPHVua25vd24+IHwgdW5kZWZpbmVkO1xuXG4gIHByb3RlY3RlZCByZWFkb25seSBjb250ZW50ID0gaW5qZWN0KFNreURlc2NyaXB0aW9uTGlzdENvbnRlbnRDb21wb25lbnQsIHtcbiAgICBvcHRpb25hbDogdHJ1ZSxcbiAgfSk7XG59XG4iLCI8bmctdGVtcGxhdGUgI3Rlcm1UZW1wbGF0ZVJlZlxuICA+PHNwYW4gc2t5VHJpbSBza3lJZCAjdGVybT1cInNreUlkXCIgY2xhc3M9XCJkZXNjcmlwdGlvbi1saXN0LXRlcm1cIlxuICAgID48bmctY29udGVudCAvPjwvc3BhblxuICA+PHNwYW4gY2xhc3M9XCJza3ktY29udHJvbC1oZWxwLWNvbnRhaW5lclwiXG4gICAgPjxza3ktaGVscC1pbmxpbmVcbiAgICAgICpuZ0lmPVwiY29udGVudD8uaGVscFBvcG92ZXJDb250ZW50IHx8IGNvbnRlbnQ/LmhlbHBLZXk7IGVsc2UgaGVscENvbnRlbnRcIlxuICAgICAgW2xhYmVsbGVkQnldPVwidGVybS5pZFwiXG4gICAgICBbaGVscEtleV09XCJjb250ZW50Py5oZWxwS2V5XCJcbiAgICAgIFtwb3BvdmVyVGl0bGVdPVwiY29udGVudD8uaGVscFBvcG92ZXJUaXRsZVwiXG4gICAgICBbcG9wb3ZlckNvbnRlbnRdPVwiY29udGVudD8uaGVscFBvcG92ZXJDb250ZW50XCIgLz48L3NwYW5cbj48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNoZWxwQ29udGVudFxuICA+PG5nLWNvbnRlbnQgc2VsZWN0PVwiLnNreS1jb250cm9sLWhlbHBcIlxuLz48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -68,11 +68,11 @@ export class SkyDescriptionListComponent {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: i1.SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;
|
|
71
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0;white-space:nowrap}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;overflow-wrap:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
72
72
|
}
|
|
73
73
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
|
-
args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;
|
|
75
|
+
args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0;white-space:nowrap}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;overflow-wrap:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"] }]
|
|
76
76
|
}], ctorParameters: () => [{ type: i1.SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyDescriptionListService }], propDecorators: { defaultDescription: [{
|
|
77
77
|
type: Input
|
|
78
78
|
}], listItemWidth: [{
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import { NgModule } from '@angular/core';
|
|
3
|
-
import { SkyTrimModule } from '@skyux/core';
|
|
3
|
+
import { SkyIdModule, SkyTrimModule } from '@skyux/core';
|
|
4
|
+
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
4
5
|
import { SkyThemeModule } from '@skyux/theme';
|
|
5
6
|
import { SkyLayoutResourcesModule } from '../shared/sky-layout-resources.module';
|
|
6
7
|
import { SkyDescriptionListContentComponent } from './description-list-content.component';
|
|
@@ -14,6 +15,8 @@ export class SkyDescriptionListModule {
|
|
|
14
15
|
SkyDescriptionListContentComponent,
|
|
15
16
|
SkyDescriptionListTermComponent,
|
|
16
17
|
SkyDescriptionListDescriptionComponent], imports: [CommonModule,
|
|
18
|
+
SkyHelpInlineModule,
|
|
19
|
+
SkyIdModule,
|
|
17
20
|
SkyLayoutResourcesModule,
|
|
18
21
|
SkyThemeModule,
|
|
19
22
|
SkyTrimModule], exports: [SkyDescriptionListComponent,
|
|
@@ -21,6 +24,8 @@ export class SkyDescriptionListModule {
|
|
|
21
24
|
SkyDescriptionListTermComponent,
|
|
22
25
|
SkyDescriptionListDescriptionComponent] }); }
|
|
23
26
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListModule, imports: [CommonModule,
|
|
27
|
+
SkyHelpInlineModule,
|
|
28
|
+
SkyIdModule,
|
|
24
29
|
SkyLayoutResourcesModule,
|
|
25
30
|
SkyThemeModule,
|
|
26
31
|
SkyTrimModule] }); }
|
|
@@ -36,6 +41,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
36
41
|
],
|
|
37
42
|
imports: [
|
|
38
43
|
CommonModule,
|
|
44
|
+
SkyHelpInlineModule,
|
|
45
|
+
SkyIdModule,
|
|
39
46
|
SkyLayoutResourcesModule,
|
|
40
47
|
SkyThemeModule,
|
|
41
48
|
SkyTrimModule,
|
|
@@ -48,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
48
55
|
],
|
|
49
56
|
}]
|
|
50
57
|
}] });
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzY3JpcHRpb24tbGlzdC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvbGF5b3V0L3NyYy9saWIvbW9kdWxlcy9kZXNjcmlwdGlvbi1saXN0L2Rlc2NyaXB0aW9uLWxpc3QubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxXQUFXLEVBQUUsYUFBYSxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3pELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFFOUMsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFakYsT0FBTyxFQUFFLGtDQUFrQyxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDMUYsT0FBTyxFQUFFLHNDQUFzQyxFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDbEcsT0FBTyxFQUFFLCtCQUErQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDcEYsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sOEJBQThCLENBQUM7O0FBd0IzRSxNQUFNLE9BQU8sd0JBQXdCOzhHQUF4Qix3QkFBd0I7K0dBQXhCLHdCQUF3QixpQkFwQmpDLDJCQUEyQjtZQUMzQixrQ0FBa0M7WUFDbEMsK0JBQStCO1lBQy9CLHNDQUFzQyxhQUd0QyxZQUFZO1lBQ1osbUJBQW1CO1lBQ25CLFdBQVc7WUFDWCx3QkFBd0I7WUFDeEIsY0FBYztZQUNkLGFBQWEsYUFHYiwyQkFBMkI7WUFDM0Isa0NBQWtDO1lBQ2xDLCtCQUErQjtZQUMvQixzQ0FBc0M7K0dBRzdCLHdCQUF3QixZQWRqQyxZQUFZO1lBQ1osbUJBQW1CO1lBQ25CLFdBQVc7WUFDWCx3QkFBd0I7WUFDeEIsY0FBYztZQUNkLGFBQWE7OzJGQVNKLHdCQUF3QjtrQkF0QnBDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLDJCQUEyQjt3QkFDM0Isa0NBQWtDO3dCQUNsQywrQkFBK0I7d0JBQy9CLHNDQUFzQztxQkFDdkM7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLHdCQUF3Qjt3QkFDeEIsY0FBYzt3QkFDZCxhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCwyQkFBMkI7d0JBQzNCLGtDQUFrQzt3QkFDbEMsK0JBQStCO3dCQUMvQixzQ0FBc0M7cUJBQ3ZDO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTa3lJZE1vZHVsZSwgU2t5VHJpbU1vZHVsZSB9IGZyb20gJ0Bza3l1eC9jb3JlJztcbmltcG9ydCB7IFNreUhlbHBJbmxpbmVNb2R1bGUgfSBmcm9tICdAc2t5dXgvaGVscC1pbmxpbmUnO1xuaW1wb3J0IHsgU2t5VGhlbWVNb2R1bGUgfSBmcm9tICdAc2t5dXgvdGhlbWUnO1xuXG5pbXBvcnQgeyBTa3lMYXlvdXRSZXNvdXJjZXNNb2R1bGUgfSBmcm9tICcuLi9zaGFyZWQvc2t5LWxheW91dC1yZXNvdXJjZXMubW9kdWxlJztcblxuaW1wb3J0IHsgU2t5RGVzY3JpcHRpb25MaXN0Q29udGVudENvbXBvbmVudCB9IGZyb20gJy4vZGVzY3JpcHRpb24tbGlzdC1jb250ZW50LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTa3lEZXNjcmlwdGlvbkxpc3REZXNjcmlwdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vZGVzY3JpcHRpb24tbGlzdC1kZXNjcmlwdGlvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgU2t5RGVzY3JpcHRpb25MaXN0VGVybUNvbXBvbmVudCB9IGZyb20gJy4vZGVzY3JpcHRpb24tbGlzdC10ZXJtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTa3lEZXNjcmlwdGlvbkxpc3RDb21wb25lbnQgfSBmcm9tICcuL2Rlc2NyaXB0aW9uLWxpc3QuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgU2t5RGVzY3JpcHRpb25MaXN0Q29tcG9uZW50LFxuICAgIFNreURlc2NyaXB0aW9uTGlzdENvbnRlbnRDb21wb25lbnQsXG4gICAgU2t5RGVzY3JpcHRpb25MaXN0VGVybUNvbXBvbmVudCxcbiAgICBTa3lEZXNjcmlwdGlvbkxpc3REZXNjcmlwdGlvbkNvbXBvbmVudCxcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSxcbiAgICBTa3lIZWxwSW5saW5lTW9kdWxlLFxuICAgIFNreUlkTW9kdWxlLFxuICAgIFNreUxheW91dFJlc291cmNlc01vZHVsZSxcbiAgICBTa3lUaGVtZU1vZHVsZSxcbiAgICBTa3lUcmltTW9kdWxlLFxuICBdLFxuICBleHBvcnRzOiBbXG4gICAgU2t5RGVzY3JpcHRpb25MaXN0Q29tcG9uZW50LFxuICAgIFNreURlc2NyaXB0aW9uTGlzdENvbnRlbnRDb21wb25lbnQsXG4gICAgU2t5RGVzY3JpcHRpb25MaXN0VGVybUNvbXBvbmVudCxcbiAgICBTa3lEZXNjcmlwdGlvbkxpc3REZXNjcmlwdGlvbkNvbXBvbmVudCxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2t5RGVzY3JpcHRpb25MaXN0TW9kdWxlIHt9XG4iXX0=
|
|
@@ -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, SkyContentInfoProvider, SkyIdService, SkyTrimModule, SkyCoreAdapterService, SkyLogService } from '@skyux/core';
|
|
18
|
+
import { SkyMediaBreakpoints, SkyContentInfoProvider, SkyIdService, SkyTrimModule, SkyCoreAdapterService, SkyIdModule, 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';
|
|
@@ -25,6 +25,8 @@ import { SkyCheckboxModule } from '@skyux/forms';
|
|
|
25
25
|
import * as i2$2 from '@skyux/indicators';
|
|
26
26
|
import { SkyWaitModule } from '@skyux/indicators';
|
|
27
27
|
import { trigger, transition, style, query, group, animate, state } from '@angular/animations';
|
|
28
|
+
import * as i2$3 from '@skyux/help-inline';
|
|
29
|
+
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
28
30
|
import * as i1$4 from '@skyux/modals';
|
|
29
31
|
import { SkyModalModule } from '@skyux/modals';
|
|
30
32
|
|
|
@@ -1484,12 +1486,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1484
1486
|
* and a sky-control-help CSS class on that element.
|
|
1485
1487
|
*/
|
|
1486
1488
|
class SkyDescriptionListTermComponent {
|
|
1489
|
+
constructor() {
|
|
1490
|
+
this.content = inject(SkyDescriptionListContentComponent, {
|
|
1491
|
+
optional: true,
|
|
1492
|
+
});
|
|
1493
|
+
}
|
|
1487
1494
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"
|
|
1495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef\n ><span skyTrim skyId #term=\"skyId\" class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><sky-help-inline\n *ngIf=\"content?.helpPopoverContent || content?.helpKey; else helpContent\"\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\" /></span\n></ng-template>\n<ng-template #helpContent\n ><ng-content select=\".sky-control-help\"\n/></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1489
1496
|
}
|
|
1490
1497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
|
|
1491
1498
|
type: Component,
|
|
1492
|
-
args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"
|
|
1499
|
+
args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n ><span skyTrim skyId #term=\"skyId\" class=\"description-list-term\"\n ><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><sky-help-inline\n *ngIf=\"content?.helpPopoverContent || content?.helpKey; else helpContent\"\n [labelledBy]=\"term.id\"\n [helpKey]=\"content?.helpKey\"\n [popoverTitle]=\"content?.helpPopoverTitle\"\n [popoverContent]=\"content?.helpPopoverContent\" /></span\n></ng-template>\n<ng-template #helpContent\n ><ng-content select=\".sky-control-help\"\n/></ng-template>\n", styles: ["span.description-list-term{display:contents;white-space:normal}:host-context(.sky-description-list-long-description-mode) span.description-list-term{overflow-wrap:break-word}\n"] }]
|
|
1493
1500
|
}], propDecorators: { templateRef: [{
|
|
1494
1501
|
type: ViewChild,
|
|
1495
1502
|
args: ['termTemplateRef', {
|
|
@@ -1503,7 +1510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1503
1510
|
*/
|
|
1504
1511
|
class SkyDescriptionListContentComponent {
|
|
1505
1512
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1506
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListContentComponent, selector: "sky-description-list-content", queries: [{ propertyName: "termComponents", predicate: SkyDescriptionListTermComponent }, { propertyName: "descriptionComponents", predicate: SkyDescriptionListDescriptionComponent }], ngImport: i0, template: "<ng-content />\n" }); }
|
|
1513
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListContentComponent, selector: "sky-description-list-content", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle" }, queries: [{ propertyName: "termComponents", predicate: SkyDescriptionListTermComponent }, { propertyName: "descriptionComponents", predicate: SkyDescriptionListDescriptionComponent }], ngImport: i0, template: "<ng-content />\n" }); }
|
|
1507
1514
|
}
|
|
1508
1515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListContentComponent, decorators: [{
|
|
1509
1516
|
type: Component,
|
|
@@ -1514,6 +1521,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1514
1521
|
}], descriptionComponents: [{
|
|
1515
1522
|
type: ContentChildren,
|
|
1516
1523
|
args: [SkyDescriptionListDescriptionComponent]
|
|
1524
|
+
}], helpKey: [{
|
|
1525
|
+
type: Input
|
|
1526
|
+
}], helpPopoverContent: [{
|
|
1527
|
+
type: Input
|
|
1528
|
+
}], helpPopoverTitle: [{
|
|
1529
|
+
type: Input
|
|
1517
1530
|
}] } });
|
|
1518
1531
|
|
|
1519
1532
|
/**
|
|
@@ -1618,11 +1631,11 @@ class SkyDescriptionListComponent {
|
|
|
1618
1631
|
}
|
|
1619
1632
|
}
|
|
1620
1633
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;
|
|
1634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0;white-space:nowrap}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;overflow-wrap:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1622
1635
|
}
|
|
1623
1636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
|
|
1624
1637
|
type: Component,
|
|
1625
|
-
args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;
|
|
1638
|
+
args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n class=\"sky-description-list\"\n [ngClass]=\"{\n 'sky-description-list-long-description-mode': mode === 'longDescription',\n 'sky-description-list-vertical-mode': mode === 'vertical',\n 'sky-description-list-horizontal-mode': mode === 'horizontal'\n }\"\n #descriptionListElement\n>\n <!--\n Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n to avoid adding non-semantic HTML tags to DOM\n -->\n <div\n *ngFor=\"let contentComponent of contentComponents\"\n class=\"sky-description-list-content\"\n [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n >\n <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n <ng-container *ngIf=\"termComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"termComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dt>\n <dd\n *ngFor=\"\n let descriptionComponent of contentComponent?.descriptionComponents\n \"\n >\n <ng-container *ngIf=\"descriptionComponent.templateRef\">\n <ng-container\n *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n ></ng-container>\n </ng-container>\n </dd>\n </div>\n</dl>\n", styles: [":host{display:block}.sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0;white-space:nowrap}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;overflow-wrap:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"] }]
|
|
1626
1639
|
}], ctorParameters: () => [{ type: SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDescriptionListService }], propDecorators: { defaultDescription: [{
|
|
1627
1640
|
type: Input
|
|
1628
1641
|
}], listItemWidth: [{
|
|
@@ -1649,6 +1662,8 @@ class SkyDescriptionListModule {
|
|
|
1649
1662
|
SkyDescriptionListContentComponent,
|
|
1650
1663
|
SkyDescriptionListTermComponent,
|
|
1651
1664
|
SkyDescriptionListDescriptionComponent], imports: [CommonModule,
|
|
1665
|
+
SkyHelpInlineModule,
|
|
1666
|
+
SkyIdModule,
|
|
1652
1667
|
SkyLayoutResourcesModule,
|
|
1653
1668
|
SkyThemeModule,
|
|
1654
1669
|
SkyTrimModule], exports: [SkyDescriptionListComponent,
|
|
@@ -1656,6 +1671,8 @@ class SkyDescriptionListModule {
|
|
|
1656
1671
|
SkyDescriptionListTermComponent,
|
|
1657
1672
|
SkyDescriptionListDescriptionComponent] }); }
|
|
1658
1673
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDescriptionListModule, imports: [CommonModule,
|
|
1674
|
+
SkyHelpInlineModule,
|
|
1675
|
+
SkyIdModule,
|
|
1659
1676
|
SkyLayoutResourcesModule,
|
|
1660
1677
|
SkyThemeModule,
|
|
1661
1678
|
SkyTrimModule] }); }
|
|
@@ -1671,6 +1688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
1671
1688
|
],
|
|
1672
1689
|
imports: [
|
|
1673
1690
|
CommonModule,
|
|
1691
|
+
SkyHelpInlineModule,
|
|
1692
|
+
SkyIdModule,
|
|
1674
1693
|
SkyLayoutResourcesModule,
|
|
1675
1694
|
SkyThemeModule,
|
|
1676
1695
|
SkyTrimModule,
|