@skyux/layout 5.7.2 → 6.0.0-beta.2

package/fesm2015/skyux-layout.mjs

@@ -0,0 +1,2724 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ElementRef, Optional, ContentChildren, ViewChild, HostListener, NgModule, ChangeDetectionStrategy, Directive, TemplateRef, HostBinding } from '@angular/core';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i2$1 from '@skyux/indicators';
+import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
+import * as i4 from '@skyux/router';
+import { SkyHrefModule } from '@skyux/router';
+import * as i3$1 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+import * as i1 from '@skyux/core';
+import { SkyMediaBreakpoints, SkyDockModule, SkyCoreAdapterService } from '@skyux/core';
+import * as i1$1 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$2 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
+import { trigger, transition, style, query, group, animate } from '@angular/animations';
+import * as i2$2 from '@skyux/modals';
+import { SkyModalModule } from '@skyux/modals';
+
+const RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';
+const RESPONSIVE_CLASS_MD = 'sky-action-button-container-md';
+const RESPONSIVE_CLASS_LG = 'sky-action-button-container-lg';
+const BREAKPOINT_MD = 912;
+const BREAKPOINT_LG = 1378;
+/**
+ * @internal
+ */
+class SkyActionButtonAdapterService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    getParentWidth(element) {
+        return element.nativeElement.parentNode.getBoundingClientRect().width;
+    }
+    setResponsiveClass(element, width) {
+        const el = element.nativeElement;
+        const className = this.getResponsiveClassName(width);
+        this.renderer.removeClass(el, RESPONSIVE_CLASS_SM);
+        this.renderer.removeClass(el, RESPONSIVE_CLASS_MD);
+        this.renderer.removeClass(el, RESPONSIVE_CLASS_LG);
+        this.renderer.addClass(el, className);
+    }
+    getResponsiveClassName(width) {
+        if (width < BREAKPOINT_MD) {
+            return RESPONSIVE_CLASS_SM;
+        }
+        else if (width > BREAKPOINT_MD && width < BREAKPOINT_LG) {
+            return RESPONSIVE_CLASS_MD;
+        }
+        else {
+            return RESPONSIVE_CLASS_LG;
+        }
+    }
+}
+SkyActionButtonAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyActionButtonAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * Creates a button to present users with an option to move forward with tasks.
+ */
+class SkyActionButtonComponent {
+    constructor() {
+        /**
+         * Fires when users select the action button.
+         */
+        this.actionClick = new EventEmitter();
+    }
+    buttonClicked() {
+        this.actionClick.emit();
+    }
+    enterPress() {
+        this.actionClick.emit();
+    }
+}
+SkyActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyActionButtonComponent, selector: "sky-action-button", inputs: { permalink: "permalink" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<a\n  *ngIf=\"permalink && permalink.route\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  [fragment]=\"permalink.route?.extras?.fragment\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n  [queryParams]=\"permalink.route?.extras?.queryParams\"\n  [queryParamsHandling]=\"permalink.route?.extras?.queryParamsHandling\"\n  [routerLink]=\"permalink.route?.commands\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</a>\n\n<a\n  *ngIf=\"permalink && !permalink.route\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  [skyHref]=\"permalink.url\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</a>\n\n<div\n  *ngIf=\"!permalink\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  role=\"button\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n  (click)=\"buttonClicked()\"\n  (keydown.enter)=\"enterPress()\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</div>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"] }, { type: i3$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button', encapsulation: ViewEncapsulation.None, template: "<a\n  *ngIf=\"permalink && permalink.route\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  [fragment]=\"permalink.route?.extras?.fragment\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n  [queryParams]=\"permalink.route?.extras?.queryParams\"\n  [queryParamsHandling]=\"permalink.route?.extras?.queryParamsHandling\"\n  [routerLink]=\"permalink.route?.commands\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</a>\n\n<a\n  *ngIf=\"permalink && !permalink.route\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  [skyHref]=\"permalink.url\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</a>\n\n<div\n  *ngIf=\"!permalink\"\n  class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n  tabindex=\"0\"\n  role=\"button\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-box': 'modern'\n  }\"\n  (click)=\"buttonClicked()\"\n  (keydown.enter)=\"enterPress()\"\n>\n  <ng-container *ngTemplateOutlet=\"actionButtonContent\"> </ng-container>\n</div>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"] }]
+        }], propDecorators: { permalink: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Wraps action buttons to ensures that they have consistent height and spacing.
+ * @required
+ */
+class SkyActionButtonContainerComponent {
+    constructor(actionButtonAdapterService, changeRef, coreAdapterService, hostElRef, mutationObserverSvc, ngZone, themeSvc) {
+        this.actionButtonAdapterService = actionButtonAdapterService;
+        this.changeRef = changeRef;
+        this.coreAdapterService = coreAdapterService;
+        this.hostElRef = hostElRef;
+        this.mutationObserverSvc = mutationObserverSvc;
+        this.ngZone = ngZone;
+        this.themeSvc = themeSvc;
+        this.ngUnsubscribe = new Subject();
+    }
+    /**
+     * Specifies how to display the action buttons inside the action button container.
+     * Options are `"center"` or `"left"`.
+     * @default "center"
+     */
+    set alignItems(value) {
+        this._alignItems = value;
+    }
+    get alignItems() {
+        return this._alignItems || 'center';
+    }
+    set themeName(value) {
+        this._themeName = value;
+        this.updateResponsiveClass();
+        this.updateHeight();
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.themeSvc) {
+            this.themeSvc.settingsChange
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.themeName = themeSettings.currentSettings.theme.name;
+                this.changeRef.markForCheck();
+            });
+        }
+        // Wait for children components to complete rendering before container width is determined.
+        setTimeout(() => {
+            this.updateResponsiveClass();
+        });
+    }
+    ngAfterContentInit() {
+        // Watch for dynamic action button changes and recalculate height.
+        /* istanbul ignore else */
+        if (this.actionButtons) {
+            this.actionButtons.changes
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe(() => {
+                this.updateHeight();
+            });
+        }
+        this.initMutationObserver();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.destroyMutationObserver();
+    }
+    onWindowResize() {
+        this.updateResponsiveClass();
+    }
+    initMutationObserver() {
+        /* istanbul ignore else */
+        if (!this.mutationObserver) {
+            const el = this.containerRef.nativeElement;
+            // MutationObserver is patched by Zone.js and therefore becomes part of the
+            // Angular change detection cycle, but this can lead to infinite loops in some
+            // scenarios. This will keep MutationObserver from triggering change detection.
+            this.ngZone.runOutsideAngular(() => {
+                this.mutationObserver = this.mutationObserverSvc.create(() => {
+                    this.updateHeight();
+                });
+                this.mutationObserver.observe(el, {
+                    characterData: true,
+                    subtree: true,
+                });
+            });
+        }
+    }
+    destroyMutationObserver() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+    updateHeight() {
+        this.coreAdapterService.resetHeight(this.containerRef, '.sky-action-button');
+        if (this._themeName === 'modern') {
+            // Wait for children components to complete rendering before height is determined.
+            setTimeout(() => {
+                this.coreAdapterService.syncMaxHeight(this.containerRef, '.sky-action-button');
+            });
+        }
+    }
+    updateResponsiveClass() {
+        const parentWidth = this.actionButtonAdapterService.getParentWidth(this.hostElRef);
+        this.actionButtonAdapterService.setResponsiveClass(this.containerRef, parentWidth);
+    }
+}
+SkyActionButtonContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonContainerComponent, deps: [{ token: SkyActionButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: i1.MutationObserverService }, { token: i0.NgZone }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyActionButtonContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyActionButtonContainerComponent, selector: "sky-action-button-container", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyActionButtonAdapterService], queries: [{ propertyName: "actionButtons", predicate: SkyActionButtonComponent }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"sky-action-button-container\" #container>\n  <div\n    class=\"sky-action-button-flex\"\n    [ngClass]=\"{\n      'sky-action-button-flex-align-left': alignItems === 'left',\n      'sky-action-button-flex-align-center': alignItems === 'center'\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-action-button-flex sky-action-button{display:block}.sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-flex{display:block;padding:0}.sky-action-button-flex sky-action-button{margin:20px 0}.sky-responsive-container-xs .sky-action-button-flex,.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:block;padding:0}.sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:20px 0}@media (min-width: 768px){.sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-action-button-flex sky-action-button{margin:10px 0}}.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:10px 0}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button-container', providers: [SkyActionButtonAdapterService], encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-action-button-container\" #container>\n  <div\n    class=\"sky-action-button-flex\"\n    [ngClass]=\"{\n      'sky-action-button-flex-align-left': alignItems === 'left',\n      'sky-action-button-flex-align-center': alignItems === 'center'\n    }\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-action-button-flex sky-action-button{display:block}.sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-flex{display:block;padding:0}.sky-action-button-flex sky-action-button{margin:20px 0}.sky-responsive-container-xs .sky-action-button-flex,.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:block;padding:0}.sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:20px 0}@media (min-width: 768px){.sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-action-button-flex sky-action-button{margin:10px 0}}.sky-responsive-container-sm .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:10px 0}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:10px 0}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: SkyActionButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: i1.MutationObserverService }, { type: i0.NgZone }, { type: i3$1.SkyThemeService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { alignItems: [{
+                type: Input
+            }], actionButtons: [{
+                type: ContentChildren,
+                args: [SkyActionButtonComponent]
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Specifies a description to display on an action button.
+ */
+class SkyActionButtonDetailsComponent {
+}
+SkyActionButtonDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyActionButtonDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyActionButtonDetailsComponent, selector: "sky-action-button-details", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button-details', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Specifies a header to display on an action button.
+ */
+class SkyActionButtonHeaderComponent {
+}
+SkyActionButtonHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyActionButtonHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyActionButtonHeaderComponent, selector: "sky-action-button-header", ngImport: i0, template: "<div\n  class=\"sky-action-button-header\"\n  [skyThemeClass]=\"{\n    'sky-headline': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}.sky-theme-modern .sky-action-button-header{margin:0 0 10px}\n"], directives: [{ type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button-header', template: "<div\n  class=\"sky-action-button-header\"\n  [skyThemeClass]=\"{\n    'sky-headline': 'modern',\n    'sky-section-heading': 'default'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-action-button-header{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-header,:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-header{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-header,:host-context(.sky-responsive-container-md) .sky-action-button-header,:host-context(.sky-responsive-container-lg) .sky-action-button-header{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 10px}.sky-theme-modern .sky-action-button-header{margin:0 0 10px}\n"] }]
+        }] });
+
+const FONTSIZECLASS_SMALL = '2x';
+const FONTSIZECLASS_LARGE = '3x';
+/**
+ * Specifies an icon to display on the action button.
+ */
+class SkyActionButtonIconComponent {
+    constructor(mediaQueryService) {
+        this.mediaQueryService = mediaQueryService;
+        this.fontSizeClass = FONTSIZECLASS_LARGE;
+        this.subscription = this.mediaQueryService.subscribe((args) => {
+            if (args === SkyMediaBreakpoints.xs) {
+                this.fontSizeClass = FONTSIZECLASS_SMALL;
+            }
+            else {
+                this.fontSizeClass = FONTSIZECLASS_LARGE;
+            }
+        });
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}
+SkyActionButtonIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonIconComponent, deps: [{ token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyActionButtonIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyActionButtonIconComponent, selector: "sky-action-button-icon", inputs: { iconType: "iconType" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"sky-action-button-icon-container\">\n  <sky-icon\n    class=\"sky-action-button-icon\"\n    [icon]=\"iconType\"\n    [size]=\"fontSizeClass\"\n  ></sky-icon>\n</div>\n", styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}.sky-theme-modern .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}\n"], components: [{ type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button-icon', template: "<div aria-hidden=\"true\" class=\"sky-action-button-icon-container\">\n  <sky-icon\n    class=\"sky-action-button-icon\"\n    [icon]=\"iconType\"\n    [size]=\"fontSizeClass\"\n  ></sky-icon>\n</div>\n", styles: [":host .sky-action-button-icon-container{margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 5px}@media (min-width: 768px){:host .sky-action-button-icon-container{margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container{margin:0 0 20px}.sky-action-button-icon{color:#0974a1}:host-context(.sky-theme-modern) .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}.sky-theme-modern .sky-action-button-icon-container{color:#0974a1;background:#e8f8ff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.SkyMediaQueryService }]; }, propDecorators: { iconType: [{
+                type: Input
+            }] } });
+
+class SkyActionButtonModule {
+}
+SkyActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonModule, declarations: [SkyActionButtonComponent,
+        SkyActionButtonContainerComponent,
+        SkyActionButtonDetailsComponent,
+        SkyActionButtonHeaderComponent,
+        SkyActionButtonIconComponent], imports: [CommonModule,
+        RouterModule,
+        SkyHrefModule,
+        SkyIconModule,
+        SkyThemeModule], exports: [SkyActionButtonComponent,
+        SkyActionButtonContainerComponent,
+        SkyActionButtonDetailsComponent,
+        SkyActionButtonHeaderComponent,
+        SkyActionButtonIconComponent] });
+SkyActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonModule, imports: [[
+            CommonModule,
+            RouterModule,
+            SkyHrefModule,
+            SkyIconModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyActionButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyActionButtonComponent,
+                        SkyActionButtonContainerComponent,
+                        SkyActionButtonDetailsComponent,
+                        SkyActionButtonHeaderComponent,
+                        SkyActionButtonIconComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        SkyHrefModule,
+                        SkyIconModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyActionButtonComponent,
+                        SkyActionButtonContainerComponent,
+                        SkyActionButtonDetailsComponent,
+                        SkyActionButtonHeaderComponent,
+                        SkyActionButtonIconComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * 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-layout' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_back_to_top: { message: 'Back to top' },
+        skyux_card_checkbox_label: { message: 'Select card' },
+        skyux_definition_list_none_found: { message: 'None found.' },
+        skyux_description_list_none_found: { message: 'None found.' },
+        skyux_inline_delete_assistive_text: {
+            message: 'Are you sure you want to delete this item?',
+        },
+        skyux_inline_delete_cancel: { message: 'Cancel' },
+        skyux_inline_delete_confirm_deletion: { message: 'Confirm deletion' },
+        skyux_inline_delete_delete: { message: 'Delete' },
+        skyux_text_expand_close_text: { message: 'Close' },
+        skyux_text_expand_modal_title: { message: 'Expanded view' },
+        skyux_text_expand_see_less: { message: 'See less' },
+        skyux_text_expand_see_more: { message: 'See more' },
+    },
+};
+class SkyLayoutResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyLayoutResourcesModule {
+}
+SkyLayoutResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLayoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyLayoutResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLayoutResourcesModule, exports: [SkyI18nModule] });
+SkyLayoutResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLayoutResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyLayoutResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyLayoutResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyLayoutResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyBackToTopComponent {
+    constructor() {
+        this._scrollToTopClick = new Subject();
+    }
+    get scrollToTopClick() {
+        return this._scrollToTopClick.asObservable();
+    }
+    onScrollToTopClick() {
+        this._scrollToTopClick.next();
+        this._scrollToTopClick.complete();
+    }
+}
+SkyBackToTopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBackToTopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyBackToTopComponent, selector: "sky-back-to-top", ngImport: i0, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-back-to-top', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-back-to-top sky-padding-squish-large\">\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top{display:flex;align-items:center;width:100%;background-color:#fff;box-shadow:0 -3px 3px #cdcfd2}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyBackToTopDomAdapterService {
+    constructor(windowRef, scrollableHostService) {
+        this.windowRef = windowRef;
+        this.scrollableHostService = scrollableHostService;
+        this.ngUnsubscribe = new Subject();
+        this.scrollableHostScrollEventUnsubscribe = new Subject();
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.scrollableHostScrollEventUnsubscribe.next();
+        this.scrollableHostScrollEventUnsubscribe.complete();
+    }
+    /**
+     * This event returns a boolean on scroll indicating whether the provided element is in view.
+     * @param elementRef The target element reference.
+     */
+    elementInViewOnScroll(elementRef) {
+        const scrollableHostObservable = this.scrollableHostService.watchScrollableHostScrollEvents(elementRef);
+        const isInitiallyInView = this.isElementScrolledInView(elementRef);
+        const returnedObservable = new BehaviorSubject(isInitiallyInView);
+        scrollableHostObservable
+            .pipe(takeUntil(this.scrollableHostScrollEventUnsubscribe))
+            .subscribe(() => {
+            const isInView = this.isElementScrolledInView(elementRef);
+            returnedObservable.next(isInView);
+        });
+        return returnedObservable;
+    }
+    /**
+     * Scrolls the window or scrollable parent to the provided element.
+     * @param elementRef The target element reference.
+     */
+    scrollToElement(elementRef) {
+        /* sanity check */
+        /* istanbul ignore if */
+        if (!elementRef || !elementRef.nativeElement) {
+            return;
+        }
+        const scrollableHost = this.scrollableHostService.getScrollableHost(elementRef);
+        if (scrollableHost instanceof Window) {
+            // Scroll to top of window, but account for the body margin that allows for the omnibar if it exists.
+            const bodyMarginOffset = parseInt(getComputedStyle(document.body).marginTop, 10);
+            const newOffsetTop = elementRef.nativeElement.offsetTop - bodyMarginOffset;
+            this.windowRef.nativeWindow.scrollTo(elementRef.nativeElement.offsetLeft, newOffsetTop);
+        }
+        else {
+            // Scroll to top of parent element.
+            scrollableHost.scrollTop =
+                scrollableHost.offsetTop - elementRef.nativeElement.offsetTop;
+        }
+    }
+    isElementScrolledInView(element) {
+        const parentElement = this.scrollableHostService.getScrollableHost(element.nativeElement);
+        if (!element.nativeElement.offsetParent) {
+            return true;
+        }
+        const buffer = 25;
+        const elementRect = element.nativeElement.getBoundingClientRect();
+        /* istanbul ignore else */
+        if (parentElement instanceof HTMLElement) {
+            const parentRect = parentElement.getBoundingClientRect();
+            return elementRect.top > parentRect.top - buffer;
+        }
+        else {
+            return elementRect.top > -buffer;
+        }
+    }
+}
+SkyBackToTopDomAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopDomAdapterService, deps: [{ token: i1.SkyAppWindowRef }, { token: i1.SkyScrollableHostService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyBackToTopDomAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopDomAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyAppWindowRef }, { type: i1.SkyScrollableHostService }]; } });
+
+/**
+ * Specifies the type of message to send to the back to top component.
+ */
+var SkyBackToTopMessageType;
+(function (SkyBackToTopMessageType) {
+    /**
+     * Scrolls the element back to the top.
+     */
+    SkyBackToTopMessageType[SkyBackToTopMessageType["BackToTop"] = 0] = "BackToTop";
+})(SkyBackToTopMessageType || (SkyBackToTopMessageType = {}));
+
+/**
+ * Associates a button with an element on the page and displays that button
+ * to return to the element after users scroll away.
+ */
+class SkyBackToTopDirective {
+    constructor(dockService, domAdapter, element) {
+        this.dockService = dockService;
+        this.domAdapter = domAdapter;
+        this.element = element;
+        this.buttonHidden = false;
+        this.ngUnsubscribe = new Subject();
+    }
+    /**
+     * Specifies configuration options for the back to top component.
+     */
+    set skyBackToTop(value) {
+        this.buttonHidden = !!(value === null || value === void 0 ? void 0 : value.buttonHidden);
+        this.handleBackToTopButton(this.elementInView);
+    }
+    /**
+     * Provides an observable to send commands to the back to top component.
+     * The commands respect the `SkyBackToTopMessage` type.
+     */
+    set skyBackToTopMessageStream(value) {
+        if (this._skyBackToTopMessageStream) {
+            this._skyBackToTopMessageStream.unsubscribe();
+        }
+        this._skyBackToTopMessageStream = value;
+        this._skyBackToTopMessageStream
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((message) => this.handleIncomingMessages(message));
+    }
+    ngAfterViewInit() {
+        this.elementInView = this.domAdapter.isElementScrolledInView(this.element);
+        this.handleBackToTopButton(this.elementInView);
+        this.setBackToTopListeners();
+    }
+    ngOnDestroy() {
+        if (this.dockItem) {
+            this.dockItem.destroy();
+        }
+    }
+    handleBackToTopButton(elementInView) {
+        // Add back to top button if user scrolls down and button is not hidden.
+        if (!this.dockItem &&
+            elementInView !== undefined &&
+            !elementInView &&
+            !this.buttonHidden) {
+            this.addBackToTop();
+        }
+        // Remove back to top button if user scrolls back up.
+        if (elementInView || this.buttonHidden) {
+            this.destroyBackToTop();
+        }
+    }
+    addBackToTop() {
+        this.dockItem = this.dockService.insertComponent(SkyBackToTopComponent);
+        // Listen for clicks on the "back to top" button so we know when to scroll up.
+        this.dockItem.componentInstance.scrollToTopClick
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.domAdapter.scrollToElement(this.element);
+        });
+    }
+    handleIncomingMessages(message) {
+        /* istanbul ignore else */
+        if (message.type === SkyBackToTopMessageType.BackToTop) {
+            this.domAdapter.scrollToElement(this.element);
+        }
+    }
+    setBackToTopListeners() {
+        /* istanbul ignore else */
+        if (this.element) {
+            this.domAdapter
+                .elementInViewOnScroll(this.element)
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((elementInView) => {
+                this.elementInView = elementInView;
+                this.handleBackToTopButton(elementInView);
+            });
+        }
+    }
+    destroyBackToTop() {
+        /* istanbul ignore else */
+        if (this.dockItem) {
+            this.dockItem.destroy();
+            this.dockItem = undefined;
+        }
+    }
+}
+SkyBackToTopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopDirective, deps: [{ token: i1.SkyDockService }, { token: SkyBackToTopDomAdapterService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyBackToTopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: SkyBackToTopDirective, selector: "[skyBackToTop]", inputs: { skyBackToTop: "skyBackToTop", skyBackToTopMessageStream: "skyBackToTopMessageStream" }, providers: [SkyBackToTopDomAdapterService], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyBackToTop]',
+                    providers: [SkyBackToTopDomAdapterService],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SkyDockService }, { type: SkyBackToTopDomAdapterService }, { type: i0.ElementRef }]; }, propDecorators: { skyBackToTop: [{
+                type: Input
+            }], skyBackToTopMessageStream: [{
+                type: Input
+            }] } });
+
+class SkyBackToTopModule {
+}
+SkyBackToTopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyBackToTopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopModule, declarations: [SkyBackToTopComponent, SkyBackToTopDirective], imports: [CommonModule,
+        SkyDockModule,
+        SkyI18nModule,
+        SkyLayoutResourcesModule], exports: [SkyBackToTopComponent, SkyBackToTopDirective] });
+SkyBackToTopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopModule, imports: [[
+            CommonModule,
+            SkyDockModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBackToTopModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyBackToTopComponent, SkyBackToTopDirective],
+                    imports: [
+                        CommonModule,
+                        SkyDockModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                    ],
+                    exports: [SkyBackToTopComponent, SkyBackToTopDirective],
+                }]
+        }] });
+
+/**
+ * Specifies the body content to display inside the box and provides padding around that content.
+ */
+class SkyBoxContentComponent {
+}
+SkyBoxContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBoxContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyBoxContentComponent, selector: "sky-box-content", ngImport: i0, template: "<div\n  class=\"sky-box-content\"\n  [skyThemeClass]=\"{\n    'sky-padding-even-large': 'default',\n    'sky-padding-even-xl': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", directives: [{ type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box-content', template: "<div\n  class=\"sky-box-content\"\n  [skyThemeClass]=\"{\n    'sky-padding-even-large': 'default',\n    'sky-padding-even-xl': 'modern'\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * Specifies the controls to display in upper right corner of the box. These buttons typically let users edit the box content.
+ */
+class SkyBoxControlsComponent {
+}
+SkyBoxControlsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBoxControlsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyBoxControlsComponent, selector: "sky-box-controls", ngImport: i0, template: "<div class=\"sky-box-controls\">\n  <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box-controls', template: "<div class=\"sky-box-controls\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * Specifies a header for the box.
+ */
+class SkyBoxHeaderComponent {
+}
+SkyBoxHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBoxHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n  <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box-header', template: "<div class=\"sky-box-header\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }] });
+
+/**
+ * Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.
+ */
+class SkyBoxComponent {
+}
+SkyBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyBoxComponent, selector: "sky-box", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaRole: "ariaRole" }, ngImport: i0, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"], directives: [{ type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box', encapsulation: ViewEncapsulation.None, template: "<section\n  class=\"sky-box\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [attr.role]=\"ariaRole\"\n  [skyThemeClass]=\"{\n    'sky-shadow sky-border-dark': 'default',\n    'sky-elevation-1-bordered': 'modern'\n  }\"\n>\n  <div class=\"sky-box-header-content\">\n    <ng-content select=\"sky-box-header\"></ng-content>\n    <ng-content select=\"sky-box-controls\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n</section>\n", styles: [".sky-box{background-color:#fff}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:20px 20px 0}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-header{flex:1 0;order:0}.sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 20px 0 0}.sky-box .sky-box-header-content sky-box-header .sky-box-header h1,.sky-box .sky-box-header-content sky-box-header .sky-box-header h2,.sky-box .sky-box-header-content sky-box-header .sky-box-header h3,.sky-box .sky-box-header-content sky-box-header .sky-box-header h4,.sky-box .sky-box-header-content sky-box-header .sky-box-header h5,.sky-box .sky-box-header-content sky-box-header .sky-box-header h6{margin:0}.sky-box .sky-box-header-content sky-box-controls{order:1}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box sky-box-content{flex:0 1 100%;order:2}.sky-box sky-box-content .sky-box-content{padding:20px}.sky-theme-modern .sky-box{border-radius:6px;overflow:hidden}.sky-theme-modern .sky-box .sky-box-header-content{padding:30px 30px 0}.sky-theme-modern .sky-box .sky-box-header-content sky-box-header .sky-box-header{padding:0 30px 0 0}.sky-theme-modern .sky-box sky-box-content .sky-box-content{padding:30px}\n"] }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }] } });
+
+class SkyBoxModule {
+}
+SkyBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxModule, declarations: [SkyBoxComponent,
+        SkyBoxHeaderComponent,
+        SkyBoxContentComponent,
+        SkyBoxControlsComponent], imports: [CommonModule, SkyThemeModule], exports: [SkyBoxComponent,
+        SkyBoxHeaderComponent,
+        SkyBoxContentComponent,
+        SkyBoxControlsComponent] });
+SkyBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxModule, imports: [[CommonModule, SkyThemeModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyBoxComponent,
+                        SkyBoxHeaderComponent,
+                        SkyBoxContentComponent,
+                        SkyBoxControlsComponent,
+                    ],
+                    imports: [CommonModule, SkyThemeModule],
+                    exports: [
+                        SkyBoxComponent,
+                        SkyBoxHeaderComponent,
+                        SkyBoxContentComponent,
+                        SkyBoxControlsComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInlineDeleteAdapterService {
+    constructor(coreAdapterService, rendererFactory) {
+        this.coreAdapterService = coreAdapterService;
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    clearListeners() {
+        /* istanbul ignore else */
+        if (this.parentElUnlistenFn) {
+            this.parentElUnlistenFn();
+        }
+    }
+    setEl(element) {
+        this.element = element;
+        this.parentEl = element.parentElement;
+        /* istanbul ignore else */
+        if (this.parentEl) {
+            this.parentElUnlistenFn = this.renderer.listen(this.parentEl, 'focusin', (event) => {
+                const target = event.target;
+                if (!this.element.contains(target) && this.parentEl !== target) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    target.blur();
+                    this.focusNextElement(target, this.isShift(event), this.parentEl);
+                }
+            });
+        }
+    }
+    focusNextElement(targetElement, shiftKey, busyEl) {
+        const focussable = this.getFocussableElements();
+        // If shift tab, go in the other direction
+        const modifier = shiftKey ? -1 : 1;
+        // Find the next navigable element that isn't waiting
+        const startingIndex = focussable.indexOf(targetElement);
+        let curIndex = startingIndex + modifier;
+        while (focussable[curIndex] &&
+            this.isElementHiddenOrCovered(focussable[curIndex])) {
+            curIndex += modifier;
+        }
+        if (focussable[curIndex] &&
+            !this.isElementHiddenOrCovered(focussable[curIndex])) {
+            focussable[curIndex].focus();
+        }
+        else {
+            // Try wrapping the navigation
+            /* istanbul ignore next */
+            curIndex = modifier > 0 ? 0 : focussable.length - 1;
+            /* istanbul ignore next */
+            while (curIndex !== startingIndex &&
+                focussable[curIndex] &&
+                this.isElementHiddenOrCovered(focussable[curIndex])) {
+                curIndex += modifier;
+            }
+            /* istanbul ignore else */
+            /* sanity check */
+            if (focussable[curIndex] &&
+                !this.isElementHiddenOrCovered(focussable[curIndex])) {
+                focussable[curIndex].focus();
+            }
+            else {
+                // No valid target, wipe focus
+                // This should never happen in practice due to the multiple inline delete buttons
+                if (document.activeElement && document.activeElement.blur) {
+                    document.activeElement.blur();
+                }
+                document.body.focus();
+            }
+        }
+        // clear focussableElements list so that if things change between tabbing we know about it
+        this.focussableElements = undefined;
+    }
+    getFocussableElements() {
+        // Keep this cached so we can reduce querys
+        if (this.focussableElements) {
+            return this.focussableElements;
+        }
+        this.focussableElements = this.coreAdapterService.getFocusableChildren(document.body);
+        return this.focussableElements;
+    }
+    isElementHiddenOrCovered(element) {
+        // Check if the element is hidden by css, not within the inline delete, or a wait is covering it
+        return (this.isElementHidden(element) ||
+            (this.parentEl.contains(element) &&
+                (!this.element.contains(element) ||
+                    this.parentEl.querySelector('.sky-wait-mask') !== null)));
+    }
+    isElementHidden(element) {
+        const style = window.getComputedStyle(element);
+        return style.display === 'none' || style.visibility === 'hidden';
+    }
+    isShift(event) {
+        // Determine if shift+tab was used based on element order
+        const elements = this.getFocussableElements().filter((elem) => !this.isElementHidden(elem));
+        const previousInd = elements.indexOf(event.relatedTarget);
+        const currentInd = elements.indexOf(event.target);
+        /* istanbul ignore next */
+        return (previousInd === currentInd + 1 ||
+            (previousInd === 0 && currentInd === elements.length - 1) ||
+            previousInd > currentInd ||
+            !event.relatedTarget);
+    }
+}
+SkyInlineDeleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteAdapterService, deps: [{ token: i1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyInlineDeleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
+
+/**
+ * Specifies the type of inline delete that is shown.
+ * @internal
+ */
+var SkyInlineDeleteType;
+(function (SkyInlineDeleteType) {
+    /**
+     * The standard styling for inline deletes.
+     */
+    SkyInlineDeleteType["Standard"] = "standard";
+    /**
+     * The styling for inline delete components which are used in card components.
+     */
+    SkyInlineDeleteType["Card"] = "card";
+})(SkyInlineDeleteType || (SkyInlineDeleteType = {}));
+
+/**
+ * Auto-incrementing integer used to generate unique ids for inline delete components.
+ */
+let nextId$2 = 0;
+class SkyInlineDeleteComponent {
+    constructor(adapterService, changeDetector, elRef) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.elRef = elRef;
+        /**
+         * Indicates whether the deletion is pending.
+         * @default false
+         */
+        this.pending = false;
+        /**
+         * Fires when users click the cancel button.
+         */
+        this.cancelTriggered = new EventEmitter();
+        /**
+         * Fires when users click the delete button.
+         */
+        this.deleteTriggered = new EventEmitter();
+        this.animationState = 'shown';
+        this.assistiveTextId = `sky-inline-delete-assistive-text-${++nextId$2}`;
+        this.type = SkyInlineDeleteType.Standard;
+    }
+    /**
+     * Initialization lifecycle hook
+     * @internal
+     */
+    ngOnInit() {
+        this.animationState = 'shown';
+    }
+    /**
+     * Destruction lifecycle hook
+     * @internal
+     */
+    ngOnDestroy() {
+        this.adapterService.clearListeners();
+        this.cancelTriggered.complete();
+        this.deleteTriggered.complete();
+    }
+    /**
+     * @internal
+     */
+    onCancelClick() {
+        this.animationState = 'hidden';
+    }
+    /**
+     * @internal
+     */
+    onDeleteClick() {
+        this.deleteTriggered.emit();
+    }
+    /**
+     * Sets the inline delete to one of its predefined types.
+     * @param type The inline delete type
+     * @internal
+     */
+    setType(type) {
+        this.type = type;
+        this.changeDetector.detectChanges();
+    }
+    /**
+     * Handles actions that should be taken after the inline delete animates
+     * @param event The animation event
+     * @internal
+     */
+    onAnimationDone(event) {
+        if (event.toState === 'hidden') {
+            this.cancelTriggered.emit();
+        }
+        else {
+            this.deleteButton.nativeElement.focus();
+            /* istanbul ignore else */
+            if (this.elRef) {
+                this.adapterService.setEl(this.elRef.nativeElement);
+            }
+        }
+    }
+}
+SkyInlineDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyInlineDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyInlineDeleteComponent, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  [@inlineDeleteAnimation]=\"animationState\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n>\n  <span class=\"sky-inline-delete-assistive-text\" [id]=\"assistiveTextId\">\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\"></sky-wait>\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n        #delete\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete{position:absolute!important;top:0px;left:0px;width:100%;height:100%;background-color:#00000080;z-index:999;border:2px solid #ef4044}.sky-inline-delete-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}.sky-inline-delete-button{margin-right:10px}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:20px}.sky-inline-delete-wait{height:100%}\n"], components: [{ type: i2$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe }, animations: [
+        trigger('inlineDeleteAnimation', [
+            transition('* => shown', [
+                style({
+                    opacity: 0,
+                }),
+                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
+                group([
+                    animate('300ms ease-in-out', style({ opacity: 1 })),
+                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
+                        transform: 'scale(1)',
+                    }))),
+                ]),
+            ]),
+            transition(`shown <=> *`, [
+                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
+                group([
+                    animate('300ms ease-in-out', style({
+                        opacity: 0,
+                    })),
+                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
+                        transform: 'scale(0.0)',
+                    }))),
+                ]),
+            ]),
+        ]),
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-inline-delete', animations: [
+                        trigger('inlineDeleteAnimation', [
+                            transition('* => shown', [
+                                style({
+                                    opacity: 0,
+                                }),
+                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
+                                group([
+                                    animate('300ms ease-in-out', style({ opacity: 1 })),
+                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
+                                        transform: 'scale(1)',
+                                    }))),
+                                ]),
+                            ]),
+                            transition(`shown <=> *`, [
+                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
+                                group([
+                                    animate('300ms ease-in-out', style({
+                                        opacity: 0,
+                                    })),
+                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
+                                        transform: 'scale(0.0)',
+                                    }))),
+                                ]),
+                            ]),
+                        ]),
+                    ], providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  [@inlineDeleteAnimation]=\"animationState\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n>\n  <span class=\"sky-inline-delete-assistive-text\" [id]=\"assistiveTextId\">\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\"></sky-wait>\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n        #delete\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete{position:absolute!important;top:0px;left:0px;width:100%;height:100%;background-color:#00000080;z-index:999;border:2px solid #ef4044}.sky-inline-delete-assistive-text{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}.sky-inline-delete-button{margin-right:10px}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:20px}.sky-inline-delete-wait{height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyInlineDeleteAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { pending: [{
+                type: Input
+            }], cancelTriggered: [{
+                type: Output
+            }], deleteTriggered: [{
+                type: Output
+            }], deleteButton: [{
+                type: ViewChild,
+                args: ['delete', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }] } });
+
+class SkyInlineDeleteModule {
+}
+SkyInlineDeleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyInlineDeleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyLayoutResourcesModule,
+        SkyWaitModule], exports: [SkyInlineDeleteComponent] });
+SkyInlineDeleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyWaitModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyInlineDeleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyInlineDeleteComponent],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyWaitModule,
+                    ],
+                    exports: [SkyInlineDeleteComponent],
+                }]
+        }] });
+
+/**
+ * Specifies an action that users can perform on the card.
+ */
+class SkyCardActionsComponent {
+}
+SkyCardActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCardActionsComponent, selector: "sky-card-actions", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;border-top:1px solid #e2e3e4;padding:7px 0}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-card-actions', template: "<ng-content></ng-content>\n", styles: [":host{display:block;border-top:1px solid #e2e3e4;padding:7px 0}\n"] }]
+        }] });
+
+/**
+ * Specifies the content to display in the body of the card.
+ */
+class SkyCardContentComponent {
+}
+SkyCardContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCardContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCardContentComponent, selector: "sky-card-content", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-card-content', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Specifies a title to identify what the card represents.
+ */
+class SkyCardTitleComponent {
+}
+SkyCardTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCardTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCardTitleComponent, selector: "sky-card-title", ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-card-title', template: "<ng-content></ng-content>\n" }]
+        }] });
+
+/**
+ * Creates a a small container to highlight important information.
+ */
+class SkyCardComponent {
+    constructor() {
+        /**
+         * Fires when users select or deselect the card.
+         */
+        this.selectedChange = new EventEmitter();
+        this.showTitle = true;
+    }
+    ngAfterContentInit() {
+        this.showTitle = this.titleComponent.length > 0;
+        this.subscription = this.titleComponent.changes.subscribe(() => {
+            this.showTitle = this.titleComponent.length > 0;
+        });
+        this.inlineDeleteComponent.forEach((item) => {
+            item.setType(SkyInlineDeleteType.Card);
+        });
+        this.inlineDeleteComponent.changes.subscribe(() => {
+            this.inlineDeleteComponent.forEach((item) => {
+                item.setType(SkyInlineDeleteType.Card);
+            });
+        });
+    }
+    contentClick() {
+        if (this.selectable) {
+            this.selected = !this.selected;
+            this.selectedChange.emit(this.selected);
+        }
+    }
+    onCheckboxChange(newValue) {
+        if (this.selectable && this.selected !== newValue) {
+            this.selected = newValue;
+            this.selectedChange.emit(this.selected);
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}
+SkyCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\"></ng-content>\n  <header>\n    <div\n      *ngIf=\"selectable || showTitle\"\n      class=\"sky-card-header\"\n      (click)=\"contentClick()\"\n    >\n      <div class=\"sky-card-heading-middle\">\n        <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div *ngIf=\"selectable\" class=\"sky-card-check\">\n        <sky-checkbox\n          [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n          [ngModel]=\"selected\"\n          (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"onCheckboxChange($event)\"\n        ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n    #actionsEl\n  >\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], components: [{ type: i1$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-card', template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\"></ng-content>\n  <header>\n    <div\n      *ngIf=\"selectable || showTitle\"\n      class=\"sky-card-header\"\n      (click)=\"contentClick()\"\n    >\n      <div class=\"sky-card-heading-middle\">\n        <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div *ngIf=\"selectable\" class=\"sky-card-check\">\n        <sky-checkbox\n          [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n          [ngModel]=\"selected\"\n          (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"onCheckboxChange($event)\"\n        ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n    #actionsEl\n  >\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], inlineDeleteComponent: [{
+                type: ContentChildren,
+                args: [SkyInlineDeleteComponent]
+            }], titleComponent: [{
+                type: ContentChildren,
+                args: [SkyCardTitleComponent]
+            }] } });
+
+class SkyCardModule {
+}
+SkyCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardModule, declarations: [SkyCardActionsComponent,
+        SkyCardComponent,
+        SkyCardContentComponent,
+        SkyCardTitleComponent], imports: [CommonModule,
+        FormsModule,
+        SkyCheckboxModule,
+        SkyI18nModule,
+        SkyLayoutResourcesModule,
+        SkyInlineDeleteModule], exports: [SkyCardActionsComponent,
+        SkyCardComponent,
+        SkyCardContentComponent,
+        SkyCardTitleComponent] });
+SkyCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardModule, imports: [[
+            CommonModule,
+            FormsModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyInlineDeleteModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyCardActionsComponent,
+                        SkyCardComponent,
+                        SkyCardContentComponent,
+                        SkyCardTitleComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        SkyCheckboxModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyInlineDeleteModule,
+                    ],
+                    exports: [
+                        SkyCardActionsComponent,
+                        SkyCardComponent,
+                        SkyCardContentComponent,
+                        SkyCardTitleComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Wraps the label-value pairs in the definition list.
+ */
+class SkyDefinitionListContentComponent {
+}
+SkyDefinitionListContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDefinitionListContentComponent, selector: "sky-definition-list-content", ngImport: i0, template: "<div class=\"sky-definition-list-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-definition-list-content{display:flex;flex-wrap:wrap;margin-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-definition-list-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-definition-list-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-definition-list-content{display:flex;flex-wrap:wrap;margin-bottom:5px}\n"] }]
+        }] });
+
+/**
+ * Specifies a title for the definition list.
+ */
+class SkyDefinitionListHeadingComponent {
+}
+SkyDefinitionListHeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListHeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDefinitionListHeadingComponent, selector: "sky-definition-list-heading", ngImport: i0, template: "<div class=\"sky-subsection-heading sky-definition-list-heading\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListHeadingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-definition-list-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-subsection-heading sky-definition-list-heading\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDefinitionListService {
+    constructor() {
+        this.labelWidth = new BehaviorSubject('');
+        this.defaultValue = new BehaviorSubject('');
+    }
+}
+SkyDefinitionListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDefinitionListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the label in a label-value pair.
+ */
+class SkyDefinitionListLabelComponent {
+    constructor(service) {
+        this.service = service;
+    }
+}
+SkyDefinitionListLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListLabelComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDefinitionListLabelComponent, selector: "sky-definition-list-label", ngImport: i0, template: "<div\n  class=\"sky-field-label sky-definition-list-label\"\n  [ngStyle]=\"{\n    width: (service.labelWidth | async) || ''\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{flex:0 0 90px}.sky-definition-list-label{margin-right:10px;word-wrap:break-word}\n"], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-definition-list-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-field-label sky-definition-list-label\"\n  [ngStyle]=\"{\n    width: (service.labelWidth | async) || ''\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{flex:0 0 90px}.sky-definition-list-label{margin-right:10px;word-wrap:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; } });
+
+/**
+ * Specifies the value in a label-value pair.
+ */
+class SkyDefinitionListValueComponent {
+    constructor(service) {
+        this.service = service;
+    }
+}
+SkyDefinitionListValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDefinitionListValueComponent, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span class=\"sky-deemphasized\" *ngIf=\"!valueEl.textContent.trim()\">\n    {{\n      (service.defaultValue | async) ||\n        ('skyux_definition_list_none_found' | skyLibResources)\n    }}\n  </span>\n</div>\n", styles: [":host{flex:1}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3.AsyncPipe, "skyLibResources": i1$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-definition-list-value', template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span class=\"sky-deemphasized\" *ngIf=\"!valueEl.textContent.trim()\">\n    {{\n      (service.defaultValue | async) ||\n        ('skyux_definition_list_none_found' | skyLibResources)\n    }}\n  </span>\n</div>\n", styles: [":host{flex:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; } });
+
+/**
+ * Creates a definition list to display label-value pairs.
+ */
+class SkyDefinitionListComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    /**
+     * Specifies the width of the label portion of the definition list.
+     * @default "90px"
+     */
+    set labelWidth(value) {
+        this.service.labelWidth.next(value);
+    }
+    /**
+     * Specifies a default value to display when no value is provided
+     * for a label-value pair.
+     * @default "None found"
+     */
+    set defaultValue(value) {
+        this.service.defaultValue.next(value);
+    }
+}
+SkyDefinitionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDefinitionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDefinitionListComponent, selector: "sky-definition-list", inputs: { labelWidth: "labelWidth", defaultValue: "defaultValue" }, providers: [SkyDefinitionListService], ngImport: i0, template: "<div class=\"sky-definition-list\">\n  <ng-content select=\"sky-definition-list-heading\"></ng-content>\n  <ng-content select=\"sky-definition-list-content\"></ng-content>\n</div>\n", styles: [".sky-definition-list{margin-right:50px;margin-bottom:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-definition-list', providers: [SkyDefinitionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-definition-list\">\n  <ng-content select=\"sky-definition-list-heading\"></ng-content>\n  <ng-content select=\"sky-definition-list-content\"></ng-content>\n</div>\n", styles: [".sky-definition-list{margin-right:50px;margin-bottom:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDefinitionListService }]; }, propDecorators: { labelWidth: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }] } });
+
+class SkyDefinitionListModule {
+}
+SkyDefinitionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDefinitionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListModule, declarations: [SkyDefinitionListComponent,
+        SkyDefinitionListContentComponent,
+        SkyDefinitionListHeadingComponent,
+        SkyDefinitionListLabelComponent,
+        SkyDefinitionListValueComponent], imports: [CommonModule, SkyI18nModule, SkyLayoutResourcesModule], exports: [SkyDefinitionListComponent,
+        SkyDefinitionListContentComponent,
+        SkyDefinitionListHeadingComponent,
+        SkyDefinitionListLabelComponent,
+        SkyDefinitionListValueComponent] });
+SkyDefinitionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListModule, imports: [[CommonModule, SkyI18nModule, SkyLayoutResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDefinitionListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDefinitionListComponent,
+                        SkyDefinitionListContentComponent,
+                        SkyDefinitionListHeadingComponent,
+                        SkyDefinitionListLabelComponent,
+                        SkyDefinitionListValueComponent,
+                    ],
+                    imports: [CommonModule, SkyI18nModule, SkyLayoutResourcesModule],
+                    exports: [
+                        SkyDefinitionListComponent,
+                        SkyDefinitionListContentComponent,
+                        SkyDefinitionListHeadingComponent,
+                        SkyDefinitionListLabelComponent,
+                        SkyDefinitionListValueComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDescriptionListService {
+    constructor() {
+        this._defaultDescription = new BehaviorSubject('');
+    }
+    get defaultDescription() {
+        return this._defaultDescription.asObservable();
+    }
+    ngOnDestroy() {
+        this._defaultDescription.complete();
+    }
+    updateDefaultDescription(value) {
+        this._defaultDescription.next(value);
+    }
+}
+SkyDescriptionListService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDescriptionListService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the description in a term-description pair.
+ */
+class SkyDescriptionListDescriptionComponent {
+    constructor(service, changeRef, themeSvc) {
+        this.service = service;
+        this.changeRef = changeRef;
+        this.themeSvc = themeSvc;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.themeSvc) {
+            this.themeSvc.settingsChange
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.themeName = themeSettings.currentSettings.theme.name;
+                this.changeRef.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyDescriptionListDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i3$1.SkyThemeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDescriptionListDescriptionComponent, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span\n    *ngIf=\"!valueEl.textContent.trim()\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "async": i3.AsyncPipe, "skyLibResources": i1$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list-description', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #descriptionTemplateRef>\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span\n    *ngIf=\"!valueEl.textContent.trim()\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: SkyDescriptionListService }, { type: i0.ChangeDetectorRef }, { type: i3$1.SkyThemeService }]; }, propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['descriptionTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * Specifies the term in a term-description pair.
+ */
+class SkyDescriptionListTermComponent {
+}
+SkyDescriptionListTermComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListTermComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDescriptionListTermComponent, selector: "sky-description-list-term", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["termTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #termTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['termTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * Wraps the term-description pairs in the description list.
+ */
+class SkyDescriptionListContentComponent {
+}
+SkyDescriptionListContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDescriptionListContentComponent, selector: "sky-description-list-content", queries: [{ propertyName: "termComponents", predicate: SkyDescriptionListTermComponent }, { propertyName: "descriptionComponents", predicate: SkyDescriptionListDescriptionComponent }], ngImport: i0, template: "<ng-content></ng-content>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list-content', template: "<ng-content></ng-content>\n" }]
+        }], propDecorators: { termComponents: [{
+                type: ContentChildren,
+                args: [SkyDescriptionListTermComponent]
+            }], descriptionComponents: [{
+                type: ContentChildren,
+                args: [SkyDescriptionListDescriptionComponent]
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDescriptionListAdapterService {
+    constructor(rendererFactory) {
+        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+    }
+    getWidth(elementRef) {
+        return elementRef.nativeElement.clientWidth;
+    }
+    setResponsiveClass(element) {
+        const nativeEl = element.nativeElement;
+        const width = this.getWidth(element);
+        const className = this.getResponsiveClassName(width);
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-xs');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-sm');
+        this.renderer.removeClass(nativeEl, 'sky-responsive-container-md');
+        this.renderer.addClass(nativeEl, className);
+    }
+    getResponsiveClassName(width) {
+        const xsBreakpointMaxPixels = 479;
+        const smBreakpointMinPixels = 480;
+        const smBreakpointMaxPixels = 767;
+        if (width <= xsBreakpointMaxPixels) {
+            return 'sky-responsive-container-xs';
+        }
+        else if (width >= smBreakpointMinPixels &&
+            width <= smBreakpointMaxPixels) {
+            return 'sky-responsive-container-sm';
+        }
+        else {
+            return 'sky-responsive-container-md';
+        }
+    }
+}
+SkyDescriptionListAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDescriptionListAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * Creates a description list to display term-description pairs.
+ */
+class SkyDescriptionListComponent {
+    constructor(adapterService, changeDetector, descriptionListService, mutationSvc) {
+        this.adapterService = adapterService;
+        this.changeDetector = changeDetector;
+        this.descriptionListService = descriptionListService;
+        this.mutationSvc = mutationSvc;
+        this.ngUnsubscribe = new Subject();
+    }
+    /**
+     * Specifies a default description to display when no description is provided
+     * for a term-description pair.
+     * @default "None found"
+     */
+    set defaultDescription(value) {
+        this.descriptionListService.updateDefaultDescription(value);
+    }
+    /**
+     * Specifies how to display term-description pairs within the description list.
+     * Options include `"horizontal"`, `"longDescription"`, and `"vertical"`.
+     * @default "vertical"
+     */
+    set mode(value) {
+        this._mode = value;
+    }
+    get mode() {
+        return this._mode || 'vertical';
+    }
+    ngAfterContentInit() {
+        // Wait for all content to render before detecting parent width.
+        setTimeout(() => {
+            this.updateResponsiveClass();
+        });
+        this.contentComponents.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
+    ngAfterViewInit() {
+        this.contentObserver = this.mutationSvc.create(() => {
+            this.changeDetector.markForCheck();
+        });
+        this.contentObserver.observe(this.elementRef.nativeElement, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.contentObserver.disconnect();
+    }
+    onWindowResize() {
+        this.updateResponsiveClass();
+    }
+    updateResponsiveClass() {
+        this.adapterService.setResponsiveClass(this.elementRef);
+        this.changeDetector.markForCheck();
+    }
+}
+SkyDescriptionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDescriptionListService }, { token: i1.MutationObserverService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n  class=\"sky-description-list\"\n  [ngClass]=\"{\n    'sky-description-list-long-description-mode': mode === 'longDescription',\n    'sky-description-list-vertical-mode': mode === 'vertical',\n    'sky-description-list-horizontal-mode': mode === 'horizontal'\n  }\"\n  #descriptionListElement\n>\n  <!--\n    Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n    to avoid adding non-semantic HTML tags to DOM\n  -->\n  <div\n    *ngFor=\"let contentComponent of contentComponents\"\n    class=\"sky-description-list-content\"\n    [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n  >\n    <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n      <ng-container\n        *ngTemplateOutlet=\"termComponent.templateRef\"\n      ></ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n      ></ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n  class=\"sky-description-list\"\n  [ngClass]=\"{\n    'sky-description-list-long-description-mode': mode === 'longDescription',\n    'sky-description-list-vertical-mode': mode === 'vertical',\n    'sky-description-list-horizontal-mode': mode === 'horizontal'\n  }\"\n  #descriptionListElement\n>\n  <!--\n    Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n    to avoid adding non-semantic HTML tags to DOM\n  -->\n  <div\n    *ngFor=\"let contentComponent of contentComponents\"\n    class=\"sky-description-list-content\"\n    [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n  >\n    <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n      <ng-container\n        *ngTemplateOutlet=\"termComponent.templateRef\"\n      ></ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n      ></ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDescriptionListService }, { type: i1.MutationObserverService }]; }, propDecorators: { defaultDescription: [{
+                type: Input
+            }], listItemWidth: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], contentComponents: [{
+                type: ContentChildren,
+                args: [SkyDescriptionListContentComponent]
+            }], elementRef: [{
+                type: ViewChild,
+                args: ['descriptionListElement', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+class SkyDescriptionListModule {
+}
+SkyDescriptionListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDescriptionListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListModule, declarations: [SkyDescriptionListComponent,
+        SkyDescriptionListContentComponent,
+        SkyDescriptionListTermComponent,
+        SkyDescriptionListDescriptionComponent], imports: [CommonModule,
+        SkyI18nModule,
+        SkyLayoutResourcesModule,
+        SkyThemeModule], exports: [SkyDescriptionListComponent,
+        SkyDescriptionListContentComponent,
+        SkyDescriptionListTermComponent,
+        SkyDescriptionListDescriptionComponent] });
+SkyDescriptionListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListModule, imports: [[
+            CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyThemeModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyDescriptionListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDescriptionListComponent,
+                        SkyDescriptionListContentComponent,
+                        SkyDescriptionListTermComponent,
+                        SkyDescriptionListDescriptionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [
+                        SkyDescriptionListComponent,
+                        SkyDescriptionListContentComponent,
+                        SkyDescriptionListTermComponent,
+                        SkyDescriptionListDescriptionComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @deprecated Use `SkyDescriptionListModeType` instead.
+ * @internal
+ * Specifies how to display the term-description pairs within a description list.
+ */
+var SkyDescriptionListMode;
+(function (SkyDescriptionListMode) {
+    /**
+     * Displays term-description pairs side by side in a horizontal list.
+     * This mode provides a responsive layout.
+     */
+    SkyDescriptionListMode["horizontal"] = "horizontal";
+    /**
+     * Displays terms and descriptions side by side with the term on the left and the description
+     * on the right. This mode includes room for long descriptions and uses a responsive layout
+     * that stacks term-description pairs vertically.
+     */
+    SkyDescriptionListMode["longDescription"] = "longDescription";
+    /**
+     * Displays term-description pairs in a vertical list.
+     */
+    SkyDescriptionListMode["vertical"] = "vertical";
+})(SkyDescriptionListMode || (SkyDescriptionListMode = {}));
+
+/**
+ * @deprecated Use `SkyFluidGridGutterSizeType` instead.
+ * @internal
+ */
+var SkyFluidGridGutterSize;
+(function (SkyFluidGridGutterSize) {
+    /**
+     * Specifies a small gutter.
+     */
+    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Small"] = 0] = "Small";
+    /**
+     * Specifies a medium gutter.
+     */
+    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Medium"] = 1] = "Medium";
+    /**
+     * Specifies a large gutter.
+     */
+    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
+})(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
+
+/**
+ * Displays a column within a row of the fluid grid.
+ */
+class SkyColumnComponent {
+    ngOnChanges(changes) {
+        /* istanbul ignore else */
+        if (changes.screenXSmall ||
+            changes.screenSmall ||
+            changes.screenMedium ||
+            changes.screenLarge) {
+            this.classnames = this.getClassNames();
+        }
+    }
+    getClassNames() {
+        const classnames = ['sky-column'];
+        if (this.screenXSmall) {
+            classnames.push(`sky-column-xs-${this.screenXSmall}`);
+        }
+        if (this.screenSmall) {
+            classnames.push(`sky-column-sm-${this.screenSmall}`);
+        }
+        if (this.screenMedium) {
+            classnames.push(`sky-column-md-${this.screenMedium}`);
+        }
+        if (this.screenLarge) {
+            classnames.push(`sky-column-lg-${this.screenLarge}`);
+        }
+        return classnames.join(' ');
+    }
+    ngOnInit() {
+        this.classnames = this.getClassNames();
+    }
+}
+SkyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyColumnComponent, selector: "sky-column", inputs: { screenXSmall: "screenXSmall", screenSmall: "screenSmall", screenMedium: "screenMedium", screenLarge: "screenLarge" }, host: { properties: { "class": "this.classnames" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["sky-column.sky-column{padding-right:15px;padding-left:15px;width:100%;min-height:1px}.sky-theme-modern sky-column.sky-column{padding-right:30px;padding-left:30px}.sky-fluid-grid-gutter-size-small sky-column.sky-column{padding-right:5px;padding-left:5px}.sky-fluid-grid-gutter-size-medium sky-column.sky-column{padding-right:10px;padding-left:10px}.sky-theme-modern .sky-fluid-grid-gutter-size-small sky-column.sky-column{padding-right:10px;padding-left:10px}.sky-theme-modern .sky-fluid-grid-gutter-size-medium sky-column.sky-column{padding-right:15px;padding-left:15px}sky-column.sky-column-xs-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-xs-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-xs-3{width:25%}sky-column.sky-column-xs-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-xs-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-xs-6{width:50%}sky-column.sky-column-xs-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-xs-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-xs-9{width:75%}sky-column.sky-column-xs-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-xs-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-xs-12{width:100%}sky-column:not([class*=sky-column-xs-]){width:100%}.sky-responsive-container-xs sky-column.sky-column-xs-1,.sky-responsive-container-sm sky-column.sky-column-xs-1,.sky-responsive-container-md sky-column.sky-column-xs-1,.sky-responsive-container-lg sky-column.sky-column-xs-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-2,.sky-responsive-container-sm sky-column.sky-column-xs-2,.sky-responsive-container-md sky-column.sky-column-xs-2,.sky-responsive-container-lg sky-column.sky-column-xs-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-3,.sky-responsive-container-sm sky-column.sky-column-xs-3,.sky-responsive-container-md sky-column.sky-column-xs-3,.sky-responsive-container-lg sky-column.sky-column-xs-3{width:25%}.sky-responsive-container-xs sky-column.sky-column-xs-4,.sky-responsive-container-sm sky-column.sky-column-xs-4,.sky-responsive-container-md sky-column.sky-column-xs-4,.sky-responsive-container-lg sky-column.sky-column-xs-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-5,.sky-responsive-container-sm sky-column.sky-column-xs-5,.sky-responsive-container-md sky-column.sky-column-xs-5,.sky-responsive-container-lg sky-column.sky-column-xs-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-6,.sky-responsive-container-sm sky-column.sky-column-xs-6,.sky-responsive-container-md sky-column.sky-column-xs-6,.sky-responsive-container-lg sky-column.sky-column-xs-6{width:50%}.sky-responsive-container-xs sky-column.sky-column-xs-7,.sky-responsive-container-sm sky-column.sky-column-xs-7,.sky-responsive-container-md sky-column.sky-column-xs-7,.sky-responsive-container-lg sky-column.sky-column-xs-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-8,.sky-responsive-container-sm sky-column.sky-column-xs-8,.sky-responsive-container-md sky-column.sky-column-xs-8,.sky-responsive-container-lg sky-column.sky-column-xs-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-9,.sky-responsive-container-sm sky-column.sky-column-xs-9,.sky-responsive-container-md sky-column.sky-column-xs-9,.sky-responsive-container-lg sky-column.sky-column-xs-9{width:75%}.sky-responsive-container-xs sky-column.sky-column-xs-10,.sky-responsive-container-sm sky-column.sky-column-xs-10,.sky-responsive-container-md sky-column.sky-column-xs-10,.sky-responsive-container-lg sky-column.sky-column-xs-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-11,.sky-responsive-container-sm sky-column.sky-column-xs-11,.sky-responsive-container-md sky-column.sky-column-xs-11,.sky-responsive-container-lg sky-column.sky-column-xs-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-12,.sky-responsive-container-sm sky-column.sky-column-xs-12,.sky-responsive-container-md sky-column.sky-column-xs-12,.sky-responsive-container-lg sky-column.sky-column-xs-12{width:100%}.sky-responsive-container-xs sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-sm sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-md sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-lg sky-column:not([class*=sky-column-xs-]){width:100%}@media (min-width: 768px){sky-column.sky-column-sm-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-sm-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-sm-3{width:25%}sky-column.sky-column-sm-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-sm-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-sm-6{width:50%}sky-column.sky-column-sm-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-sm-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-sm-9{width:75%}sky-column.sky-column-sm-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-sm-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-sm-12{width:100%}}.sky-responsive-container-sm sky-column.sky-column-sm-1,.sky-responsive-container-md sky-column.sky-column-sm-1,.sky-responsive-container-lg sky-column.sky-column-sm-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-2,.sky-responsive-container-md sky-column.sky-column-sm-2,.sky-responsive-container-lg sky-column.sky-column-sm-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-3,.sky-responsive-container-md sky-column.sky-column-sm-3,.sky-responsive-container-lg sky-column.sky-column-sm-3{width:25%}.sky-responsive-container-sm sky-column.sky-column-sm-4,.sky-responsive-container-md sky-column.sky-column-sm-4,.sky-responsive-container-lg sky-column.sky-column-sm-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-5,.sky-responsive-container-md sky-column.sky-column-sm-5,.sky-responsive-container-lg sky-column.sky-column-sm-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-6,.sky-responsive-container-md sky-column.sky-column-sm-6,.sky-responsive-container-lg sky-column.sky-column-sm-6{width:50%}.sky-responsive-container-sm sky-column.sky-column-sm-7,.sky-responsive-container-md sky-column.sky-column-sm-7,.sky-responsive-container-lg sky-column.sky-column-sm-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-8,.sky-responsive-container-md sky-column.sky-column-sm-8,.sky-responsive-container-lg sky-column.sky-column-sm-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-9,.sky-responsive-container-md sky-column.sky-column-sm-9,.sky-responsive-container-lg sky-column.sky-column-sm-9{width:75%}.sky-responsive-container-sm sky-column.sky-column-sm-10,.sky-responsive-container-md sky-column.sky-column-sm-10,.sky-responsive-container-lg sky-column.sky-column-sm-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-11,.sky-responsive-container-md sky-column.sky-column-sm-11,.sky-responsive-container-lg sky-column.sky-column-sm-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-12,.sky-responsive-container-md sky-column.sky-column-sm-12,.sky-responsive-container-lg sky-column.sky-column-sm-12{width:100%}@media (min-width: 992px){sky-column.sky-column-md-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-md-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-md-3{width:25%}sky-column.sky-column-md-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-md-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-md-6{width:50%}sky-column.sky-column-md-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-md-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-md-9{width:75%}sky-column.sky-column-md-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-md-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-md-12{width:100%}}.sky-responsive-container-md sky-column.sky-column-md-1,.sky-responsive-container-lg sky-column.sky-column-md-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-2,.sky-responsive-container-lg sky-column.sky-column-md-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-3,.sky-responsive-container-lg sky-column.sky-column-md-3{width:25%}.sky-responsive-container-md sky-column.sky-column-md-4,.sky-responsive-container-lg sky-column.sky-column-md-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-5,.sky-responsive-container-lg sky-column.sky-column-md-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-6,.sky-responsive-container-lg sky-column.sky-column-md-6{width:50%}.sky-responsive-container-md sky-column.sky-column-md-7,.sky-responsive-container-lg sky-column.sky-column-md-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-8,.sky-responsive-container-lg sky-column.sky-column-md-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-9,.sky-responsive-container-lg sky-column.sky-column-md-9{width:75%}.sky-responsive-container-md sky-column.sky-column-md-10,.sky-responsive-container-lg sky-column.sky-column-md-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-11,.sky-responsive-container-lg sky-column.sky-column-md-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-12,.sky-responsive-container-lg sky-column.sky-column-md-12{width:100%}@media (min-width: 1200px){sky-column.sky-column-lg-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-lg-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-lg-3{width:25%}sky-column.sky-column-lg-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-lg-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-lg-6{width:50%}sky-column.sky-column-lg-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-lg-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-lg-9{width:75%}sky-column.sky-column-lg-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-lg-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-lg-12{width:100%}}.sky-responsive-container-lg sky-column.sky-column-lg-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-3{width:25%}.sky-responsive-container-lg sky-column.sky-column-lg-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-6{width:50%}.sky-responsive-container-lg sky-column.sky-column-lg-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-9{width:75%}.sky-responsive-container-lg sky-column.sky-column-lg-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-12{width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-column', encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["sky-column.sky-column{padding-right:15px;padding-left:15px;width:100%;min-height:1px}.sky-theme-modern sky-column.sky-column{padding-right:30px;padding-left:30px}.sky-fluid-grid-gutter-size-small sky-column.sky-column{padding-right:5px;padding-left:5px}.sky-fluid-grid-gutter-size-medium sky-column.sky-column{padding-right:10px;padding-left:10px}.sky-theme-modern .sky-fluid-grid-gutter-size-small sky-column.sky-column{padding-right:10px;padding-left:10px}.sky-theme-modern .sky-fluid-grid-gutter-size-medium sky-column.sky-column{padding-right:15px;padding-left:15px}sky-column.sky-column-xs-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-xs-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-xs-3{width:25%}sky-column.sky-column-xs-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-xs-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-xs-6{width:50%}sky-column.sky-column-xs-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-xs-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-xs-9{width:75%}sky-column.sky-column-xs-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-xs-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-xs-12{width:100%}sky-column:not([class*=sky-column-xs-]){width:100%}.sky-responsive-container-xs sky-column.sky-column-xs-1,.sky-responsive-container-sm sky-column.sky-column-xs-1,.sky-responsive-container-md sky-column.sky-column-xs-1,.sky-responsive-container-lg sky-column.sky-column-xs-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-2,.sky-responsive-container-sm sky-column.sky-column-xs-2,.sky-responsive-container-md sky-column.sky-column-xs-2,.sky-responsive-container-lg sky-column.sky-column-xs-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-3,.sky-responsive-container-sm sky-column.sky-column-xs-3,.sky-responsive-container-md sky-column.sky-column-xs-3,.sky-responsive-container-lg sky-column.sky-column-xs-3{width:25%}.sky-responsive-container-xs sky-column.sky-column-xs-4,.sky-responsive-container-sm sky-column.sky-column-xs-4,.sky-responsive-container-md sky-column.sky-column-xs-4,.sky-responsive-container-lg sky-column.sky-column-xs-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-5,.sky-responsive-container-sm sky-column.sky-column-xs-5,.sky-responsive-container-md sky-column.sky-column-xs-5,.sky-responsive-container-lg sky-column.sky-column-xs-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-6,.sky-responsive-container-sm sky-column.sky-column-xs-6,.sky-responsive-container-md sky-column.sky-column-xs-6,.sky-responsive-container-lg sky-column.sky-column-xs-6{width:50%}.sky-responsive-container-xs sky-column.sky-column-xs-7,.sky-responsive-container-sm sky-column.sky-column-xs-7,.sky-responsive-container-md sky-column.sky-column-xs-7,.sky-responsive-container-lg sky-column.sky-column-xs-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-8,.sky-responsive-container-sm sky-column.sky-column-xs-8,.sky-responsive-container-md sky-column.sky-column-xs-8,.sky-responsive-container-lg sky-column.sky-column-xs-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-9,.sky-responsive-container-sm sky-column.sky-column-xs-9,.sky-responsive-container-md sky-column.sky-column-xs-9,.sky-responsive-container-lg sky-column.sky-column-xs-9{width:75%}.sky-responsive-container-xs sky-column.sky-column-xs-10,.sky-responsive-container-sm sky-column.sky-column-xs-10,.sky-responsive-container-md sky-column.sky-column-xs-10,.sky-responsive-container-lg sky-column.sky-column-xs-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-11,.sky-responsive-container-sm sky-column.sky-column-xs-11,.sky-responsive-container-md sky-column.sky-column-xs-11,.sky-responsive-container-lg sky-column.sky-column-xs-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-xs sky-column.sky-column-xs-12,.sky-responsive-container-sm sky-column.sky-column-xs-12,.sky-responsive-container-md sky-column.sky-column-xs-12,.sky-responsive-container-lg sky-column.sky-column-xs-12{width:100%}.sky-responsive-container-xs sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-sm sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-md sky-column:not([class*=sky-column-xs-]),.sky-responsive-container-lg sky-column:not([class*=sky-column-xs-]){width:100%}@media (min-width: 768px){sky-column.sky-column-sm-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-sm-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-sm-3{width:25%}sky-column.sky-column-sm-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-sm-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-sm-6{width:50%}sky-column.sky-column-sm-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-sm-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-sm-9{width:75%}sky-column.sky-column-sm-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-sm-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-sm-12{width:100%}}.sky-responsive-container-sm sky-column.sky-column-sm-1,.sky-responsive-container-md sky-column.sky-column-sm-1,.sky-responsive-container-lg sky-column.sky-column-sm-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-2,.sky-responsive-container-md sky-column.sky-column-sm-2,.sky-responsive-container-lg sky-column.sky-column-sm-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-3,.sky-responsive-container-md sky-column.sky-column-sm-3,.sky-responsive-container-lg sky-column.sky-column-sm-3{width:25%}.sky-responsive-container-sm sky-column.sky-column-sm-4,.sky-responsive-container-md sky-column.sky-column-sm-4,.sky-responsive-container-lg sky-column.sky-column-sm-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-5,.sky-responsive-container-md sky-column.sky-column-sm-5,.sky-responsive-container-lg sky-column.sky-column-sm-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-6,.sky-responsive-container-md sky-column.sky-column-sm-6,.sky-responsive-container-lg sky-column.sky-column-sm-6{width:50%}.sky-responsive-container-sm sky-column.sky-column-sm-7,.sky-responsive-container-md sky-column.sky-column-sm-7,.sky-responsive-container-lg sky-column.sky-column-sm-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-8,.sky-responsive-container-md sky-column.sky-column-sm-8,.sky-responsive-container-lg sky-column.sky-column-sm-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-9,.sky-responsive-container-md sky-column.sky-column-sm-9,.sky-responsive-container-lg sky-column.sky-column-sm-9{width:75%}.sky-responsive-container-sm sky-column.sky-column-sm-10,.sky-responsive-container-md sky-column.sky-column-sm-10,.sky-responsive-container-lg sky-column.sky-column-sm-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-11,.sky-responsive-container-md sky-column.sky-column-sm-11,.sky-responsive-container-lg sky-column.sky-column-sm-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-sm sky-column.sky-column-sm-12,.sky-responsive-container-md sky-column.sky-column-sm-12,.sky-responsive-container-lg sky-column.sky-column-sm-12{width:100%}@media (min-width: 992px){sky-column.sky-column-md-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-md-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-md-3{width:25%}sky-column.sky-column-md-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-md-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-md-6{width:50%}sky-column.sky-column-md-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-md-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-md-9{width:75%}sky-column.sky-column-md-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-md-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-md-12{width:100%}}.sky-responsive-container-md sky-column.sky-column-md-1,.sky-responsive-container-lg sky-column.sky-column-md-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-2,.sky-responsive-container-lg sky-column.sky-column-md-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-3,.sky-responsive-container-lg sky-column.sky-column-md-3{width:25%}.sky-responsive-container-md sky-column.sky-column-md-4,.sky-responsive-container-lg sky-column.sky-column-md-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-5,.sky-responsive-container-lg sky-column.sky-column-md-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-6,.sky-responsive-container-lg sky-column.sky-column-md-6{width:50%}.sky-responsive-container-md sky-column.sky-column-md-7,.sky-responsive-container-lg sky-column.sky-column-md-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-8,.sky-responsive-container-lg sky-column.sky-column-md-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-9,.sky-responsive-container-lg sky-column.sky-column-md-9{width:75%}.sky-responsive-container-md sky-column.sky-column-md-10,.sky-responsive-container-lg sky-column.sky-column-md-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-11,.sky-responsive-container-lg sky-column.sky-column-md-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-md sky-column.sky-column-md-12,.sky-responsive-container-lg sky-column.sky-column-md-12{width:100%}@media (min-width: 1200px){sky-column.sky-column-lg-1{width:calc(1 / 12 * 100%)}sky-column.sky-column-lg-2{width:calc(2 / 12 * 100%)}sky-column.sky-column-lg-3{width:25%}sky-column.sky-column-lg-4{width:calc(4 / 12 * 100%)}sky-column.sky-column-lg-5{width:calc(5 / 12 * 100%)}sky-column.sky-column-lg-6{width:50%}sky-column.sky-column-lg-7{width:calc(7 / 12 * 100%)}sky-column.sky-column-lg-8{width:calc(8 / 12 * 100%)}sky-column.sky-column-lg-9{width:75%}sky-column.sky-column-lg-10{width:calc(10 / 12 * 100%)}sky-column.sky-column-lg-11{width:calc(11 / 12 * 100%)}sky-column.sky-column-lg-12{width:100%}}.sky-responsive-container-lg sky-column.sky-column-lg-1{width:calc(1 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-2{width:calc(2 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-3{width:25%}.sky-responsive-container-lg sky-column.sky-column-lg-4{width:calc(4 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-5{width:calc(5 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-6{width:50%}.sky-responsive-container-lg sky-column.sky-column-lg-7{width:calc(7 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-8{width:calc(8 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-9{width:75%}.sky-responsive-container-lg sky-column.sky-column-lg-10{width:calc(10 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-11{width:calc(11 / 12 * 100%)}.sky-responsive-container-lg sky-column.sky-column-lg-12{width:100%}\n"] }]
+        }], propDecorators: { screenXSmall: [{
+                type: Input
+            }], screenSmall: [{
+                type: Input
+            }], screenMedium: [{
+                type: Input
+            }], screenLarge: [{
+                type: Input
+            }], classnames: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Wraps the fluid grid to ensure proper spacing. Without the wrapper, the
+ * alignment, padding, and margins do not behave as expected.
+ */
+class SkyFluidGridComponent {
+    /**
+     * Disables the outer left and right margin of the fluid grid container.
+     * @default false
+     */
+    set disableMargin(value) {
+        this._disableMargin = value;
+    }
+    get disableMargin() {
+        return this._disableMargin || false;
+    }
+    /**
+     * Specifies a `SkyFluidGridGutterSizeType` to define the size of the padding
+     * between columns. Options include: `any`, `1`, `2`, `"small"`, `"medium"`, and `"large"`.
+     * @default "large"
+     */
+    set gutterSize(value) {
+        this._gutterSize = value;
+    }
+    get gutterSize() {
+        return this._gutterSize === undefined ? 'large' : this._gutterSize;
+    }
+    /**
+     * @internal
+     */
+    get gutterSizeResolved() {
+        // Before this change, the template did a `==` comparison, implicitly converting numerical
+        // string values to their numeric values before comparing them. Checking for the numerical
+        // string value in addition to the values allowed by the type maintains this behavior.
+        switch (this.gutterSize) {
+            case 'medium':
+            case SkyFluidGridGutterSize.Medium:
+            case SkyFluidGridGutterSize.Medium.toString():
+                return 'medium';
+            case 'small':
+            case SkyFluidGridGutterSize.Small:
+            case SkyFluidGridGutterSize.Small.toString():
+                return 'small';
+            default:
+                return 'large';
+        }
+    }
+}
+SkyFluidGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFluidGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyFluidGridComponent, selector: "sky-fluid-grid", inputs: { disableMargin: "disableMargin", gutterSize: "gutterSize" }, ngImport: i0, template: "<div\n  class=\"sky-fluid-grid\"\n  [ngClass]=\"{\n    'sky-fluid-grid-gutter-size-small': gutterSizeResolved === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSizeResolved === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSizeResolved === 'large',\n    'sky-fluid-grid-no-margin': disableMargin\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-fluid-grid-gutter-size-small{padding-left:5px;padding-right:5px}.sky-fluid-grid-gutter-size-medium{padding-left:10px;padding-right:10px}.sky-fluid-grid-gutter-size-large{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-small{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-medium{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-large{padding-left:30px;padding-right:30px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-fluid-grid', template: "<div\n  class=\"sky-fluid-grid\"\n  [ngClass]=\"{\n    'sky-fluid-grid-gutter-size-small': gutterSizeResolved === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSizeResolved === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSizeResolved === 'large',\n    'sky-fluid-grid-no-margin': disableMargin\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-fluid-grid-gutter-size-small{padding-left:5px;padding-right:5px}.sky-fluid-grid-gutter-size-medium{padding-left:10px;padding-right:10px}.sky-fluid-grid-gutter-size-large{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-small{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-medium{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-large{padding-left:30px;padding-right:30px}\n"] }]
+        }], propDecorators: { disableMargin: [{
+                type: Input
+            }], gutterSize: [{
+                type: Input
+            }] } });
+
+/**
+ * Displays a row within the `sky-fluid-grid` wrapper. Previously, you could display a row
+ * without a wrapper, but we no longer officially support that option.
+ */
+class SkyRowComponent {
+    constructor() {
+        /**
+         * Indicates whether to reverse the display order for columns in the row.
+         * @default false
+         */
+        this.reverseColumnOrder = false;
+    }
+}
+SkyRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyRowComponent, selector: "sky-row", inputs: { reverseColumnOrder: "reverseColumnOrder" }, ngImport: i0, template: "<div class=\"sky-row\" [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-60px;margin-right:-60px}:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width: 768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-row', template: "<div class=\"sky-row\" [ngClass]=\"{ 'sky-row-reverse': reverseColumnOrder }\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-row{display:flex;flex-direction:row;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-5px;margin-right:-5px}:host-context(.sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small) .sky-row{margin-left:-10px;margin-right:-10px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-small.sky-fluid-grid-no-margin) .sky-row{margin-left:-20px;margin-right:-20px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium) .sky-row{margin-left:-15px;margin-right:-15px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-medium.sky-fluid-grid-no-margin) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large) .sky-row{margin-left:-30px;margin-right:-30px}:host-context(.sky-theme-modern .sky-fluid-grid-gutter-size-large.sky-fluid-grid-no-margin) .sky-row{margin-left:-60px;margin-right:-60px}:host .sky-row.sky-row-reverse{flex-direction:row}:host-context(.sky-responsive-container-xs) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row}@media (min-width: 768px){:host .sky-row.sky-row-reverse{flex-direction:row-reverse}}:host-context(.sky-responsive-container-sm) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-md) .sky-row.sky-row-reverse,:host-context(.sky-responsive-container-lg) .sky-row.sky-row-reverse{flex-direction:row-reverse}:host-context(.sky-theme-modern) .sky-row{margin-left:-30px;margin-right:-30px}.sky-theme-modern .sky-row{margin-left:-30px;margin-right:-30px}\n"] }]
+        }], propDecorators: { reverseColumnOrder: [{
+                type: Input
+            }] } });
+
+class SkyFluidGridModule {
+}
+SkyFluidGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFluidGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridModule, declarations: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent], imports: [CommonModule], exports: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent] });
+SkyFluidGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFluidGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent],
+                    exports: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent],
+                }]
+        }] });
+
+const tokenRegex = /(\{\d+\})/;
+class SkyFormatComponent {
+    /**
+     * The tokenized string that represents the template. Tokens use the `{n}` notation
+     * where `n` is the ordinal of the item to replace the token.
+     */
+    set text(value) {
+        this._text = value;
+        this.updateItemsForDisplay();
+    }
+    get text() {
+        return this._text;
+    }
+    /**
+     * An array of `TemplateRef` objects to be placed in the template, where the `nth`
+     * item is placed at the `{n}` location in the template.
+     */
+    set args(value) {
+        this._args = value;
+        this.updateItemsForDisplay();
+    }
+    get args() {
+        return this._args;
+    }
+    updateItemsForDisplay() {
+        this.itemsForDisplay = [];
+        if (this.text && this.args) {
+            const textParts = this.text.split(tokenRegex);
+            for (const textPart of textParts) {
+                // Disregard empty strings.
+                if (textPart) {
+                    const item = {};
+                    if (tokenRegex.test(textPart)) {
+                        const valueIndex = +textPart.substring(1, textPart.length - 1);
+                        item.templateRef = this.args[valueIndex];
+                    }
+                    else {
+                        item.text = textPart;
+                    }
+                    this.itemsForDisplay.push(item);
+                }
+            }
+        }
+    }
+}
+SkyFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyFormatComponent, selector: "sky-format", inputs: { text: "text", args: "args" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <!--\n    The following ng-container must be on one line so no extra whitespace is introduced.\n  -->\n  <ng-container *ngIf=\"item.text; else item.templateRef\">{{\n    item.text\n  }}</ng-container>\n</ng-container>\n", directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-format', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <!--\n    The following ng-container must be on one line so no extra whitespace is introduced.\n  -->\n  <ng-container *ngIf=\"item.text; else item.templateRef\">{{\n    item.text\n  }}</ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], args: [{
+                type: Input
+            }] } });
+
+class SkyFormatModule {
+}
+SkyFormatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyFormatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatModule, declarations: [SkyFormatComponent], imports: [CommonModule], exports: [SkyFormatComponent] });
+SkyFormatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyFormatModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyFormatComponent],
+                    imports: [CommonModule],
+                    exports: [SkyFormatComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyPageThemeAdapterService {
+    addTheme() {
+        if (!this.styleEl) {
+            this.styleEl = document.createElement('style');
+            this.styleEl.appendChild(document.createTextNode('body { background-color: #fff; }'));
+            document.head.appendChild(this.styleEl);
+        }
+    }
+    removeTheme() {
+        if (this.styleEl) {
+            document.head.removeChild(this.styleEl);
+            this.styleEl = undefined;
+        }
+    }
+}
+SkyPageThemeAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageThemeAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyPageThemeAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageThemeAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Resets the SPA's background to white and adds the `sky-theme-default` CSS class to the host
+ * element to let consumers override CSS styling. Consumers can override any element by writing
+ * CSS selectors like this: `:host-context(.sky-theme-default) .my-class {}`.
+ */
+class SkyPageComponent {
+    constructor(themeAdapter) {
+        this.themeAdapter = themeAdapter;
+    }
+    ngOnInit() {
+        this.themeAdapter.addTheme();
+    }
+    ngOnDestroy() {
+        this.themeAdapter.removeTheme();
+    }
+}
+SkyPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageComponent, deps: [{ token: SkyPageThemeAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageComponent, selector: "sky-page", providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div class=\"sky-theme-default\">\n  <ng-content></ng-content>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page', providers: [SkyPageThemeAdapterService], template: "<div class=\"sky-theme-default\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: SkyPageThemeAdapterService }]; } });
+
+class SkyPageModule {
+}
+SkyPageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent], exports: [SkyPageComponent] });
+SkyPageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPageComponent],
+                    exports: [SkyPageComponent],
+                }]
+        }] });
+
+/**
+ * Displays messages that require immediate attention as [alerts](https://developer.blackbaud.com/skyux/components/alert) within
+ * the page summary.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryAlertComponent {
+}
+SkyPageSummaryAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryAlertComponent, selector: "sky-page-summary-alert", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["::ng-deep .sky-alert{margin-top:0;margin-bottom:20px;line-height:initial}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-alert', template: "<ng-content></ng-content>\n", styles: ["::ng-deep .sky-alert{margin-top:0;margin-bottom:20px;line-height:initial}\n"] }]
+        }] });
+
+/**
+ * Displays content in the arbitrary section of the page summary.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryContentComponent {
+}
+SkyPageSummaryContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryContentComponent, selector: "sky-page-summary-content", ngImport: i0, template: "<div class=\"sky-page-summary-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-page-summary-content{margin-top:20px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-content', template: "<div class=\"sky-page-summary-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-page-summary-content{margin-top:20px}\n"] }]
+        }] });
+
+/**
+ * Displays an image in the page summary to identify a record
+ * or help users complete a core task.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryImageComponent {
+}
+SkyPageSummaryImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryImageComponent, selector: "sky-page-summary-image", ngImport: i0, template: "<div class=\"sky-page-summary-image\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-page-summary-image{width:100px;margin-left:auto;margin-right:auto;margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-page-summary-image,:host-context(.sky-responsive-container-sm) .sky-page-summary-image,:host-context(.sky-responsive-container-md) .sky-page-summary-image,:host-context(.sky-responsive-container-lg) .sky-page-summary-image{width:100px;margin-left:auto;margin-right:auto;margin-bottom:10px}@media (min-width: 768px){:host .sky-page-summary-image{width:120px;flex:0 0 120px;margin:initial}}:host-context(.sky-responsive-container-sm) .sky-page-summary-image,:host-context(.sky-responsive-container-md) .sky-page-summary-image,:host-context(.sky-responsive-container-lg) .sky-page-summary-image{width:120px;flex:0 0 120px;margin:initial}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-image', template: "<div class=\"sky-page-summary-image\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-page-summary-image{width:100px;margin-left:auto;margin-right:auto;margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-page-summary-image,:host-context(.sky-responsive-container-sm) .sky-page-summary-image,:host-context(.sky-responsive-container-md) .sky-page-summary-image,:host-context(.sky-responsive-container-lg) .sky-page-summary-image{width:100px;margin-left:auto;margin-right:auto;margin-bottom:10px}@media (min-width: 768px){:host .sky-page-summary-image{width:120px;flex:0 0 120px;margin:initial}}:host-context(.sky-responsive-container-sm) .sky-page-summary-image,:host-context(.sky-responsive-container-md) .sky-page-summary-image,:host-context(.sky-responsive-container-lg) .sky-page-summary-image{width:120px;flex:0 0 120px;margin:initial}\n"] }]
+        }] });
+
+/**
+ * Highlights important information about a page in the key information section of the
+ * page summary.
+ */
+class SkyPageSummaryKeyInfoComponent {
+}
+SkyPageSummaryKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryKeyInfoComponent, selector: "sky-page-summary-key-info", ngImport: i0, template: "<div class=\"sky-page-summary-key-info\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-page-summary-key-info{margin-top:20px}:host-context(.sky-responsive-container-xs) .sky-page-summary-key-info,:host-context(.sky-responsive-container-sm) .sky-page-summary-key-info,:host-context(.sky-responsive-container-md) .sky-page-summary-key-info,:host-context(.sky-responsive-container-lg) .sky-page-summary-key-info{margin-top:20px}@media (min-width: 768px){:host .sky-page-summary-key-info{margin-top:initial}}:host-context(.sky-responsive-container-sm) .sky-page-summary-key-info,:host-context(.sky-responsive-container-md) .sky-page-summary-key-info,:host-context(.sky-responsive-container-lg) .sky-page-summary-key-info{margin-top:initial}.sky-page-summary-key-info ::ng-deep .sky-key-info{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryKeyInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-key-info', template: "<div class=\"sky-page-summary-key-info\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host .sky-page-summary-key-info{margin-top:20px}:host-context(.sky-responsive-container-xs) .sky-page-summary-key-info,:host-context(.sky-responsive-container-sm) .sky-page-summary-key-info,:host-context(.sky-responsive-container-md) .sky-page-summary-key-info,:host-context(.sky-responsive-container-lg) .sky-page-summary-key-info{margin-top:20px}@media (min-width: 768px){:host .sky-page-summary-key-info{margin-top:initial}}:host-context(.sky-responsive-container-sm) .sky-page-summary-key-info,:host-context(.sky-responsive-container-md) .sky-page-summary-key-info,:host-context(.sky-responsive-container-lg) .sky-page-summary-key-info{margin-top:initial}.sky-page-summary-key-info ::ng-deep .sky-key-info{display:block}\n"] }]
+        }] });
+
+/**
+ * Displays [labels](https://developer.blackbaud.com/skyux/components/label)
+ * to highlight important status information about a page's content.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryStatusComponent {
+}
+SkyPageSummaryStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryStatusComponent, selector: "sky-page-summary-status", ngImport: i0, template: "<div class=\"sky-page-summary-status\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-page-summary-status{margin-top:10px}.sky-page-summary-status ::ng-deep .sky-label{margin-right:5px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-status', template: "<div class=\"sky-page-summary-status\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-page-summary-status{margin-top:10px}.sky-page-summary-status ::ng-deep .sky-label{margin-right:5px}\n"] }]
+        }] });
+
+/**
+ * Specifies a subtitle to identify the page content.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummarySubtitleComponent {
+}
+SkyPageSummarySubtitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummarySubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummarySubtitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummarySubtitleComponent, selector: "sky-page-summary-subtitle", ngImport: i0, template: "<p class=\"sky-page-summary-subtitle sky-emphasized\">\n  <ng-content></ng-content>\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummarySubtitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-subtitle', template: "<p class=\"sky-page-summary-subtitle sky-emphasized\">\n  <ng-content></ng-content>\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] }]
+        }] });
+
+/**
+ * Specifies a title to identify the page content.
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryTitleComponent {
+}
+SkyPageSummaryTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryTitleComponent, selector: "sky-page-summary-title", ngImport: i0, template: "<h1 class=\"sky-page-summary-title sky-page-heading\">\n  <ng-content></ng-content>\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary-title', template: "<h1 class=\"sky-page-summary-title sky-page-heading\">\n  <ng-content></ng-content>\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyPageSummaryAdapterService {
+    updateKeyInfoLocation(elRef, isXS) {
+        const el = elRef.nativeElement;
+        const keyInfoContainerEl = el.querySelector('.sky-page-summary-key-info-container');
+        if (isXS) {
+            el.querySelector('.sky-page-summary-key-info-xs').appendChild(keyInfoContainerEl);
+        }
+        else {
+            el.querySelector('.sky-page-summary-key-info-sm').appendChild(keyInfoContainerEl);
+        }
+    }
+}
+SkyPageSummaryAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyPageSummaryAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the components to display in the page summary.
+ */
+class SkyPageSummaryComponent {
+    constructor(elRef, adapter, mediaQueryService) {
+        this.elRef = elRef;
+        this.adapter = adapter;
+        this.mediaQueryService = mediaQueryService;
+    }
+    get hasKeyInfo() {
+        return this.keyInfoComponents.length > 0;
+    }
+    ngAfterViewInit() {
+        this.breakpointSubscription = this.mediaQueryService.subscribe((args) => {
+            this.adapter.updateKeyInfoLocation(this.elRef, args === SkyMediaBreakpoints.xs);
+        });
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.breakpointSubscription) {
+            this.breakpointSubscription.unsubscribe();
+        }
+    }
+}
+SkyPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryComponent, deps: [{ token: i0.ElementRef }, { token: SkyPageSummaryAdapterService }, { token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyPageSummaryComponent, selector: "sky-page-summary", providers: [SkyPageSummaryAdapterService], queries: [{ propertyName: "keyInfoComponents", predicate: SkyPageSummaryKeyInfoComponent, read: SkyPageSummaryKeyInfoComponent }], ngImport: i0, template: "<div\n  class=\"sky-page-summary\"\n  [ngClass]=\"{ 'sky-page-summary-with-key-info': hasKeyInfo }\"\n>\n  <ng-content select=\"sky-page-summary-alert\"></ng-content>\n  <div class=\"sky-page-summary-row\">\n    <div class=\"sky-page-summary-left\">\n      <ng-content select=\"sky-page-summary-image\"></ng-content>\n      <div class=\"sky-page-summary-data\">\n        <ng-content select=\"sky-page-summary-title\"></ng-content>\n        <ng-content select=\"sky-page-summary-subtitle\"></ng-content>\n        <ng-content select=\"sky-page-summary-status\"></ng-content>\n        <div class=\"sky-page-summary-key-info-xs\"></div>\n        <ng-content select=\"sky-page-summary-content\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-page-summary-key-info-sm\">\n      <div class=\"sky-page-summary-key-info-container\">\n        <ng-content select=\"sky-page-summary-key-info\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-page-summary{background-color:#fff;padding:20px 15px}.sky-page-summary-row{align-items:stretch;display:flex}:host .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}@media (min-width: 768px){:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host .sky-page-summary-left{align-items:stretch;display:flex}:host .sky-page-summary-data{flex-grow:1}}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{align-items:stretch;display:flex}:host-context(.sky-responsive-container-sm) .sky-page-summary-data,:host-context(.sky-responsive-container-md) .sky-page-summary-data,:host-context(.sky-responsive-container-lg) .sky-page-summary-data{flex-grow:1}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page-summary', providers: [SkyPageSummaryAdapterService], template: "<div\n  class=\"sky-page-summary\"\n  [ngClass]=\"{ 'sky-page-summary-with-key-info': hasKeyInfo }\"\n>\n  <ng-content select=\"sky-page-summary-alert\"></ng-content>\n  <div class=\"sky-page-summary-row\">\n    <div class=\"sky-page-summary-left\">\n      <ng-content select=\"sky-page-summary-image\"></ng-content>\n      <div class=\"sky-page-summary-data\">\n        <ng-content select=\"sky-page-summary-title\"></ng-content>\n        <ng-content select=\"sky-page-summary-subtitle\"></ng-content>\n        <ng-content select=\"sky-page-summary-status\"></ng-content>\n        <div class=\"sky-page-summary-key-info-xs\"></div>\n        <ng-content select=\"sky-page-summary-content\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-page-summary-key-info-sm\">\n      <div class=\"sky-page-summary-key-info-container\">\n        <ng-content select=\"sky-page-summary-key-info\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-page-summary{background-color:#fff;padding:20px 15px}.sky-page-summary-row{align-items:stretch;display:flex}:host .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}@media (min-width: 768px){:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host .sky-page-summary-left{align-items:stretch;display:flex}:host .sky-page-summary-data{flex-grow:1}}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{align-items:stretch;display:flex}:host-context(.sky-responsive-container-sm) .sky-page-summary-data,:host-context(.sky-responsive-container-md) .sky-page-summary-data,:host-context(.sky-responsive-container-lg) .sky-page-summary-data{flex-grow:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyPageSummaryAdapterService }, { type: i1.SkyMediaQueryService }]; }, propDecorators: { keyInfoComponents: [{
+                type: ContentChildren,
+                args: [SkyPageSummaryKeyInfoComponent, {
+                        read: SkyPageSummaryKeyInfoComponent,
+                    }]
+            }] } });
+
+class SkyPageSummaryModule {
+}
+SkyPageSummaryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyPageSummaryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryModule, declarations: [SkyPageSummaryAlertComponent,
+        SkyPageSummaryComponent,
+        SkyPageSummaryContentComponent,
+        SkyPageSummaryImageComponent,
+        SkyPageSummaryKeyInfoComponent,
+        SkyPageSummaryStatusComponent,
+        SkyPageSummarySubtitleComponent,
+        SkyPageSummaryTitleComponent], imports: [CommonModule], exports: [SkyPageSummaryAlertComponent,
+        SkyPageSummaryComponent,
+        SkyPageSummaryContentComponent,
+        SkyPageSummaryImageComponent,
+        SkyPageSummaryKeyInfoComponent,
+        SkyPageSummaryStatusComponent,
+        SkyPageSummarySubtitleComponent,
+        SkyPageSummaryTitleComponent] });
+SkyPageSummaryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyPageSummaryModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyPageSummaryAlertComponent,
+                        SkyPageSummaryComponent,
+                        SkyPageSummaryContentComponent,
+                        SkyPageSummaryImageComponent,
+                        SkyPageSummaryKeyInfoComponent,
+                        SkyPageSummaryStatusComponent,
+                        SkyPageSummarySubtitleComponent,
+                        SkyPageSummaryTitleComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SkyPageSummaryAlertComponent,
+                        SkyPageSummaryComponent,
+                        SkyPageSummaryContentComponent,
+                        SkyPageSummaryImageComponent,
+                        SkyPageSummaryKeyInfoComponent,
+                        SkyPageSummaryStatusComponent,
+                        SkyPageSummarySubtitleComponent,
+                        SkyPageSummaryTitleComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextExpandModalContext {
+}
+
+/**
+ * @internal
+ */
+class SkyTextExpandModalComponent {
+    constructor(context, instance) {
+        this.context = context;
+        this.instance = instance;
+    }
+    close() {
+        this.instance.close();
+    }
+}
+SkyTextExpandModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SkyTextExpandModalContext }, { token: i2$2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextExpandModalComponent, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], components: [{ type: i2$2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i2$2.λ4, selector: "sky-modal-header" }, { type: i2$2.λ2, selector: "sky-modal-content" }, { type: i2$2.λ3, selector: "sky-modal-footer" }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-expand-modal', template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyTextExpandModalContext }, { type: i2$2.SkyModalInstance }]; } });
+
+/**
+ * @internal
+ */
+class SkyTextExpandAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    getContainerHeight(containerEl) {
+        return containerEl.nativeElement.offsetHeight;
+    }
+    setContainerHeight(containerEl, height) {
+        if (height === undefined) {
+            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
+        }
+        else {
+            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
+        }
+    }
+    setText(textEl, text) {
+        textEl.nativeElement.textContent = text;
+    }
+}
+SkyTextExpandAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextExpandAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * Auto-incrementing integer used to generate unique ids for text expand components.
+ */
+let nextId$1 = 0;
+class SkyTextExpandComponent {
+    constructor(resources, modalService, textExpandAdapter) {
+        this.resources = resources;
+        this.modalService = modalService;
+        this.textExpandAdapter = textExpandAdapter;
+        /**
+         * Specifies the maximum number of text characters to display inline when users select the link
+         * to expand the full text. If the text exceeds this limit, then the component expands
+         * the full text in a modal instead.
+         */
+        this.maxExpandedLength = 600;
+        /**
+         * Specifies the maximum number of newline characters to display inline when users select
+         * the link to expand the full text. If the text exceeds this limit, then
+         * the component expands the full text in a modal view instead.
+         */
+        this.maxExpandedNewlines = 2;
+        /**
+         * Indicates whether to replace newline characters in truncated text with spaces.
+         */
+        this.truncateNewlines = true;
+        this.contentSectionId = `sky-text-expand-content-${++nextId$1}`;
+        this.isExpanded = false;
+        this._maxLength = 200;
+    }
+    /**
+     * Specifies the number of text characters to display before truncating the text.
+     * To avoid truncating text in the middle of a word, the component looks for a space
+     * in the 10 characters before the last character.
+     * @default 200
+     */
+    set maxLength(value) {
+        this._maxLength = value;
+        /* istanbul ignore else */
+        if (this.textEl) {
+            this.setup(this.expandedText);
+        }
+    }
+    get maxLength() {
+        return this._maxLength;
+    }
+    /**
+     * Specifies the text to truncate.
+     */
+    set text(value) {
+        /* istanbul ignore else */
+        if (this.textEl) {
+            this.setup(value);
+        }
+    }
+    textExpand() {
+        if (this.isModal) {
+            // Modal View
+            /* istanbul ignore else */
+            /* sanity check */
+            if (!this.isExpanded) {
+                this.modalService.open(SkyTextExpandModalComponent, [
+                    {
+                        provide: SkyTextExpandModalContext,
+                        useValue: {
+                            header: this.expandModalTitle,
+                            text: this.expandedText,
+                        },
+                    },
+                ]);
+            }
+        }
+        else {
+            // Normal View
+            if (!this.isExpanded) {
+                this.setContainerMaxHeight();
+                setTimeout(() => {
+                    this.isExpanded = true;
+                    this.animateText(this.collapsedText, this.expandedText, true);
+                }, 10);
+            }
+            else {
+                this.setContainerMaxHeight();
+                setTimeout(() => {
+                    this.isExpanded = false;
+                    this.animateText(this.expandedText, this.collapsedText, false);
+                }, 10);
+            }
+        }
+    }
+    animationEnd() {
+        // Ensure the correct text is displayed
+        this.textExpandAdapter.setText(this.textEl, this.textToShow);
+        // Set height back to auto so the browser can change the height as needed with window changes
+        this.textExpandAdapter.setContainerHeight(this.containerEl, undefined);
+    }
+    ngAfterContentInit() {
+        forkJoin([
+            this.resources.getString('skyux_text_expand_see_more'),
+            this.resources.getString('skyux_text_expand_see_less'),
+        ])
+            .pipe(take(1))
+            .subscribe((resources) => {
+            this.seeMoreText = resources[0];
+            this.seeLessText = resources[1];
+            this.setup(this.expandedText);
+            /* istanbul ignore else */
+            if (!this.expandModalTitle) {
+                this.resources
+                    .getString('skyux_text_expand_modal_title')
+                    .pipe(take(1))
+                    .subscribe((resource) => {
+                    this.expandModalTitle = resource;
+                });
+            }
+        });
+    }
+    setContainerMaxHeight() {
+        // ensure everything is reset
+        this.animationEnd();
+        /* Before animation is kicked off, ensure that a maxHeight exists */
+        /* Once we have support for angular v4 animations with parameters we can use that instead */
+        const currentHeight = this.textExpandAdapter.getContainerHeight(this.containerEl);
+        this.textExpandAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
+    }
+    setup(value) {
+        if (value) {
+            this.newlineCount = this.getNewlineCount(value);
+            this.collapsedText = this.getTruncatedText(value, this.maxLength);
+            this.expandedText = value;
+            if (this.collapsedText !== value) {
+                this.buttonText = this.seeMoreText;
+                this.isExpanded = false;
+                this.expandable = true;
+                this.isModal =
+                    this.newlineCount > this.maxExpandedNewlines ||
+                        this.expandedText.length > this.maxExpandedLength;
+            }
+            else {
+                this.expandable = false;
+            }
+            this.textToShow = this.collapsedText;
+        }
+        else {
+            this.textToShow = '';
+            this.expandable = false;
+        }
+        this.textExpandAdapter.setText(this.textEl, this.textToShow);
+    }
+    getNewlineCount(value) {
+        const matches = value.match(/\n/gi);
+        if (matches) {
+            return matches.length;
+        }
+        return 0;
+    }
+    getTruncatedText(value, length) {
+        let i;
+        if (this.truncateNewlines) {
+            value = value.replace(/\n+/gi, ' ');
+        }
+        // Jump ahead one character and see if it's a space, and if it isn't,
+        // back up to the first space and break there so a word doesn't get cut
+        // in half.
+        if (length < value.length) {
+            for (i = length; i > length - 10; i--) {
+                if (/\s/.test(value.charAt(i))) {
+                    length = i;
+                    break;
+                }
+            }
+        }
+        return value.substr(0, length);
+    }
+    animateText(previousText, newText, expanding) {
+        const adapter = this.textExpandAdapter;
+        const container = this.containerEl;
+        // Reset max height
+        adapter.setContainerHeight(container, undefined);
+        // Measure the current height so we can animate from it.
+        const currentHeight = adapter.getContainerHeight(container);
+        this.textToShow = newText;
+        adapter.setText(this.textEl, this.textToShow);
+        this.buttonText = expanding ? this.seeLessText : this.seeMoreText;
+        // Measure the new height so we can animate to it.
+        const newHeight = adapter.getContainerHeight(container);
+        /* istanbul ignore if */
+        if (newHeight < currentHeight) {
+            // The new text is smaller than the old text, so put the old text back before doing
+            // the collapse animation to avoid showing a big chunk of whitespace.
+            adapter.setText(this.textEl, previousText);
+        }
+        adapter.setContainerHeight(container, `${currentHeight}px`);
+        // This timeout is necessary due to the browser needing to pick up the non-auto height being set
+        // in order to do the transtion in height correctly. Without it the transition does not fire.
+        setTimeout(() => {
+            adapter.setContainerHeight(container, `${newHeight}px`);
+            /* This resets values if the transition does not get kicked off */
+            setTimeout(() => {
+                this.animationEnd();
+            }, 500);
+        }, 10);
+    }
+}
+SkyTextExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$1.SkyLibResourcesService }, { token: i2$2.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextExpandComponent, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyLibResourcesService }, { type: i2$2.SkyModalService }, { type: SkyTextExpandAdapterService }]; }, propDecorators: { expandModalTitle: [{
+                type: Input
+            }], maxExpandedLength: [{
+                type: Input
+            }], maxExpandedNewlines: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], truncateNewlines: [{
+                type: Input
+            }], containerEl: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }], textEl: [{
+                type: ViewChild,
+                args: ['text', {
+                        read: ElementRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyTextExpandModule {
+}
+SkyTextExpandModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextExpandModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModule, declarations: [SkyTextExpandComponent, SkyTextExpandModalComponent], imports: [SkyI18nModule,
+        SkyLayoutResourcesModule,
+        SkyModalModule,
+        CommonModule], exports: [SkyTextExpandComponent] });
+SkyTextExpandModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModule, imports: [[
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyModalModule,
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTextExpandComponent, SkyTextExpandModalComponent],
+                    imports: [
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyModalModule,
+                        CommonModule,
+                    ],
+                    exports: [SkyTextExpandComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextExpandRepeaterAdapterService {
+    constructor(rendererFactory) {
+        this.rendererFactory = rendererFactory;
+        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+    }
+    getItems(elRef) {
+        return elRef.nativeElement.querySelectorAll('.sky-text-expand-repeater-item');
+    }
+    hideItem(item) {
+        this.renderer.setStyle(item, 'display', 'none');
+    }
+    showItem(item) {
+        this.renderer.setStyle(item, 'display', 'list-item');
+    }
+    getContainerHeight(containerEl) {
+        return containerEl.nativeElement.offsetHeight;
+    }
+    setContainerHeight(containerEl, height) {
+        if (height === undefined) {
+            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
+        }
+        else {
+            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
+        }
+    }
+}
+SkyTextExpandRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyTextExpandRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
+
+/**
+ * Auto-incrementing integer used to generate unique ids for text expand repeater components.
+ */
+let nextId = 0;
+class SkyTextExpandRepeaterComponent {
+    constructor(resources, elRef, textExpandRepeaterAdapter, changeDetector) {
+        this.resources = resources;
+        this.elRef = elRef;
+        this.textExpandRepeaterAdapter = textExpandRepeaterAdapter;
+        this.changeDetector = changeDetector;
+        /**
+         * Specifies the style of bullet to use
+         * @default "unordered"
+         */
+        this.listStyle = 'unordered';
+        this.contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
+        this.isExpanded = false;
+    }
+    ngAfterViewInit() {
+        if (this.contentItems) {
+            this.items = this.textExpandRepeaterAdapter.getItems(this.elRef);
+            for (let i = this.maxItems; i < this.contentItems.length; i++) {
+                this.textExpandRepeaterAdapter.hideItem(this.items[i]);
+            }
+        }
+        forkJoin([
+            this.resources.getString('skyux_text_expand_see_more'),
+            this.resources.getString('skyux_text_expand_see_less'),
+        ])
+            .pipe(take(1))
+            .subscribe((resources) => {
+            this.seeMoreText = resources[0];
+            this.seeLessText = resources[1];
+            /* sanity check */
+            /* istanbul ignore else */
+            if (!this.isExpanded) {
+                this.buttonText = this.seeMoreText;
+            }
+            else {
+                this.buttonText = this.seeLessText;
+            }
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnChanges(changes) {
+        /* istanbul ignore else */
+        if (changes.maxItems || changes.data) {
+            this.setup(this.data);
+        }
+    }
+    animationEnd() {
+        // Ensure the correct items are displayed
+        if (!this.isExpanded) {
+            for (let i = this.maxItems; i < this.contentItems.length; i++) {
+                this.textExpandRepeaterAdapter.hideItem(this.items[i]);
+            }
+        }
+        // Set height back to auto so the browser can change the height as needed with window changes
+        this.textExpandRepeaterAdapter.setContainerHeight(this.containerEl, undefined);
+    }
+    repeaterExpand() {
+        if (!this.isExpanded) {
+            this.setContainerMaxHeight();
+            setTimeout(() => {
+                this.isExpanded = true;
+                this.animateRepeater(true);
+            });
+        }
+        else {
+            this.setContainerMaxHeight();
+            setTimeout(() => {
+                this.isExpanded = false;
+                this.animateRepeater(false);
+            });
+        }
+    }
+    setContainerMaxHeight() {
+        // ensure everything is reset
+        this.animationEnd();
+        /* Before animation is kicked off, ensure that a maxHeight exists */
+        /* Once we have support for angular v4 animations with parameters we can use that instead */
+        const currentHeight = this.textExpandRepeaterAdapter.getContainerHeight(this.containerEl);
+        this.textExpandRepeaterAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
+    }
+    animateRepeater(expanding) {
+        const adapter = this.textExpandRepeaterAdapter;
+        const container = this.containerEl;
+        adapter.setContainerHeight(container, undefined);
+        const currentHeight = adapter.getContainerHeight(container);
+        for (let i = this.maxItems; i < this.contentItems.length; i++) {
+            if (!expanding) {
+                adapter.hideItem(this.items[i]);
+            }
+            else {
+                adapter.showItem(this.items[i]);
+            }
+        }
+        const newHeight = adapter.getContainerHeight(container);
+        if (!expanding) {
+            this.buttonText = this.seeMoreText;
+        }
+        else {
+            this.buttonText = this.seeLessText;
+        }
+        if (newHeight < currentHeight) {
+            // The new text is smaller than the old text, so put the old text back before doing
+            // the collapse animation to avoid showing a big chunk of whitespace.
+            for (let i = this.maxItems; i < this.contentItems.length; i++) {
+                adapter.showItem(this.items[i]);
+            }
+        }
+        adapter.setContainerHeight(container, `${currentHeight}px`);
+        // This timeout is necessary due to the browser needing to pick up the non-auto height being set
+        // in order to do the transtion in height correctly. Without it the transition does not fire.
+        setTimeout(() => {
+            adapter.setContainerHeight(container, `${newHeight}px`);
+            /* This resets values if the transition does not get kicked off */
+            setTimeout(() => {
+                this.animationEnd();
+            }, 500);
+        }, 10);
+    }
+    setup(value) {
+        if (value) {
+            const length = value.length;
+            if (length > this.maxItems) {
+                this.expandable = true;
+                this.buttonText = this.seeMoreText;
+                this.isExpanded = false;
+            }
+            else {
+                this.expandable = false;
+            }
+            this.contentItems = value;
+        }
+        else {
+            this.contentItems = undefined;
+            this.expandable = false;
+        }
+    }
+}
+SkyTextExpandRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [{ token: i1$1.SkyLibResourcesService }, { token: i0.ElementRef }, { token: SkyTextExpandRepeaterAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyTextExpandRepeaterComponent, selector: "sky-text-expand-repeater", inputs: { data: "data", itemTemplate: "itemTemplate", listStyle: "listStyle", maxItems: "maxItems" }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  <ul\n    *ngIf=\"listStyle !== 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-list-style-none': listStyle === 'unstyled'\n    }\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ul>\n  <ol\n    *ngIf=\"listStyle === 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ol>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"contentSectionId\"\n    (click)=\"repeaterExpand()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-see-more-list-style-none':\n        listStyle === 'unstyled'\n    }\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n\n<ng-template let-item #defaultItemTemplate>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  <li *ngFor=\"let item of contentItems\" class=\"sky-text-expand-repeater-item\">\n    <ng-template\n      [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: item }\"\n    ></ng-template>\n  </li>\n</ng-template>\n", styles: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;transition:max-height .25s}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], template: "<div class=\"sky-text-expand-repeater\">\n  <ul\n    *ngIf=\"listStyle !== 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-list-style-none': listStyle === 'unstyled'\n    }\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ul>\n  <ol\n    *ngIf=\"listStyle === 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ol>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"contentSectionId\"\n    (click)=\"repeaterExpand()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-see-more-list-style-none':\n        listStyle === 'unstyled'\n    }\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n\n<ng-template let-item #defaultItemTemplate>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  <li *ngFor=\"let item of contentItems\" class=\"sky-text-expand-repeater-item\">\n    <ng-template\n      [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: item }\"\n    ></ng-template>\n  </li>\n</ng-template>\n", styles: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;transition:max-height .25s}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.SkyLibResourcesService }, { type: i0.ElementRef }, { type: SkyTextExpandRepeaterAdapterService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], listStyle: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], containerEl: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ElementRef,
+                        static: false,
+                    }]
+            }] } });
+
+class SkyTextExpandRepeaterModule {
+}
+SkyTextExpandRepeaterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTextExpandRepeaterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterModule, declarations: [SkyTextExpandRepeaterComponent], imports: [SkyI18nModule, SkyLayoutResourcesModule, CommonModule], exports: [SkyTextExpandRepeaterComponent] });
+SkyTextExpandRepeaterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterModule, imports: [[SkyI18nModule, SkyLayoutResourcesModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyTextExpandRepeaterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTextExpandRepeaterComponent],
+                    imports: [SkyI18nModule, SkyLayoutResourcesModule, CommonModule],
+                    exports: [SkyTextExpandRepeaterComponent],
+                }]
+        }] });
+
+/**
+ * Specifies a container for an item in the toolbar.
+ */
+class SkyToolbarItemComponent {
+}
+SkyToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyToolbarItemComponent, selector: "sky-toolbar-item", ngImport: i0, template: "<div class=\"sky-toolbar-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toolbar-item', template: "<div class=\"sky-toolbar-item\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-toolbar-item{margin-right:5px;margin-bottom:5px}:host-context(.sky-theme-modern) .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}:host-context(.sky-theme-modern) .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-item{margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn{padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled){background-color:transparent;border:none}.sky-theme-modern .sky-toolbar-item ::ng-deep .sky-btn.sky-btn-default:not(:disabled):not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"] }]
+        }] });
+
+/**
+ * Specifies a section to group items within the toolbar. The section displays items in a separate horizontal row.
+ */
+class SkyToolbarSectionComponent {
+}
+SkyToolbarSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyToolbarSectionComponent, selector: "sky-toolbar-section", ngImport: i0, template: "<div class=\"sky-toolbar-section\">\n  <div class=\"sky-toolbar-section-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n", styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern) .sky-toolbar-section{padding:10px 0}.sky-theme-modern .sky-toolbar-section{padding:10px 0}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toolbar-section', template: "<div class=\"sky-toolbar-section\">\n  <div class=\"sky-toolbar-section-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n", styles: [".sky-toolbar-section{display:flex;flex-wrap:nowrap;padding:5px 10px 0;min-height:49px;align-items:center;position:relative;overflow-x:auto}.sky-toolbar-section-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern) .sky-toolbar-section{padding:10px 0}.sky-theme-modern .sky-toolbar-section{padding:10px 0}\n"] }]
+        }] });
+
+/**
+ * Adds a section on the right side of the toolbar for items that substantially alter
+ * the view of the content container. This includes simple filters and view switchers.
+ */
+class SkyToolbarViewActionsComponent {
+}
+SkyToolbarViewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarViewActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyToolbarViewActionsComponent, selector: "sky-toolbar-view-actions", ngImport: i0, template: "<div class=\"sky-toolbar-view-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarViewActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toolbar-view-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-toolbar-view-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{margin-left:auto}.sky-toolbar-view-actions{display:flex;align-items:center;margin-bottom:5px}.sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions{margin-bottom:0}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-toolbar-view-actions{margin-bottom:0}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep>:not(:last-child){margin-top:5px;margin-bottom:5px;margin-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn{background-color:transparent;border:none;padding-left:10px;padding-right:10px}.sky-theme-modern .sky-toolbar-view-actions ::ng-deep .sky-btn:not(:hover):not(:active):not(:focus){box-shadow:inset 0 0 0 1px transparent}\n"] }]
+        }] });
+
+/**
+ * Displays actions for lists, records, and tiles.
+ */
+class SkyToolbarComponent {
+    constructor() {
+        this.hasSections = false;
+    }
+    ngAfterContentInit() {
+        this.hasSections = this.sectionComponents.length > 0;
+    }
+}
+SkyToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyToolbarComponent, selector: "sky-toolbar", queries: [{ propertyName: "sectionComponents", predicate: SkyToolbarSectionComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"sky-toolbar-container\"\n  [ngClass]=\"{ 'sky-toolbar-sectioned': hasSections }\"\n>\n  <ng-content select=\"sky-toolbar-section\"></ng-content>\n  <div class=\"sky-toolbar-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n", styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container{background-color:#fcfcfc}:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container{background-color:#121212}:host-context(.sky-theme-modern) .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}:host-context(.sky-theme-modern) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}:host-context(.sky-theme-modern) .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}:host-context(.sky-theme-modern) .sky-toolbar-sectioned{padding:0}.sky-theme-modern .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}.sky-theme-modern .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}.sky-theme-modern .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}.sky-theme-modern .sky-toolbar-sectioned{padding:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-toolbar', template: "<div\n  class=\"sky-toolbar-container\"\n  [ngClass]=\"{ 'sky-toolbar-sectioned': hasSections }\"\n>\n  <ng-content select=\"sky-toolbar-section\"></ng-content>\n  <div class=\"sky-toolbar-items\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"sky-toolbar-view-actions\"></ng-content>\n</div>\n", styles: [".sky-toolbar-container{min-height:49px;background-color:#fff;padding:5px 10px 0;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;display:flex;flex-wrap:wrap;align-items:center;position:relative}.sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #cdcfd2}.sky-toolbar-container:not(.sky-toolbar-sectioned){flex-wrap:nowrap}.sky-toolbar-sectioned{display:block;padding:0}.sky-toolbar-items{display:flex;flex-wrap:wrap;align-items:center}:host-context(.sky-theme-modern .sky-viewkeeper-fixed) .sky-toolbar-container{background-color:#fcfcfc}:host-context(.sky-theme-modern.sky-theme-mode-dark .sky-viewkeeper-fixed) .sky-toolbar-container{background-color:#121212}:host-context(.sky-theme-modern) .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}:host-context(.sky-theme-modern) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}:host-context(.sky-theme-modern) .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}:host-context(.sky-theme-modern) .sky-toolbar-sectioned{padding:0}.sky-theme-modern .sky-toolbar-container{background-color:transparent;border:none;padding:10px 0}.sky-theme-modern .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#fcfcfc}.sky-theme-modern .sky-toolbar-container ::ng-deep sky-toolbar-section:not(:first-child) .sky-toolbar-section{border-top:1px solid #d2d2d2}.sky-theme-modern .sky-toolbar-sectioned{padding:0}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toolbar-container.sky-viewkeeper-fixed{background-color:#121212}\n"] }]
+        }], propDecorators: { sectionComponents: [{
+                type: ContentChildren,
+                args: [SkyToolbarSectionComponent, { descendants: true }]
+            }] } });
+
+class SkyToolbarModule {
+}
+SkyToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarModule, declarations: [SkyToolbarComponent,
+        SkyToolbarItemComponent,
+        SkyToolbarSectionComponent,
+        SkyToolbarViewActionsComponent], imports: [CommonModule], exports: [SkyToolbarComponent,
+        SkyToolbarItemComponent,
+        SkyToolbarSectionComponent,
+        SkyToolbarViewActionsComponent] });
+SkyToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyToolbarComponent,
+                        SkyToolbarItemComponent,
+                        SkyToolbarSectionComponent,
+                        SkyToolbarViewActionsComponent,
+                    ],
+                    imports: [CommonModule],
+                    exports: [
+                        SkyToolbarComponent,
+                        SkyToolbarItemComponent,
+                        SkyToolbarSectionComponent,
+                        SkyToolbarViewActionsComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkyActionButtonModule, SkyBackToTopMessageType, SkyBackToTopModule, SkyBoxModule, SkyCardModule, SkyDefinitionListModule, SkyDescriptionListMode, SkyDescriptionListModule, SkyFluidGridGutterSize, SkyFluidGridModule, SkyFormatModule, SkyInlineDeleteModule, SkyInlineDeleteType, SkyPageModule, SkyPageSummaryModule, SkyTextExpandModule, SkyTextExpandRepeaterModule, SkyToolbarModule, SkyActionButtonComponent as λ1, SkyCardActionsComponent as λ10, SkyCardContentComponent as λ11, SkyCardTitleComponent as λ12, SkyDefinitionListComponent as λ13, SkyDefinitionListContentComponent as λ14, SkyDefinitionListHeadingComponent as λ15, SkyDefinitionListLabelComponent as λ16, SkyDefinitionListValueComponent as λ17, SkyDescriptionListComponent as λ18, SkyDescriptionListTermComponent as λ19, SkyActionButtonContainerComponent as λ2, SkyDescriptionListDescriptionComponent as λ20, SkyDescriptionListContentComponent as λ21, SkyFluidGridComponent as λ22, SkyRowComponent as λ23, SkyColumnComponent as λ24, SkyFormatComponent as λ25, SkyPageComponent as λ26, SkyPageSummaryComponent as λ27, SkyPageSummaryAlertComponent as λ28, SkyPageSummaryContentComponent as λ29, SkyActionButtonDetailsComponent as λ3, SkyPageSummaryImageComponent as λ30, SkyPageSummaryKeyInfoComponent as λ31, SkyPageSummaryStatusComponent as λ32, SkyPageSummarySubtitleComponent as λ33, SkyPageSummaryTitleComponent as λ34, SkyTextExpandComponent as λ35, SkyTextExpandRepeaterComponent as λ36, SkyToolbarComponent as λ37, SkyToolbarSectionComponent as λ38, SkyToolbarItemComponent as λ39, SkyActionButtonHeaderComponent as λ4, SkyToolbarViewActionsComponent as λ40, SkyBoxComponent as λ41, SkyBoxHeaderComponent as λ42, SkyBoxContentComponent as λ43, SkyBoxControlsComponent as λ44, SkyActionButtonIconComponent as λ5, SkyBackToTopComponent as λ6, SkyBackToTopDirective as λ7, SkyInlineDeleteComponent as λ8, SkyCardComponent as λ9 };
+//# sourceMappingURL=skyux-layout.mjs.map