@skyux/layout 7.0.0-beta.0 → 7.0.0-beta.1

package/fesm2020/skyux-layout.mjs

@@ -27,6 +27,7 @@ import { trigger, transition, style, query, group, animate } from '@angular/anim
 import * as i2$2 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 
+var _SkyActionButtonAdapterService_instances, _SkyActionButtonAdapterService_renderer, _SkyActionButtonAdapterService_getResponsiveClassName;
 const RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';
 const RESPONSIVE_CLASS_MD = 'sky-action-button-container-md';
 const RESPONSIVE_CLASS_LG = 'sky-action-button-container-lg';
@@ -37,48 +38,52 @@ const BREAKPOINT_LG = 1378;
  */
 class SkyActionButtonAdapterService {
     constructor(rendererFactory) {
-        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+        _SkyActionButtonAdapterService_instances.add(this);
+        _SkyActionButtonAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyActionButtonAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     getParentWidth(element) {
         return element.nativeElement.parentNode.getBoundingClientRect().width;
     }
     setResponsiveClass(element, width) {
         const el = element.nativeElement;
-        const className = this.getResponsiveClassName(width);
-        this.renderer.removeClass(el, RESPONSIVE_CLASS_SM);
-        this.renderer.removeClass(el, RESPONSIVE_CLASS_MD);
-        this.renderer.removeClass(el, RESPONSIVE_CLASS_LG);
-        this.renderer.addClass(el, className);
-    }
-    getResponsiveClassName(width) {
-        if (width < BREAKPOINT_MD) {
-            return RESPONSIVE_CLASS_SM;
-        }
-        else if (width > BREAKPOINT_MD && width < BREAKPOINT_LG) {
-            return RESPONSIVE_CLASS_MD;
-        }
-        else {
-            return RESPONSIVE_CLASS_LG;
-        }
+        const className = __classPrivateFieldGet(this, _SkyActionButtonAdapterService_instances, "m", _SkyActionButtonAdapterService_getResponsiveClassName).call(this, width);
+        __classPrivateFieldGet(this, _SkyActionButtonAdapterService_renderer, "f").removeClass(el, RESPONSIVE_CLASS_SM);
+        __classPrivateFieldGet(this, _SkyActionButtonAdapterService_renderer, "f").removeClass(el, RESPONSIVE_CLASS_MD);
+        __classPrivateFieldGet(this, _SkyActionButtonAdapterService_renderer, "f").removeClass(el, RESPONSIVE_CLASS_LG);
+        __classPrivateFieldGet(this, _SkyActionButtonAdapterService_renderer, "f").addClass(el, className);
     }
 }
+_SkyActionButtonAdapterService_renderer = new WeakMap(), _SkyActionButtonAdapterService_instances = new WeakSet(), _SkyActionButtonAdapterService_getResponsiveClassName = function _SkyActionButtonAdapterService_getResponsiveClassName(width) {
+    if (width < BREAKPOINT_MD) {
+        return RESPONSIVE_CLASS_SM;
+    }
+    else if (width >= BREAKPOINT_MD && width < BREAKPOINT_LG) {
+        return RESPONSIVE_CLASS_MD;
+    }
+    else {
+        return RESPONSIVE_CLASS_LG;
+    }
+};
 SkyActionButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyActionButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
+var _SkyActionButtonComponent_changeDetector;
 /**
  * Creates a button to present users with an option to move forward with tasks.
  */
 class SkyActionButtonComponent {
-    constructor(changeRef) {
-        this.changeRef = changeRef;
+    constructor(changeDetector) {
         this.hidden = false;
         /**
          * Fires when users select the action button.
          */
         this.actionClick = new EventEmitter();
+        _SkyActionButtonComponent_changeDetector.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyActionButtonComponent_changeDetector, changeDetector, "f");
     }
     buttonClicked() {
         this.actionClick.emit();
@@ -90,16 +95,17 @@ class SkyActionButtonComponent {
         if (this.hidden === $event.userHasAccess) {
             setTimeout(() => {
                 this.hidden = !$event.userHasAccess;
-                this.changeRef.markForCheck();
+                __classPrivateFieldGet(this, _SkyActionButtonComponent_changeDetector, "f").markForCheck();
             });
         }
     }
 }
+_SkyActionButtonComponent_changeDetector = new WeakMap();
 SkyActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyActionButtonComponent, selector: "sky-action-button", inputs: { permalink: "permalink" }, outputs: { actionClick: "actionClick" }, host: { properties: { "hidden": "this.hidden" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None });
+SkyActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyActionButtonComponent, selector: "sky-action-button", inputs: { permalink: "permalink" }, outputs: { actionClick: "actionClick" }, host: { properties: { "hidden": "this.hidden" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink?.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink?.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink?.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink?.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink?.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink?.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-action-button', encapsulation: ViewEncapsulation.None, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"] }]
+            args: [{ selector: 'sky-action-button', encapsulation: ViewEncapsulation.None, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink?.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink?.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink?.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink?.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink?.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink?.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
                     type: SkipSelf
                 }] }]; }, propDecorators: { hidden: [{
@@ -111,20 +117,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 type: Output
             }] } });
 
-var _SkyActionButtonContainerComponent_viewInitialized;
+var _SkyActionButtonContainerComponent_instances, _SkyActionButtonContainerComponent_ngUnsubscribe, _SkyActionButtonContainerComponent_syncMaxHeightTimeout, _SkyActionButtonContainerComponent_themeName_set, _SkyActionButtonContainerComponent__alignItems, _SkyActionButtonContainerComponent__themeName, _SkyActionButtonContainerComponent_viewInitialized, _SkyActionButtonContainerComponent_actionButtonAdapterService, _SkyActionButtonContainerComponent_changeDetector, _SkyActionButtonContainerComponent_coreAdapterService, _SkyActionButtonContainerComponent_hostElRef, _SkyActionButtonContainerComponent_themeSvc, _SkyActionButtonContainerComponent_updateHeight, _SkyActionButtonContainerComponent_updateResponsiveClass;
 /**
  * Wraps action buttons to ensures that they have consistent height and spacing.
  * @required
  */
 class SkyActionButtonContainerComponent {
-    constructor(actionButtonAdapterService, changeRef, coreAdapterService, hostElRef, themeSvc) {
-        this.actionButtonAdapterService = actionButtonAdapterService;
-        this.changeRef = changeRef;
-        this.coreAdapterService = coreAdapterService;
-        this.hostElRef = hostElRef;
-        this.themeSvc = themeSvc;
-        this.ngUnsubscribe = new Subject();
+    constructor(actionButtonAdapterService, changeDetector, coreAdapterService, hostElRef, themeSvc) {
+        _SkyActionButtonContainerComponent_instances.add(this);
+        _SkyActionButtonContainerComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyActionButtonContainerComponent_syncMaxHeightTimeout.set(this, void 0);
+        _SkyActionButtonContainerComponent__alignItems.set(this, 'center');
+        _SkyActionButtonContainerComponent__themeName.set(this, void 0);
         _SkyActionButtonContainerComponent_viewInitialized.set(this, false);
+        _SkyActionButtonContainerComponent_actionButtonAdapterService.set(this, void 0);
+        _SkyActionButtonContainerComponent_changeDetector.set(this, void 0);
+        _SkyActionButtonContainerComponent_coreAdapterService.set(this, void 0);
+        _SkyActionButtonContainerComponent_hostElRef.set(this, void 0);
+        _SkyActionButtonContainerComponent_themeSvc.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_actionButtonAdapterService, actionButtonAdapterService, "f");
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_coreAdapterService, coreAdapterService, "f");
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_hostElRef, hostElRef, "f");
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_themeSvc, themeSvc, "f");
     }
     /**
      * Specifies how to display the action buttons inside the action button container.
@@ -132,29 +147,24 @@ class SkyActionButtonContainerComponent {
      * @default "center"
      */
     set alignItems(value) {
-        this._alignItems = value;
+        __classPrivateFieldSet(this, _SkyActionButtonContainerComponent__alignItems, value ?? 'center', "f");
     }
     get alignItems() {
-        return this._alignItems || 'center';
-    }
-    set themeName(value) {
-        this._themeName = value;
-        this.updateResponsiveClass();
-        this.updateHeight();
+        return __classPrivateFieldGet(this, _SkyActionButtonContainerComponent__alignItems, "f");
     }
     ngOnInit() {
         /* istanbul ignore else */
-        if (this.themeSvc) {
-            this.themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
+        if (__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_themeSvc, "f")) {
+            __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_themeSvc, "f").settingsChange
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_ngUnsubscribe, "f")))
                 .subscribe((themeSettings) => {
-                this.themeName = themeSettings.currentSettings.theme.name;
-                this.changeRef.markForCheck();
+                __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_instances, themeSettings.currentSettings.theme.name, "a", _SkyActionButtonContainerComponent_themeName_set);
+                __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_changeDetector, "f").markForCheck();
             });
         }
         // Wait for children components to complete rendering before container width is determined.
         setTimeout(() => {
-            this.updateResponsiveClass();
+            __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateResponsiveClass).call(this);
         });
     }
     ngAfterViewInit() {
@@ -162,51 +172,55 @@ class SkyActionButtonContainerComponent {
         /* istanbul ignore else */
         if (this.actionButtons) {
             this.actionButtons.changes
-                .pipe(takeUntil(this.ngUnsubscribe))
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_ngUnsubscribe, "f")))
                 .subscribe(() => {
-                this.updateHeight();
+                __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateHeight).call(this);
             });
         }
         __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_viewInitialized, true, "f");
-        this.updateHeight();
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateHeight).call(this);
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_ngUnsubscribe, "f").complete();
     }
     onContentChange() {
-        this.updateHeight();
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateHeight).call(this);
     }
     onWindowResize() {
-        this.updateResponsiveClass();
-    }
-    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);
-            }
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateResponsiveClass).call(this);
+    }
+}
+_SkyActionButtonContainerComponent_ngUnsubscribe = new WeakMap(), _SkyActionButtonContainerComponent_syncMaxHeightTimeout = new WeakMap(), _SkyActionButtonContainerComponent__alignItems = new WeakMap(), _SkyActionButtonContainerComponent__themeName = new WeakMap(), _SkyActionButtonContainerComponent_viewInitialized = new WeakMap(), _SkyActionButtonContainerComponent_actionButtonAdapterService = new WeakMap(), _SkyActionButtonContainerComponent_changeDetector = new WeakMap(), _SkyActionButtonContainerComponent_coreAdapterService = new WeakMap(), _SkyActionButtonContainerComponent_hostElRef = new WeakMap(), _SkyActionButtonContainerComponent_themeSvc = new WeakMap(), _SkyActionButtonContainerComponent_instances = new WeakSet(), _SkyActionButtonContainerComponent_themeName_set = function _SkyActionButtonContainerComponent_themeName_set(value) {
+    __classPrivateFieldSet(this, _SkyActionButtonContainerComponent__themeName, value, "f");
+    __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateResponsiveClass).call(this);
+    __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateHeight).call(this);
+}, _SkyActionButtonContainerComponent_updateHeight = function _SkyActionButtonContainerComponent_updateHeight(delay = 0) {
+    const ref = this.containerRef;
+    if (ref && __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_viewInitialized, "f")) {
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_coreAdapterService, "f").resetHeight(ref, '.sky-action-button');
+        if (__classPrivateFieldGet(this, _SkyActionButtonContainerComponent__themeName, "f") === 'modern') {
+            // Wait for children components to complete rendering before height is determined.
+            clearTimeout(__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_syncMaxHeightTimeout, "f"));
+            __classPrivateFieldSet(this, _SkyActionButtonContainerComponent_syncMaxHeightTimeout, setTimeout(() => {
+                const selector = '.sky-action-button:not([hidden])';
+                const button = ref.nativeElement.querySelector(selector);
+                if (button && button.offsetHeight > 0) {
+                    __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_coreAdapterService, "f").syncMaxHeight(ref, selector);
+                }
+                else if (delay < 200) {
+                    // Wait progressively longer between retries.
+                    __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_instances, "m", _SkyActionButtonContainerComponent_updateHeight).call(this, delay + 50);
+                }
+            }, delay), "f");
         }
     }
-    updateResponsiveClass() {
-        const parentWidth = this.actionButtonAdapterService.getParentWidth(this.hostElRef);
-        this.actionButtonAdapterService.setResponsiveClass(this.containerRef, parentWidth);
+}, _SkyActionButtonContainerComponent_updateResponsiveClass = function _SkyActionButtonContainerComponent_updateResponsiveClass() {
+    if (this.containerRef) {
+        const parentWidth = __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_actionButtonAdapterService, "f").getParentWidth(__classPrivateFieldGet(this, _SkyActionButtonContainerComponent_hostElRef, "f"));
+        __classPrivateFieldGet(this, _SkyActionButtonContainerComponent_actionButtonAdapterService, "f").setResponsiveClass(this.containerRef, parentWidth);
     }
-}
-_SkyActionButtonContainerComponent_viewInitialized = new WeakMap();
+};
 SkyActionButtonContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonContainerComponent, deps: [{ token: SkyActionButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyActionButtonContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonContainerComponent, decorators: [{
@@ -254,6 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{ selector: 'sky-action-button-header', template: "<div\n  class=\"sky-action-button-header\"\n  [skyThemeClass]=\"{\n    'sky-headline': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}.sky-theme-modern .sky-action-button-header{margin:0 0 10px}\n"] }]
         }] });
 
+var _SkyActionButtonIconComponent_subscription;
 const FONTSIZECLASS_SMALL = '2x';
 const FONTSIZECLASS_LARGE = '3x';
 /**
@@ -261,25 +276,26 @@ const FONTSIZECLASS_LARGE = '3x';
  */
 class SkyActionButtonIconComponent {
     constructor(mediaQueryService) {
-        this.mediaQueryService = mediaQueryService;
         this.fontSizeClass = FONTSIZECLASS_LARGE;
-        this.subscription = this.mediaQueryService.subscribe((args) => {
+        _SkyActionButtonIconComponent_subscription.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyActionButtonIconComponent_subscription, mediaQueryService.subscribe((args) => {
             if (args === SkyMediaBreakpoints.xs) {
                 this.fontSizeClass = FONTSIZECLASS_SMALL;
             }
             else {
                 this.fontSizeClass = FONTSIZECLASS_LARGE;
             }
-        });
+        }), "f");
     }
     ngOnDestroy() {
         /* istanbul ignore else */
         /* sanity check */
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyActionButtonIconComponent_subscription, "f")) {
+            __classPrivateFieldGet(this, _SkyActionButtonIconComponent_subscription, "f").unsubscribe();
         }
     }
 }
+_SkyActionButtonIconComponent_subscription = new WeakMap();
 SkyActionButtonIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonIconComponent, deps: [{ token: i1$2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
 SkyActionButtonIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyActionButtonIconComponent, selector: "sky-action-button-icon", inputs: { iconType: "iconType" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"sky-action-button-icon-container\">\n  <sky-icon\n    class=\"sky-action-button-icon\"\n    [icon]=\"iconType\"\n    [size]=\"fontSizeClass\"\n  ></sky-icon>\n</div>\n", styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}.sky-theme-modern .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}\n"], dependencies: [{ kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyActionButtonIconComponent, decorators: [{
@@ -397,21 +413,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyBackToTopComponent__scrollToTopClick;
 /**
  * @internal
  */
 class SkyBackToTopComponent {
     constructor() {
-        this._scrollToTopClick = new Subject();
+        _SkyBackToTopComponent__scrollToTopClick.set(this, new Subject());
     }
     get scrollToTopClick() {
-        return this._scrollToTopClick.asObservable();
+        return __classPrivateFieldGet(this, _SkyBackToTopComponent__scrollToTopClick, "f").asObservable();
     }
     onScrollToTopClick() {
-        this._scrollToTopClick.next();
-        this._scrollToTopClick.complete();
+        __classPrivateFieldGet(this, _SkyBackToTopComponent__scrollToTopClick, "f").next();
+        __classPrivateFieldGet(this, _SkyBackToTopComponent__scrollToTopClick, "f").complete();
     }
 }
+_SkyBackToTopComponent__scrollToTopClick = new WeakMap();
 SkyBackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SkyBackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyBackToTopComponent, selector: "sky-back-to-top", ngImport: i0, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"], dependencies: [{ kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
@@ -419,32 +437,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{ selector: 'sky-back-to-top', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"] }]
         }] });
 
+var _SkyBackToTopDomAdapterService_ngUnsubscribe, _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe, _SkyBackToTopDomAdapterService_scrollableHostService, _SkyBackToTopDomAdapterService_windowRef;
 /**
  * @internal
  */
 class SkyBackToTopDomAdapterService {
     constructor(windowRef, scrollableHostService) {
-        this.windowRef = windowRef;
-        this.scrollableHostService = scrollableHostService;
-        this.ngUnsubscribe = new Subject();
-        this.scrollableHostScrollEventUnsubscribe = new Subject();
+        _SkyBackToTopDomAdapterService_ngUnsubscribe.set(this, new Subject());
+        _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe.set(this, new Subject());
+        _SkyBackToTopDomAdapterService_scrollableHostService.set(this, void 0);
+        _SkyBackToTopDomAdapterService_windowRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyBackToTopDomAdapterService_windowRef, windowRef, "f");
+        __classPrivateFieldSet(this, _SkyBackToTopDomAdapterService_scrollableHostService, scrollableHostService, "f");
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.scrollableHostScrollEventUnsubscribe.next();
-        this.scrollableHostScrollEventUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_ngUnsubscribe, "f").complete();
+        __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe, "f").complete();
     }
     /**
      * This event returns a boolean on scroll indicating whether the provided element is in view.
      * @param elementRef The target element reference.
      */
     elementInViewOnScroll(elementRef) {
-        const scrollableHostObservable = this.scrollableHostService.watchScrollableHostScrollEvents(elementRef);
+        const scrollableHostObservable = __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostService, "f").watchScrollableHostScrollEvents(elementRef);
         const isInitiallyInView = this.isElementScrolledInView(elementRef);
         const returnedObservable = new BehaviorSubject(isInitiallyInView);
         scrollableHostObservable
-            .pipe(takeUntil(this.scrollableHostScrollEventUnsubscribe))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe, "f")))
             .subscribe(() => {
             const isInView = this.isElementScrolledInView(elementRef);
             returnedObservable.next(isInView);
@@ -461,12 +482,12 @@ class SkyBackToTopDomAdapterService {
         if (!elementRef || !elementRef.nativeElement) {
             return;
         }
-        const scrollableHost = this.scrollableHostService.getScrollableHost(elementRef);
+        const scrollableHost = __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostService, "f").getScrollableHost(elementRef);
         if (scrollableHost instanceof Window) {
             // Scroll to top of window, but account for the body margin that allows for the omnibar if it exists.
             const bodyMarginOffset = parseInt(getComputedStyle(document.body).marginTop, 10);
             const newOffsetTop = elementRef.nativeElement.offsetTop - bodyMarginOffset;
-            this.windowRef.nativeWindow.scrollTo(elementRef.nativeElement.offsetLeft, newOffsetTop);
+            __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_windowRef, "f").nativeWindow.scrollTo(elementRef.nativeElement.offsetLeft, newOffsetTop);
         }
         else {
             // Scroll to top of parent element.
@@ -475,13 +496,12 @@ class SkyBackToTopDomAdapterService {
         }
     }
     isElementScrolledInView(element) {
-        const parentElement = this.scrollableHostService.getScrollableHost(element.nativeElement);
+        const parentElement = __classPrivateFieldGet(this, _SkyBackToTopDomAdapterService_scrollableHostService, "f").getScrollableHost(element);
         if (!element.nativeElement.offsetParent) {
             return true;
         }
         const buffer = 25;
         const elementRect = element.nativeElement.getBoundingClientRect();
-        /* istanbul ignore else */
         if (parentElement instanceof HTMLElement) {
             const parentRect = parentElement.getBoundingClientRect();
             return elementRect.top > parentRect.top - buffer;
@@ -491,6 +511,7 @@ class SkyBackToTopDomAdapterService {
         }
     }
 }
+_SkyBackToTopDomAdapterService_ngUnsubscribe = new WeakMap(), _SkyBackToTopDomAdapterService_scrollableHostScrollEventUnsubscribe = new WeakMap(), _SkyBackToTopDomAdapterService_scrollableHostService = new WeakMap(), _SkyBackToTopDomAdapterService_windowRef = new WeakMap();
 SkyBackToTopDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopDomAdapterService, deps: [{ token: i1$2.SkyAppWindowRef }, { token: i1$2.SkyScrollableHostService }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyBackToTopDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopDomAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopDomAdapterService, decorators: [{
@@ -508,96 +529,100 @@ var SkyBackToTopMessageType;
     SkyBackToTopMessageType[SkyBackToTopMessageType["BackToTop"] = 0] = "BackToTop";
 })(SkyBackToTopMessageType || (SkyBackToTopMessageType = {}));
 
+var _SkyBackToTopDirective_instances, _SkyBackToTopDirective_buttonHidden, _SkyBackToTopDirective_dockItem, _SkyBackToTopDirective_dockService, _SkyBackToTopDirective_domAdapter, _SkyBackToTopDirective_elementInView, _SkyBackToTopDirective_elementRef, _SkyBackToTopDirective_ngUnsubscribe, _SkyBackToTopDirective__skyBackToTopMessageStream, _SkyBackToTopDirective_handleBackToTopButton, _SkyBackToTopDirective_addBackToTop, _SkyBackToTopDirective_handleIncomingMessages, _SkyBackToTopDirective_setBackToTopListeners, _SkyBackToTopDirective_destroyBackToTop;
 /**
  * Associates a button with an element on the page and displays that button
  * to return to the element after users scroll away.
  */
 class SkyBackToTopDirective {
-    constructor(dockService, domAdapter, element) {
-        this.dockService = dockService;
-        this.domAdapter = domAdapter;
-        this.element = element;
-        this.buttonHidden = false;
-        this.ngUnsubscribe = new Subject();
+    constructor(dockService, domAdapter, elementRef) {
+        _SkyBackToTopDirective_instances.add(this);
+        _SkyBackToTopDirective_buttonHidden.set(this, false);
+        _SkyBackToTopDirective_dockItem.set(this, void 0);
+        _SkyBackToTopDirective_dockService.set(this, void 0);
+        _SkyBackToTopDirective_domAdapter.set(this, void 0);
+        _SkyBackToTopDirective_elementInView.set(this, false);
+        _SkyBackToTopDirective_elementRef.set(this, void 0);
+        _SkyBackToTopDirective_ngUnsubscribe.set(this, new Subject());
+        _SkyBackToTopDirective__skyBackToTopMessageStream.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_dockService, dockService, "f");
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_domAdapter, domAdapter, "f");
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_elementRef, elementRef, "f");
     }
     /**
      * Specifies configuration options for the back to top component.
      */
     set skyBackToTop(value) {
-        this.buttonHidden = !!value?.buttonHidden;
-        this.handleBackToTopButton(this.elementInView);
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_buttonHidden, !!value?.buttonHidden, "f");
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_handleBackToTopButton).call(this, __classPrivateFieldGet(this, _SkyBackToTopDirective_elementInView, "f"));
     }
     /**
      * Provides an observable to send commands to the back to top component.
      * The commands respect the `SkyBackToTopMessage` type.
      */
     set skyBackToTopMessageStream(value) {
-        if (this._skyBackToTopMessageStream) {
-            this._skyBackToTopMessageStream.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyBackToTopDirective__skyBackToTopMessageStream, "f")) {
+            __classPrivateFieldGet(this, _SkyBackToTopDirective__skyBackToTopMessageStream, "f").unsubscribe();
         }
-        this._skyBackToTopMessageStream = value;
-        this._skyBackToTopMessageStream
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((message) => this.handleIncomingMessages(message));
+        __classPrivateFieldSet(this, _SkyBackToTopDirective__skyBackToTopMessageStream, value, "f");
+        __classPrivateFieldGet(this, _SkyBackToTopDirective__skyBackToTopMessageStream, "f")
+            ?.pipe(takeUntil(__classPrivateFieldGet(this, _SkyBackToTopDirective_ngUnsubscribe, "f")))
+            .subscribe((message) => __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_handleIncomingMessages).call(this, message));
     }
     ngAfterViewInit() {
-        this.elementInView = this.domAdapter.isElementScrolledInView(this.element);
-        this.handleBackToTopButton(this.elementInView);
-        this.setBackToTopListeners();
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_elementInView, __classPrivateFieldGet(this, _SkyBackToTopDirective_domAdapter, "f").isElementScrolledInView(__classPrivateFieldGet(this, _SkyBackToTopDirective_elementRef, "f")), "f");
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_handleBackToTopButton).call(this, __classPrivateFieldGet(this, _SkyBackToTopDirective_elementInView, "f"));
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_setBackToTopListeners).call(this);
     }
     ngOnDestroy() {
-        if (this.dockItem) {
-            this.dockItem.destroy();
-        }
-    }
-    handleBackToTopButton(elementInView) {
-        // Add back to top button if user scrolls down and button is not hidden.
-        if (!this.dockItem &&
-            elementInView !== undefined &&
-            !elementInView &&
-            !this.buttonHidden) {
-            this.addBackToTop();
-        }
-        // Remove back to top button if user scrolls back up.
-        if (elementInView || this.buttonHidden) {
-            this.destroyBackToTop();
-        }
-    }
-    addBackToTop() {
-        this.dockItem = this.dockService.insertComponent(SkyBackToTopComponent);
-        // Listen for clicks on the "back to top" button so we know when to scroll up.
-        this.dockItem.componentInstance.scrollToTopClick
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.domAdapter.scrollToElement(this.element);
+        if (__classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f")) {
+            __classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f").destroy();
+        }
+    }
+}
+_SkyBackToTopDirective_buttonHidden = new WeakMap(), _SkyBackToTopDirective_dockItem = new WeakMap(), _SkyBackToTopDirective_dockService = new WeakMap(), _SkyBackToTopDirective_domAdapter = new WeakMap(), _SkyBackToTopDirective_elementInView = new WeakMap(), _SkyBackToTopDirective_elementRef = new WeakMap(), _SkyBackToTopDirective_ngUnsubscribe = new WeakMap(), _SkyBackToTopDirective__skyBackToTopMessageStream = new WeakMap(), _SkyBackToTopDirective_instances = new WeakSet(), _SkyBackToTopDirective_handleBackToTopButton = function _SkyBackToTopDirective_handleBackToTopButton(elementInView) {
+    // Add back to top button if user scrolls down and button is not hidden.
+    if (!__classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f") &&
+        elementInView !== undefined &&
+        !elementInView &&
+        !__classPrivateFieldGet(this, _SkyBackToTopDirective_buttonHidden, "f")) {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_addBackToTop).call(this);
+    }
+    // Remove back to top button if user scrolls back up.
+    if (elementInView || __classPrivateFieldGet(this, _SkyBackToTopDirective_buttonHidden, "f")) {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_destroyBackToTop).call(this);
+    }
+}, _SkyBackToTopDirective_addBackToTop = function _SkyBackToTopDirective_addBackToTop() {
+    __classPrivateFieldSet(this, _SkyBackToTopDirective_dockItem, __classPrivateFieldGet(this, _SkyBackToTopDirective_dockService, "f").insertComponent(SkyBackToTopComponent), "f");
+    // Listen for clicks on the "back to top" button so we know when to scroll up.
+    __classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f").componentInstance.scrollToTopClick
+        .pipe(takeUntil(__classPrivateFieldGet(this, _SkyBackToTopDirective_ngUnsubscribe, "f")))
+        .subscribe(() => {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_domAdapter, "f").scrollToElement(__classPrivateFieldGet(this, _SkyBackToTopDirective_elementRef, "f"));
+    });
+}, _SkyBackToTopDirective_handleIncomingMessages = function _SkyBackToTopDirective_handleIncomingMessages(message) {
+    /* istanbul ignore else */
+    if (message.type === SkyBackToTopMessageType.BackToTop) {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_domAdapter, "f").scrollToElement(__classPrivateFieldGet(this, _SkyBackToTopDirective_elementRef, "f"));
+    }
+}, _SkyBackToTopDirective_setBackToTopListeners = function _SkyBackToTopDirective_setBackToTopListeners() {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyBackToTopDirective_elementRef, "f")) {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_domAdapter, "f")
+            .elementInViewOnScroll(__classPrivateFieldGet(this, _SkyBackToTopDirective_elementRef, "f"))
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyBackToTopDirective_ngUnsubscribe, "f")))
+            .subscribe((elementInView) => {
+            __classPrivateFieldSet(this, _SkyBackToTopDirective_elementInView, elementInView, "f");
+            __classPrivateFieldGet(this, _SkyBackToTopDirective_instances, "m", _SkyBackToTopDirective_handleBackToTopButton).call(this, elementInView);
         });
     }
-    handleIncomingMessages(message) {
-        /* istanbul ignore else */
-        if (message.type === SkyBackToTopMessageType.BackToTop) {
-            this.domAdapter.scrollToElement(this.element);
-        }
+}, _SkyBackToTopDirective_destroyBackToTop = function _SkyBackToTopDirective_destroyBackToTop() {
+    /* istanbul ignore else */
+    if (__classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f")) {
+        __classPrivateFieldGet(this, _SkyBackToTopDirective_dockItem, "f").destroy();
+        __classPrivateFieldSet(this, _SkyBackToTopDirective_dockItem, undefined, "f");
     }
-    setBackToTopListeners() {
-        /* istanbul ignore else */
-        if (this.element) {
-            this.domAdapter
-                .elementInViewOnScroll(this.element)
-                .pipe(takeUntil(this.ngUnsubscribe))
-                .subscribe((elementInView) => {
-                this.elementInView = elementInView;
-                this.handleBackToTopButton(elementInView);
-            });
-        }
-    }
-    destroyBackToTop() {
-        /* istanbul ignore else */
-        if (this.dockItem) {
-            this.dockItem.destroy();
-            this.dockItem = undefined;
-        }
-    }
-}
+};
 SkyBackToTopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopDirective, deps: [{ token: i1$2.SkyDockService }, { token: SkyBackToTopDomAdapterService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 SkyBackToTopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: SkyBackToTopDirective, selector: "[skyBackToTop]", inputs: { skyBackToTop: "skyBackToTop", skyBackToTopMessageStream: "skyBackToTopMessageStream" }, providers: [SkyBackToTopDomAdapterService], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyBackToTopDirective, decorators: [{
@@ -2705,8 +2730,8 @@ class SkyToolbarComponent {
     constructor() {
         this.hasSections = false;
     }
-    ngAfterContentInit() {
-        this.hasSections = this.sectionComponents.length > 0;
+    set sectionComponents(value) {
+        this.hasSections = !!value && value.length > 0;
     }
 }
 SkyToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });