@skyux/layout 7.0.0-beta.10 → 7.0.0-beta.11
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 +19 -4
- package/esm2020/lib/modules/description-list/description-list.component.mjs +2 -2
- package/fesm2015/skyux-layout.mjs +2 -2
- package/fesm2015/skyux-layout.mjs.map +1 -1
- package/fesm2020/skyux-layout.mjs +2 -2
- package/fesm2020/skyux-layout.mjs.map +1 -1
- package/package.json +9 -9
package/documentation.json
CHANGED
|
@@ -9404,12 +9404,12 @@
|
|
|
9404
9404
|
{
|
|
9405
9405
|
"fileName": "box-demo.component.html",
|
|
9406
9406
|
"filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.html",
|
|
9407
|
-
"rawContents": "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">Box header</h2>\n <sky-help-inline
|
|
9407
|
+
"rawContents": "<sky-box>\n <sky-box-header>\n <h2 class=\"sky-font-heading-2\">Box header</h2>\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-box-header>\n <sky-box-controls>\n <sky-dropdown buttonType=\"context-menu\" label=\"Box demo context menu\">\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button type=\"button\">Action 1</button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button type=\"button\">Action 2</button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-box-controls>\n <sky-box-content>\n <p>Box content</p>\n </sky-box-content>\n</sky-box>\n"
|
|
9408
9408
|
},
|
|
9409
9409
|
{
|
|
9410
9410
|
"fileName": "box-demo.component.ts",
|
|
9411
9411
|
"filePath": "/projects/layout/documentation/code-examples/box/inline-help/box-demo.component.ts",
|
|
9412
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-box-demo',\n templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {}\n"
|
|
9412
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-box-demo',\n templateUrl: './box-demo.component.html',\n})\nexport class BoxDemoComponent {\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
9413
9413
|
},
|
|
9414
9414
|
{
|
|
9415
9415
|
"fileName": "box-demo.module.ts",
|
|
@@ -9449,18 +9449,33 @@
|
|
|
9449
9449
|
{
|
|
9450
9450
|
"fileName": "description-list-demo.component.html",
|
|
9451
9451
|
"filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.html",
|
|
9452
|
-
"rawContents": "<sky-description-list mode=\"horizontal\">\n <sky-description-list-content *ngFor=\"let item of items\">\n <sky-description-list-term>\n {{ item.term }}\n <sky-help-inline\n *ngIf=\"item.showHelp\"\n class=\"sky-control-help\"\n ></sky-help-inline>\n </sky-description-list-term>\n <sky-description-list-description>\n {{ item.description }}\n </sky-description-list-description>\n </sky-description-list-content>\n</sky-description-list>\n"
|
|
9452
|
+
"rawContents": "<sky-description-list mode=\"horizontal\">\n <sky-description-list-content *ngFor=\"let item of items\">\n <sky-description-list-term>\n {{ item.term }}\n <sky-help-inline\n *ngIf=\"item.showHelp\"\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-description-list-term>\n <sky-description-list-description>\n {{ item.description }}\n </sky-description-list-description>\n </sky-description-list-content>\n</sky-description-list>\n"
|
|
9453
9453
|
},
|
|
9454
9454
|
{
|
|
9455
9455
|
"fileName": "description-list-demo.component.ts",
|
|
9456
9456
|
"filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.component.ts",
|
|
9457
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-description-list-demo',\n templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n public items: { term: string; description: string; showHelp?: boolean }[] = [\n {\n term: 'College',\n description: 'Humanities and Social Sciences',\n },\n {\n term: 'Department',\n description: 'Anthropology',\n },\n {\n term: 'Advisor',\n description: 'Calandra Geer',\n showHelp: true,\n },\n {\n term: 'Class year',\n description: '2024',\n },\n ];\n}\n"
|
|
9457
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-description-list-demo',\n templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n public items: { term: string; description: string; showHelp?: boolean }[] = [\n {\n term: 'College',\n description: 'Humanities and Social Sciences',\n },\n {\n term: 'Department',\n description: 'Anthropology',\n },\n {\n term: 'Advisor',\n description: 'Calandra Geer',\n showHelp: true,\n },\n {\n term: 'Class year',\n description: '2024',\n },\n ];\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
9458
9458
|
},
|
|
9459
9459
|
{
|
|
9460
9460
|
"fileName": "description-list-demo.module.ts",
|
|
9461
9461
|
"filePath": "/projects/layout/documentation/code-examples/description-list/horizontal/description-list-demo.module.ts",
|
|
9462
9462
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n declarations: [DescriptionListDemoComponent],\n exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
|
|
9463
9463
|
},
|
|
9464
|
+
{
|
|
9465
|
+
"fileName": "description-list-demo.component.html",
|
|
9466
|
+
"filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.html",
|
|
9467
|
+
"rawContents": "<sky-description-list mode=\"horizontal\">\n <sky-description-list-content *ngFor=\"let item of items\">\n <sky-description-list-term>\n {{ item.term }}\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n </sky-description-list-term>\n <sky-description-list-description>\n {{ item.description }}\n </sky-description-list-description>\n </sky-description-list-content>\n</sky-description-list>\n"
|
|
9468
|
+
},
|
|
9469
|
+
{
|
|
9470
|
+
"fileName": "description-list-demo.component.ts",
|
|
9471
|
+
"filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.component.ts",
|
|
9472
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-description-list-demo',\n templateUrl: './description-list-demo.component.html',\n})\nexport class DescriptionListDemoComponent {\n public items: { term: string; description: string }[] = [\n {\n term: 'College',\n description: 'Humanities and Social Sciences',\n },\n {\n term: 'Department',\n description: 'Anthropology',\n },\n {\n term: 'Advisor',\n description: 'Calandra Geer',\n },\n {\n term: 'Class year',\n description: '2024',\n },\n ];\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
9473
|
+
},
|
|
9474
|
+
{
|
|
9475
|
+
"fileName": "description-list-demo.module.ts",
|
|
9476
|
+
"filePath": "/projects/layout/documentation/code-examples/description-list/inline-help/description-list-demo.module.ts",
|
|
9477
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\nimport { SkyDescriptionListModule } from '@skyux/layout';\n\nimport { DescriptionListDemoComponent } from './description-list-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyDescriptionListModule, SkyHelpInlineModule],\n declarations: [DescriptionListDemoComponent],\n exports: [DescriptionListDemoComponent],\n})\nexport class DescriptionListDemoModule {}\n"
|
|
9478
|
+
},
|
|
9464
9479
|
{
|
|
9465
9480
|
"fileName": "description-list-demo.component.html",
|
|
9466
9481
|
"filePath": "/projects/layout/documentation/code-examples/description-list/long-description/description-list-demo.component.html",
|
|
@@ -70,10 +70,10 @@ export class SkyDescriptionListComponent {
|
|
|
70
70
|
}
|
|
71
71
|
_SkyDescriptionListComponent_ngUnsubscribe = new WeakMap(), _SkyDescriptionListComponent__mode = new WeakMap();
|
|
72
72
|
SkyDescriptionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: i1.SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: i2.SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: [".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{margin:0 0 15px
|
|
73
|
+
SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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%;word-break: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 });
|
|
74
74
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
|
|
75
75
|
type: Component,
|
|
76
|
-
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: [".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{margin:0 0 15px
|
|
76
|
+
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%;word-break: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"] }]
|
|
77
77
|
}], ctorParameters: function () { return [{ type: i1.SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: i2.SkyDescriptionListService }]; }, propDecorators: { defaultDescription: [{
|
|
78
78
|
type: Input
|
|
79
79
|
}], listItemWidth: [{
|
|
@@ -1614,10 +1614,10 @@ class SkyDescriptionListComponent {
|
|
|
1614
1614
|
}
|
|
1615
1615
|
_SkyDescriptionListComponent_ngUnsubscribe = new WeakMap(), _SkyDescriptionListComponent__mode = new WeakMap();
|
|
1616
1616
|
SkyDescriptionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1617
|
-
SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: [".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{margin:0 0 15px
|
|
1617
|
+
SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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%;word-break: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 });
|
|
1618
1618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
|
|
1619
1619
|
type: Component,
|
|
1620
|
-
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: [".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{margin:0 0 15px
|
|
1620
|
+
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%;word-break: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"] }]
|
|
1621
1621
|
}], ctorParameters: function () { return [{ type: SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDescriptionListService }]; }, propDecorators: { defaultDescription: [{
|
|
1622
1622
|
type: Input
|
|
1623
1623
|
}], listItemWidth: [{
|