@skyux/layout 6.3.2 → 6.3.3

package/fesm2020/skyux-layout.mjs

@@ -12,6 +12,7 @@ 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 { Subject, BehaviorSubject, forkJoin } from 'rxjs';
@@ -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: [{