@skyux/action-bars 5.6.2 → 6.0.0-beta.0

package/fesm2020/skyux-action-bars-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skyux-action-bars-testing.mjs","sources":["../../../../../libs/components/action-bars/testing/src/summary-action-bar/summary-action-bar-fixture.ts","../../../../../libs/components/action-bars/testing/src/summary-action-bar/summary-action-bar.module.ts","../../../../../libs/components/action-bars/testing/src/skyux-action-bars-testing.ts"],"sourcesContent":["import { DebugElement } from '@angular/core';\nimport { ComponentFixture } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { SkyAppTestUtility } from '@skyux-sdk/testing';\n\nimport { SkySummaryActionBarFixtureAction } from './summary-action-bar-fixture-action';\n\n/**\n * Allows interaction with a SKY UX summary action bar component.\n */\nexport class SkySummaryActionBarFixture {\n  /**\n   * The cancel action model.\n   */\n  public get cancelAction(): SkySummaryActionBarFixtureAction {\n    const cancelBtn = this.getCancelButton();\n    return this.buildActionModel(cancelBtn);\n  }\n\n  /**\n   * The primary action model.\n   */\n  public get primaryAction(): SkySummaryActionBarFixtureAction {\n    const primaryBtn = this.getPrimaryActionButton();\n    return this.buildActionModel(primaryBtn);\n  }\n\n  /**\n   * The collection of secondary action models.\n   */\n  public get secondaryActions(): SkySummaryActionBarFixtureAction[] {\n    const secondaryBtns = this.getSecondaryActionButtons();\n    return secondaryBtns.map((btn: HTMLButtonElement) =>\n      this.buildActionModel(btn)\n    );\n  }\n\n  /**\n   * A flag indicating whether or not the summary content is visible.\n   */\n  public get summaryBodyIsVisible(): boolean {\n    const summaryEl = this.getSummaryElement();\n    return summaryEl.clientHeight > 0;\n  }\n\n  private debugEl: DebugElement;\n\n  private get isResponsiveMode(): boolean {\n    const toggleButton =\n      this.getSummaryCollapseButton() ?? this.getSummaryExpandButton();\n    return toggleButton !== undefined;\n  }\n\n  constructor(private fixture: ComponentFixture<any>, skyTestId: string) {\n    this.debugEl = SkyAppTestUtility.getDebugElementByTestId(\n      fixture,\n      skyTestId,\n      'sky-summary-action-bar'\n    );\n  }\n\n  /**\n   * Toggles the secondary action dropdown open or closed, if in responsive mode.\n   */\n  public async toggleSecondaryActionDropdown(): Promise<void> {\n    const toggleButton = this.getSecondaryActionsDropdownButton();\n\n    if (toggleButton !== undefined) {\n      toggleButton.click();\n\n      this.fixture.detectChanges();\n      await this.fixture.whenStable();\n\n      this.fixture.detectChanges();\n      return this.fixture.whenStable();\n    }\n  }\n\n  /**\n   * Toggles the summary content area open or closed, if in responsive mode.\n   */\n  public async toggleSummaryContentVisibility(): Promise<void> {\n    const toggleButton =\n      this.getSummaryCollapseButton() ?? this.getSummaryExpandButton();\n\n    if (toggleButton !== undefined) {\n      toggleButton.click();\n\n      this.fixture.detectChanges();\n      await this.fixture.whenStable();\n\n      this.fixture.detectChanges();\n      return this.fixture.whenStable();\n    }\n  }\n\n  /**\n   * Returns the first element that is a descendant of the node that matches the selector query\n   * within the summary body element.\n   * @param query The selector query to use.\n   */\n  public querySummaryBody(query: string): HTMLElement {\n    return this.querySummaryBodyElement(query);\n  }\n\n  /**\n   * Returns the all elements that are descendants of the node that matches the selector query\n   * within the summary body element.\n   * @param query The selector query to use.\n   */\n  public queryAllSummaryBody(query: string): NodeList {\n    return this.queryAllSummaryBodyElement(query);\n  }\n\n  //#region helpers\n\n  private buildActionModel(buttonEl: HTMLButtonElement) {\n    return {\n      buttonText: SkyAppTestUtility.getText(buttonEl),\n      isDisabled: buttonEl.disabled,\n\n      click: () => {\n        buttonEl.click();\n        this.fixture.detectChanges();\n        return this.fixture.whenStable();\n      },\n    };\n  }\n\n  private getCancelButton(): HTMLButtonElement {\n    return this.debugEl.query(By.css('sky-summary-action-bar-cancel .sky-btn'))\n      ?.nativeElement;\n  }\n\n  private getPrimaryActionButton(): HTMLButtonElement {\n    return this.debugEl.query(\n      By.css('sky-summary-action-bar-primary-action .sky-btn')\n    )?.nativeElement;\n  }\n\n  private getSecondaryActionButtons(): HTMLButtonElement[] {\n    // get the secondary action buttons from the dropdown overlay in responsive mode\n    if (this.isResponsiveMode) {\n      const resultNodes = document.querySelectorAll(\n        'sky-overlay sky-summary-action-bar-secondary-action .sky-btn'\n      );\n      return Array.prototype.slice.call(resultNodes);\n    }\n\n    // otherwise grab them from the component's debug element\n    return this.debugEl\n      .queryAll(By.css('sky-summary-action-bar-secondary-action .sky-btn'))\n      .map((debugEl: DebugElement) => debugEl.nativeElement);\n  }\n\n  private getSecondaryActionsDropdownButton(): HTMLButtonElement {\n    return this.debugEl.query(\n      By.css('sky-summary-action-bar-secondary-actions .sky-dropdown-button')\n    )?.nativeElement;\n  }\n\n  private getSummaryElement(): HTMLButtonElement {\n    return this.debugEl.query(By.css('.sky-summary-action-bar-summary'))\n      ?.nativeElement;\n  }\n\n  private getSummaryCollapseButton(): HTMLButtonElement {\n    return this.debugEl.query(\n      By.css('.sky-summary-action-bar-details-collapse button')\n    )?.nativeElement;\n  }\n\n  private getSummaryExpandButton(): HTMLButtonElement {\n    return this.debugEl.query(\n      By.css('.sky-summary-action-bar-details-expand button')\n    )?.nativeElement;\n  }\n\n  private querySummaryBodyElement(query: string): HTMLElement {\n    return this.debugEl.nativeElement.querySelector(\n      `sky-summary-action-bar-summary ${query}`\n    );\n  }\n\n  private queryAllSummaryBodyElement(query: string): NodeList {\n    return this.debugEl.nativeElement.querySelectorAll(\n      `sky-summary-action-bar-summary ${query}`\n    );\n  }\n\n  //#endregion helpers\n}\n","import { NgModule } from '@angular/core';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkySummaryActionBarModule } from '@skyux/action-bars';\n\n@NgModule({\n  exports: [\n    SkySummaryActionBarModule,\n\n    // The noop animations module needs to be loaded last to avoid\n    // subsequent modules adding animations and overriding this.\n    NoopAnimationsModule,\n  ],\n})\nexport class SkySummaryActionBarTestingModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/skyux-action-bars.mjs

@@ -0,0 +1,566 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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$1 from '@skyux/indicators';
+import { SkyChevronModule, SkyIconModule } from '@skyux/indicators';
+import * as i2 from '@skyux/popovers';
+import { SkyDropdownMessageType, SkyDropdownModule } from '@skyux/popovers';
+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 { skyAnimationSlide } from '@skyux/animations';
+import { takeUntil } from 'rxjs/operators';
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-action-bars' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_summary_action_bar_open_secondary: {
+            message: 'Show secondary actions',
+        },
+        skyux_summary_action_bar_expand: { message: 'Expand or collapse summary' },
+    },
+};
+class SkyActionBarsResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyActionBarsResourcesModule {
+}
+SkyActionBarsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionBarsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyActionBarsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionBarsResourcesModule, exports: [SkyI18nModule] });
+SkyActionBarsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionBarsResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyActionBarsResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionBarsResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyActionBarsResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Contains actions for the `sky-summary-action-bar` component.
+ */
+class SkySummaryActionBarActionsComponent {
+}
+SkySummaryActionBarActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex}\n"] }]
+        }] });
+
+/**
+ * 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarCancelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarCancelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-cancel', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarPrimaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarPrimaryActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-primary-action', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarSecondaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarSecondaryActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-secondary-action', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], 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: "13.2.7", 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: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarSecondaryActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-secondary-actions', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2$1.SkyMediaQueryService }]; }, propDecorators: { secondaryActionComponents: [{
+                type: ContentChildren,
+                args: [SkySummaryActionBarSecondaryActionComponent]
+            }] } });
+
+/**
+ * @internal
+ */
+var SkySummaryActionBarType;
+(function (SkySummaryActionBarType) {
+    SkySummaryActionBarType[SkySummaryActionBarType["Page"] = 0] = "Page";
+    SkySummaryActionBarType[SkySummaryActionBarType["StandardModal"] = 1] = "StandardModal";
+    SkySummaryActionBarType[SkySummaryActionBarType["FullPageModal"] = 2] = "FullPageModal";
+    SkySummaryActionBarType[SkySummaryActionBarType["Tab"] = 3] = "Tab";
+    SkySummaryActionBarType[SkySummaryActionBarType["SplitView"] = 4] = "SplitView";
+})(SkySummaryActionBarType || (SkySummaryActionBarType = {}));
+
+/**
+ * @internal
+ */
+class SkySummaryActionBarAdapterService {
+    constructor(rendererFactory, windowRef) {
+        this.rendererFactory = rendererFactory;
+        this.windowRef = windowRef;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    styleBodyElementForActionBar(summaryActionBarRef) {
+        const window = this.windowRef.nativeWindow;
+        const body = window.document.body;
+        const actionBarEl = summaryActionBarRef.nativeElement.querySelector('.sky-summary-action-bar');
+        /* istanbul ignore else */
+        if (actionBarEl.style.visibility !== 'hidden') {
+            this.renderer.setStyle(body, 'margin-bottom', actionBarEl.offsetHeight + 'px');
+        }
+    }
+    styleSplitViewElementForActionBar(summaryActionBarRef) {
+        const splitViewWorkspaceContent = document.querySelector('.sky-split-view-workspace-content');
+        const splitViewWorkspaceFooter = document.querySelector('.sky-split-view-workspace-footer');
+        const actionBarEl = summaryActionBarRef.nativeElement.querySelector('.sky-summary-action-bar');
+        /* istanbul ignore else */
+        if (actionBarEl.style.visibility !== 'hidden') {
+            this.renderer.setStyle(splitViewWorkspaceContent, 'padding-bottom', '20px');
+            this.renderer.setStyle(splitViewWorkspaceFooter, 'padding', 0);
+        }
+    }
+    revertBodyElementStyles() {
+        const window = this.windowRef.nativeWindow;
+        const body = window.document.body;
+        this.renderer.removeStyle(body, 'margin-bottom');
+    }
+    revertSplitViewElementStyles() {
+        const splitViewWorkspaceContent = document.querySelector('.sky-split-view-workspace-content');
+        const splitViewWorkspaceFooter = document.querySelector('.sky-split-view-workspace-footer');
+        this.renderer.setStyle(splitViewWorkspaceContent, 'padding-bottom', 'none');
+        this.renderer.setStyle(splitViewWorkspaceFooter, 'padding', '10px');
+    }
+    styleModalFooter(summaryActionBarRef) {
+        const modalFooterEls = document.getElementsByClassName('sky-modal-footer-container');
+        for (let i = 0; i < modalFooterEls.length; i++) {
+            if (modalFooterEls.item(i).contains(summaryActionBarRef.nativeElement)) {
+                this.renderer.setStyle(modalFooterEls.item(i), 'padding', 0);
+            }
+        }
+    }
+    getSummaryActionBarType(el) {
+        do {
+            if (el.tagName.toLowerCase() === 'sky-modal-footer') {
+                while (el.tagName.toLowerCase() !== 'sky-modal') {
+                    if (el.classList.contains('sky-modal-full-page')) {
+                        return SkySummaryActionBarType.FullPageModal;
+                    }
+                    el = el.parentElement;
+                }
+                return SkySummaryActionBarType.StandardModal;
+            }
+            else if (el.classList.contains('sky-tab')) {
+                return SkySummaryActionBarType.Tab;
+            }
+            else if (el.tagName.toLowerCase() === 'sky-split-view-workspace') {
+                return SkySummaryActionBarType.SplitView;
+            }
+            el = el.parentElement;
+            // tslint:disable-next-line:no-null-keyword
+        } while (el !== null && el.nodeType === 1);
+        return SkySummaryActionBarType.Page;
+    }
+}
+SkySummaryActionBarAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarAdapterService, decorators: [{
+            type: Injectable
+        }], 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkySummaryActionBarSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: SkySummaryActionBarSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar-summary', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Auto-incrementing integer used to generate unique ids for summary action bar components.
+ */
+let nextId = 0;
+/**
+ * Contains the `sky-summary-action-bar-actions` and
+ * `sky-summary-action-bar-summary` components.
+ */
+class SkySummaryActionBarComponent {
+    constructor(adapterService, changeDetector, elementRef, mediaQueryService, observerService, windowRef) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+        this.mediaQueryService = mediaQueryService;
+        this.observerService = observerService;
+        this.windowRef = windowRef;
+        this.isSummaryCollapsed = false;
+        this.slideDirection = 'down';
+        this.summaryId = `sky-summary-action-bar-summary-${++nextId}`;
+        this.idled = new Subject();
+    }
+    get isSummaryCollapsible() {
+        return (this.type === SkySummaryActionBarType.StandardModal ||
+            this.mediaQueryService.current === SkyMediaBreakpoints.xs);
+    }
+    set summaryELement(element) {
+        this._summaryElement = element;
+        this.changeDetector.markForCheck();
+    }
+    get summaryElement() {
+        return this._summaryElement;
+    }
+    ngAfterViewInit() {
+        this.type = this.adapterService.getSummaryActionBarType(this.elementRef.nativeElement);
+        if (!(this.type === SkySummaryActionBarType.FullPageModal ||
+            this.type === SkySummaryActionBarType.StandardModal)) {
+            this.setupReactiveState();
+            if (this.type === SkySummaryActionBarType.SplitView) {
+                this.adapterService.styleSplitViewElementForActionBar(this.elementRef);
+            }
+            else {
+                this.adapterService.styleBodyElementForActionBar(this.elementRef);
+            }
+            this.setupResizeListener();
+            if (this.type === SkySummaryActionBarType.Tab) {
+                this.setupTabListener();
+            }
+        }
+        else {
+            this.adapterService.styleModalFooter(this.elementRef);
+            if (this.type === SkySummaryActionBarType.FullPageModal) {
+                this.setupReactiveState();
+            }
+        }
+        this.changeDetector.detectChanges();
+    }
+    ngOnDestroy() {
+        if (this.type === SkySummaryActionBarType.SplitView) {
+            this.adapterService.revertSplitViewElementStyles();
+        }
+        else if (this.type === SkySummaryActionBarType.Page ||
+            this.type === SkySummaryActionBarType.Tab) {
+            this.adapterService.revertBodyElementStyles();
+        }
+        this.removeResizeListener();
+        this.removeTabListener();
+        if (this.mediaQuerySubscription) {
+            this.mediaQuerySubscription.unsubscribe();
+        }
+        this.idled.complete();
+    }
+    onDirectionChange(direction) {
+        this.slideDirection = direction;
+    }
+    summaryContentExists() {
+        return (this.summaryElement &&
+            this.summaryElement.nativeElement.children.length > 0);
+    }
+    // NOTE: This function is needed so that the button is not removed until post-animation
+    summaryTransitionEnd() {
+        if (this.slideDirection === 'up') {
+            this.isSummaryCollapsed = true;
+        }
+        if (this.type === SkySummaryActionBarType.Page ||
+            this.type === SkySummaryActionBarType.Tab) {
+            this.adapterService.styleBodyElementForActionBar(this.elementRef);
+        }
+    }
+    // NOTE: This function is needed so that the button is added before animation
+    summaryTransitionStart() {
+        if (this.slideDirection === 'down') {
+            this.isSummaryCollapsed = false;
+        }
+    }
+    setupReactiveState() {
+        this.mediaQuerySubscription = this.mediaQueryService.subscribe((args) => {
+            if (args !== SkyMediaBreakpoints.xs) {
+                this.isSummaryCollapsed = false;
+                this.slideDirection = 'down';
+            }
+            this.changeDetector.detectChanges();
+        });
+    }
+    setupTabListener() {
+        /* istanbul ignore else */
+        if (!this.observer) {
+            this.observer = this.observerService.create((mutations) => {
+                if (mutations[0].target.attributes.getNamedItem('hidden')) {
+                    this.adapterService.revertBodyElementStyles();
+                    this.removeResizeListener();
+                }
+                else {
+                    setTimeout(() => {
+                        this.adapterService.styleBodyElementForActionBar(this.elementRef);
+                        this.setupResizeListener();
+                    });
+                }
+            });
+        }
+        const config = {
+            attributes: true,
+            attributeFilter: ['hidden'],
+            childList: false,
+            characterDate: false,
+        };
+        let el = this.elementRef.nativeElement;
+        do {
+            if (el.classList.contains('sky-tab')) {
+                this.observer.observe(el, config);
+            }
+            el = el.parentElement;
+            // tslint:disable-next-line:no-null-keyword
+        } while (el !== null && el.nodeType === 1);
+    }
+    removeTabListener() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    setupResizeListener() {
+        if (this.type !== SkySummaryActionBarType.SplitView) {
+            const windowObj = this.windowRef.nativeWindow;
+            fromEvent(windowObj, 'resize')
+                .pipe(takeUntil(this.idled))
+                .subscribe(() => {
+                this.adapterService.styleBodyElementForActionBar(this.elementRef);
+            });
+        }
+    }
+    removeResizeListener() {
+        this.idled.next(true);
+    }
+}
+SkySummaryActionBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", 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,.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: "13.2.7", ngImport: i0, type: SkySummaryActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-summary-action-bar', animations: [skyAnimationSlide], providers: [SkySummaryActionBarAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, 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,.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"] }]
+        }], 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 }]
+            }] } });
+
+class SkySummaryActionBarModule {
+}
+SkySummaryActionBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkySummaryActionBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarModule, declarations: [SkySummaryActionBarActionsComponent,
+        SkySummaryActionBarCancelComponent,
+        SkySummaryActionBarComponent,
+        SkySummaryActionBarPrimaryActionComponent,
+        SkySummaryActionBarSecondaryActionComponent,
+        SkySummaryActionBarSecondaryActionsComponent,
+        SkySummaryActionBarSummaryComponent], imports: [CommonModule,
+        SkyChevronModule,
+        SkyDropdownModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyActionBarsResourcesModule,
+        SkyThemeModule], exports: [SkySummaryActionBarComponent,
+        SkySummaryActionBarActionsComponent,
+        SkySummaryActionBarCancelComponent,
+        SkySummaryActionBarPrimaryActionComponent,
+        SkySummaryActionBarSecondaryActionComponent,
+        SkySummaryActionBarSecondaryActionsComponent,
+        SkySummaryActionBarSummaryComponent] });
+SkySummaryActionBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarModule, imports: [[
+            CommonModule,
+            SkyChevronModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyActionBarsResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkySummaryActionBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkySummaryActionBarActionsComponent,
+                        SkySummaryActionBarCancelComponent,
+                        SkySummaryActionBarComponent,
+                        SkySummaryActionBarPrimaryActionComponent,
+                        SkySummaryActionBarSecondaryActionComponent,
+                        SkySummaryActionBarSecondaryActionsComponent,
+                        SkySummaryActionBarSummaryComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyChevronModule,
+                        SkyDropdownModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyActionBarsResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkySummaryActionBarComponent,
+                        SkySummaryActionBarActionsComponent,
+                        SkySummaryActionBarCancelComponent,
+                        SkySummaryActionBarPrimaryActionComponent,
+                        SkySummaryActionBarSecondaryActionComponent,
+                        SkySummaryActionBarSecondaryActionsComponent,
+                        SkySummaryActionBarSummaryComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkySummaryActionBarModule, SkySummaryActionBarSummaryComponent as λ1, SkySummaryActionBarComponent as λ2, SkySummaryActionBarActionsComponent as λ3, SkySummaryActionBarCancelComponent as λ4, SkySummaryActionBarPrimaryActionComponent as λ5, SkySummaryActionBarSecondaryActionComponent as λ6, SkySummaryActionBarSecondaryActionsComponent as λ7 };
+//# sourceMappingURL=skyux-action-bars.mjs.map