@skyux/action-bars 5.5.0 → 5.6.0

package/bundles/skyux-action-bars.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/popovers'), require('@skyux/theme'), require('rxjs'), require('rxjs/operators'), require('@skyux/animations'), require('@skyux/core')) :
-    typeof define === 'function' && define.amd ? define('@skyux/action-bars', ['exports', '@angular/core', '@angular/common', '@skyux/i18n', '@skyux/indicators', '@skyux/popovers', '@skyux/theme', 'rxjs', 'rxjs/operators', '@skyux/animations', '@skyux/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["action-bars"] = {}), global.ng.core, global.ng.common, global.i6, global.i3, global.i2$1, global.i5, global.rxjs, global.rxjs.operators, global.animations, global.i2));
-})(this, (function (exports, i0, i4, i6, i3, i2$1, i5, rxjs, operators, animations, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/popovers'), require('@skyux/theme'), require('@skyux/core'), require('rxjs'), require('@skyux/animations'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@skyux/action-bars', ['exports', '@angular/common', '@angular/core', '@skyux/i18n', '@skyux/indicators', '@skyux/popovers', '@skyux/theme', '@skyux/core', 'rxjs', '@skyux/animations', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["action-bars"] = {}), global.ng.common, global.ng.core, global.i4, global.i3$1, global.i2, global.i3, global.i2$1, global.rxjs, global.animations, global.rxjs.operators));
+})(this, (function (exports, i4$1, i0, i4, i3$1, i2, i3, i2$1, rxjs, animations, operators) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,13 +22,13 @@
         return Object.freeze(n);
     }
 
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4$1);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
 
     /**
      * NOTICE: DO NOT MODIFY THIS FILE!
@@ -48,7 +48,7 @@
         function SkyActionBarsResourcesProvider() {
         }
         SkyActionBarsResourcesProvider.prototype.getString = function (localeInfo, name) {
-            return i6.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+            return i4.getLibStringForLocale(RESOURCES, localeInfo.locale, name);
         };
         return SkyActionBarsResourcesProvider;
     }());
@@ -61,21 +61,21 @@
         return SkyActionBarsResourcesModule;
     }());
     SkyActionBarsResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyActionBarsResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyActionBarsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyActionBarsResourcesModule, exports: [i6.SkyI18nModule] });
+    SkyActionBarsResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyActionBarsResourcesModule, exports: [i4.SkyI18nModule] });
     SkyActionBarsResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyActionBarsResourcesModule, providers: [
             {
-                provide: i6.SKY_LIB_RESOURCES_PROVIDERS,
+                provide: i4.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyActionBarsResourcesProvider,
                 multi: true,
             },
-        ], imports: [i6.SkyI18nModule] });
+        ], imports: [i4.SkyI18nModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyActionBarsResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        exports: [i6.SkyI18nModule],
+                        exports: [i4.SkyI18nModule],
                         providers: [
                             {
-                                provide: i6.SKY_LIB_RESOURCES_PROVIDERS,
+                                provide: i4.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyActionBarsResourcesProvider,
                                 multi: true,
                             },
@@ -84,24 +84,210 @@
             }] });
 
     /**
-     * Specifies the summary information to display.
+     * Contains actions for the `sky-summary-action-bar` component.
      */
-    var SkySummaryActionBarSummaryComponent = /** @class */ (function () {
-        function SkySummaryActionBarSummaryComponent() {
+    var SkySummaryActionBarActionsComponent = /** @class */ (function () {
+        function SkySummaryActionBarActionsComponent() {
         }
-        return SkySummaryActionBarSummaryComponent;
+        return SkySummaryActionBarActionsComponent;
     }());
-    SkySummaryActionBarSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSummaryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSummaryComponent, selector: "sky-summary-action-bar-summary", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSummaryComponent, decorators: [{
+    SkySummaryActionBarActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarActionsComponent, selector: "sky-summary-action-bar-actions", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'sky-summary-action-bar-summary',
+                        selector: 'sky-summary-action-bar-actions',
                         template: "<ng-content></ng-content>\n",
+                        styles: [":host{display:inline-flex}\n"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }] });
 
+    /**
+     * Displays a cancel action.
+     */
+    var SkySummaryActionBarCancelComponent = /** @class */ (function () {
+        function SkySummaryActionBarCancelComponent() {
+            /**
+             * Indicates whether to disable the cancel action.
+             */
+            this.disabled = false;
+            /**
+             * Fires when users select the cancel action.
+             */
+            this.actionClick = new i0.EventEmitter();
+        }
+        SkySummaryActionBarCancelComponent.prototype.onCancelClicked = function () {
+            this.actionClick.emit();
+        };
+        return SkySummaryActionBarCancelComponent;
+    }());
+    SkySummaryActionBarCancelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarCancelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarCancelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarCancelComponent, selector: "sky-summary-action-bar-cancel", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link sky-summary-action-bar-cancel\"\n  [disabled]=\"disabled\"\n  (click)=\"onCancelClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .sky-modal .sky-modal-footer-container button.sky-btn-link:first-child{margin-left:initial}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarCancelComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-summary-action-bar-cancel',
+                        template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link sky-summary-action-bar-cancel\"\n  [disabled]=\"disabled\"\n  (click)=\"onCancelClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n",
+                        styles: ["::ng-deep .sky-modal .sky-modal-footer-container button.sky-btn-link:first-child{margin-left:initial}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], actionClick: [{
+                    type: i0.Output
+                }] } });
+
+    /**
+     * Displays a primary button.
+     */
+    var SkySummaryActionBarPrimaryActionComponent = /** @class */ (function () {
+        function SkySummaryActionBarPrimaryActionComponent() {
+            /**
+             * Indicates whether to disable the primary action.
+             * @default false
+             */
+            this.disabled = false;
+            /**
+             * Fires when users select the primary action.
+             */
+            this.actionClick = new i0.EventEmitter();
+        }
+        SkySummaryActionBarPrimaryActionComponent.prototype.onButtonClicked = function () {
+            this.actionClick.emit();
+        };
+        return SkySummaryActionBarPrimaryActionComponent;
+    }());
+    SkySummaryActionBarPrimaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarPrimaryActionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarPrimaryActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarPrimaryActionComponent, selector: "sky-summary-action-bar-primary-action", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-primary\"\n  [disabled]=\"disabled\"\n  (click)=\"onButtonClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarPrimaryActionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-summary-action-bar-primary-action',
+                        template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-primary\"\n  [disabled]=\"disabled\"\n  (click)=\"onButtonClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n",
+                        styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { disabled: [{
+                    type: i0.Input
+                }], actionClick: [{
+                    type: i0.Output
+                }] } });
+
+    /**
+     * Specifies secondary actions.
+     */
+    var SkySummaryActionBarSecondaryActionComponent = /** @class */ (function () {
+        function SkySummaryActionBarSecondaryActionComponent(changeDetector) {
+            this.changeDetector = changeDetector;
+            /**
+             * Indicates whether to disable a secondary action.
+             * @default false
+             */
+            this.disabled = false;
+            /**
+             * Fires when users select a secondary action.
+             */
+            this.actionClick = new i0.EventEmitter();
+        }
+        Object.defineProperty(SkySummaryActionBarSecondaryActionComponent.prototype, "isDropdown", {
+            get: function () {
+                return this._isDropdown;
+            },
+            set: function (value) {
+                this._isDropdown = value;
+                this.changeDetector.detectChanges();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SkySummaryActionBarSecondaryActionComponent.prototype.onButtonClicked = function () {
+            this.actionClick.emit();
+        };
+        return SkySummaryActionBarSecondaryActionComponent;
+    }());
+    SkySummaryActionBarSecondaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarSecondaryActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSecondaryActionComponent, selector: "sky-summary-action-bar-secondary-action", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!isDropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn\"\n    role=\"menuitem\"\n    [disabled]=\"disabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-secondary': 'default',\n      'sky-btn-default': 'modern'\n    }\"\n    (click)=\"onButtonClicked()\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</ng-container>\n<sky-dropdown-item *ngIf=\"isDropdown\">\n  <button type=\"button\" [disabled]=\"disabled\" (click)=\"onButtonClicked()\">\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</sky-dropdown-item>\n\n<ng-template #summaryActionBarSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"], components: [{ type: i2__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-summary-action-bar-secondary-action',
+                        template: "<ng-container *ngIf=\"!isDropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn\"\n    role=\"menuitem\"\n    [disabled]=\"disabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-secondary': 'default',\n      'sky-btn-default': 'modern'\n    }\"\n    (click)=\"onButtonClicked()\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</ng-container>\n<sky-dropdown-item *ngIf=\"isDropdown\">\n  <button type=\"button\" [disabled]=\"disabled\" (click)=\"onButtonClicked()\">\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</sky-dropdown-item>\n\n<ng-template #summaryActionBarSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n",
+                        styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                    type: i0.Input
+                }], actionClick: [{
+                    type: i0.Output
+                }] } });
+
+    /**
+     * Contains secondary actions specified with `sky-summary-action-bar-secondary-action`
+     * components.
+     */
+    var SkySummaryActionBarSecondaryActionsComponent = /** @class */ (function () {
+        function SkySummaryActionBarSecondaryActionsComponent(changeDetector, mediaQueryService) {
+            this.changeDetector = changeDetector;
+            this.mediaQueryService = mediaQueryService;
+            this.isMobile = false;
+            this.dropdownMessageStream = new rxjs.Subject();
+            this.actionClicks = [];
+        }
+        SkySummaryActionBarSecondaryActionsComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            this.mediaQuerySubscription = this.mediaQueryService.subscribe(function (args) {
+                _this.isMobile = args === i2$1.SkyMediaBreakpoints.xs;
+                _this.checkAndUpdateChildrenType();
+            });
+            this.actionChanges = this.secondaryActionComponents.changes.subscribe(function () {
+                _this.checkAndUpdateChildrenType();
+            });
+            if (this.mediaQueryService.current === i2$1.SkyMediaBreakpoints.xs) {
+                this.isMobile = true;
+            }
+            this.checkAndUpdateChildrenType();
+        };
+        SkySummaryActionBarSecondaryActionsComponent.prototype.ngOnDestroy = function () {
+            this.mediaQuerySubscription.unsubscribe();
+            this.actionChanges.unsubscribe();
+            this.actionClicks.forEach(function (actionClick) { return actionClick.unsubscribe(); });
+        };
+        SkySummaryActionBarSecondaryActionsComponent.prototype.checkAndUpdateChildrenType = function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (this.secondaryActionComponents) {
+                var isDropdown_1 = false;
+                if (this.secondaryActionComponents.length >= 5 || this.isMobile) {
+                    isDropdown_1 = true;
+                }
+                this.secondaryActionComponents.forEach(function (action) {
+                    action.isDropdown = isDropdown_1;
+                    _this.actionClicks.push(action.actionClick.subscribe(function () {
+                        _this.dropdownMessageStream.next({
+                            type: i2.SkyDropdownMessageType.Close,
+                        });
+                    }));
+                });
+            }
+            this.changeDetector.detectChanges();
+        };
+        return SkySummaryActionBarSecondaryActionsComponent;
+    }());
+    SkySummaryActionBarSecondaryActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$1.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarSecondaryActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSecondaryActionsComponent, selector: "sky-summary-action-bar-secondary-actions", queries: [{ propertyName: "secondaryActionComponents", predicate: SkySummaryActionBarSecondaryActionComponent }], ngImport: i0__namespace, template: "<div\n  *ngIf=\"!isMobile && secondaryActionComponents.length < 5\"\n  class=\"sky-summary-action-bar-secondary-buttons\"\n  role=\"menubar\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n  ></ng-container>\n</div>\n<div *ngIf=\"isMobile || secondaryActionComponents.length > 4\">\n  <sky-dropdown\n    buttonType=\"ellipsis-h\"\n    [attr.title]=\"'skyux_summary_action_bar_open_secondary' | skyLibResources\"\n    [messageStream]=\"dropdownMessageStream\"\n  >\n    <sky-dropdown-menu>\n      <ng-container\n        *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n      ></ng-container>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-template #summaryActionBarSecondaryActions>\n  <ng-content select=\"sky-summary-action-bar-secondary-action\"></ng-content>\n</ng-template>\n", components: [{ type: i2__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4__namespace$1.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-summary-action-bar-secondary-actions',
+                        template: "<div\n  *ngIf=\"!isMobile && secondaryActionComponents.length < 5\"\n  class=\"sky-summary-action-bar-secondary-buttons\"\n  role=\"menubar\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n  ></ng-container>\n</div>\n<div *ngIf=\"isMobile || secondaryActionComponents.length > 4\">\n  <sky-dropdown\n    buttonType=\"ellipsis-h\"\n    [attr.title]=\"'skyux_summary_action_bar_open_secondary' | skyLibResources\"\n    [messageStream]=\"dropdownMessageStream\"\n  >\n    <sky-dropdown-menu>\n      <ng-container\n        *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n      ></ng-container>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-template #summaryActionBarSecondaryActions>\n  <ng-content select=\"sky-summary-action-bar-secondary-action\"></ng-content>\n</ng-template>\n",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$1.SkyMediaQueryService }]; }, propDecorators: { secondaryActionComponents: [{
+                    type: i0.ContentChildren,
+                    args: [SkySummaryActionBarSecondaryActionComponent]
+                }] } });
+
     /**
      * @internal
      */
@@ -185,11 +371,30 @@
         };
         return SkySummaryActionBarAdapterService;
     }());
-    SkySummaryActionBarAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i2__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkySummaryActionBarAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarAdapterService, deps: [{ token: i0__namespace.RendererFactory2 }, { token: i2__namespace$1.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
     SkySummaryActionBarAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarAdapterService });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarAdapterService, decorators: [{
                 type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i2__namespace.SkyAppWindowRef }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.RendererFactory2 }, { type: i2__namespace$1.SkyAppWindowRef }]; } });
+
+    /**
+     * Specifies the summary information to display.
+     */
+    var SkySummaryActionBarSummaryComponent = /** @class */ (function () {
+        function SkySummaryActionBarSummaryComponent() {
+        }
+        return SkySummaryActionBarSummaryComponent;
+    }());
+    SkySummaryActionBarSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSummaryComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSummaryComponent, selector: "sky-summary-action-bar-summary", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSummaryComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-summary-action-bar-summary',
+                        template: "<ng-content></ng-content>\n",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }] });
 
     /**
      * Auto-incrementing integer used to generate unique ids for summary action bar components.
@@ -215,7 +420,7 @@
         Object.defineProperty(SkySummaryActionBarComponent.prototype, "isSummaryCollapsible", {
             get: function () {
                 return (this.type === SkySummaryActionBarType.StandardModal ||
-                    this.mediaQueryService.current === i2.SkyMediaBreakpoints.xs);
+                    this.mediaQueryService.current === i2$1.SkyMediaBreakpoints.xs);
             },
             enumerable: false,
             configurable: true
@@ -285,7 +490,7 @@
         SkySummaryActionBarComponent.prototype.setupReactiveState = function () {
             var _this = this;
             this.mediaQuerySubscription = this.mediaQueryService.subscribe(function (args) {
-                if (args !== i2.SkyMediaBreakpoints.xs) {
+                if (args !== i2$1.SkyMediaBreakpoints.xs) {
                     _this.isSummaryCollapsed = false;
                     _this.slideDirection = 'down';
                 }
@@ -345,8 +550,8 @@
         };
         return SkySummaryActionBarComponent;
     }());
-    SkySummaryActionBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarComponent, deps: [{ token: SkySummaryActionBarAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i2__namespace.SkyMediaQueryService }, { token: i2__namespace.MutationObserverService }, { token: i2__namespace.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarComponent, selector: "sky-summary-action-bar", providers: [SkySummaryActionBarAdapterService], queries: [{ propertyName: "summaryElement", first: true, predicate: SkySummaryActionBarSummaryComponent, descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-summary-action-bar\"\n  [ngClass]=\"{\n    'sky-summary-action-bar-summary-collapsible': isSummaryCollapsible,\n    'sky-summary-action-bar-modal': type === 1 || type === 2,\n    'sky-summary-action-bar-split-view': type === 4\n  }\"\n>\n  <div class=\"sky-summary-action-bar-actions\">\n    <ng-content select=\"sky-summary-action-bar-actions\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"summaryContentExists()\">\n    <div\n      class=\"sky-summary-action-bar-summary\"\n      [id]=\"summaryId\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      (@skyAnimationSlide.start)=\"summaryTransitionStart()\"\n      (@skyAnimationSlide.done)=\"summaryTransitionEnd()\"\n    >\n      <div class=\"sky-summary-action-bar-summary-body\">\n        <div class=\"sky-summary-action-bar-summary-items\">\n          <ng-content select=\"sky-summary-action-bar-summary\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"isSummaryCollapsible && !isSummaryCollapsed\"\n          class=\"sky-summary-action-bar-details-collapse\"\n        >\n          <ng-container *ngTemplateOutlet=\"chevron\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isSummaryCollapsible && isSummaryCollapsed\"\n      class=\"sky-summary-action-bar-details-expand\"\n    >\n      <ng-container *ngTemplateOutlet=\"chevron\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #chevron>\n  <sky-chevron\n    [attr.aria-controls]=\"summaryId\"\n    [ariaLabel]=\"'skyux_summary_action_bar_expand' | skyLibResources\"\n    [direction]=\"isSummaryCollapsed ? 'up' : 'down'\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-default': 'modern'\n    }\"\n    (directionChange)=\"onDirectionChange($event)\"\n  >\n  </sky-chevron>\n</ng-template>\n", styles: [".sky-summary-action-bar{display:flex;align-items:center;width:100%;margin-top:20px;position:fixed;bottom:0;left:0;z-index:999;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}.sky-summary-action-bar-modal,.sky-summary-action-bar-split-view{position:relative;margin-top:0}.sky-summary-action-bar-split-view{box-shadow:none}.sky-summary-action-bar-actions{padding:10px 20px 10px 10px;flex-shrink:0;background-color:#fff;z-index:999}.sky-summary-action-bar-summary{margin:10px 0;border-left:1px solid #e2e3e4}.sky-summary-action-bar-summary-body{padding-left:20px;display:flex}.sky-summary-action-bar-summary-items{display:flex;flex-wrap:wrap;flex-grow:1;margin-right:10px}.sky-summary-action-bar-details-expand{margin-left:auto;margin-right:10px}.sky-summary-action-bar-details-expand,.sky-summary-action-bar-details-collapse{display:none}.sky-summary-action-bar-summary-collapsible.sky-summary-action-bar{flex-wrap:wrap}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary{order:-1;width:100%;border-bottom:1px solid #e2e3e4;margin:0;border-left:none;z-index:998}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:10px}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-details-expand,.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-details-collapse{display:block}:host-context(.sky-theme-modern) .sky-summary-action-bar-actions{padding:20px 30px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary{border:none}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-body{padding-left:30px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-actions{padding:20px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:20px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items{margin-bottom:-10px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items ::ng-deep sky-key-info{margin:0 30px 10px 0;display:inline-block}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items ::ng-deep sky-key-info:last-child{margin:0 0 10px}.sky-theme-modern .sky-summary-action-bar-actions{padding:20px 30px}.sky-theme-modern .sky-summary-action-bar-summary{border:none}.sky-theme-modern .sky-summary-action-bar-summary-body{padding-left:30px}.sky-theme-modern .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-actions{padding:20px}.sky-theme-modern .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:20px}.sky-theme-modern .sky-summary-action-bar-summary-items{margin-bottom:-10px}.sky-theme-modern .sky-summary-action-bar-summary-items ::ng-deep sky-key-info{margin:0 30px 10px 0;display:inline-block}.sky-theme-modern .sky-summary-action-bar-summary-items ::ng-deep sky-key-info:last-child{margin:0 0 10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-summary-action-bar{background-color:#000;box-shadow:none}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-summary-action-bar-actions{background-color:#000}.sky-theme-modern.sky-theme-mode-dark .sky-summary-action-bar{background-color:#000;box-shadow:none}.sky-theme-modern.sky-theme-mode-dark .sky-summary-action-bar-actions{background-color:#000}\n"], components: [{ type: i3__namespace.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i6__namespace.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    SkySummaryActionBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarComponent, deps: [{ token: SkySummaryActionBarAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i2__namespace$1.SkyMediaQueryService }, { token: i2__namespace$1.MutationObserverService }, { token: i2__namespace$1.SkyAppWindowRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkySummaryActionBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarComponent, selector: "sky-summary-action-bar", providers: [SkySummaryActionBarAdapterService], queries: [{ propertyName: "summaryElement", first: true, predicate: SkySummaryActionBarSummaryComponent, descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div\n  class=\"sky-summary-action-bar\"\n  [ngClass]=\"{\n    'sky-summary-action-bar-summary-collapsible': isSummaryCollapsible,\n    'sky-summary-action-bar-modal': type === 1 || type === 2,\n    'sky-summary-action-bar-split-view': type === 4\n  }\"\n>\n  <div class=\"sky-summary-action-bar-actions\">\n    <ng-content select=\"sky-summary-action-bar-actions\"></ng-content>\n  </div>\n  <ng-container *ngIf=\"summaryContentExists()\">\n    <div\n      class=\"sky-summary-action-bar-summary\"\n      [id]=\"summaryId\"\n      [@skyAnimationSlide]=\"slideDirection\"\n      (@skyAnimationSlide.start)=\"summaryTransitionStart()\"\n      (@skyAnimationSlide.done)=\"summaryTransitionEnd()\"\n    >\n      <div class=\"sky-summary-action-bar-summary-body\">\n        <div class=\"sky-summary-action-bar-summary-items\">\n          <ng-content select=\"sky-summary-action-bar-summary\"></ng-content>\n        </div>\n        <div\n          *ngIf=\"isSummaryCollapsible && !isSummaryCollapsed\"\n          class=\"sky-summary-action-bar-details-collapse\"\n        >\n          <ng-container *ngTemplateOutlet=\"chevron\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div\n      *ngIf=\"isSummaryCollapsible && isSummaryCollapsed\"\n      class=\"sky-summary-action-bar-details-expand\"\n    >\n      <ng-container *ngTemplateOutlet=\"chevron\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #chevron>\n  <sky-chevron\n    [attr.aria-controls]=\"summaryId\"\n    [ariaLabel]=\"'skyux_summary_action_bar_expand' | skyLibResources\"\n    [direction]=\"isSummaryCollapsed ? 'up' : 'down'\"\n    [skyThemeClass]=\"{\n      'sky-margin-inline-default': 'modern'\n    }\"\n    (directionChange)=\"onDirectionChange($event)\"\n  >\n  </sky-chevron>\n</ng-template>\n", styles: [".sky-summary-action-bar{display:flex;align-items:center;width:100%;margin-top:20px;position:fixed;bottom:0;left:0;z-index:999;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}.sky-summary-action-bar-modal,.sky-summary-action-bar-split-view{position:relative;margin-top:0}.sky-summary-action-bar-split-view{box-shadow:none}.sky-summary-action-bar-actions{padding:10px 20px 10px 10px;flex-shrink:0;background-color:#fff;z-index:999}.sky-summary-action-bar-summary{margin:10px 0;border-left:1px solid #e2e3e4}.sky-summary-action-bar-summary-body{padding-left:20px;display:flex}.sky-summary-action-bar-summary-items{display:flex;flex-wrap:wrap;flex-grow:1;margin-right:10px}.sky-summary-action-bar-details-expand{margin-left:auto;margin-right:10px}.sky-summary-action-bar-details-expand,.sky-summary-action-bar-details-collapse{display:none}.sky-summary-action-bar-summary-collapsible.sky-summary-action-bar{flex-wrap:wrap}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary{order:-1;width:100%;border-bottom:1px solid #e2e3e4;margin:0;border-left:none;z-index:998}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:10px}.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-details-expand,.sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-details-collapse{display:block}:host-context(.sky-theme-modern) .sky-summary-action-bar-actions{padding:20px 30px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary{border:none}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-body{padding-left:30px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-actions{padding:20px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:20px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items{margin-bottom:-10px}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items ::ng-deep sky-key-info{margin:0 30px 10px 0;display:inline-block}:host-context(.sky-theme-modern) .sky-summary-action-bar-summary-items ::ng-deep sky-key-info:last-child{margin:0 0 10px}.sky-theme-modern .sky-summary-action-bar-actions{padding:20px 30px}.sky-theme-modern .sky-summary-action-bar-summary{border:none}.sky-theme-modern .sky-summary-action-bar-summary-body{padding-left:30px}.sky-theme-modern .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-actions{padding:20px}.sky-theme-modern .sky-summary-action-bar-summary-collapsible .sky-summary-action-bar-summary-body{padding:20px}.sky-theme-modern .sky-summary-action-bar-summary-items{margin-bottom:-10px}.sky-theme-modern .sky-summary-action-bar-summary-items ::ng-deep sky-key-info{margin:0 30px 10px 0;display:inline-block}.sky-theme-modern .sky-summary-action-bar-summary-items ::ng-deep sky-key-info:last-child{margin:0 0 10px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-summary-action-bar{background-color:#000;box-shadow:none}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-summary-action-bar-actions{background-color:#000}.sky-theme-modern.sky-theme-mode-dark .sky-summary-action-bar{background-color:#000;box-shadow:none}.sky-theme-modern.sky-theme-mode-dark .sky-summary-action-bar-actions{background-color:#000}\n"], components: [{ type: i3__namespace$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4__namespace$1.SkyLibResourcesPipe }, animations: [animations.skyAnimationSlide], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -357,216 +562,11 @@
                         providers: [SkySummaryActionBarAdapterService],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: SkySummaryActionBarAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i2__namespace.SkyMediaQueryService }, { type: i2__namespace.MutationObserverService }, { type: i2__namespace.SkyAppWindowRef }]; }, propDecorators: { summaryElement: [{
+            }], ctorParameters: function () { return [{ type: SkySummaryActionBarAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i2__namespace$1.SkyMediaQueryService }, { type: i2__namespace$1.MutationObserverService }, { type: i2__namespace$1.SkyAppWindowRef }]; }, propDecorators: { summaryElement: [{
                     type: i0.ContentChild,
                     args: [SkySummaryActionBarSummaryComponent, { read: i0.ElementRef }]
                 }] } });
 
-    /**
-     * Contains actions for the `sky-summary-action-bar` component.
-     */
-    var SkySummaryActionBarActionsComponent = /** @class */ (function () {
-        function SkySummaryActionBarActionsComponent() {
-        }
-        return SkySummaryActionBarActionsComponent;
-    }());
-    SkySummaryActionBarActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarActionsComponent, selector: "sky-summary-action-bar-actions", ngImport: i0__namespace, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarActionsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-summary-action-bar-actions',
-                        template: "<ng-content></ng-content>\n",
-                        styles: [":host{display:inline-flex}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }] });
-
-    /**
-     * Displays a cancel action.
-     */
-    var SkySummaryActionBarCancelComponent = /** @class */ (function () {
-        function SkySummaryActionBarCancelComponent() {
-            /**
-             * Indicates whether to disable the cancel action.
-             */
-            this.disabled = false;
-            /**
-             * Fires when users select the cancel action.
-             */
-            this.actionClick = new i0.EventEmitter();
-        }
-        SkySummaryActionBarCancelComponent.prototype.onCancelClicked = function () {
-            this.actionClick.emit();
-        };
-        return SkySummaryActionBarCancelComponent;
-    }());
-    SkySummaryActionBarCancelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarCancelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarCancelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarCancelComponent, selector: "sky-summary-action-bar-cancel", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link sky-summary-action-bar-cancel\"\n  [disabled]=\"disabled\"\n  (click)=\"onCancelClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: ["::ng-deep .sky-modal .sky-modal-footer-container button.sky-btn-link:first-child{margin-left:initial}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarCancelComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-summary-action-bar-cancel',
-                        template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-link sky-summary-action-bar-cancel\"\n  [disabled]=\"disabled\"\n  (click)=\"onCancelClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n",
-                        styles: ["::ng-deep .sky-modal .sky-modal-footer-container button.sky-btn-link:first-child{margin-left:initial}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { disabled: [{
-                    type: i0.Input
-                }], actionClick: [{
-                    type: i0.Output
-                }] } });
-
-    /**
-     * Displays a primary button.
-     */
-    var SkySummaryActionBarPrimaryActionComponent = /** @class */ (function () {
-        function SkySummaryActionBarPrimaryActionComponent() {
-            /**
-             * Indicates whether to disable the primary action.
-             * @default false
-             */
-            this.disabled = false;
-            /**
-             * Fires when users select the primary action.
-             */
-            this.actionClick = new i0.EventEmitter();
-        }
-        SkySummaryActionBarPrimaryActionComponent.prototype.onButtonClicked = function () {
-            this.actionClick.emit();
-        };
-        return SkySummaryActionBarPrimaryActionComponent;
-    }());
-    SkySummaryActionBarPrimaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarPrimaryActionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarPrimaryActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarPrimaryActionComponent, selector: "sky-summary-action-bar-primary-action", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-primary\"\n  [disabled]=\"disabled\"\n  (click)=\"onButtonClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarPrimaryActionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-summary-action-bar-primary-action',
-                        template: "<button\n  type=\"button\"\n  class=\"sky-btn sky-btn-primary\"\n  [disabled]=\"disabled\"\n  (click)=\"onButtonClicked()\"\n>\n  <ng-content></ng-content>\n</button>\n",
-                        styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], propDecorators: { disabled: [{
-                    type: i0.Input
-                }], actionClick: [{
-                    type: i0.Output
-                }] } });
-
-    /**
-     * Specifies secondary actions.
-     */
-    var SkySummaryActionBarSecondaryActionComponent = /** @class */ (function () {
-        function SkySummaryActionBarSecondaryActionComponent(changeDetector) {
-            this.changeDetector = changeDetector;
-            /**
-             * Indicates whether to disable a secondary action.
-             * @default false
-             */
-            this.disabled = false;
-            /**
-             * Fires when users select a secondary action.
-             */
-            this.actionClick = new i0.EventEmitter();
-        }
-        Object.defineProperty(SkySummaryActionBarSecondaryActionComponent.prototype, "isDropdown", {
-            get: function () {
-                return this._isDropdown;
-            },
-            set: function (value) {
-                this._isDropdown = value;
-                this.changeDetector.detectChanges();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SkySummaryActionBarSecondaryActionComponent.prototype.onButtonClicked = function () {
-            this.actionClick.emit();
-        };
-        return SkySummaryActionBarSecondaryActionComponent;
-    }());
-    SkySummaryActionBarSecondaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarSecondaryActionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSecondaryActionComponent, selector: "sky-summary-action-bar-secondary-action", inputs: { disabled: "disabled" }, outputs: { actionClick: "actionClick" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!isDropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn\"\n    role=\"menuitem\"\n    [disabled]=\"disabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-secondary': 'default',\n      'sky-btn-default': 'modern'\n    }\"\n    (click)=\"onButtonClicked()\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</ng-container>\n<sky-dropdown-item *ngIf=\"isDropdown\">\n  <button type=\"button\" [disabled]=\"disabled\" (click)=\"onButtonClicked()\">\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</sky-dropdown-item>\n\n<ng-template #summaryActionBarSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"], components: [{ type: i2__namespace$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-summary-action-bar-secondary-action',
-                        template: "<ng-container *ngIf=\"!isDropdown\">\n  <button\n    type=\"button\"\n    class=\"sky-btn\"\n    role=\"menuitem\"\n    [disabled]=\"disabled\"\n    [skyThemeClass]=\"{\n      'sky-btn-secondary': 'default',\n      'sky-btn-default': 'modern'\n    }\"\n    (click)=\"onButtonClicked()\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</ng-container>\n<sky-dropdown-item *ngIf=\"isDropdown\">\n  <button type=\"button\" [disabled]=\"disabled\" (click)=\"onButtonClicked()\">\n    <ng-container\n      *ngTemplateOutlet=\"summaryActionBarSecondaryAction\"\n    ></ng-container>\n  </button>\n</sky-dropdown-item>\n\n<ng-template #summaryActionBarSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n",
-                        styles: [".sky-btn{margin-right:10px}:host-context(.sky-theme-modern) .sky-btn{margin-right:10px}.sky-theme-modern .sky-btn{margin-right:10px}\n"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                    type: i0.Input
-                }], actionClick: [{
-                    type: i0.Output
-                }] } });
-
-    /**
-     * Contains secondary actions specified with `sky-summary-action-bar-secondary-action`
-     * components.
-     */
-    var SkySummaryActionBarSecondaryActionsComponent = /** @class */ (function () {
-        function SkySummaryActionBarSecondaryActionsComponent(changeDetector, mediaQueryService) {
-            this.changeDetector = changeDetector;
-            this.mediaQueryService = mediaQueryService;
-            this.isMobile = false;
-            this.dropdownMessageStream = new rxjs.Subject();
-            this.actionClicks = [];
-        }
-        SkySummaryActionBarSecondaryActionsComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            this.mediaQuerySubscription = this.mediaQueryService.subscribe(function (args) {
-                _this.isMobile = args === i2.SkyMediaBreakpoints.xs;
-                _this.checkAndUpdateChildrenType();
-            });
-            this.actionChanges = this.secondaryActionComponents.changes.subscribe(function () {
-                _this.checkAndUpdateChildrenType();
-            });
-            if (this.mediaQueryService.current === i2.SkyMediaBreakpoints.xs) {
-                this.isMobile = true;
-            }
-            this.checkAndUpdateChildrenType();
-        };
-        SkySummaryActionBarSecondaryActionsComponent.prototype.ngOnDestroy = function () {
-            this.mediaQuerySubscription.unsubscribe();
-            this.actionChanges.unsubscribe();
-            this.actionClicks.forEach(function (actionClick) { return actionClick.unsubscribe(); });
-        };
-        SkySummaryActionBarSecondaryActionsComponent.prototype.checkAndUpdateChildrenType = function () {
-            var _this = this;
-            /* istanbul ignore else */
-            if (this.secondaryActionComponents) {
-                var isDropdown_1 = false;
-                if (this.secondaryActionComponents.length >= 5 || this.isMobile) {
-                    isDropdown_1 = true;
-                }
-                this.secondaryActionComponents.forEach(function (action) {
-                    action.isDropdown = isDropdown_1;
-                    _this.actionClicks.push(action.actionClick.subscribe(function () {
-                        _this.dropdownMessageStream.next({
-                            type: i2$1.SkyDropdownMessageType.Close,
-                        });
-                    }));
-                });
-            }
-            this.changeDetector.detectChanges();
-        };
-        return SkySummaryActionBarSecondaryActionsComponent;
-    }());
-    SkySummaryActionBarSecondaryActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.SkyMediaQueryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkySummaryActionBarSecondaryActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSecondaryActionsComponent, selector: "sky-summary-action-bar-secondary-actions", queries: [{ propertyName: "secondaryActionComponents", predicate: SkySummaryActionBarSecondaryActionComponent }], ngImport: i0__namespace, template: "<div\n  *ngIf=\"!isMobile && secondaryActionComponents.length < 5\"\n  class=\"sky-summary-action-bar-secondary-buttons\"\n  role=\"menubar\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n  ></ng-container>\n</div>\n<div *ngIf=\"isMobile || secondaryActionComponents.length > 4\">\n  <sky-dropdown\n    buttonType=\"ellipsis-h\"\n    [attr.title]=\"'skyux_summary_action_bar_open_secondary' | skyLibResources\"\n    [messageStream]=\"dropdownMessageStream\"\n  >\n    <sky-dropdown-menu>\n      <ng-container\n        *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n      ></ng-container>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-template #summaryActionBarSecondaryActions>\n  <ng-content select=\"sky-summary-action-bar-secondary-action\"></ng-content>\n</ng-template>\n", components: [{ type: i2__namespace$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2__namespace$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i6__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarSecondaryActionsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-summary-action-bar-secondary-actions',
-                        template: "<div\n  *ngIf=\"!isMobile && secondaryActionComponents.length < 5\"\n  class=\"sky-summary-action-bar-secondary-buttons\"\n  role=\"menubar\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n  ></ng-container>\n</div>\n<div *ngIf=\"isMobile || secondaryActionComponents.length > 4\">\n  <sky-dropdown\n    buttonType=\"ellipsis-h\"\n    [attr.title]=\"'skyux_summary_action_bar_open_secondary' | skyLibResources\"\n    [messageStream]=\"dropdownMessageStream\"\n  >\n    <sky-dropdown-menu>\n      <ng-container\n        *ngTemplateOutlet=\"summaryActionBarSecondaryActions\"\n      ></ng-container>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-template #summaryActionBarSecondaryActions>\n  <ng-content select=\"sky-summary-action-bar-secondary-action\"></ng-content>\n</ng-template>\n",
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.SkyMediaQueryService }]; }, propDecorators: { secondaryActionComponents: [{
-                    type: i0.ContentChildren,
-                    args: [SkySummaryActionBarSecondaryActionComponent]
-                }] } });
-
     var SkySummaryActionBarModule = /** @class */ (function () {
         function SkySummaryActionBarModule() {
         }
@@ -579,13 +579,13 @@
             SkySummaryActionBarPrimaryActionComponent,
             SkySummaryActionBarSecondaryActionComponent,
             SkySummaryActionBarSecondaryActionsComponent,
-            SkySummaryActionBarSummaryComponent], imports: [i4.CommonModule,
-            i3.SkyChevronModule,
-            i2$1.SkyDropdownModule,
-            i6.SkyI18nModule,
-            i3.SkyIconModule,
+            SkySummaryActionBarSummaryComponent], imports: [i4$1.CommonModule,
+            i3$1.SkyChevronModule,
+            i2.SkyDropdownModule,
+            i4.SkyI18nModule,
+            i3$1.SkyIconModule,
             SkyActionBarsResourcesModule,
-            i5.SkyThemeModule], exports: [SkySummaryActionBarComponent,
+            i3.SkyThemeModule], exports: [SkySummaryActionBarComponent,
             SkySummaryActionBarActionsComponent,
             SkySummaryActionBarCancelComponent,
             SkySummaryActionBarPrimaryActionComponent,
@@ -593,13 +593,13 @@
             SkySummaryActionBarSecondaryActionsComponent,
             SkySummaryActionBarSummaryComponent] });
     SkySummaryActionBarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarModule, imports: [[
-                i4.CommonModule,
-                i3.SkyChevronModule,
-                i2$1.SkyDropdownModule,
-                i6.SkyI18nModule,
-                i3.SkyIconModule,
+                i4$1.CommonModule,
+                i3$1.SkyChevronModule,
+                i2.SkyDropdownModule,
+                i4.SkyI18nModule,
+                i3$1.SkyIconModule,
                 SkyActionBarsResourcesModule,
-                i5.SkyThemeModule,
+                i3.SkyThemeModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkySummaryActionBarModule, decorators: [{
                 type: i0.NgModule,
@@ -614,13 +614,13 @@
                             SkySummaryActionBarSummaryComponent,
                         ],
                         imports: [
-                            i4.CommonModule,
-                            i3.SkyChevronModule,
-                            i2$1.SkyDropdownModule,
-                            i6.SkyI18nModule,
-                            i3.SkyIconModule,
+                            i4$1.CommonModule,
+                            i3$1.SkyChevronModule,
+                            i2.SkyDropdownModule,
+                            i4.SkyI18nModule,
+                            i3$1.SkyIconModule,
                             SkyActionBarsResourcesModule,
-                            i5.SkyThemeModule,
+                            i3.SkyThemeModule,
                         ],
                         exports: [
                             SkySummaryActionBarComponent,