@skyux/layout 6.3.3 → 6.6.0

package/fesm2020/skyux-layout.mjs

@@ -14,7 +14,7 @@ import * as i3$1 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i1 from '@skyux/core';
-import { SkyMediaBreakpoints, SkyDockModule, SkyCoreAdapterService } from '@skyux/core';
+import { SkyMediaBreakpoints, SkyDockModule, SkyCoreAdapterService, SkyTrimModule } from '@skyux/core';
 import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/i18n';
@@ -683,10 +683,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 class SkyBoxComponent {
 }
 SkyBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, ngImport: i0, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"], directives: [{ type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None });
+SkyBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, ngImport: i0, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"], directives: [{ type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"] }]
+            args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
             }], ariaLabelledBy: [{
@@ -1404,15 +1404,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
             }] } });
 
 /**
- * Specifies the term in a term-description pair.
+ * Specifies the term in a term-description pair. To display a help button beside
+ * the term, include a help button element in the sky-description-list-term element
+ * and a sky-control-help CSS class on that element.
  */
 class SkyDescriptionListTermComponent {
 }
 SkyDescriptionListTermComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDescriptionListTermComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDescriptionListTermComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", 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></ng-content></span\n  ><span class=\"sky-description-list-term-help\"\n    ><ng-content select=\".sky-control-help\"></ng-content></span\n></ng-template>\n", styles: [".sky-description-list-term-help:not(:empty){margin-left:var(--sky-margin-inline-sm)}\n"], directives: [{ type: i1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n  ><span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-description-list-term-help\"\n    ><ng-content select=\".sky-control-help\"></ng-content></span\n></ng-template>\n", styles: [".sky-description-list-term-help:not(:empty){margin-left:var(--sky-margin-inline-sm)}\n"] }]
         }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: ['termTemplateRef', {
@@ -1578,7 +1580,8 @@ SkyDescriptionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         SkyDescriptionListDescriptionComponent], imports: [CommonModule,
         SkyI18nModule,
         SkyLayoutResourcesModule,
-        SkyThemeModule], exports: [SkyDescriptionListComponent,
+        SkyThemeModule,
+        SkyTrimModule], exports: [SkyDescriptionListComponent,
         SkyDescriptionListContentComponent,
         SkyDescriptionListTermComponent,
         SkyDescriptionListDescriptionComponent] });
@@ -1587,6 +1590,7 @@ SkyDescriptionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0"
             SkyI18nModule,
             SkyLayoutResourcesModule,
             SkyThemeModule,
+            SkyTrimModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListModule, decorators: [{
             type: NgModule,
@@ -1602,6 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         SkyI18nModule,
                         SkyLayoutResourcesModule,
                         SkyThemeModule,
+                        SkyTrimModule,
                     ],
                     exports: [
                         SkyDescriptionListComponent,
@@ -1875,6 +1880,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
  * @internal
  */
 class SkyPageThemeAdapterService {
+    /**
+     * We can't use ViewEncapsulation.None for this behavior because Angular does
+     * not remove `style` tags from the HEAD element after route changes.
+     * @see https://github.com/angular/angular/issues/16670
+     */
     addTheme() {
         if (!this.styleEl) {
             this.styleEl = document.createElement('style');
@@ -1896,9 +1906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
         }] });
 
 /**
- * Resets the SPA's background to white and adds the `sky-theme-default` CSS class to the host
- * element to let consumers override CSS styling. Consumers can override any element by writing
- * CSS selectors like this: `:host-context(.sky-theme-default) .my-class {}`.
+ * Sets the correct background color for a page.
  */
 class SkyPageComponent {
     constructor(themeAdapter) {
@@ -1912,10 +1920,10 @@ class SkyPageComponent {
     }
 }
 SkyPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageComponent, deps: [{ token: SkyPageThemeAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SkyPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyPageComponent, selector: "sky-page", providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div class=\"sky-theme-default\">\n  <ng-content></ng-content>\n</div>\n" });
+SkyPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyPageComponent, selector: "sky-page", providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div>\n  <ng-content></ng-content>\n</div>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page', providers: [SkyPageThemeAdapterService], template: "<div class=\"sky-theme-default\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'sky-page', providers: [SkyPageThemeAdapterService], template: "<div>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: SkyPageThemeAdapterService }]; } });
 
 class SkyPageModule {