@skyux/action-bars 5.5.0 → 5.6.2

package/fesm2015/skyux-action-bars.js

@@ -1,20 +1,20 @@
-import * as i0 from '@angular/core';
-import { NgModule, Component, ChangeDetectionStrategy, Injectable, ElementRef, ContentChild, EventEmitter, Input, Output, ContentChildren } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i6 from '@skyux/i18n';
+import * as i0 from '@angular/core';
+import { NgModule, Component, ChangeDetectionStrategy, EventEmitter, Input, Output, ContentChildren, Injectable, ElementRef, ContentChild } from '@angular/core';
+import * as i4$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i3 from '@skyux/indicators';
+import * as i3$1 from '@skyux/indicators';
 import { SkyChevronModule, SkyIconModule } from '@skyux/indicators';
-import * as i2$1 from '@skyux/popovers';
+import * as i2 from '@skyux/popovers';
 import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
-import * as i5 from '@skyux/theme';
+import * as i3 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
+import * as i2$1 from '@skyux/core';
+import { SkyMediaBreakpoints } from '@skyux/core';
 import { Subject, fromEvent } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import { skyAnimationSlide } from '@skyux/animations';
-import * as i2 from '@skyux/core';
-import { SkyMediaBreakpoints } from '@skyux/core';
+import { takeUntil } from 'rxjs/operators';
 
 /**
  * NOTICE: DO NOT MODIFY THIS FILE!
@@ -64,21 +64,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 /**
- * Specifies the summary information to display.
+ * Contains actions for the `sky-summary-action-bar` component.
  */
-class SkySummaryActionBarSummaryComponent {
+class SkySummaryActionBarActionsComponent {
 }
-SkySummaryActionBarSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSummaryComponent, selector: "sky-summary-action-bar-summary", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSummaryComponent, decorators: [{
+SkySummaryActionBarActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarActionsComponent, selector: "sky-summary-action-bar-actions", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarActionsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sky-summary-action-bar-summary',
-                    templateUrl: './summary-action-bar-summary.component.html',
+                    selector: 'sky-summary-action-bar-actions',
+                    templateUrl: './summary-action-bar-actions.component.html',
+                    styleUrls: ['./summary-action-bar-actions.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
+/**
+ * Displays a cancel action.
+ */
+class SkySummaryActionBarCancelComponent {
+    constructor() {
+        /**
+         * Indicates whether to disable the cancel action.
+         */
+        this.disabled = false;
+        /**
+         * Fires when users select the cancel action.
+         */
+        this.actionClick = new EventEmitter();
+    }
+    onCancelClicked() {
+        this.actionClick.emit();
+    }
+}
+SkySummaryActionBarCancelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarCancelComponent.ɵcmp = i0.ɵɵ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, 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarCancelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-summary-action-bar-cancel',
+                    templateUrl: './summary-action-bar-cancel.component.html',
+                    styleUrls: ['./summary-action-bar-cancel.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Displays a primary button.
+ */
+class SkySummaryActionBarPrimaryActionComponent {
+    constructor() {
+        /**
+         * Indicates whether to disable the primary action.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Fires when users select the primary action.
+         */
+        this.actionClick = new EventEmitter();
+    }
+    onButtonClicked() {
+        this.actionClick.emit();
+    }
+}
+SkySummaryActionBarPrimaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarPrimaryActionComponent.ɵcmp = i0.ɵɵ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, 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-summary-action-bar-primary-action',
+                    templateUrl: './summary-action-bar-primary-action.component.html',
+                    styleUrls: ['./summary-action-bar-primary-action.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Specifies secondary actions.
+ */
+class SkySummaryActionBarSecondaryActionComponent {
+    constructor(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 EventEmitter();
+    }
+    set isDropdown(value) {
+        this._isDropdown = value;
+        this.changeDetector.detectChanges();
+    }
+    get isDropdown() {
+        return this._isDropdown;
+    }
+    onButtonClicked() {
+        this.actionClick.emit();
+    }
+}
+SkySummaryActionBarSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarSecondaryActionComponent.ɵcmp = i0.ɵɵ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, 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.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-summary-action-bar-secondary-action',
+                    templateUrl: './summary-action-bar-secondary-action.component.html',
+                    styleUrls: ['./summary-action-bar-secondary-action.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Contains secondary actions specified with `sky-summary-action-bar-secondary-action`
+ * components.
+ */
+class SkySummaryActionBarSecondaryActionsComponent {
+    constructor(changeDetector, mediaQueryService) {
+        this.changeDetector = changeDetector;
+        this.mediaQueryService = mediaQueryService;
+        this.isMobile = false;
+        this.dropdownMessageStream = new Subject();
+        this.actionClicks = [];
+    }
+    ngAfterContentInit() {
+        this.mediaQuerySubscription = this.mediaQueryService.subscribe((args) => {
+            this.isMobile = args === SkyMediaBreakpoints.xs;
+            this.checkAndUpdateChildrenType();
+        });
+        this.actionChanges = this.secondaryActionComponents.changes.subscribe(() => {
+            this.checkAndUpdateChildrenType();
+        });
+        if (this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
+            this.isMobile = true;
+        }
+        this.checkAndUpdateChildrenType();
+    }
+    ngOnDestroy() {
+        this.mediaQuerySubscription.unsubscribe();
+        this.actionChanges.unsubscribe();
+        this.actionClicks.forEach((actionClick) => actionClick.unsubscribe());
+    }
+    checkAndUpdateChildrenType() {
+        /* istanbul ignore else */
+        if (this.secondaryActionComponents) {
+            let isDropdown = false;
+            if (this.secondaryActionComponents.length >= 5 || this.isMobile) {
+                isDropdown = true;
+            }
+            this.secondaryActionComponents.forEach((action) => {
+                action.isDropdown = isDropdown;
+                this.actionClicks.push(action.actionClick.subscribe(() => {
+                    this.dropdownMessageStream.next({
+                        type: SkyDropdownMessageType.Close,
+                    });
+                }));
+            });
+        }
+        this.changeDetector.detectChanges();
+    }
+}
+SkySummaryActionBarSecondaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarSecondaryActionsComponent.ɵcmp = i0.ɵɵ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, 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.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-summary-action-bar-secondary-actions',
+                    templateUrl: './summary-action-bar-secondary-actions.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.SkyMediaQueryService }]; }, propDecorators: { secondaryActionComponents: [{
+                type: ContentChildren,
+                args: [SkySummaryActionBarSecondaryActionComponent]
+            }] } });
+
 /**
  * @internal
  */
@@ -161,11 +337,27 @@ class SkySummaryActionBarAdapterService {
         return SkySummaryActionBarType.Page;
     }
 }
-SkySummaryActionBarAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
+SkySummaryActionBarAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarAdapterService, deps: [{ token: i0.RendererFactory2 }, { token: i2$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
 SkySummaryActionBarAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i2.SkyAppWindowRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }, { type: i2$1.SkyAppWindowRef }]; } });
+
+/**
+ * Specifies the summary information to display.
+ */
+class SkySummaryActionBarSummaryComponent {
+}
+SkySummaryActionBarSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarSummaryComponent, selector: "sky-summary-action-bar-summary", ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-summary-action-bar-summary',
+                    templateUrl: './summary-action-bar-summary.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
 /**
  * Auto-incrementing integer used to generate unique ids for summary action bar components.
@@ -313,8 +505,8 @@ class SkySummaryActionBarComponent {
         this.idled.next(true);
     }
 }
-SkySummaryActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarComponent, deps: [{ token: SkySummaryActionBarAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.SkyMediaQueryService }, { token: i2.MutationObserverService }, { token: i2.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i6.SkyLibResourcesPipe }, animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkySummaryActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarComponent, deps: [{ token: SkySummaryActionBarAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2$1.SkyMediaQueryService }, { token: i2$1.MutationObserverService }, { token: i2$1.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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$1.λ2, selector: "sky-chevron", inputs: ["ariaControls", "ariaLabel", "direction", "disabled"], outputs: ["directionChange"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, animations: [skyAnimationSlide], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -325,203 +517,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     providers: [SkySummaryActionBarAdapterService],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: SkySummaryActionBarAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.SkyMediaQueryService }, { type: i2.MutationObserverService }, { type: i2.SkyAppWindowRef }]; }, propDecorators: { summaryElement: [{
+        }], ctorParameters: function () { return [{ type: SkySummaryActionBarAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2$1.SkyMediaQueryService }, { type: i2$1.MutationObserverService }, { type: i2$1.SkyAppWindowRef }]; }, propDecorators: { summaryElement: [{
                 type: ContentChild,
                 args: [SkySummaryActionBarSummaryComponent, { read: ElementRef }]
             }] } });
 
-/**
- * Contains actions for the `sky-summary-action-bar` component.
- */
-class SkySummaryActionBarActionsComponent {
-}
-SkySummaryActionBarActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkySummaryActionBarActionsComponent, selector: "sky-summary-action-bar-actions", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-summary-action-bar-actions',
-                    templateUrl: './summary-action-bar-actions.component.html',
-                    styleUrls: ['./summary-action-bar-actions.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-/**
- * Displays a cancel action.
- */
-class SkySummaryActionBarCancelComponent {
-    constructor() {
-        /**
-         * Indicates whether to disable the cancel action.
-         */
-        this.disabled = false;
-        /**
-         * Fires when users select the cancel action.
-         */
-        this.actionClick = new EventEmitter();
-    }
-    onCancelClicked() {
-        this.actionClick.emit();
-    }
-}
-SkySummaryActionBarCancelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarCancelComponent.ɵcmp = i0.ɵɵ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, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarCancelComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-summary-action-bar-cancel',
-                    templateUrl: './summary-action-bar-cancel.component.html',
-                    styleUrls: ['./summary-action-bar-cancel.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], actionClick: [{
-                type: Output
-            }] } });
-
-/**
- * Displays a primary button.
- */
-class SkySummaryActionBarPrimaryActionComponent {
-    constructor() {
-        /**
-         * Indicates whether to disable the primary action.
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Fires when users select the primary action.
-         */
-        this.actionClick = new EventEmitter();
-    }
-    onButtonClicked() {
-        this.actionClick.emit();
-    }
-}
-SkySummaryActionBarPrimaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarPrimaryActionComponent.ɵcmp = i0.ɵɵ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, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-summary-action-bar-primary-action',
-                    templateUrl: './summary-action-bar-primary-action.component.html',
-                    styleUrls: ['./summary-action-bar-primary-action.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], actionClick: [{
-                type: Output
-            }] } });
-
-/**
- * Specifies secondary actions.
- */
-class SkySummaryActionBarSecondaryActionComponent {
-    constructor(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 EventEmitter();
-    }
-    set isDropdown(value) {
-        this._isDropdown = value;
-        this.changeDetector.detectChanges();
-    }
-    get isDropdown() {
-        return this._isDropdown;
-    }
-    onButtonClicked() {
-        this.actionClick.emit();
-    }
-}
-SkySummaryActionBarSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarSecondaryActionComponent.ɵcmp = i0.ɵɵ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, 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$1.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-summary-action-bar-secondary-action',
-                    templateUrl: './summary-action-bar-secondary-action.component.html',
-                    styleUrls: ['./summary-action-bar-secondary-action.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
-                type: Input
-            }], actionClick: [{
-                type: Output
-            }] } });
-
-/**
- * Contains secondary actions specified with `sky-summary-action-bar-secondary-action`
- * components.
- */
-class SkySummaryActionBarSecondaryActionsComponent {
-    constructor(changeDetector, mediaQueryService) {
-        this.changeDetector = changeDetector;
-        this.mediaQueryService = mediaQueryService;
-        this.isMobile = false;
-        this.dropdownMessageStream = new Subject();
-        this.actionClicks = [];
-    }
-    ngAfterContentInit() {
-        this.mediaQuerySubscription = this.mediaQueryService.subscribe((args) => {
-            this.isMobile = args === SkyMediaBreakpoints.xs;
-            this.checkAndUpdateChildrenType();
-        });
-        this.actionChanges = this.secondaryActionComponents.changes.subscribe(() => {
-            this.checkAndUpdateChildrenType();
-        });
-        if (this.mediaQueryService.current === SkyMediaBreakpoints.xs) {
-            this.isMobile = true;
-        }
-        this.checkAndUpdateChildrenType();
-    }
-    ngOnDestroy() {
-        this.mediaQuerySubscription.unsubscribe();
-        this.actionChanges.unsubscribe();
-        this.actionClicks.forEach((actionClick) => actionClick.unsubscribe());
-    }
-    checkAndUpdateChildrenType() {
-        /* istanbul ignore else */
-        if (this.secondaryActionComponents) {
-            let isDropdown = false;
-            if (this.secondaryActionComponents.length >= 5 || this.isMobile) {
-                isDropdown = true;
-            }
-            this.secondaryActionComponents.forEach((action) => {
-                action.isDropdown = isDropdown;
-                this.actionClicks.push(action.actionClick.subscribe(() => {
-                    this.dropdownMessageStream.next({
-                        type: SkyDropdownMessageType.Close,
-                    });
-                }));
-            });
-        }
-        this.changeDetector.detectChanges();
-    }
-}
-SkySummaryActionBarSecondaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
-SkySummaryActionBarSecondaryActionsComponent.ɵcmp = i0.ɵɵ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, 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$1.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2$1.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i6.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarSecondaryActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sky-summary-action-bar-secondary-actions',
-                    templateUrl: './summary-action-bar-secondary-actions.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.SkyMediaQueryService }]; }, propDecorators: { secondaryActionComponents: [{
-                type: ContentChildren,
-                args: [SkySummaryActionBarSecondaryActionComponent]
-            }] } });
-
 class SkySummaryActionBarModule {
 }
 SkySummaryActionBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkySummaryActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });