@skyux/layout 8.7.2 → 9.0.0-alpha.1

package/fesm2022/skyux-layout.mjs

@@ -0,0 +1,2957 @@
+import * as i5 from '@angular/cdk/observers';
+import { ObserversModule } from '@angular/cdk/observers';
+import * as i1 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, SkipSelf, HostBinding, Input, Output, ElementRef, Optional, ContentChildren, ViewChild, HostListener, NgModule, ChangeDetectionStrategy, Directive, TemplateRef, Inject, inject, InjectionToken } 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 i3 from '@skyux/router';
+import { SkyHrefModule } from '@skyux/router';
+import * as i1$1 from '@skyux/theme';
+import { SkyThemeModule } from '@skyux/theme';
+import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
+import { takeUntil, take } from 'rxjs/operators';
+import * as i1$2 from '@skyux/core';
+import { SkyMediaBreakpoints, SkyDockModule, SkyTrimModule, SkyCoreAdapterService, SkyLogService } from '@skyux/core';
+import * as i1$3 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
+import { trigger, transition, style, query, group, animate, state } from '@angular/animations';
+import * as i1$4 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 {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    getParentWidth(element) {
+        return element.nativeElement.parentElement?.getBoundingClientRect().width;
+    }
+    setResponsiveClass(element, width = 0) {
+        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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    #changeDetector;
+    constructor(changeDetector) {
+        this.hidden = false;
+        /**
+         * Fires when users select the action button.
+         */
+        this.actionClick = new EventEmitter();
+        this.#changeDetector = changeDetector;
+    }
+    buttonClicked() {
+        this.actionClick.emit();
+    }
+    enterPress() {
+        this.actionClick.emit();
+    }
+    onSkyHrefDisplayChange($event) {
+        if (this.hidden === $event.userHasAccess) {
+            setTimeout(() => {
+                this.hidden = !$event.userHasAccess;
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionButtonComponent, selector: "sky-action-button", inputs: { permalink: "permalink" }, outputs: { actionClick: "actionClick" }, host: { properties: { "hidden": "this.hidden" } }, ngImport: i0, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink?.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink?.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink?.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink?.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink?.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink?.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.λ1, selector: "[skyHref]", inputs: ["skyHref", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-action-button', encapsulation: ViewEncapsulation.None, template: "<ng-container [ngSwitch]=\"true\">\n  <a\n    *ngSwitchCase=\"!!permalink?.route?.commands\"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [fragment]=\"permalink?.route?.extras?.fragment\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    [queryParams]=\"permalink?.route?.extras?.queryParams\"\n    [queryParamsHandling]=\"permalink?.route?.extras?.queryParamsHandling\"\n    [routerLink]=\"permalink?.route?.commands\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      (!permalink?.url?.includes('://') ||\n        permalink?.url?.startsWith('https://'))\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [href]=\"permalink?.url\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <a\n    *ngSwitchCase=\"\n      !permalink?.route &&\n      permalink?.url &&\n      permalink?.url?.includes('://') &&\n      !permalink?.url?.startsWith('https://')\n    \"\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    [skyHref]=\"permalink?.url\"\n    (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </a>\n\n  <div\n    *ngSwitchDefault\n    class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n    tabindex=\"0\"\n    role=\"button\"\n    [skyThemeClass]=\"{\n      'sky-btn sky-box': 'modern'\n    }\"\n    (click)=\"buttonClicked()\"\n    (keydown.enter)=\"enterPress()\"\n  >\n    <ng-container *ngTemplateOutlet=\"actionButtonContent\"></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #actionButtonContent>\n  <ng-container *skyThemeIf=\"'default'\">\n    <div class=\"sky-action-button-icon-header-container\">\n      <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n  </ng-container>\n\n  <ng-container *skyThemeIf=\"'modern'\">\n    <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n    <div class=\"sky-action-button-content\">\n      <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n      <div\n        class=\"sky-action-button-details\"\n        [skyThemeClass]=\"{\n          'sky-font-deemphasized': 'modern'\n        }\"\n      >\n        <ng-container *ngTemplateOutlet=\"details\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #icon>\n  <ng-content select=\"sky-action-button-icon\"></ng-content>\n</ng-template>\n\n<ng-template #header>\n  <ng-content select=\"sky-action-button-header\"></ng-content>\n</ng-template>\n\n<ng-template #details>\n  <ng-content select=\"sky-action-button-details\"></ng-content>\n</ng-template>\n", styles: [".sky-action-button{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block}.sky-action-button:hover{border-color:#c2c4c6}.sky-action-button-icon-header-container{display:flex;justify-content:center}.sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-action-button-icon-header-container{margin-bottom:20px}.sky-responsive-container-xs .sky-action-button,.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:20px 20px 30px;margin:0 15px}.sky-responsive-container-xs .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:20px}@media (min-width: 768px){.sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}}.sky-responsive-container-sm .sky-action-button,.sky-responsive-container-md .sky-action-button,.sky-responsive-container-lg .sky-action-button{padding:30px 20px;margin:0;max-width:236px}.sky-responsive-container-sm .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button-icon-header-container{margin-bottom:0;flex-direction:column}.sky-theme-modern .sky-action-button{display:flex;flex-flow:row nowrap;padding:30px;text-align:left;border:none}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-theme-modern .sky-action-button,.sky-theme-modern .sky-responsive-container-xs .sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0;max-width:446px}@media (min-width: 768px){.sky-theme-modern .sky-action-button{padding:30px;margin:0}}.sky-theme-modern .sky-responsive-container-sm .sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button{padding:30px;margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef, decorators: [{
+                    type: SkipSelf
+                }] }]; }, propDecorators: { hidden: [{
+                type: HostBinding,
+                args: ['hidden']
+            }], permalink: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Wraps action buttons to ensures that they have consistent height and spacing.
+ * @required
+ */
+class SkyActionButtonContainerComponent {
+    /**
+     * How to display the action buttons inside the action button container.
+     * Options are `"center"` or `"left"`.
+     * @default "center"
+     */
+    set alignItems(value) {
+        this.#_alignItems = value ?? 'center';
+    }
+    get alignItems() {
+        return this.#_alignItems;
+    }
+    #ngUnsubscribe = new Subject();
+    #syncMaxHeightTimeout;
+    set #themeName(value) {
+        this.#_themeName = value;
+        this.#updateResponsiveClass();
+        this.#updateHeight();
+    }
+    #_alignItems = 'center';
+    #_themeName;
+    #viewInitialized = false;
+    #actionButtonAdapterService;
+    #changeDetector;
+    #coreAdapterService;
+    #hostElRef;
+    #themeSvc;
+    constructor(actionButtonAdapterService, changeDetector, coreAdapterService, hostElRef, themeSvc) {
+        this.#actionButtonAdapterService = actionButtonAdapterService;
+        this.#changeDetector = changeDetector;
+        this.#coreAdapterService = coreAdapterService;
+        this.#hostElRef = hostElRef;
+        this.#themeSvc = themeSvc;
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.#themeSvc) {
+            this.#themeSvc.settingsChange
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.#themeName = themeSettings.currentSettings.theme.name;
+                this.#changeDetector.markForCheck();
+            });
+        }
+        // Wait for children components to complete rendering before container width is determined.
+        setTimeout(() => {
+            this.#updateResponsiveClass();
+        });
+    }
+    ngAfterViewInit() {
+        // 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.#viewInitialized = true;
+        this.#updateHeight();
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    onContentChange() {
+        this.#updateHeight();
+    }
+    onWindowResize() {
+        this.#updateResponsiveClass();
+    }
+    #updateHeight(delay = 0) {
+        const ref = this.containerRef;
+        if (ref && this.#viewInitialized) {
+            this.#coreAdapterService.resetHeight(ref, '.sky-action-button');
+            if (this.#_themeName === 'modern') {
+                // Wait for children components to complete rendering before height is determined.
+                clearTimeout(this.#syncMaxHeightTimeout);
+                this.#syncMaxHeightTimeout = setTimeout(() => {
+                    const selector = '.sky-action-button:not([hidden])';
+                    const button = ref.nativeElement.querySelector(selector);
+                    if (button && button.offsetHeight > 0) {
+                        this.#coreAdapterService.syncMaxHeight(ref, selector);
+                    }
+                    else if (delay < 200) {
+                        // Wait progressively longer between retries.
+                        this.#updateHeight(delay + 50);
+                    }
+                }, delay);
+            }
+        }
+    }
+    #updateResponsiveClass() {
+        if (this.containerRef) {
+            const parentWidth = this.#actionButtonAdapterService.getParentWidth(this.#hostElRef);
+            this.#actionButtonAdapterService.setResponsiveClass(this.containerRef, parentWidth);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonContainerComponent, deps: [{ token: SkyActionButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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    (cdkObserveContent)=\"onContentChange()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-action-button-flex sky-action-button{display:block}.sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-flex{display:block;padding:0;margin:calc(var(--sky-compat-action-button-flex-margin, 20px) * -1) 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;margin:calc(var(--sky-compat-action-button-flex-margin, 20px) * -1) 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:var(--sky-compat-action-button-flex-sm-padding, 0) 0;margin:calc(var(--sky-compat-action-button-flex-margin, 10px) * -1) 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:var(--sky-compat-action-button-flex-sm-padding, 0) 0;margin:calc(var(--sky-compat-action-button-flex-margin, 10px) * -1) 0}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:10px 0}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 -20px -20px}.sky-theme-modern .sky-responsive-container-xs .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-sm .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-md .sky-action-button-flex sky-action-button,.sky-theme-modern .sky-responsive-container-lg .sky-action-button-flex sky-action-button{margin:0 0 20px 20px;flex:0 1 446px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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    (cdkObserveContent)=\"onContentChange()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-action-button-flex sky-action-button{display:block}.sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-flex{display:block;padding:0;margin:calc(var(--sky-compat-action-button-flex-margin, 20px) * -1) 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;margin:calc(var(--sky-compat-action-button-flex-margin, 20px) * -1) 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:var(--sky-compat-action-button-flex-sm-padding, 0) 0;margin:calc(var(--sky-compat-action-button-flex-margin, 10px) * -1) 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:var(--sky-compat-action-button-flex-sm-padding, 0) 0;margin:calc(var(--sky-compat-action-button-flex-margin, 10px) * -1) 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$2.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: i1$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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionButtonDetailsComponent, selector: "sky-action-button-details", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyActionButtonHeaderComponent, selector: "sky-action-button-header", ngImport: i0, template: "<div\n  class=\"sky-action-button-header\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern',\n    'sky-font-heading-2': '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"], dependencies: [{ kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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-font-display-3': 'modern',\n    'sky-font-heading-2': '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 {
+    #subscription;
+    constructor(mediaQueryService) {
+        this.fontSizeClass = FONTSIZECLASS_LARGE;
+        this.#subscription = 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();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonIconComponent, deps: [{ token: i1$2.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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:#ebfbff;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:#ebfbff;margin:0 20px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}\n"], dependencies: [{ kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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:#ebfbff;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:#ebfbff;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$2.SkyMediaQueryService }]; }, propDecorators: { iconType: [{
+                type: Input
+            }] } });
+
+class SkyActionButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonModule, declarations: [SkyActionButtonComponent,
+            SkyActionButtonContainerComponent,
+            SkyActionButtonDetailsComponent,
+            SkyActionButtonHeaderComponent,
+            SkyActionButtonIconComponent], imports: [CommonModule,
+            ObserversModule,
+            RouterModule,
+            SkyHrefModule,
+            SkyIconModule,
+            SkyThemeModule], exports: [SkyActionButtonComponent,
+            SkyActionButtonContainerComponent,
+            SkyActionButtonDetailsComponent,
+            SkyActionButtonHeaderComponent,
+            SkyActionButtonIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonModule, imports: [CommonModule,
+            ObserversModule,
+            RouterModule,
+            SkyHrefModule,
+            SkyIconModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyActionButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyActionButtonComponent,
+                        SkyActionButtonContainerComponent,
+                        SkyActionButtonDetailsComponent,
+                        SkyActionButtonHeaderComponent,
+                        SkyActionButtonIconComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        ObserversModule,
+                        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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutResourcesModule, providers: [
+            {
+                provide: SKY_LIB_RESOURCES_PROVIDERS,
+                useClass: SkyLayoutResourcesProvider,
+                multi: true,
+            },
+        ], imports: [SkyI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyLayoutResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyLayoutResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyBackToTopComponent {
+    get scrollToTopClick() {
+        return this.#_scrollToTopClick.asObservable();
+    }
+    #_scrollToTopClick = new Subject();
+    onScrollToTopClick() {
+        this.#_scrollToTopClick.next();
+        this.#_scrollToTopClick.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyBackToTopComponent, selector: "sky-back-to-top", ngImport: i0, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\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;padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg)}:host-context(.sky-theme-modern) .sky-back-to-top{padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-xl)}.sky-theme-modern .sky-back-to-top{padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-xl)}\n"], dependencies: [{ kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-back-to-top', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\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;padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg)}:host-context(.sky-theme-modern) .sky-back-to-top{padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-xl)}.sky-theme-modern .sky-back-to-top{padding:var(--sky-margin-stacked-sm) var(--sky-margin-inline-xl)}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyBackToTopDomAdapterService {
+    #ngUnsubscribe = new Subject();
+    #scrollableHostScrollEventUnsubscribe = new Subject();
+    #scrollableHostService;
+    #windowRef;
+    constructor(windowRef, scrollableHostService) {
+        this.#windowRef = windowRef;
+        this.#scrollableHostService = scrollableHostService;
+    }
+    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);
+        if (!element.nativeElement.offsetParent) {
+            return true;
+        }
+        const buffer = 25;
+        const elementRect = element.nativeElement.getBoundingClientRect();
+        if (parentElement instanceof HTMLElement) {
+            const parentRect = parentElement.getBoundingClientRect();
+            return elementRect.top > parentRect.top - buffer;
+        }
+        else {
+            return elementRect.top > -buffer;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopDomAdapterService, deps: [{ token: i1$2.SkyAppWindowRef }, { token: i1$2.SkyScrollableHostService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopDomAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopDomAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.SkyAppWindowRef }, { type: i1$2.SkyScrollableHostService }]; } });
+
+/**
+ * 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 {
+    /**
+     * Configuration options for the back to top component.
+     */
+    set skyBackToTop(value) {
+        this.#buttonHidden = !!(value && value?.buttonHidden);
+        this.#handleBackToTopButton(this.#elementInView);
+    }
+    /**
+     * The 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));
+    }
+    #buttonHidden = false;
+    #dockItem;
+    #dockService;
+    #domAdapter;
+    #elementInView = false;
+    #elementRef;
+    #ngUnsubscribe = new Subject();
+    #_skyBackToTopMessageStream;
+    constructor(dockService, domAdapter, elementRef) {
+        this.#dockService = dockService;
+        this.#domAdapter = domAdapter;
+        this.#elementRef = elementRef;
+    }
+    ngAfterViewInit() {
+        this.#elementInView = this.#domAdapter.isElementScrolledInView(this.#elementRef);
+        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.#elementRef);
+        });
+    }
+    #handleIncomingMessages(message) {
+        /* istanbul ignore else */
+        if (message.type === SkyBackToTopMessageType.BackToTop) {
+            this.#domAdapter.scrollToElement(this.#elementRef);
+        }
+    }
+    #setBackToTopListeners() {
+        /* istanbul ignore else */
+        if (this.#elementRef) {
+            this.#domAdapter
+                .elementInViewOnScroll(this.#elementRef)
+                .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;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopDirective, deps: [{ token: i1$2.SkyDockService }, { token: SkyBackToTopDomAdapterService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: SkyBackToTopDirective, selector: "[skyBackToTop]", inputs: { skyBackToTop: "skyBackToTop", skyBackToTopMessageStream: "skyBackToTopMessageStream" }, providers: [SkyBackToTopDomAdapterService], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyBackToTop]',
+                    providers: [SkyBackToTopDomAdapterService],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.SkyDockService }, { type: SkyBackToTopDomAdapterService }, { type: i0.ElementRef }]; }, propDecorators: { skyBackToTop: [{
+                type: Input
+            }], skyBackToTopMessageStream: [{
+                type: Input
+            }] } });
+
+class SkyBackToTopModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopModule, declarations: [SkyBackToTopComponent, SkyBackToTopDirective], imports: [CommonModule,
+            SkyDockModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyThemeModule], exports: [SkyBackToTopComponent, SkyBackToTopDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopModule, imports: [CommonModule,
+            SkyDockModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyThemeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBackToTopModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyBackToTopComponent, SkyBackToTopDirective],
+                    imports: [
+                        CommonModule,
+                        SkyDockModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyThemeModule,
+                    ],
+                    exports: [SkyBackToTopComponent, SkyBackToTopDirective],
+                }]
+        }] });
+
+/**
+ * Specifies the body content to display inside the box and provides padding around that content.
+ */
+class SkyBoxContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyBoxContentComponent, selector: "sky-box-content", ngImport: i0, template: "<div class=\"sky-box-content\">\n  <ng-content></ng-content>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box-content', template: "<div class=\"sky-box-content\">\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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyBoxHeaderComponent, selector: "sky-box-header", ngImport: i0, template: "<div class=\"sky-box-header\">\n  <span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content\n  ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\n"], dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-box-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-box-header\">\n  <span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content\n  ></span>\n</div>\n", styles: ["sky-box-header{flex:1 0;order:0}sky-box-header .sky-box-header{padding:0 var(--sky-margin-inline-xl) 0 0}sky-box-header .sky-box-header h1,sky-box-header .sky-box-header h2,sky-box-header .sky-box-header h3,sky-box-header .sky-box-header h4,sky-box-header .sky-box-header h5,sky-box-header .sky-box-header h6{display:inline;margin:0}\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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.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:var(--sky-padding-even-xl)}\n"], dependencies: [{ kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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{--sky-box-border-radius: initial;--sky-box-overflow: initial}.sky-theme-modern sky-box{--sky-box-border-radius: $sky-theme-modern-box-border-radius-default;--sky-box-overflow: hidden}sky-box{display:block}.sky-box{background-color:#fff;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl)}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{order:1;margin-left:auto}.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:var(--sky-padding-even-xl)}\n"] }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaRole: [{
+                type: Input
+            }] } });
+
+class SkyBoxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxModule, declarations: [SkyBoxComponent,
+            SkyBoxHeaderComponent,
+            SkyBoxContentComponent,
+            SkyBoxControlsComponent], imports: [CommonModule, SkyThemeModule, SkyTrimModule], exports: [SkyBoxComponent,
+            SkyBoxHeaderComponent,
+            SkyBoxContentComponent,
+            SkyBoxControlsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxModule, imports: [CommonModule, SkyThemeModule, SkyTrimModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyBoxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyBoxComponent,
+                        SkyBoxHeaderComponent,
+                        SkyBoxContentComponent,
+                        SkyBoxControlsComponent,
+                    ],
+                    imports: [CommonModule, SkyThemeModule, SkyTrimModule],
+                    exports: [
+                        SkyBoxComponent,
+                        SkyBoxHeaderComponent,
+                        SkyBoxContentComponent,
+                        SkyBoxControlsComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyInlineDeleteAdapterService {
+    #element;
+    #focusableElements;
+    #parentEl;
+    #parentElClearListenerFn;
+    #renderer;
+    #coreAdapterService;
+    constructor(coreAdapterService, rendererFactory) {
+        this.#coreAdapterService = coreAdapterService;
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    clearListeners() {
+        /* istanbul ignore else */
+        if (this.#parentElClearListenerFn) {
+            this.#parentElClearListenerFn();
+        }
+    }
+    setEl(element) {
+        this.#element = element;
+        this.#parentEl = element.parentElement;
+        /* istanbul ignore else */
+        if (this.#parentEl) {
+            this.#parentElClearListenerFn = this.#renderer.listen(this.#parentEl, 'focusin', (event) => {
+                if (this.#element) {
+                    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));
+                    }
+                }
+            });
+        }
+    }
+    #focusNextElement(targetElement, shiftKey) {
+        const focusable = this.#getFocusableElements();
+        // If shift tab, go in the other direction
+        const modifier = shiftKey ? -1 : 1;
+        // Find the next navigable element that isn't waiting
+        const startingIndex = focusable.indexOf(targetElement);
+        let curIndex = startingIndex + modifier;
+        while (focusable[curIndex] &&
+            this.#isElementHiddenOrCovered(focusable[curIndex])) {
+            curIndex += modifier;
+        }
+        if (focusable[curIndex] &&
+            !this.#isElementHiddenOrCovered(focusable[curIndex])) {
+            focusable[curIndex].focus();
+        }
+        else {
+            // Try wrapping the navigation
+            /* istanbul ignore next */
+            curIndex = modifier > 0 ? 0 : focusable.length - 1;
+            /* istanbul ignore next */
+            while (curIndex !== startingIndex &&
+                focusable[curIndex] &&
+                this.#isElementHiddenOrCovered(focusable[curIndex])) {
+                curIndex += modifier;
+            }
+            /* istanbul ignore else */
+            /* sanity check */
+            if (focusable[curIndex] &&
+                !this.#isElementHiddenOrCovered(focusable[curIndex])) {
+                focusable[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 focusableElements list so that if things change between tabbing we know about it
+        this.#focusableElements = undefined;
+    }
+    #getFocusableElements() {
+        // Keep this cached so we can reduce queries
+        if (this.#focusableElements) {
+            return this.#focusableElements;
+        }
+        this.#focusableElements = this.#coreAdapterService.getFocusableChildren(document.body);
+        return this.#focusableElements;
+    }
+    #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 &&
+                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.#getFocusableElements().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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteAdapterService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.SkyCoreAdapterService }, { type: i0.RendererFactory2 }]; } });
+
+/**
+ * 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 {
+    #adapterService;
+    #changeDetector;
+    #elRef;
+    constructor(adapterService, changeDetector, elRef) {
+        /**
+         * 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;
+        this.#adapterService = adapterService;
+        this.#changeDetector = changeDetector;
+        this.#elRef = elRef;
+    }
+    /**
+     * 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);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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:0;left:0;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"], dependencies: [{ kind: "component", type: i2$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }], 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: "16.1.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:0;left:0;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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyWaitModule], exports: [SkyInlineDeleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyInlineDeleteModule, imports: [CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyWaitModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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.
+ * @deprecated
+ */
+class SkyCardActionsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+class SkyCardContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyCardContentComponent, selector: "sky-card-content", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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.
+ * @deprecated
+ */
+class SkyCardTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyCardTitleComponent, selector: "sky-card-title", ngImport: i0, template: "<ng-content></ng-content>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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.
+ * @deprecated `SkyCardComponent` is deprecated. For other SKY UX components that group and list content, see the content containers guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/content-containers.
+ */
+class SkyCardComponent {
+    /**
+     * The size of the card. The valid options are `"large"` and `"small"`.
+     * @default "large"
+     */
+    set size(value) {
+        this.#_size = value ?? 'large';
+    }
+    get size() {
+        return this.#_size;
+    }
+    #subscription;
+    #_size;
+    constructor(logger) {
+        /**
+         * Whether to display a checkbox to the right of the card title.
+         * Users can select multiple checkboxes and perform actions on the selected cards.
+         * @default false
+         */
+        this.selectable = false;
+        /**
+         * Whether the card is selected. This only applies to card where
+         * `selectable` is set to `true`.
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Fires when users select or deselect the card.
+         */
+        this.selectedChange = new EventEmitter();
+        this.showTitle = true;
+        this.#_size = 'large';
+        logger.deprecated('SkyCardComponent', {
+            deprecationMajorVersion: 6,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/design/guidelines/content-containers',
+            replacementRecommendation: 'For other SKY UX components that group and list content, see the content containers guidelines.',
+        });
+    }
+    ngAfterContentInit() {
+        this.showTitle = !!this.titleComponent && this.titleComponent.length > 0;
+        this.#subscription = this.titleComponent?.changes.subscribe(() => {
+            this.showTitle = !!this.titleComponent && 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();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$2.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.SkyLogService }]; }, propDecorators: { size: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], inlineDeleteComponent: [{
+                type: ContentChildren,
+                args: [SkyInlineDeleteComponent]
+            }], titleComponent: [{
+                type: ContentChildren,
+                args: [SkyCardTitleComponent]
+            }] } });
+
+/**
+ * @deprecated `SkyCardModule` is deprecated. For other SKY UX components that group and list content, see the content containers guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/content-containers.
+ */
+class SkyCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyCardModule, declarations: [SkyCardActionsComponent,
+            SkyCardComponent,
+            SkyCardContentComponent,
+            SkyCardTitleComponent], imports: [CommonModule,
+            FormsModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyInlineDeleteModule], exports: [SkyCardActionsComponent,
+            SkyCardComponent,
+            SkyCardContentComponent,
+            SkyCardTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyCardModule, imports: [CommonModule,
+            FormsModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyInlineDeleteModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the label in a label-value pair.
+ */
+class SkyDefinitionListLabelComponent {
+    constructor(service) {
+        this.service = service;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListLabelComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * The width of the label portion of the definition list.
+     * @default "90px"
+     */
+    set labelWidth(value) {
+        this.service.labelWidth.next(value);
+    }
+    /**
+     * The 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);
+    }
+    constructor(service, logger) {
+        this.service = service;
+        logger.deprecated('SkyDefinitionListComponent', {
+            deprecationMajorVersion: 6,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/description-list',
+            replacementRecommendation: 'Use `SkyDescriptionListComponent` instead.',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListComponent, deps: [{ token: SkyDefinitionListService }, { token: i1$2.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 }, { type: i1$2.SkyLogService }]; }, propDecorators: { labelWidth: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }] } });
+
+/**
+ * @deprecated Use `SkyDescriptionListModule` instead.
+ */
+class SkyDefinitionListModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListModule, declarations: [SkyDefinitionListComponent,
+            SkyDefinitionListContentComponent,
+            SkyDefinitionListHeadingComponent,
+            SkyDefinitionListLabelComponent,
+            SkyDefinitionListValueComponent], imports: [CommonModule, SkyI18nModule, SkyLayoutResourcesModule], exports: [SkyDefinitionListComponent,
+            SkyDefinitionListContentComponent,
+            SkyDefinitionListHeadingComponent,
+            SkyDefinitionListLabelComponent,
+            SkyDefinitionListValueComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDefinitionListModule, imports: [CommonModule, SkyI18nModule, SkyLayoutResourcesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    get defaultDescription() {
+        return this.#_defaultDescription.asObservable();
+    }
+    #_defaultDescription = new BehaviorSubject('');
+    ngOnDestroy() {
+        this.#_defaultDescription.complete();
+    }
+    updateDefaultDescription(value) {
+        this.#_defaultDescription.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the description in a term-description pair.
+ */
+class SkyDescriptionListDescriptionComponent {
+    #changeDetector;
+    #ngUnsubscribe = new Subject();
+    #themeSvc;
+    constructor(service, changeDetector, themeSvc) {
+        this.service = service;
+        this.#changeDetector = changeDetector;
+        this.#themeSvc = themeSvc;
+    }
+    ngOnInit() {
+        /* istanbul ignore else */
+        if (this.#themeSvc) {
+            this.#themeSvc.settingsChange
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe((themeSettings) => {
+                this.themeName = themeSettings.currentSettings.theme.name;
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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 skyTrim class=\"sky-description-list-description\"\n    ><ng-content></ng-content\n  ></span>\n  <span\n    class=\"sky-description-list-default-value\"\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", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list-description', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #descriptionTemplateRef>\n  <span skyTrim class=\"sky-description-list-description\"\n    ><ng-content></ng-content\n  ></span>\n  <span\n    class=\"sky-description-list-default-value\"\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", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyDescriptionListService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['descriptionTemplateRef', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * Specifies the term in a term-description pair. To display a help button beside
+ * the term, include a help button element in the sky-description-list-term element
+ * and a sky-control-help CSS class on that element.
+ */
+class SkyDescriptionListTermComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListTermComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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  ><span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content></span\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListTermComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-description-list-term', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #termTemplateRef\n  ><span skyTrim><ng-content></ng-content></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\"></ng-content></span\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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    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';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * The default description to display when no description is provided
+     * for a term-description pair.
+     * @default "None found"
+     */
+    set defaultDescription(value) {
+        this.#descriptionListService.updateDefaultDescription(value);
+    }
+    /**
+     * How to display term-description pairs within the description list.
+     * @default "vertical"
+     */
+    set mode(value) {
+        this.#_mode = value || 'vertical';
+    }
+    get mode() {
+        return this.#_mode;
+    }
+    #ngUnsubscribe = new Subject();
+    #_mode = 'vertical';
+    #adapterService;
+    #changeDetector;
+    #descriptionListService;
+    constructor(adapterService, changeDetector, descriptionListService) {
+        this.#adapterService = adapterService;
+        this.#changeDetector = changeDetector;
+        this.#descriptionListService = descriptionListService;
+    }
+    ngAfterContentInit() {
+        // Wait for all content to render before detecting parent width.
+        setTimeout(() => {
+            this.#updateResponsiveClass();
+        });
+        // istanbul ignore else
+        if (this.contentComponents) {
+            this.contentComponents.changes
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                this.#changeDetector.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    onWindowResize() {
+        this.#updateResponsiveClass();
+    }
+    #updateResponsiveClass() {
+        if (this.elementRef) {
+            this.#adapterService.setResponsiveClass(this.elementRef);
+            this.#changeDetector.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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 *ngIf=\"termComponent.templateRef\">\n        <ng-container\n          *ngTemplateOutlet=\"termComponent.templateRef\"\n        ></ng-container>\n      </ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container *ngIf=\"descriptionComponent.templateRef\">\n        <ng-container\n          *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n        ></ng-container>\n      </ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [":host{display:block}.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{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.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:not(:last-child){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:not(:last-child){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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 *ngIf=\"termComponent.templateRef\">\n        <ng-container\n          *ngTemplateOutlet=\"termComponent.templateRef\"\n        ></ng-container>\n      </ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container *ngIf=\"descriptionComponent.templateRef\">\n        <ng-container\n          *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n        ></ng-container>\n      </ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [":host{display:block}.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{width:auto}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content:not(:last-child){margin:0 0 15px}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap;margin:0 0 var(--sky-compat-description-list-margin-bottom, -15px) 0}.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:not(:last-child){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:not(:last-child){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 }]; }, 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListModule, declarations: [SkyDescriptionListComponent,
+            SkyDescriptionListContentComponent,
+            SkyDescriptionListTermComponent,
+            SkyDescriptionListDescriptionComponent], imports: [CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule], exports: [SkyDescriptionListComponent,
+            SkyDescriptionListContentComponent,
+            SkyDescriptionListTermComponent,
+            SkyDescriptionListDescriptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListModule, imports: [CommonModule,
+            SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyThemeModule,
+            SkyTrimModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyDescriptionListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyDescriptionListComponent,
+                        SkyDescriptionListContentComponent,
+                        SkyDescriptionListTermComponent,
+                        SkyDescriptionListDescriptionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyThemeModule,
+                        SkyTrimModule,
+                    ],
+                    exports: [
+                        SkyDescriptionListComponent,
+                        SkyDescriptionListContentComponent,
+                        SkyDescriptionListTermComponent,
+                        SkyDescriptionListDescriptionComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * @deprecated Use `SkyDescriptionListModeType` instead.
+ * @internal
+ * 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 = {}));
+
+/**
+ * Displays a column within a row of the fluid grid.
+ */
+class SkyColumnComponent {
+    /**
+     * The number of columns (1-12) on extra-small screens
+     * (less than 768px). If you do not specify a value, the fluid grid displays
+     * the column at the full width of the screen.
+     * @default 12
+     */
+    set screenXSmall(value) {
+        this.#_screenXSmall = value ?? 12;
+    }
+    get screenXSmall() {
+        return this.#_screenXSmall;
+    }
+    #_screenXSmall = 12;
+    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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    constructor() {
+        /**
+         * Disables the outer left and right margin of the fluid grid container.
+         * @default false
+         */
+        this.disableMargin = false;
+        this.#_gutterSize = 'large';
+    }
+    /**
+     * The type that defines the size of the padding
+     * between columns.
+     * @default "large"
+     */
+    set gutterSize(value) {
+        this.#_gutterSize = value ?? 'large';
+    }
+    get gutterSize() {
+        return this.#_gutterSize;
+    }
+    #_gutterSize;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFluidGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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': gutterSize === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSize === '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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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': gutterSize === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSize === '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() {
+        /**
+         * Whether to reverse the display order for columns in the row.
+         * @default false
+         */
+        this.reverseColumnOrder = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFluidGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFluidGridModule, declarations: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent], imports: [CommonModule], exports: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFluidGridModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFluidGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent],
+                    exports: [SkyRowComponent, SkyColumnComponent, SkyFluidGridComponent],
+                }]
+        }] });
+
+const tokenRegex = /(\{\d+\})/;
+class SkyFormatComponent {
+    constructor() {
+        this.itemsForDisplay = [];
+    }
+    /**
+     * 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;
+    }
+    #_text;
+    #_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);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyFormatComponent, selector: "sky-format", inputs: { text: "text", args: "args" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n  <ng-container *ngIf=\"!item.text && item.templateRef\">\n    <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\n  </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-format', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n  <ng-container *ngIf=\"!item.text && item.templateRef\">\n    <ng-container *ngTemplateOutlet=\"item.templateRef\"></ng-container>\n  </ng-container>\n</ng-container>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], args: [{
+                type: Input
+            }] } });
+
+class SkyFormatModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatModule, declarations: [SkyFormatComponent], imports: [CommonModule], exports: [SkyFormatComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyFormatModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyFormatComponent],
+                    imports: [CommonModule],
+                    exports: [SkyFormatComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyPageThemeAdapterService {
+    #styleEl;
+    #document;
+    constructor(document) {
+        this.#document = document;
+    }
+    /**
+     * We can't use ViewEncapsulation.None for this behavior because Angular does
+     * not remove `style` tags from the HEAD element after route changes.
+     * @see https://github.com/angular/angular/issues/16670
+     */
+    addTheme() {
+        if (!this.#styleEl) {
+            this.#styleEl = this.#document.createElement('style');
+            this.#styleEl.appendChild(this.#document.createTextNode('body:not(.sky-theme-modern) { background-color: #fff; }'));
+            this.#document.head.appendChild(this.#styleEl);
+        }
+    }
+    removeTheme() {
+        if (this.#styleEl) {
+            this.#styleEl.remove();
+            this.#styleEl = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+/**
+ * Displays page contents using the specified layout.
+ * @deprecated Use the `sky-page` component in `@skyux/pages` instead.
+ */
+class SkyPageComponent {
+    /**
+     * The page layout. Use `auto` to allow the page contents
+     * to expand beyond the bottom of the browser window. Use `fit`
+     * to constrain the page contents to the available viewport.
+     */
+    set layout(value) {
+        this.#_layout = value || 'auto';
+    }
+    get layout() {
+        return this.#_layout;
+    }
+    #themeAdapter;
+    #_layout = 'auto';
+    #logger = inject(SkyLogService);
+    constructor(themeAdapter) {
+        this.#logger.deprecated('SkyPageComponent', {
+            deprecationMajorVersion: 8,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/page',
+            replacementRecommendation: 'Use the `sky-page` component in `@skyux/pages` instead.',
+        });
+        this.#themeAdapter = themeAdapter;
+    }
+    ngOnInit() {
+        this.#themeAdapter.addTheme();
+    }
+    ngOnDestroy() {
+        this.#themeAdapter.removeTheme();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageComponent, deps: [{ token: SkyPageThemeAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SkyPageComponent, selector: "sky-page", inputs: { layout: "layout" }, providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div [ngClass]=\"'sky-layout-host-' + layout\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-layout-host-fit{position:absolute;left:var(--sky-viewport-left);top:var(--sky-viewport-top);right:var(--sky-viewport-right);bottom:var(--sky-viewport-bottom)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-page', providers: [SkyPageThemeAdapterService], template: "<div [ngClass]=\"'sky-layout-host-' + layout\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-layout-host-fit{position:absolute;left:var(--sky-viewport-left);top:var(--sky-viewport-top);right:var(--sky-viewport-right);bottom:var(--sky-viewport-bottom)}\n"] }]
+        }], ctorParameters: function () { return [{ type: SkyPageThemeAdapterService }]; }, propDecorators: { layout: [{
+                type: Input
+            }] } });
+
+/**
+ * @deprecated Use the SkyPageModule in `@skyux/pages` instead.
+ */
+class SkyPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent], imports: [CommonModule], exports: [SkyPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyPageComponent],
+                    imports: [CommonModule],
+                    exports: [SkyPageComponent],
+                }]
+        }] });
+
+/**
+ * Displays messages that require immediate attention as [alerts](https://developer.blackbaud.com/skyux/components/alert) within
+ * the page summary.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryAlertComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryContentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryImageComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+class SkyPageSummaryKeyInfoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryStatusComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummarySubtitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummarySubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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.
+ * @deprecated
+ */
+/* istanbul ignore next */
+/* Code coverage having problems with no statements in classes */
+class SkyPageSummaryTitleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryAdapterService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the components to display in the page summary.
+ * @deprecated `SkyPageSummaryComponent` is deprecated. For page templates and techniques to summarize page content, see the page design guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/page-layouts.
+ */
+class SkyPageSummaryComponent {
+    #breakpointSubscription;
+    #ngUnsubscribe;
+    #elRef;
+    #adapter;
+    #mediaQueryService;
+    #changeDetectorRef;
+    constructor(elRef, adapter, mediaQueryService, logger, changeDetector) {
+        this.hasKeyInfo = false;
+        this.#ngUnsubscribe = new Subject();
+        this.#elRef = elRef;
+        this.#adapter = adapter;
+        this.#mediaQueryService = mediaQueryService;
+        this.#changeDetectorRef = changeDetector;
+        logger.deprecated('SkyPageSummaryComponent', {
+            deprecationMajorVersion: 6,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/design/guidelines/page-layouts',
+            replacementRecommendation: 'For page templates and techniques to summarize page content, see the page design guidelines.',
+        });
+    }
+    ngAfterViewInit() {
+        this.#breakpointSubscription = this.#mediaQueryService.subscribe((args) => {
+            this.#adapter.updateKeyInfoLocation(this.#elRef, args === SkyMediaBreakpoints.xs);
+        });
+    }
+    ngAfterContentInit() {
+        if (this.keyInfoComponents) {
+            this.hasKeyInfo = this.keyInfoComponents.length > 0;
+            this.keyInfoComponents.changes
+                .pipe(takeUntil(this.#ngUnsubscribe))
+                .subscribe(() => {
+                this.hasKeyInfo =
+                    !!this.keyInfoComponents && this.keyInfoComponents.length > 0;
+                this.#changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.#breakpointSubscription) {
+            this.#breakpointSubscription.unsubscribe();
+        }
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryComponent, deps: [{ token: i0.ElementRef }, { token: SkyPageSummaryAdapterService }, { token: i1$2.SkyMediaQueryService }, { token: i1$2.SkyLogService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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$2.SkyMediaQueryService }, { type: i1$2.SkyLogService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { keyInfoComponents: [{
+                type: ContentChildren,
+                args: [SkyPageSummaryKeyInfoComponent, {
+                        read: SkyPageSummaryKeyInfoComponent,
+                    }]
+            }] } });
+
+/**
+ * @deprecated `SkyPageSummaryModule` is deprecated. For page templates and techniques to summarize page content, see the page design guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/page-layouts.
+ */
+class SkyPageSummaryModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.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] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyPageSummaryModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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
+ */
+const SKY_TEXT_EXPAND_MODAL_CONTEXT = new InjectionToken('SkyTextExpandModalContext');
+
+/**
+ * @internal
+ */
+class SkyTextExpandModalComponent {
+    constructor(context, instance) {
+        this.context = context;
+        this.instance = instance;
+    }
+    close() {
+        this.instance.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$4.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$4.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$4.λ4, selector: "sky-modal-header" }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SKY_TEXT_EXPAND_MODAL_CONTEXT]
+                }] }, { type: i1$4.SkyModalInstance }]; } });
+
+/**
+ * @internal
+ */
+class SkyTextExpandAdapterService {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    getContainerHeight(containerEl) {
+        return containerEl.nativeElement.offsetHeight;
+    }
+    removeContainerMaxHeight(containerEl) {
+        this.#renderer.removeStyle(containerEl.nativeElement, 'max-height');
+    }
+    setText(textEl, text) {
+        textEl.nativeElement.textContent = text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * 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.
+     * @default 600
+     */
+    set maxExpandedLength(value) {
+        if (value) {
+            this.#_maxExpandedLength = value;
+        }
+        else {
+            this.#_maxExpandedLength = 600;
+        }
+        this.#setup(this.text);
+    }
+    get maxExpandedLength() {
+        return this.#_maxExpandedLength;
+    }
+    /**
+     * 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.
+     * @default 2
+     */
+    set maxExpandedNewlines(value) {
+        if (value) {
+            this.#_maxExpandedNewlines = value;
+        }
+        else {
+            this.#_maxExpandedNewlines = 2;
+        }
+        this.#setup(this.text);
+    }
+    get maxExpandedNewlines() {
+        return this.#_maxExpandedNewlines;
+    }
+    /**
+     * 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) {
+        if (value) {
+            this.#_maxLength = value;
+        }
+        else {
+            this.#_maxLength = 200;
+        }
+        this.#setup(this.text);
+    }
+    get maxLength() {
+        return this.#_maxLength;
+    }
+    /**
+     * The text to truncate.
+     */
+    set text(value) {
+        this.#_text = value ?? '';
+        this.#setup(this.#_text);
+    }
+    get text() {
+        return this.#_text;
+    }
+    set textEl(value) {
+        this.#_textEl = value;
+        this.#setup(this.text);
+    }
+    get textEl() {
+        return this.#_textEl;
+    }
+    #collapsedText;
+    #newlineCount;
+    #seeMoreText;
+    #seeLessText;
+    #textToShow;
+    #_maxExpandedLength;
+    #_maxExpandedNewlines;
+    #_maxLength;
+    #_text;
+    #_textEl;
+    #resources;
+    #modalSvc;
+    #textExpandAdapter;
+    constructor(resources, modalSvc, textExpandAdapter) {
+        /**
+         * Whether to replace newline characters in truncated text with spaces.
+         */
+        this.truncateNewlines = true;
+        this.buttonText = '';
+        this.contentSectionId = `sky-text-expand-content-${++nextId$1}`;
+        this.expandable = false;
+        this.isModal = false;
+        this.transitionHeight = 1;
+        this.#collapsedText = '';
+        this.#newlineCount = 0;
+        this.#seeMoreText = '';
+        this.#seeLessText = '';
+        this.#textToShow = '';
+        this.#_maxExpandedLength = 600;
+        this.#_maxExpandedNewlines = 2;
+        this.#_maxLength = 200;
+        this.#_text = '';
+        this.#resources = resources;
+        this.#modalSvc = modalSvc;
+        this.#textExpandAdapter = textExpandAdapter;
+    }
+    textExpand() {
+        if (this.isModal) {
+            // Modal View
+            /* istanbul ignore else */
+            /* sanity check */
+            if (!this.isExpanded) {
+                this.#modalSvc.open(SkyTextExpandModalComponent, [
+                    {
+                        provide: SKY_TEXT_EXPAND_MODAL_CONTEXT,
+                        useValue: {
+                            header: this.expandModalTitle,
+                            text: this.text,
+                        },
+                    },
+                ]);
+            }
+        }
+        else {
+            // Normal View
+            if (!this.isExpanded) {
+                this.#animateText(true);
+            }
+            else {
+                this.#animateText(false);
+            }
+        }
+    }
+    animationEnd() {
+        if (this.textEl && this.containerEl) {
+            // Ensure the correct text is displayed
+            this.#textExpandAdapter.setText(this.textEl, this.#textToShow);
+            setTimeout(() => {
+                if (this.containerEl) {
+                    // Set height back to auto so the browser can change the height as needed with window changes
+                    this.#textExpandAdapter.removeContainerMaxHeight(this.containerEl);
+                }
+            });
+        }
+    }
+    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.text);
+            /* istanbul ignore else */
+            if (!this.expandModalTitle) {
+                this.#resources
+                    .getString('skyux_text_expand_modal_title')
+                    .pipe(take(1))
+                    .subscribe((resource) => {
+                    this.expandModalTitle = resource;
+                });
+            }
+        });
+    }
+    #setup(value) {
+        if (value) {
+            this.#newlineCount = this.#getNewlineCount(value);
+            this.#collapsedText = this.#getTruncatedText(value, this.maxLength);
+            if (this.#collapsedText !== value) {
+                this.buttonText = this.#seeMoreText;
+                this.isExpanded = false;
+                this.expandable = true;
+                this.isModal =
+                    this.#newlineCount > this.maxExpandedNewlines ||
+                        this.text.length > this.maxExpandedLength;
+            }
+            else {
+                this.expandable = false;
+            }
+            this.#textToShow = this.#collapsedText;
+        }
+        else {
+            this.#textToShow = '';
+            this.expandable = false;
+        }
+        if (this.textEl) {
+            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.substring(0, length);
+    }
+    #animateText(expanding) {
+        if (this.containerEl && this.textEl) {
+            const adapter = this.#textExpandAdapter;
+            const container = this.containerEl;
+            if (expanding) {
+                adapter.setText(this.textEl, this.text);
+                this.#textToShow = this.text;
+            }
+            else {
+                adapter.setText(this.textEl, this.#collapsedText);
+                this.#textToShow = this.#collapsedText;
+            }
+            this.buttonText = expanding ? this.#seeLessText : this.#seeMoreText;
+            // Measure the new height so we can animate to it.
+            const newHeight = adapter.getContainerHeight(container);
+            this.transitionHeight = newHeight;
+            // Always show all text while animating so that the animation is smooth. The animation callback will set this back if needed.
+            if (!expanding) {
+                adapter.setText(this.textEl, this.text);
+            }
+            this.isExpanded = expanding;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$3.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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  [@expansionAnimation]=\"{\n    value: isExpanded,\n    params: { transitionHeight: transitionHeight }\n  }\"\n  (@expansionAnimation.done)=\"animationEnd()\"\n  class=\"sky-text-expand-container\"\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}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            trigger('expansionAnimation', [
+                transition(':enter', []),
+                state('true', style({
+                    maxHeight: '{{transitionHeight}}px',
+                }), { params: { transitionHeight: 0 } }),
+                state('false', style({
+                    maxHeight: '{{transitionHeight}}px',
+                }), { params: { transitionHeight: 0 } }),
+                transition('true => false', animate('250ms ease')),
+                transition('false => true', animate('250ms ease')),
+                transition('void => *', []),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
+            type: Component,
+            args: [{ animations: [
+                        trigger('expansionAnimation', [
+                            transition(':enter', []),
+                            state('true', style({
+                                maxHeight: '{{transitionHeight}}px',
+                            }), { params: { transitionHeight: 0 } }),
+                            state('false', style({
+                                maxHeight: '{{transitionHeight}}px',
+                            }), { params: { transitionHeight: 0 } }),
+                            transition('true => false', animate('250ms ease')),
+                            transition('false => true', animate('250ms ease')),
+                            transition('void => *', []),
+                        ]),
+                    ], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  [@expansionAnimation]=\"{\n    value: isExpanded,\n    params: { transitionHeight: transitionHeight }\n  }\"\n  (@expansionAnimation.done)=\"animationEnd()\"\n  class=\"sky-text-expand-container\"\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}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.SkyLibResourcesService }, { type: i1$4.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandModule, declarations: [SkyTextExpandComponent, SkyTextExpandModalComponent], imports: [SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyModalModule,
+            CommonModule], exports: [SkyTextExpandComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandModule, imports: [SkyI18nModule,
+            SkyLayoutResourcesModule,
+            SkyModalModule,
+            CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyTextExpandComponent, SkyTextExpandModalComponent],
+                    imports: [
+                        SkyI18nModule,
+                        SkyLayoutResourcesModule,
+                        SkyModalModule,
+                        CommonModule,
+                    ],
+                    exports: [SkyTextExpandComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyTextExpandRepeaterAdapterService {
+    #renderer;
+    constructor(rendererFactory) {
+        this.#renderer = rendererFactory.createRenderer(undefined, null);
+    }
+    getItems(elRef) {
+        return elRef.nativeElement.querySelectorAll('.sky-text-expand-repeater-item');
+    }
+    hideItem(item) {
+        this.#renderer.setStyle(item, 'display', 'none');
+    }
+    showItem(item) {
+        this.#renderer.removeStyle(item, 'display');
+    }
+    getContainerHeight(containerEl) {
+        return containerEl.nativeElement.offsetHeight;
+    }
+    removeContainerMaxHeight(containerEl) {
+        this.#renderer.removeStyle(containerEl.nativeElement, 'max-height');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterAdapterService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    /**
+     * The data to truncate.
+     */
+    set data(value) {
+        this.#_data = value;
+        // Wait for the dom to render the new items based on the updated data
+        setTimeout(() => {
+            this.#htmlItems = this.#textExpandRepeaterAdapter.getItems(this.#elRef);
+            this.#setup(value);
+        });
+    }
+    get data() {
+        return this.#_data;
+    }
+    /**
+     * The number of items to display before truncating the list. If not supplied, all items are shown.
+     */
+    set maxItems(value) {
+        this.#_maxItems = value;
+        this.#setup(this.data);
+    }
+    get maxItems() {
+        return this.#_maxItems;
+    }
+    #seeMoreText;
+    #seeLessText;
+    #htmlItems;
+    #_data;
+    #_maxItems;
+    #resources;
+    #elRef;
+    #textExpandRepeaterAdapter;
+    #changeDetector;
+    constructor(resources, elRef, textExpandRepeaterAdapter, changeDetector) {
+        /**
+         * The style of bullet to use
+         * @default "unordered"
+         */
+        this.listStyle = 'unordered';
+        this.buttonText = '';
+        this.expandable = false;
+        this.contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
+        this.transitionHeight = 1;
+        this.#seeMoreText = '';
+        this.#seeLessText = '';
+        this.#resources = resources;
+        this.#elRef = elRef;
+        this.#textExpandRepeaterAdapter = textExpandRepeaterAdapter;
+        this.#changeDetector = changeDetector;
+    }
+    ngAfterViewInit() {
+        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();
+        });
+    }
+    animationEnd() {
+        // Ensure all items that should be hidden are hidden. This is because we need them shown during the animation window for visual purposes.
+        if (!this.isExpanded) {
+            this.#hideItems();
+        }
+        // This set timeout is needed as the `animationEnd` function is called by the angular animation callback prior to the animation setting the style on the element
+        setTimeout(() => {
+            if (this.containerEl) {
+                // Set height back to auto so the browser can change the height as needed with window changes
+                this.#textExpandRepeaterAdapter.removeContainerMaxHeight(this.containerEl);
+            }
+        });
+    }
+    repeaterExpand() {
+        if (!this.isExpanded) {
+            this.#animateRepeater(true);
+        }
+        else {
+            this.#animateRepeater(false);
+        }
+    }
+    #animateRepeater(expanding) {
+        const adapter = this.#textExpandRepeaterAdapter;
+        const container = this.containerEl;
+        if (container) {
+            if (expanding) {
+                this.#showItems();
+            }
+            else {
+                this.#hideItems();
+            }
+            const newHeight = adapter.getContainerHeight(container);
+            this.transitionHeight = newHeight;
+            if (!expanding) {
+                this.buttonText = this.#seeMoreText;
+            }
+            else {
+                this.buttonText = this.#seeLessText;
+            }
+            if (!expanding) {
+                // Show all items during animation for visual purposes.
+                this.#showItems();
+            }
+            this.isExpanded = expanding;
+        }
+    }
+    #setup(value) {
+        if (value) {
+            const length = value.length;
+            if (this.maxItems && length > this.maxItems) {
+                this.expandable = true;
+                this.buttonText = this.#seeMoreText;
+                this.#hideItems();
+                if (this.containerEl) {
+                    this.transitionHeight =
+                        this.#textExpandRepeaterAdapter.getContainerHeight(this.containerEl);
+                }
+                this.isExpanded = false;
+            }
+            else {
+                this.expandable = false;
+                this.isExpanded = undefined;
+            }
+        }
+        else {
+            this.expandable = false;
+            this.isExpanded = undefined;
+        }
+        this.#changeDetector.markForCheck();
+    }
+    #hideItems() {
+        if (this.#htmlItems && this.maxItems) {
+            for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
+                this.#textExpandRepeaterAdapter.hideItem(this.#htmlItems[i]);
+            }
+        }
+    }
+    #showItems() {
+        if (this.#htmlItems && this.maxItems) {
+            for (let i = this.maxItems; i < this.#htmlItems.length; i++) {
+                this.#textExpandRepeaterAdapter.showItem(this.#htmlItems[i]);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [{ token: i1$3.SkyLibResourcesService }, { token: i0.ElementRef }, { token: SkyTextExpandRepeaterAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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 }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  <ul\n    *ngIf=\"listStyle !== 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [@expansionAnimation]=\"{\n      value: isExpanded,\n      params: { transitionHeight: transitionHeight }\n    }\"\n    (@expansionAnimation.done)=\"animationEnd()\"\n    [id]=\"contentSectionId\"\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    [@expansionAnimation]=\"{\n      value: isExpanded,\n      params: { transitionHeight: transitionHeight }\n    }\"\n    (@expansionAnimation.done)=\"animationEnd()\"\n    [id]=\"contentSectionId\"\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 data\" 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: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:var(--sky-compat-text-expand-repeater-margin-top, 0)}.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+            trigger('expansionAnimation', [
+                transition(':enter', []),
+                state('true', style({
+                    maxHeight: '{{transitionHeight}}px',
+                }), { params: { transitionHeight: 0 } }),
+                state('false', style({
+                    maxHeight: '{{transitionHeight}}px',
+                }), { params: { transitionHeight: 0 } }),
+                transition('true => false', animate('250ms ease')),
+                transition('false => true', animate('250ms ease')),
+                transition('void => *', []),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ animations: [
+                        trigger('expansionAnimation', [
+                            transition(':enter', []),
+                            state('true', style({
+                                maxHeight: '{{transitionHeight}}px',
+                            }), { params: { transitionHeight: 0 } }),
+                            state('false', style({
+                                maxHeight: '{{transitionHeight}}px',
+                            }), { params: { transitionHeight: 0 } }),
+                            transition('true => false', animate('250ms ease')),
+                            transition('false => true', animate('250ms ease')),
+                            transition('void => *', []),
+                        ]),
+                    ], 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    [@expansionAnimation]=\"{\n      value: isExpanded,\n      params: { transitionHeight: transitionHeight }\n    }\"\n    (@expansionAnimation.done)=\"animationEnd()\"\n    [id]=\"contentSectionId\"\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    [@expansionAnimation]=\"{\n      value: isExpanded,\n      params: { transitionHeight: transitionHeight }\n    }\"\n    (@expansionAnimation.done)=\"animationEnd()\"\n    [id]=\"contentSectionId\"\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 data\" 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: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:var(--sky-compat-text-expand-repeater-margin-top, 0)}.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$3.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterModule, declarations: [SkyTextExpandRepeaterComponent], imports: [SkyI18nModule, SkyLayoutResourcesModule, CommonModule], exports: [SkyTextExpandRepeaterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyTextExpandRepeaterModule, imports: [SkyI18nModule, SkyLayoutResourcesModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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-bottom:0;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-bottom:0;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: "16.1.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-bottom:0;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-bottom:0;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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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: "16.1.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;
+    }
+    set sectionComponents(value) {
+        this.hasSections = !!value && value.length > 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.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+:host .sky-toolbar-container{border-top:none}.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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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+:host .sky-toolbar-container{border-top:none}.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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarModule, declarations: [SkyToolbarComponent,
+            SkyToolbarItemComponent,
+            SkyToolbarSectionComponent,
+            SkyToolbarViewActionsComponent], imports: [CommonModule], exports: [SkyToolbarComponent,
+            SkyToolbarItemComponent,
+            SkyToolbarSectionComponent,
+            SkyToolbarViewActionsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SkyToolbarModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.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, 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