@skyux/layout 6.3.1 → 6.4.0

package/fesm2020/skyux-layout.mjs

@@ -12,8 +12,9 @@ import * as i4 from '@skyux/router';
 import { SkyHrefModule } from '@skyux/router';
 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';
@@ -110,6 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Output
             }] } });
 
+var _SkyActionButtonContainerComponent_viewInitialized;
 /**
  * Wraps action buttons to ensures that they have consistent height and spacing.
  * @required
@@ -122,6 +124,7 @@ class SkyActionButtonContainerComponent {
         this.hostElRef = hostElRef;
         this.themeSvc = themeSvc;
         this.ngUnsubscribe = new Subject();
+        _SkyActionButtonContainerComponent_viewInitialized.set(this, false);
     }
     /**
      * Specifies how to display the action buttons inside the action button container.
@@ -154,7 +157,7 @@ class SkyActionButtonContainerComponent {
             this.updateResponsiveClass();
         });
     }
-    ngAfterContentInit() {
+    ngAfterViewInit() {
         // Watch for dynamic action button changes and recalculate height.
         /* istanbul ignore else */
         if (this.actionButtons) {
@@ -164,6 +167,8 @@ class SkyActionButtonContainerComponent {
                 this.updateHeight();
             });
         }
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_viewInitialized, true, "f");
+        this.updateHeight();
     }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
@@ -175,14 +180,25 @@ class SkyActionButtonContainerComponent {
     onWindowResize() {
         this.updateResponsiveClass();
     }
-    updateHeight() {
-        this.coreAdapterService.resetHeight(this.containerRef, '.sky-action-button');
-        if (this._themeName === 'modern') {
-            // Wait for children components to complete rendering before height is determined.
-            clearTimeout(this.syncMaxHeightTimeout);
-            this.syncMaxHeightTimeout = setTimeout(() => {
-                this.coreAdapterService.syncMaxHeight(this.containerRef, '.sky-action-button');
-            });
+    updateHeight(delay = 0) {
+        if (__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_viewInitialized, "f")) {
+            const ref = this.containerRef;
+            this.coreAdapterService.resetHeight(ref, '.sky-action-button');
+            if (this._themeName === 'modern') {
+                // Wait for children components to complete rendering before height is determined.
+                clearTimeout(this.syncMaxHeightTimeout);
+                this.syncMaxHeightTimeout = setTimeout(() => {
+                    const selector = '.sky-action-button:not([hidden])';
+                    const button = ref.nativeElement.querySelector(selector);
+                    if (button && button.offsetHeight > 0) {
+                        this.coreAdapterService.syncMaxHeight(ref, selector);
+                    }
+                    else if (delay < 200) {
+                        // Wait progressively longer between retries.
+                        this.updateHeight(delay + 50);
+                    }
+                }, delay);
+            }
         }
     }
     updateResponsiveClass() {
@@ -190,6 +206,7 @@ class SkyActionButtonContainerComponent {
         this.actionButtonAdapterService.setResponsiveClass(this.containerRef, parentWidth);
     }
 }
+_SkyActionButtonContainerComponent_viewInitialized = new WeakMap();
 SkyActionButtonContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyActionButtonContainerComponent, deps: [{ token: SkyActionButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyActionButtonContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyActionButtonContainerComponent, selector: "sky-action-button-container", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyActionButtonAdapterService], queries: [{ propertyName: "actionButtons", predicate: SkyActionButtonComponent }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"sky-action-button-container\" #container>\n  <div\n    class=\"sky-action-button-flex\"\n    [ngClass]=\"{\n      'sky-action-button-flex-align-left': alignItems === 'left',\n      'sky-action-button-flex-align-center': alignItems === 'center'\n    }\"\n    (cdkObserveContent)=\"onContentChange()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-action-button-flex sky-action-button{display:block}.sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-flex{display:block;padding:0}.sky-action-button-flex sky-action-button{margin:20px 0}.sky-responsive-container-xs .sky-action-button-flex,.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:block;padding:0}.sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:20px 0}@media (min-width: 768px){.sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-action-button-flex sky-action-button{margin:10px 0}}.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:10px 0}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyActionButtonContainerComponent, decorators: [{
@@ -1387,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', {
@@ -1561,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] });
@@ -1570,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,
@@ -1585,6 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                         SkyI18nModule,
                         SkyLayoutResourcesModule,
                         SkyThemeModule,
+                        SkyTrimModule,
                     ],
                     exports: [
                         SkyDescriptionListComponent,
@@ -1858,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');
@@ -1879,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) {
@@ -1895,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 {