@skyux/layout 6.3.3 → 6.4.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';
@@ -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 {