@skyux/layout 7.0.0-beta.1 → 7.0.0-beta.3

package/fesm2015/skyux-layout.mjs

@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
 import * as i1 from '@angular/common';
 import { CommonModule } 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 } from '@angular/core';
+import { Injectable, EventEmitter, Component, ViewEncapsulation, SkipSelf, HostBinding, Input, Output, ElementRef, Optional, ContentChildren, ViewChild, HostListener, NgModule, ChangeDetectionStrategy, Directive, TemplateRef, InjectionToken, Inject } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2$1 from '@skyux/indicators';
@@ -23,8 +23,8 @@ 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 } from '@angular/animations';
-import * as i2$2 from '@skyux/modals';
+import { trigger, transition, style, query, group, animate, state } from '@angular/animations';
+import * as i1$4 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 
 var _SkyActionButtonAdapterService_instances, _SkyActionButtonAdapterService_renderer, _SkyActionButtonAdapterService_getResponsiveClassName;
@@ -749,111 +749,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyInlineDeleteAdapterService_instances, _SkyInlineDeleteAdapterService_element, _SkyInlineDeleteAdapterService_focusableElements, _SkyInlineDeleteAdapterService_parentEl, _SkyInlineDeleteAdapterService_parentElUnlistenFn, _SkyInlineDeleteAdapterService_renderer, _SkyInlineDeleteAdapterService_coreAdapterService, _SkyInlineDeleteAdapterService_focusNextElement, _SkyInlineDeleteAdapterService_getFocusableElements, _SkyInlineDeleteAdapterService_isElementHiddenOrCovered, _SkyInlineDeleteAdapterService_isElementHidden, _SkyInlineDeleteAdapterService_isShift;
 /**
  * @internal
  */
 class SkyInlineDeleteAdapterService {
     constructor(coreAdapterService, rendererFactory) {
-        this.coreAdapterService = coreAdapterService;
-        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+        _SkyInlineDeleteAdapterService_instances.add(this);
+        _SkyInlineDeleteAdapterService_element.set(this, void 0);
+        _SkyInlineDeleteAdapterService_focusableElements.set(this, void 0);
+        _SkyInlineDeleteAdapterService_parentEl.set(this, void 0);
+        _SkyInlineDeleteAdapterService_parentElUnlistenFn.set(this, void 0);
+        _SkyInlineDeleteAdapterService_renderer.set(this, void 0);
+        _SkyInlineDeleteAdapterService_coreAdapterService.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_coreAdapterService, coreAdapterService, "f");
+        __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     clearListeners() {
         /* istanbul ignore else */
-        if (this.parentElUnlistenFn) {
-            this.parentElUnlistenFn();
+        if (__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentElUnlistenFn, "f")) {
+            __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentElUnlistenFn, "f").call(this);
         }
     }
     setEl(element) {
-        this.element = element;
-        this.parentEl = element.parentElement;
+        __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_element, element, "f");
+        __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_parentEl, element.parentElement, "f");
         /* istanbul ignore else */
-        if (this.parentEl) {
-            this.parentElUnlistenFn = this.renderer.listen(this.parentEl, 'focusin', (event) => {
-                const target = event.target;
-                if (!this.element.contains(target) && this.parentEl !== target) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.stopImmediatePropagation();
-                    target.blur();
-                    this.focusNextElement(target, this.isShift(event), this.parentEl);
+        if (__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f")) {
+            __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_parentElUnlistenFn, __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_renderer, "f").listen(__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f"), 'focusin', (event) => {
+                if (__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_element, "f")) {
+                    const target = event.target;
+                    if (!__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_element, "f").contains(target) && __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f") !== target) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        event.stopImmediatePropagation();
+                        target.blur();
+                        __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_focusNextElement).call(this, target, __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isShift).call(this, event));
+                    }
                 }
-            });
+            }), "f");
         }
     }
-    focusNextElement(targetElement, shiftKey, busyEl) {
-        const focussable = this.getFocussableElements();
-        // If shift tab, go in the other direction
-        const modifier = shiftKey ? -1 : 1;
-        // Find the next navigable element that isn't waiting
-        const startingIndex = focussable.indexOf(targetElement);
-        let curIndex = startingIndex + modifier;
-        while (focussable[curIndex] &&
-            this.isElementHiddenOrCovered(focussable[curIndex])) {
+}
+_SkyInlineDeleteAdapterService_element = new WeakMap(), _SkyInlineDeleteAdapterService_focusableElements = new WeakMap(), _SkyInlineDeleteAdapterService_parentEl = new WeakMap(), _SkyInlineDeleteAdapterService_parentElUnlistenFn = new WeakMap(), _SkyInlineDeleteAdapterService_renderer = new WeakMap(), _SkyInlineDeleteAdapterService_coreAdapterService = new WeakMap(), _SkyInlineDeleteAdapterService_instances = new WeakSet(), _SkyInlineDeleteAdapterService_focusNextElement = function _SkyInlineDeleteAdapterService_focusNextElement(targetElement, shiftKey) {
+    const focusable = __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_getFocusableElements).call(this);
+    // 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] &&
+        __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHiddenOrCovered).call(this, focusable[curIndex])) {
+        curIndex += modifier;
+    }
+    if (focusable[curIndex] &&
+        !__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHiddenOrCovered).call(this, 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] &&
+            __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHiddenOrCovered).call(this, focusable[curIndex])) {
             curIndex += modifier;
         }
-        if (focussable[curIndex] &&
-            !this.isElementHiddenOrCovered(focussable[curIndex])) {
-            focussable[curIndex].focus();
+        /* istanbul ignore else */
+        /* sanity check */
+        if (focusable[curIndex] &&
+            !__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHiddenOrCovered).call(this, focusable[curIndex])) {
+            focusable[curIndex].focus();
         }
         else {
-            // Try wrapping the navigation
-            /* istanbul ignore next */
-            curIndex = modifier > 0 ? 0 : focussable.length - 1;
-            /* istanbul ignore next */
-            while (curIndex !== startingIndex &&
-                focussable[curIndex] &&
-                this.isElementHiddenOrCovered(focussable[curIndex])) {
-                curIndex += modifier;
-            }
-            /* istanbul ignore else */
-            /* sanity check */
-            if (focussable[curIndex] &&
-                !this.isElementHiddenOrCovered(focussable[curIndex])) {
-                focussable[curIndex].focus();
-            }
-            else {
-                // No valid target, wipe focus
-                // This should never happen in practice due to the multiple inline delete buttons
-                if (document.activeElement && document.activeElement.blur) {
-                    document.activeElement.blur();
-                }
-                document.body.focus();
+            // 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();
             }
-        }
-        // clear focussableElements list so that if things change between tabbing we know about it
-        this.focussableElements = undefined;
-    }
-    getFocussableElements() {
-        // Keep this cached so we can reduce querys
-        if (this.focussableElements) {
-            return this.focussableElements;
-        }
-        this.focussableElements = this.coreAdapterService.getFocusableChildren(document.body);
-        return this.focussableElements;
-    }
-    isElementHiddenOrCovered(element) {
-        // Check if the element is hidden by css, not within the inline delete, or a wait is covering it
-        return (this.isElementHidden(element) ||
-            (this.parentEl.contains(element) &&
-                (!this.element.contains(element) ||
-                    this.parentEl.querySelector('.sky-wait-mask') !== null)));
-    }
-    isElementHidden(element) {
-        const style = window.getComputedStyle(element);
-        return style.display === 'none' || style.visibility === 'hidden';
-    }
-    isShift(event) {
-        // Determine if shift+tab was used based on element order
-        const elements = this.getFocussableElements().filter((elem) => !this.isElementHidden(elem));
-        const previousInd = elements.indexOf(event.relatedTarget);
-        const currentInd = elements.indexOf(event.target);
-        /* istanbul ignore next */
-        return (previousInd === currentInd + 1 ||
-            (previousInd === 0 && currentInd === elements.length - 1) ||
-            previousInd > currentInd ||
-            !event.relatedTarget);
-    }
-}
+            document.body.focus();
+        }
+    }
+    // clear focusableElements list so that if things change between tabbing we know about it
+    __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_focusableElements, undefined, "f");
+}, _SkyInlineDeleteAdapterService_getFocusableElements = function _SkyInlineDeleteAdapterService_getFocusableElements() {
+    // Keep this cached so we can reduce querys
+    if (__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_focusableElements, "f")) {
+        return __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_focusableElements, "f");
+    }
+    __classPrivateFieldSet(this, _SkyInlineDeleteAdapterService_focusableElements, __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_coreAdapterService, "f").getFocusableChildren(document.body), "f");
+    return __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_focusableElements, "f");
+}, _SkyInlineDeleteAdapterService_isElementHiddenOrCovered = function _SkyInlineDeleteAdapterService_isElementHiddenOrCovered(element) {
+    var _a;
+    // Check if the element is hidden by css, not within the inline delete, or a wait is covering it
+    return (__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHidden).call(this, element) ||
+        (!!__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f") &&
+            __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f").contains(element) &&
+            (!((_a = __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_element, "f")) === null || _a === void 0 ? void 0 : _a.contains(element)) ||
+                __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_parentEl, "f").querySelector('.sky-wait-mask') !== null)));
+}, _SkyInlineDeleteAdapterService_isElementHidden = function _SkyInlineDeleteAdapterService_isElementHidden(element) {
+    const style = window.getComputedStyle(element);
+    return style.display === 'none' || style.visibility === 'hidden';
+}, _SkyInlineDeleteAdapterService_isShift = function _SkyInlineDeleteAdapterService_isShift(event) {
+    // Determine if shift+tab was used based on element order
+    const elements = __classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_getFocusableElements).call(this).filter((elem) => !__classPrivateFieldGet(this, _SkyInlineDeleteAdapterService_instances, "m", _SkyInlineDeleteAdapterService_isElementHidden).call(this, elem));
+    const previousInd = elements.indexOf(event.relatedTarget);
+    const currentInd = elements.indexOf(event.target);
+    /* istanbul ignore next */
+    return (previousInd === currentInd + 1 ||
+        (previousInd === 0 && currentInd === elements.length - 1) ||
+        previousInd > currentInd ||
+        !event.relatedTarget);
+};
 SkyInlineDeleteAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInlineDeleteAdapterService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyInlineDeleteAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInlineDeleteAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInlineDeleteAdapterService, decorators: [{
@@ -876,15 +884,13 @@ var SkyInlineDeleteType;
     SkyInlineDeleteType["Card"] = "card";
 })(SkyInlineDeleteType || (SkyInlineDeleteType = {}));
 
+var _SkyInlineDeleteComponent_adapterService, _SkyInlineDeleteComponent_changeDetector, _SkyInlineDeleteComponent_elRef;
 /**
  * Auto-incrementing integer used to generate unique ids for inline delete components.
  */
 let nextId$2 = 0;
 class SkyInlineDeleteComponent {
     constructor(adapterService, changeDetector, elRef) {
-        this.adapterService = adapterService;
-        this.changeDetector = changeDetector;
-        this.elRef = elRef;
         /**
          * Indicates whether the deletion is pending.
          * @default false
@@ -901,6 +907,12 @@ class SkyInlineDeleteComponent {
         this.animationState = 'shown';
         this.assistiveTextId = `sky-inline-delete-assistive-text-${++nextId$2}`;
         this.type = SkyInlineDeleteType.Standard;
+        _SkyInlineDeleteComponent_adapterService.set(this, void 0);
+        _SkyInlineDeleteComponent_changeDetector.set(this, void 0);
+        _SkyInlineDeleteComponent_elRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyInlineDeleteComponent_adapterService, adapterService, "f");
+        __classPrivateFieldSet(this, _SkyInlineDeleteComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyInlineDeleteComponent_elRef, elRef, "f");
     }
     /**
      * Initialization lifecycle hook
@@ -914,7 +926,7 @@ class SkyInlineDeleteComponent {
      * @internal
      */
     ngOnDestroy() {
-        this.adapterService.clearListeners();
+        __classPrivateFieldGet(this, _SkyInlineDeleteComponent_adapterService, "f").clearListeners();
         this.cancelTriggered.complete();
         this.deleteTriggered.complete();
     }
@@ -937,7 +949,7 @@ class SkyInlineDeleteComponent {
      */
     setType(type) {
         this.type = type;
-        this.changeDetector.detectChanges();
+        __classPrivateFieldGet(this, _SkyInlineDeleteComponent_changeDetector, "f").detectChanges();
     }
     /**
      * Handles actions that should be taken after the inline delete animates
@@ -945,18 +957,20 @@ class SkyInlineDeleteComponent {
      * @internal
      */
     onAnimationDone(event) {
+        var _a;
         if (event.toState === 'hidden') {
             this.cancelTriggered.emit();
         }
         else {
-            this.deleteButton.nativeElement.focus();
+            (_a = this.deleteButton) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
             /* istanbul ignore else */
-            if (this.elRef) {
-                this.adapterService.setEl(this.elRef.nativeElement);
+            if (__classPrivateFieldGet(this, _SkyInlineDeleteComponent_elRef, "f")) {
+                __classPrivateFieldGet(this, _SkyInlineDeleteComponent_adapterService, "f").setEl(__classPrivateFieldGet(this, _SkyInlineDeleteComponent_elRef, "f").nativeElement);
             }
         }
     }
 }
+_SkyInlineDeleteComponent_adapterService = new WeakMap(), _SkyInlineDeleteComponent_changeDetector = new WeakMap(), _SkyInlineDeleteComponent_elRef = new WeakMap();
 SkyInlineDeleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 SkyInlineDeleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
         trigger('inlineDeleteAnimation', [
@@ -1092,33 +1106,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{ selector: 'sky-card-title', template: "<ng-content></ng-content>\n" }]
         }] });
 
+var _SkyCardComponent_subscription, _SkyCardComponent__size;
 /**
  * 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 {
     constructor(logger) {
+        /**
+         * Indicates 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;
+        /**
+         * Indicates 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;
+        _SkyCardComponent_subscription.set(this, void 0);
+        _SkyCardComponent__size.set(this, '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.',
         });
     }
+    /**
+     * Specifies the size of the card. The valid options are `"large"` and `"small"`.
+     * @default "large"
+     */
+    set size(value) {
+        __classPrivateFieldSet(this, _SkyCardComponent__size, value !== null && value !== void 0 ? value : 'large', "f");
+    }
+    get size() {
+        return __classPrivateFieldGet(this, _SkyCardComponent__size, "f");
+    }
     ngAfterContentInit() {
-        this.showTitle = this.titleComponent.length > 0;
-        this.subscription = this.titleComponent.changes.subscribe(() => {
-            this.showTitle = this.titleComponent.length > 0;
-        });
-        this.inlineDeleteComponent.forEach((item) => {
+        var _a, _b, _c;
+        this.showTitle = !!this.titleComponent && this.titleComponent.length > 0;
+        __classPrivateFieldSet(this, _SkyCardComponent_subscription, (_a = this.titleComponent) === null || _a === void 0 ? void 0 : _a.changes.subscribe(() => {
+            this.showTitle = !!this.titleComponent && this.titleComponent.length > 0;
+        }), "f");
+        (_b = this.inlineDeleteComponent) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
             item.setType(SkyInlineDeleteType.Card);
         });
-        this.inlineDeleteComponent.changes.subscribe(() => {
-            this.inlineDeleteComponent.forEach((item) => {
+        (_c = this.inlineDeleteComponent) === null || _c === void 0 ? void 0 : _c.changes.subscribe(() => {
+            var _a;
+            (_a = this.inlineDeleteComponent) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
                 item.setType(SkyInlineDeleteType.Card);
             });
         });
@@ -1138,11 +1179,12 @@ class SkyCardComponent {
     ngOnDestroy() {
         /* istanbul ignore else */
         /* sanity check */
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyCardComponent_subscription, "f")) {
+            __classPrivateFieldGet(this, _SkyCardComponent_subscription, "f").unsubscribe();
         }
     }
 }
+_SkyCardComponent_subscription = new WeakMap(), _SkyCardComponent__size = new WeakMap();
 SkyCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$2.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
 SkyCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyCardComponent, decorators: [{
@@ -1277,10 +1319,10 @@ class SkyDefinitionListValueComponent {
     }
 }
 SkyDefinitionListValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDefinitionListValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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" }] });
+SkyDefinitionListValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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"] }]
+            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 }]; } });
 
 /**
@@ -1382,32 +1424,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
+var _SkyDescriptionListDescriptionComponent_changeDetector, _SkyDescriptionListDescriptionComponent_ngUnsubscribe, _SkyDescriptionListDescriptionComponent_themeSvc;
 /**
  * Specifies the description in a term-description pair.
  */
 class SkyDescriptionListDescriptionComponent {
-    constructor(service, changeRef, themeSvc) {
+    constructor(service, changeDetector, themeSvc) {
         this.service = service;
-        this.changeRef = changeRef;
-        this.themeSvc = themeSvc;
-        this.ngUnsubscribe = new Subject();
+        _SkyDescriptionListDescriptionComponent_changeDetector.set(this, void 0);
+        _SkyDescriptionListDescriptionComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDescriptionListDescriptionComponent_themeSvc.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDescriptionListDescriptionComponent_changeDetector, changeDetector, "f");
+        __classPrivateFieldSet(this, _SkyDescriptionListDescriptionComponent_themeSvc, themeSvc, "f");
     }
     ngOnInit() {
         /* istanbul ignore else */
-        if (this.themeSvc) {
-            this.themeSvc.settingsChange
-                .pipe(takeUntil(this.ngUnsubscribe))
+        if (__classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_themeSvc, "f")) {
+            __classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_themeSvc, "f").settingsChange
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_ngUnsubscribe, "f")))
                 .subscribe((themeSettings) => {
                 this.themeName = themeSettings.currentSettings.theme.name;
-                this.changeRef.markForCheck();
+                __classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_changeDetector, "f").markForCheck();
             });
         }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDescriptionListDescriptionComponent_ngUnsubscribe, "f").complete();
     }
 }
+_SkyDescriptionListDescriptionComponent_changeDetector = new WeakMap(), _SkyDescriptionListDescriptionComponent_ngUnsubscribe = new WeakMap(), _SkyDescriptionListDescriptionComponent_themeSvc = new WeakMap();
 SkyDescriptionListDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDescriptionListDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
@@ -1463,12 +1509,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: [SkyDescriptionListDescriptionComponent]
             }] } });
 
+var _SkyDescriptionListAdapterService_instances, _SkyDescriptionListAdapterService_renderer, _SkyDescriptionListAdapterService_getResponsiveClassName;
 /**
  * @internal
  */
 class SkyDescriptionListAdapterService {
     constructor(rendererFactory) {
-        this.renderer = rendererFactory.createRenderer(undefined, undefined);
+        _SkyDescriptionListAdapterService_instances.add(this);
+        _SkyDescriptionListAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyDescriptionListAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     getWidth(elementRef) {
         return elementRef.nativeElement.clientWidth;
@@ -1476,34 +1525,35 @@ class SkyDescriptionListAdapterService {
     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';
-        }
+        const className = __classPrivateFieldGet(this, _SkyDescriptionListAdapterService_instances, "m", _SkyDescriptionListAdapterService_getResponsiveClassName).call(this, width);
+        __classPrivateFieldGet(this, _SkyDescriptionListAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-xs');
+        __classPrivateFieldGet(this, _SkyDescriptionListAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-sm');
+        __classPrivateFieldGet(this, _SkyDescriptionListAdapterService_renderer, "f").removeClass(nativeEl, 'sky-responsive-container-md');
+        __classPrivateFieldGet(this, _SkyDescriptionListAdapterService_renderer, "f").addClass(nativeEl, className);
     }
 }
+_SkyDescriptionListAdapterService_renderer = new WeakMap(), _SkyDescriptionListAdapterService_instances = new WeakSet(), _SkyDescriptionListAdapterService_getResponsiveClassName = function _SkyDescriptionListAdapterService_getResponsiveClassName(width) {
+    const xsBreakpointMaxPixels = 479;
+    const smBreakpointMinPixels = 480;
+    const smBreakpointMaxPixels = 767;
+    if (width <= xsBreakpointMaxPixels) {
+        return 'sky-responsive-container-xs';
+    }
+    else if (width >= smBreakpointMinPixels &&
+        width <= smBreakpointMaxPixels) {
+        return 'sky-responsive-container-sm';
+    }
+    else {
+        return 'sky-responsive-container-md';
+    }
+};
 SkyDescriptionListAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyDescriptionListAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
+var _SkyDescriptionListComponent_ngUnsubscribe, _SkyDescriptionListComponent__mode;
 /**
  * Creates a description list to display term-description pairs.
  */
@@ -1512,7 +1562,8 @@ class SkyDescriptionListComponent {
         this.adapterService = adapterService;
         this.changeDetector = changeDetector;
         this.descriptionListService = descriptionListService;
-        this.ngUnsubscribe = new Subject();
+        _SkyDescriptionListComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyDescriptionListComponent__mode.set(this, 'vertical');
     }
     /**
      * Specifies a default description to display when no description is provided
@@ -1528,39 +1579,45 @@ class SkyDescriptionListComponent {
      * @default "vertical"
      */
     set mode(value) {
-        this._mode = value;
+        __classPrivateFieldSet(this, _SkyDescriptionListComponent__mode, value || 'vertical', "f");
     }
     get mode() {
-        return this._mode || 'vertical';
+        return __classPrivateFieldGet(this, _SkyDescriptionListComponent__mode, "f");
     }
     ngAfterContentInit() {
         // Wait for all content to render before detecting parent width.
         setTimeout(() => {
             this.updateResponsiveClass();
         });
-        this.contentComponents.changes
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(() => {
-            this.changeDetector.markForCheck();
-        });
+        // istanbul ignore else
+        if (this.contentComponents) {
+            this.contentComponents.changes
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDescriptionListComponent_ngUnsubscribe, "f")))
+                .subscribe(() => {
+                this.changeDetector.markForCheck();
+            });
+        }
     }
     ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
+        __classPrivateFieldGet(this, _SkyDescriptionListComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyDescriptionListComponent_ngUnsubscribe, "f").complete();
     }
     onWindowResize() {
         this.updateResponsiveClass();
     }
     updateResponsiveClass() {
-        this.adapterService.setResponsiveClass(this.elementRef);
-        this.changeDetector.markForCheck();
+        if (this.elementRef) {
+            this.adapterService.setResponsiveClass(this.elementRef);
+            this.changeDetector.markForCheck();
+        }
     }
 }
+_SkyDescriptionListComponent_ngUnsubscribe = new WeakMap(), _SkyDescriptionListComponent__mode = new WeakMap();
 SkyDescriptionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, deps: [{ token: SkyDescriptionListAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDescriptionListService }], target: i0.ɵɵFactoryTarget.Component });
-SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyDescriptionListComponent, selector: "sky-description-list", inputs: { defaultDescription: "defaultDescription", listItemWidth: "listItemWidth", mode: "mode" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], queries: [{ propertyName: "contentComponents", predicate: SkyDescriptionListContentComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["descriptionListElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<dl\n  class=\"sky-description-list\"\n  [ngClass]=\"{\n    'sky-description-list-long-description-mode': mode === 'longDescription',\n    'sky-description-list-vertical-mode': mode === 'vertical',\n    'sky-description-list-horizontal-mode': mode === 'horizontal'\n  }\"\n  #descriptionListElement\n>\n  <!--\n    Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n    to avoid adding non-semantic HTML tags to DOM\n  -->\n  <div\n    *ngFor=\"let contentComponent of contentComponents\"\n    class=\"sky-description-list-content\"\n    [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n  >\n    <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n      <ng-container\n        *ngTemplateOutlet=\"termComponent.templateRef\"\n      ></ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n      ></ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyDescriptionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"], 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: "14.2.0", ngImport: i0, type: SkyDescriptionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-description-list', providers: [SkyDescriptionListAdapterService, SkyDescriptionListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dl\n  class=\"sky-description-list\"\n  [ngClass]=\"{\n    'sky-description-list-long-description-mode': mode === 'longDescription',\n    'sky-description-list-vertical-mode': mode === 'vertical',\n    'sky-description-list-horizontal-mode': mode === 'horizontal'\n  }\"\n  #descriptionListElement\n>\n  <!--\n    Wrapping div is for horizontal flexing. Also injecting children's templateRef directly\n    to avoid adding non-semantic HTML tags to DOM\n  -->\n  <div\n    *ngFor=\"let contentComponent of contentComponents\"\n    class=\"sky-description-list-content\"\n    [style.width]=\"mode === 'horizontal' ? listItemWidth : ''\"\n  >\n    <dt *ngFor=\"let termComponent of contentComponent?.termComponents\">\n      <ng-container\n        *ngTemplateOutlet=\"termComponent.templateRef\"\n      ></ng-container>\n    </dt>\n    <dd\n      *ngFor=\"\n        let descriptionComponent of contentComponent?.descriptionComponents\n      \"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"descriptionComponent.templateRef\"\n      ></ng-container>\n    </dd>\n  </div>\n</dl>\n", styles: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"] }]
+            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: [".sky-description-list{margin:0;padding:0}.sky-description-list dt{color:#686c73;font-size:14px;font-weight:400;margin:0 0 3px;padding:0}.sky-description-list dd{margin:0;padding:0}.sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 15px;width:auto}.sky-description-list.sky-description-list-horizontal-mode{display:flex;flex-wrap:wrap}.sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 15px;padding:0 60px 0 0;min-width:100px;width:auto}.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-xs .sky-description-list-content,.sky-description-list.sky-description-list-horizontal-mode.sky-responsive-container-sm .sky-description-list-content{width:50%}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content{display:flex}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content:not(:last-child){margin:0 0 10px}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dt{color:#212327;font-size:16px;font-weight:600;margin:0 20px 0 0;width:25%;word-break:break-word}.sky-description-list.sky-description-list-long-description-mode .sky-description-list-content dd{flex:1}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content{flex-direction:column}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dt{margin:0 0 3px;width:100%}.sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs .sky-description-list-content dd{margin:0 0 10px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}:host-context(.sky-theme-modern) .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dt{color:#686c73;font-size:14px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-vertical-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode{margin:0 0 -20px}.sky-theme-modern .sky-description-list.sky-description-list-horizontal-mode .sky-description-list-content{margin:0 0 20px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dt{color:inherit;font-weight:700;font-size:inherit}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode dd{font-size:16px;font-weight:400}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dt{margin:0 0 5px}.sky-theme-modern .sky-description-list.sky-description-list-long-description-mode.sky-responsive-container-xs dd{margin:0 0 20px}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyDescriptionListAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDescriptionListService }]; }, propDecorators: { defaultDescription: [{
                 type: Input
             }], listItemWidth: [{
@@ -1649,30 +1706,26 @@ var SkyDescriptionListMode;
     SkyDescriptionListMode["vertical"] = "vertical";
 })(SkyDescriptionListMode || (SkyDescriptionListMode = {}));
 
-/**
- * @deprecated Use `SkyFluidGridGutterSizeType` instead.
- * @internal
- */
-var SkyFluidGridGutterSize;
-(function (SkyFluidGridGutterSize) {
-    /**
-     * Specifies a small gutter.
-     */
-    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Small"] = 0] = "Small";
-    /**
-     * Specifies a medium gutter.
-     */
-    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Medium"] = 1] = "Medium";
-    /**
-     * Specifies a large gutter.
-     */
-    SkyFluidGridGutterSize[SkyFluidGridGutterSize["Large"] = 2] = "Large";
-})(SkyFluidGridGutterSize || (SkyFluidGridGutterSize = {}));
-
+var _SkyColumnComponent__screenXSmall;
 /**
  * Displays a column within a row of the fluid grid.
  */
 class SkyColumnComponent {
+    constructor() {
+        _SkyColumnComponent__screenXSmall.set(this, 12);
+    }
+    /**
+     * Specifies the number of columns (1-12) to use 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) {
+        __classPrivateFieldSet(this, _SkyColumnComponent__screenXSmall, value !== null && value !== void 0 ? value : 12, "f");
+    }
+    get screenXSmall() {
+        return __classPrivateFieldGet(this, _SkyColumnComponent__screenXSmall, "f");
+    }
     ngOnChanges(changes) {
         /* istanbul ignore else */
         if (changes.screenXSmall ||
@@ -1702,6 +1755,7 @@ class SkyColumnComponent {
         this.classnames = this.getClassNames();
     }
 }
+_SkyColumnComponent__screenXSmall = new WeakMap();
 SkyColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SkyColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyColumnComponent, decorators: [{
@@ -1720,20 +1774,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['class']
             }] } });
 
+var _SkyFluidGridComponent__gutterSize;
 /**
  * Wraps the fluid grid to ensure proper spacing. Without the wrapper, the
  * alignment, padding, and margins do not behave as expected.
  */
 class SkyFluidGridComponent {
-    /**
-     * Disables the outer left and right margin of the fluid grid container.
-     * @default false
-     */
-    set disableMargin(value) {
-        this._disableMargin = value;
-    }
-    get disableMargin() {
-        return this._disableMargin || false;
+    constructor() {
+        /**
+         * Disables the outer left and right margin of the fluid grid container.
+         * @default false
+         */
+        this.disableMargin = false;
+        _SkyFluidGridComponent__gutterSize.set(this, 'large');
     }
     /**
      * Specifies a `SkyFluidGridGutterSizeType` to define the size of the padding
@@ -1741,37 +1794,18 @@ class SkyFluidGridComponent {
      * @default "large"
      */
     set gutterSize(value) {
-        this._gutterSize = value;
+        __classPrivateFieldSet(this, _SkyFluidGridComponent__gutterSize, value !== null && value !== void 0 ? value : 'large', "f");
     }
     get gutterSize() {
-        return this._gutterSize === undefined ? 'large' : this._gutterSize;
-    }
-    /**
-     * @internal
-     */
-    get gutterSizeResolved() {
-        // Before this change, the template did a `==` comparison, implicitly converting numerical
-        // string values to their numeric values before comparing them. Checking for the numerical
-        // string value in addition to the values allowed by the type maintains this behavior.
-        switch (this.gutterSize) {
-            case 'medium':
-            case SkyFluidGridGutterSize.Medium:
-            case SkyFluidGridGutterSize.Medium.toString():
-                return 'medium';
-            case 'small':
-            case SkyFluidGridGutterSize.Small:
-            case SkyFluidGridGutterSize.Small.toString():
-                return 'small';
-            default:
-                return 'large';
-        }
+        return __classPrivateFieldGet(this, _SkyFluidGridComponent__gutterSize, "f");
     }
 }
+_SkyFluidGridComponent__gutterSize = new WeakMap();
 SkyFluidGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFluidGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFluidGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyFluidGridComponent, selector: "sky-fluid-grid", inputs: { disableMargin: "disableMargin", gutterSize: "gutterSize" }, ngImport: i0, template: "<div\n  class=\"sky-fluid-grid\"\n  [ngClass]=\"{\n    'sky-fluid-grid-gutter-size-small': gutterSizeResolved === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSizeResolved === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSizeResolved === 'large',\n    'sky-fluid-grid-no-margin': disableMargin\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-fluid-grid-gutter-size-small{padding-left:5px;padding-right:5px}.sky-fluid-grid-gutter-size-medium{padding-left:10px;padding-right:10px}.sky-fluid-grid-gutter-size-large{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-small{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-medium{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-large{padding-left:30px;padding-right:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SkyFluidGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyFluidGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-fluid-grid', template: "<div\n  class=\"sky-fluid-grid\"\n  [ngClass]=\"{\n    'sky-fluid-grid-gutter-size-small': gutterSizeResolved === 'small',\n    'sky-fluid-grid-gutter-size-medium': gutterSizeResolved === 'medium',\n    'sky-fluid-grid-gutter-size-large': gutterSizeResolved === 'large',\n    'sky-fluid-grid-no-margin': disableMargin\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-fluid-grid-gutter-size-small{padding-left:5px;padding-right:5px}.sky-fluid-grid-gutter-size-medium{padding-left:10px;padding-right:10px}.sky-fluid-grid-gutter-size-large{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-small{padding-left:10px;padding-right:10px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-medium{padding-left:15px;padding-right:15px}:host-context(.sky-theme-modern) .sky-fluid-grid-gutter-size-large{padding-left:30px;padding-right:30px}\n"] }]
+            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: [{
@@ -1814,56 +1848,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyFormatComponent_instances, _SkyFormatComponent__text, _SkyFormatComponent__args, _SkyFormatComponent_updateItemsForDisplay;
 const tokenRegex = /(\{\d+\})/;
 class SkyFormatComponent {
+    constructor() {
+        _SkyFormatComponent_instances.add(this);
+        this.itemsForDisplay = [];
+        _SkyFormatComponent__text.set(this, void 0);
+        _SkyFormatComponent__args.set(this, void 0);
+    }
     /**
      * 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();
+        __classPrivateFieldSet(this, _SkyFormatComponent__text, value, "f");
+        __classPrivateFieldGet(this, _SkyFormatComponent_instances, "m", _SkyFormatComponent_updateItemsForDisplay).call(this);
     }
     get text() {
-        return this._text;
+        return __classPrivateFieldGet(this, _SkyFormatComponent__text, "f");
     }
     /**
      * 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();
+        __classPrivateFieldSet(this, _SkyFormatComponent__args, value, "f");
+        __classPrivateFieldGet(this, _SkyFormatComponent_instances, "m", _SkyFormatComponent_updateItemsForDisplay).call(this);
     }
     get args() {
-        return this._args;
-    }
-    updateItemsForDisplay() {
-        this.itemsForDisplay = [];
-        if (this.text && this.args) {
-            const textParts = this.text.split(tokenRegex);
-            for (const textPart of textParts) {
-                // Disregard empty strings.
-                if (textPart) {
-                    const item = {};
-                    if (tokenRegex.test(textPart)) {
-                        const valueIndex = +textPart.substring(1, textPart.length - 1);
-                        item.templateRef = this.args[valueIndex];
-                    }
-                    else {
-                        item.text = textPart;
-                    }
-                    this.itemsForDisplay.push(item);
+        return __classPrivateFieldGet(this, _SkyFormatComponent__args, "f");
+    }
+}
+_SkyFormatComponent__text = new WeakMap(), _SkyFormatComponent__args = new WeakMap(), _SkyFormatComponent_instances = new WeakSet(), _SkyFormatComponent_updateItemsForDisplay = function _SkyFormatComponent_updateItemsForDisplay() {
+    this.itemsForDisplay = [];
+    if (this.text && this.args) {
+        const textParts = this.text.split(tokenRegex);
+        for (const textPart of textParts) {
+            // Disregard empty strings.
+            if (textPart) {
+                const item = {};
+                if (tokenRegex.test(textPart)) {
+                    const valueIndex = +textPart.substring(1, textPart.length - 1);
+                    item.templateRef = this.args[valueIndex];
+                }
+                else {
+                    item.text = textPart;
                 }
+                this.itemsForDisplay.push(item);
             }
         }
     }
-}
+};
 SkyFormatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyFormatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyFormatComponent, selector: "sky-format", inputs: { text: "text", args: "args" }, ngImport: i0, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <!--\n    The following ng-container must be on one line so no extra whitespace is introduced.\n  -->\n  <ng-container *ngIf=\"item.text; else item.templateRef\">{{\n    item.text\n  }}</ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyFormatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-format', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of itemsForDisplay\">\n  <!--\n    The following ng-container must be on one line so no extra whitespace is introduced.\n  -->\n  <ng-container *ngIf=\"item.text; else item.templateRef\">{{\n    item.text\n  }}</ng-container>\n</ng-container>\n" }]
+            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: [{
@@ -1884,49 +1925,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyPageThemeAdapterService_styleEl;
 /**
  * @internal
  */
 class SkyPageThemeAdapterService {
+    constructor() {
+        _SkyPageThemeAdapterService_styleEl.set(this, void 0);
+    }
     /**
      * 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 = document.createElement('style');
-            this.styleEl.appendChild(document.createTextNode('body { background-color: #fff; }'));
-            document.head.appendChild(this.styleEl);
+        if (!__classPrivateFieldGet(this, _SkyPageThemeAdapterService_styleEl, "f")) {
+            __classPrivateFieldSet(this, _SkyPageThemeAdapterService_styleEl, document.createElement('style'), "f");
+            __classPrivateFieldGet(this, _SkyPageThemeAdapterService_styleEl, "f").appendChild(document.createTextNode('body { background-color: #fff; }'));
+            document.head.appendChild(__classPrivateFieldGet(this, _SkyPageThemeAdapterService_styleEl, "f"));
         }
     }
     removeTheme() {
-        if (this.styleEl) {
-            document.head.removeChild(this.styleEl);
-            this.styleEl = undefined;
+        if (__classPrivateFieldGet(this, _SkyPageThemeAdapterService_styleEl, "f")) {
+            document.head.removeChild(__classPrivateFieldGet(this, _SkyPageThemeAdapterService_styleEl, "f"));
+            __classPrivateFieldSet(this, _SkyPageThemeAdapterService_styleEl, undefined, "f");
         }
     }
 }
+_SkyPageThemeAdapterService_styleEl = new WeakMap();
 SkyPageThemeAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageThemeAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 SkyPageThemeAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageThemeAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
             type: Injectable
         }] });
 
+var _SkyPageComponent_themeAdapter;
 /**
  * Sets the correct background color for a page.
  */
 class SkyPageComponent {
     constructor(themeAdapter) {
-        this.themeAdapter = themeAdapter;
+        _SkyPageComponent_themeAdapter.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyPageComponent_themeAdapter, themeAdapter, "f");
     }
     ngOnInit() {
-        this.themeAdapter.addTheme();
+        __classPrivateFieldGet(this, _SkyPageComponent_themeAdapter, "f").addTheme();
     }
     ngOnDestroy() {
-        this.themeAdapter.removeTheme();
+        __classPrivateFieldGet(this, _SkyPageComponent_themeAdapter, "f").removeTheme();
     }
 }
+_SkyPageComponent_themeAdapter = new WeakMap();
 SkyPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageComponent, deps: [{ token: SkyPageThemeAdapterService }], target: i0.ɵɵFactoryTarget.Component });
 SkyPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyPageComponent, selector: "sky-page", providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div>\n  <ng-content></ng-content>\n</div>\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageComponent, decorators: [{
@@ -2075,43 +2124,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             type: Injectable
         }] });
 
+var _SkyPageSummaryComponent_breakpointSubscription, _SkyPageSummaryComponent_ngUnsubscribe, _SkyPageSummaryComponent_elRef, _SkyPageSummaryComponent_adapter, _SkyPageSummaryComponent_mediaQueryService, _SkyPageSummaryComponent_changeDetectorRef;
 /**
  * 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 {
-    constructor(elRef, adapter, mediaQueryService, logger) {
-        this.elRef = elRef;
-        this.adapter = adapter;
-        this.mediaQueryService = mediaQueryService;
+    constructor(elRef, adapter, mediaQueryService, logger, changeDetector) {
+        this.hasKeyInfo = false;
+        _SkyPageSummaryComponent_breakpointSubscription.set(this, void 0);
+        _SkyPageSummaryComponent_ngUnsubscribe.set(this, new Subject());
+        _SkyPageSummaryComponent_elRef.set(this, void 0);
+        _SkyPageSummaryComponent_adapter.set(this, void 0);
+        _SkyPageSummaryComponent_mediaQueryService.set(this, void 0);
+        _SkyPageSummaryComponent_changeDetectorRef.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyPageSummaryComponent_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyPageSummaryComponent_adapter, adapter, "f");
+        __classPrivateFieldSet(this, _SkyPageSummaryComponent_mediaQueryService, mediaQueryService, "f");
+        __classPrivateFieldSet(this, _SkyPageSummaryComponent_changeDetectorRef, changeDetector, "f");
         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.',
         });
     }
-    get hasKeyInfo() {
-        return this.keyInfoComponents.length > 0;
-    }
     ngAfterViewInit() {
-        this.breakpointSubscription = this.mediaQueryService.subscribe((args) => {
-            this.adapter.updateKeyInfoLocation(this.elRef, args === SkyMediaBreakpoints.xs);
-        });
+        __classPrivateFieldSet(this, _SkyPageSummaryComponent_breakpointSubscription, __classPrivateFieldGet(this, _SkyPageSummaryComponent_mediaQueryService, "f").subscribe((args) => {
+            __classPrivateFieldGet(this, _SkyPageSummaryComponent_adapter, "f").updateKeyInfoLocation(__classPrivateFieldGet(this, _SkyPageSummaryComponent_elRef, "f"), args === SkyMediaBreakpoints.xs);
+        }), "f");
+    }
+    ngAfterContentInit() {
+        if (this.keyInfoComponents) {
+            this.hasKeyInfo = this.keyInfoComponents.length > 0;
+            this.keyInfoComponents.changes
+                .pipe(takeUntil(__classPrivateFieldGet(this, _SkyPageSummaryComponent_ngUnsubscribe, "f")))
+                .subscribe(() => {
+                this.hasKeyInfo =
+                    !!this.keyInfoComponents && this.keyInfoComponents.length > 0;
+                __classPrivateFieldGet(this, _SkyPageSummaryComponent_changeDetectorRef, "f").markForCheck();
+            });
+        }
     }
     ngOnDestroy() {
         /* istanbul ignore else */
         /* sanity check */
-        if (this.breakpointSubscription) {
-            this.breakpointSubscription.unsubscribe();
+        if (__classPrivateFieldGet(this, _SkyPageSummaryComponent_breakpointSubscription, "f")) {
+            __classPrivateFieldGet(this, _SkyPageSummaryComponent_breakpointSubscription, "f").unsubscribe();
         }
+        __classPrivateFieldGet(this, _SkyPageSummaryComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyPageSummaryComponent_ngUnsubscribe, "f").complete();
     }
 }
-SkyPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyPageSummaryComponent, deps: [{ token: i0.ElementRef }, { token: SkyPageSummaryAdapterService }, { token: i1$2.SkyMediaQueryService }, { token: i1$2.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+_SkyPageSummaryComponent_breakpointSubscription = new WeakMap(), _SkyPageSummaryComponent_ngUnsubscribe = new WeakMap(), _SkyPageSummaryComponent_elRef = new WeakMap(), _SkyPageSummaryComponent_adapter = new WeakMap(), _SkyPageSummaryComponent_mediaQueryService = new WeakMap(), _SkyPageSummaryComponent_changeDetectorRef = new WeakMap();
+SkyPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
 SkyPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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 }]; }, propDecorators: { keyInfoComponents: [{
+        }], 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,
@@ -2170,8 +2240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
 /**
  * @internal
  */
-class SkyTextExpandModalContext {
-}
+const SKY_TEXT_EXPAND_MODAL_CONTEXT = new InjectionToken('SkyTextExpandModalContext');
 
 /**
  * @internal
@@ -2185,70 +2254,113 @@ class SkyTextExpandModalComponent {
         this.instance.close();
     }
 }
-SkyTextExpandModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SkyTextExpandModalContext }, { token: i2$2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextExpandModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextExpandModalComponent, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: i2$2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { kind: "component", type: i2$2.λ2, selector: "sky-modal-content" }, { kind: "component", type: i2$2.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i2$2.λ4, selector: "sky-modal-header" }, { kind: "pipe", type: i1$3.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyTextExpandModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: ["ariaRole", "tiledBody"] }, { 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: "14.2.0", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand-modal', template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
-        }], ctorParameters: function () { return [{ type: SkyTextExpandModalContext }, { type: i2$2.SkyModalInstance }]; } });
+            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 }];
+    } });
 
+var _SkyTextExpandAdapterService_renderer;
 /**
  * @internal
  */
 class SkyTextExpandAdapterService {
     constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyTextExpandAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextExpandAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     getContainerHeight(containerEl) {
         return containerEl.nativeElement.offsetHeight;
     }
-    setContainerHeight(containerEl, height) {
-        if (height === undefined) {
-            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
-        }
-        else {
-            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
-        }
+    removeContainerMaxHeight(containerEl) {
+        __classPrivateFieldGet(this, _SkyTextExpandAdapterService_renderer, "f").removeStyle(containerEl.nativeElement, 'max-height');
     }
     setText(textEl, text) {
         textEl.nativeElement.textContent = text;
     }
 }
+_SkyTextExpandAdapterService_renderer = new WeakMap();
 SkyTextExpandAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTextExpandAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
+var _SkyTextExpandComponent_instances, _SkyTextExpandComponent_collapsedText, _SkyTextExpandComponent_newlineCount, _SkyTextExpandComponent_seeMoreText, _SkyTextExpandComponent_seeLessText, _SkyTextExpandComponent_textToShow, _SkyTextExpandComponent__maxExpandedLength, _SkyTextExpandComponent__maxExpandedNewlines, _SkyTextExpandComponent__maxLength, _SkyTextExpandComponent__text, _SkyTextExpandComponent__textEl, _SkyTextExpandComponent_resources, _SkyTextExpandComponent_modalSvc, _SkyTextExpandComponent_textExpandAdapter, _SkyTextExpandComponent_setup, _SkyTextExpandComponent_getNewlineCount, _SkyTextExpandComponent_getTruncatedText, _SkyTextExpandComponent_animateText;
 /**
  * Auto-incrementing integer used to generate unique ids for text expand components.
  */
 let nextId$1 = 0;
 class SkyTextExpandComponent {
-    constructor(resources, modalService, textExpandAdapter) {
-        this.resources = resources;
-        this.modalService = modalService;
-        this.textExpandAdapter = textExpandAdapter;
-        /**
-         * Specifies the maximum number of text characters to display inline when users select the link
-         * to expand the full text. If the text exceeds this limit, then the component expands
-         * the full text in a modal instead.
-         */
-        this.maxExpandedLength = 600;
-        /**
-         * Specifies the maximum number of newline characters to display inline when users select
-         * the link to expand the full text. If the text exceeds this limit, then
-         * the component expands the full text in a modal view instead.
-         */
-        this.maxExpandedNewlines = 2;
+    constructor(resources, modalSvc, textExpandAdapter) {
+        _SkyTextExpandComponent_instances.add(this);
         /**
          * Indicates whether to replace newline characters in truncated text with spaces.
          */
         this.truncateNewlines = true;
+        this.buttonText = '';
         this.contentSectionId = `sky-text-expand-content-${++nextId$1}`;
-        this.isExpanded = false;
-        this._maxLength = 200;
+        this.expandable = false;
+        this.isModal = false;
+        this.transitionHeight = 1;
+        _SkyTextExpandComponent_collapsedText.set(this, '');
+        _SkyTextExpandComponent_newlineCount.set(this, 0);
+        _SkyTextExpandComponent_seeMoreText.set(this, '');
+        _SkyTextExpandComponent_seeLessText.set(this, '');
+        _SkyTextExpandComponent_textToShow.set(this, '');
+        _SkyTextExpandComponent__maxExpandedLength.set(this, 600);
+        _SkyTextExpandComponent__maxExpandedNewlines.set(this, 2);
+        _SkyTextExpandComponent__maxLength.set(this, 200);
+        _SkyTextExpandComponent__text.set(this, '');
+        _SkyTextExpandComponent__textEl.set(this, void 0);
+        _SkyTextExpandComponent_resources.set(this, void 0);
+        _SkyTextExpandComponent_modalSvc.set(this, void 0);
+        _SkyTextExpandComponent_textExpandAdapter.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_resources, resources, "f");
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_modalSvc, modalSvc, "f");
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_textExpandAdapter, textExpandAdapter, "f");
+    }
+    /**
+     * Specifies the maximum number of text characters to display inline when users select the link
+     * to expand the full text. If the text exceeds this limit, then the component expands
+     * the full text in a modal instead.
+     * @default 600
+     */
+    set maxExpandedLength(value) {
+        if (value) {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxExpandedLength, value, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxExpandedLength, 600, "f");
+        }
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, this.text);
+    }
+    get maxExpandedLength() {
+        return __classPrivateFieldGet(this, _SkyTextExpandComponent__maxExpandedLength, "f");
+    }
+    /**
+     * Specifies the maximum number of newline characters to display inline when users select
+     * the link to expand the full text. If the text exceeds this limit, then
+     * the component expands the full text in a modal view instead.
+     * @default 2
+     */
+    set maxExpandedNewlines(value) {
+        if (value) {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxExpandedNewlines, value, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxExpandedNewlines, 2, "f");
+        }
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, this.text);
+    }
+    get maxExpandedNewlines() {
+        return __classPrivateFieldGet(this, _SkyTextExpandComponent__maxExpandedNewlines, "f");
     }
     /**
      * Specifies the number of text characters to display before truncating the text.
@@ -2257,23 +2369,33 @@ class SkyTextExpandComponent {
      * @default 200
      */
     set maxLength(value) {
-        this._maxLength = value;
-        /* istanbul ignore else */
-        if (this.textEl) {
-            this.setup(this.expandedText);
+        if (value) {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxLength, value, "f");
         }
+        else {
+            __classPrivateFieldSet(this, _SkyTextExpandComponent__maxLength, 200, "f");
+        }
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, this.text);
     }
     get maxLength() {
-        return this._maxLength;
+        return __classPrivateFieldGet(this, _SkyTextExpandComponent__maxLength, "f");
     }
     /**
      * Specifies the text to truncate.
      */
     set text(value) {
-        /* istanbul ignore else */
-        if (this.textEl) {
-            this.setup(value);
-        }
+        __classPrivateFieldSet(this, _SkyTextExpandComponent__text, value !== null && value !== void 0 ? value : '', "f");
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, __classPrivateFieldGet(this, _SkyTextExpandComponent__text, "f"));
+    }
+    get text() {
+        return __classPrivateFieldGet(this, _SkyTextExpandComponent__text, "f");
+    }
+    set textEl(value) {
+        __classPrivateFieldSet(this, _SkyTextExpandComponent__textEl, value, "f");
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, this.text);
+    }
+    get textEl() {
+        return __classPrivateFieldGet(this, _SkyTextExpandComponent__textEl, "f");
     }
     textExpand() {
         if (this.isModal) {
@@ -2281,12 +2403,12 @@ class SkyTextExpandComponent {
             /* istanbul ignore else */
             /* sanity check */
             if (!this.isExpanded) {
-                this.modalService.open(SkyTextExpandModalComponent, [
+                __classPrivateFieldGet(this, _SkyTextExpandComponent_modalSvc, "f").open(SkyTextExpandModalComponent, [
                     {
-                        provide: SkyTextExpandModalContext,
+                        provide: SKY_TEXT_EXPAND_MODAL_CONTEXT,
                         useValue: {
                             header: this.expandModalTitle,
-                            text: this.expandedText,
+                            text: this.text,
                         },
                     },
                 ]);
@@ -2295,40 +2417,38 @@ class SkyTextExpandComponent {
         else {
             // Normal View
             if (!this.isExpanded) {
-                this.setContainerMaxHeight();
-                setTimeout(() => {
-                    this.isExpanded = true;
-                    this.animateText(this.collapsedText, this.expandedText, true);
-                }, 10);
+                __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_animateText).call(this, true);
             }
             else {
-                this.setContainerMaxHeight();
-                setTimeout(() => {
-                    this.isExpanded = false;
-                    this.animateText(this.expandedText, this.collapsedText, false);
-                }, 10);
+                __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_animateText).call(this, false);
             }
         }
     }
     animationEnd() {
-        // Ensure the correct text is displayed
-        this.textExpandAdapter.setText(this.textEl, this.textToShow);
-        // Set height back to auto so the browser can change the height as needed with window changes
-        this.textExpandAdapter.setContainerHeight(this.containerEl, undefined);
+        if (this.textEl && this.containerEl) {
+            // Ensure the correct text is displayed
+            __classPrivateFieldGet(this, _SkyTextExpandComponent_textExpandAdapter, "f").setText(this.textEl, __classPrivateFieldGet(this, _SkyTextExpandComponent_textToShow, "f"));
+            setTimeout(() => {
+                if (this.containerEl) {
+                    // Set height back to auto so the browser can change the height as needed with window changes
+                    __classPrivateFieldGet(this, _SkyTextExpandComponent_textExpandAdapter, "f").removeContainerMaxHeight(this.containerEl);
+                }
+            });
+        }
     }
     ngAfterContentInit() {
         forkJoin([
-            this.resources.getString('skyux_text_expand_see_more'),
-            this.resources.getString('skyux_text_expand_see_less'),
+            __classPrivateFieldGet(this, _SkyTextExpandComponent_resources, "f").getString('skyux_text_expand_see_more'),
+            __classPrivateFieldGet(this, _SkyTextExpandComponent_resources, "f").getString('skyux_text_expand_see_less'),
         ])
             .pipe(take(1))
             .subscribe((resources) => {
-            this.seeMoreText = resources[0];
-            this.seeLessText = resources[1];
-            this.setup(this.expandedText);
+            __classPrivateFieldSet(this, _SkyTextExpandComponent_seeMoreText, resources[0], "f");
+            __classPrivateFieldSet(this, _SkyTextExpandComponent_seeLessText, resources[1], "f");
+            __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_setup).call(this, this.text);
             /* istanbul ignore else */
             if (!this.expandModalTitle) {
-                this.resources
+                __classPrivateFieldGet(this, _SkyTextExpandComponent_resources, "f")
                     .getString('skyux_text_expand_modal_title')
                     .pipe(take(1))
                     .subscribe((resource) => {
@@ -2337,99 +2457,109 @@ class SkyTextExpandComponent {
             }
         });
     }
-    setContainerMaxHeight() {
-        // ensure everything is reset
-        this.animationEnd();
-        /* Before animation is kicked off, ensure that a maxHeight exists */
-        /* Once we have support for angular v4 animations with parameters we can use that instead */
-        const currentHeight = this.textExpandAdapter.getContainerHeight(this.containerEl);
-        this.textExpandAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
-    }
-    setup(value) {
-        if (value) {
-            this.newlineCount = this.getNewlineCount(value);
-            this.collapsedText = this.getTruncatedText(value, this.maxLength);
-            this.expandedText = value;
-            if (this.collapsedText !== value) {
-                this.buttonText = this.seeMoreText;
-                this.isExpanded = false;
-                this.expandable = true;
-                this.isModal =
-                    this.newlineCount > this.maxExpandedNewlines ||
-                        this.expandedText.length > this.maxExpandedLength;
-            }
-            else {
-                this.expandable = false;
-            }
-            this.textToShow = this.collapsedText;
+}
+_SkyTextExpandComponent_collapsedText = new WeakMap(), _SkyTextExpandComponent_newlineCount = new WeakMap(), _SkyTextExpandComponent_seeMoreText = new WeakMap(), _SkyTextExpandComponent_seeLessText = new WeakMap(), _SkyTextExpandComponent_textToShow = new WeakMap(), _SkyTextExpandComponent__maxExpandedLength = new WeakMap(), _SkyTextExpandComponent__maxExpandedNewlines = new WeakMap(), _SkyTextExpandComponent__maxLength = new WeakMap(), _SkyTextExpandComponent__text = new WeakMap(), _SkyTextExpandComponent__textEl = new WeakMap(), _SkyTextExpandComponent_resources = new WeakMap(), _SkyTextExpandComponent_modalSvc = new WeakMap(), _SkyTextExpandComponent_textExpandAdapter = new WeakMap(), _SkyTextExpandComponent_instances = new WeakSet(), _SkyTextExpandComponent_setup = function _SkyTextExpandComponent_setup(value) {
+    if (value) {
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_newlineCount, __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_getNewlineCount).call(this, value), "f");
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_collapsedText, __classPrivateFieldGet(this, _SkyTextExpandComponent_instances, "m", _SkyTextExpandComponent_getTruncatedText).call(this, value, this.maxLength), "f");
+        if (__classPrivateFieldGet(this, _SkyTextExpandComponent_collapsedText, "f") !== value) {
+            this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandComponent_seeMoreText, "f");
+            this.isExpanded = false;
+            this.expandable = true;
+            this.isModal =
+                __classPrivateFieldGet(this, _SkyTextExpandComponent_newlineCount, "f") > this.maxExpandedNewlines ||
+                    this.text.length > this.maxExpandedLength;
         }
         else {
-            this.textToShow = '';
             this.expandable = false;
         }
-        this.textExpandAdapter.setText(this.textEl, this.textToShow);
-    }
-    getNewlineCount(value) {
-        const matches = value.match(/\n/gi);
-        if (matches) {
-            return matches.length;
-        }
-        return 0;
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_textToShow, __classPrivateFieldGet(this, _SkyTextExpandComponent_collapsedText, "f"), "f");
     }
-    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;
-                }
+    else {
+        __classPrivateFieldSet(this, _SkyTextExpandComponent_textToShow, '', "f");
+        this.expandable = false;
+    }
+    if (this.textEl) {
+        __classPrivateFieldGet(this, _SkyTextExpandComponent_textExpandAdapter, "f").setText(this.textEl, __classPrivateFieldGet(this, _SkyTextExpandComponent_textToShow, "f"));
+    }
+}, _SkyTextExpandComponent_getNewlineCount = function _SkyTextExpandComponent_getNewlineCount(value) {
+    const matches = value.match(/\n/gi);
+    if (matches) {
+        return matches.length;
+    }
+    return 0;
+}, _SkyTextExpandComponent_getTruncatedText = function _SkyTextExpandComponent_getTruncatedText(value, length) {
+    let i;
+    if (this.truncateNewlines) {
+        value = value.replace(/\n+/gi, ' ');
+    }
+    // Jump ahead one character and see if it's a space, and if it isn't,
+    // back up to the first space and break there so a word doesn't get cut
+    // in half.
+    if (length < value.length) {
+        for (i = length; i > length - 10; i--) {
+            if (/\s/.test(value.charAt(i))) {
+                length = i;
+                break;
             }
         }
-        return value.substr(0, length);
     }
-    animateText(previousText, newText, expanding) {
-        const adapter = this.textExpandAdapter;
+    return value.substring(0, length);
+}, _SkyTextExpandComponent_animateText = function _SkyTextExpandComponent_animateText(expanding) {
+    if (this.containerEl && this.textEl) {
+        const adapter = __classPrivateFieldGet(this, _SkyTextExpandComponent_textExpandAdapter, "f");
         const container = this.containerEl;
-        // Reset max height
-        adapter.setContainerHeight(container, undefined);
-        // Measure the current height so we can animate from it.
-        const currentHeight = adapter.getContainerHeight(container);
-        this.textToShow = newText;
-        adapter.setText(this.textEl, this.textToShow);
-        this.buttonText = expanding ? this.seeLessText : this.seeMoreText;
+        if (expanding) {
+            adapter.setText(this.textEl, this.text);
+            __classPrivateFieldSet(this, _SkyTextExpandComponent_textToShow, this.text, "f");
+        }
+        else {
+            adapter.setText(this.textEl, __classPrivateFieldGet(this, _SkyTextExpandComponent_collapsedText, "f"));
+            __classPrivateFieldSet(this, _SkyTextExpandComponent_textToShow, __classPrivateFieldGet(this, _SkyTextExpandComponent_collapsedText, "f"), "f");
+        }
+        this.buttonText = expanding ? __classPrivateFieldGet(this, _SkyTextExpandComponent_seeLessText, "f") : __classPrivateFieldGet(this, _SkyTextExpandComponent_seeMoreText, "f");
         // Measure the new height so we can animate to it.
         const newHeight = adapter.getContainerHeight(container);
-        /* istanbul ignore if */
-        if (newHeight < currentHeight) {
-            // The new text is smaller than the old text, so put the old text back before doing
-            // the collapse animation to avoid showing a big chunk of whitespace.
-            adapter.setText(this.textEl, previousText);
-        }
-        adapter.setContainerHeight(container, `${currentHeight}px`);
-        // This timeout is necessary due to the browser needing to pick up the non-auto height being set
-        // in order to do the transtion in height correctly. Without it the transition does not fire.
-        setTimeout(() => {
-            adapter.setContainerHeight(container, `${newHeight}px`);
-            /* This resets values if the transition does not get kicked off */
-            setTimeout(() => {
-                this.animationEnd();
-            }, 500);
-        }, 10);
+        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;
     }
-}
-SkyTextExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$3.SkyLibResourcesService }, { token: i2$2.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextExpandComponent, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+};
+SkyTextExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$3.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.SkyLibResourcesService }, { type: i2$2.SkyModalService }, { type: SkyTextExpandAdapterService }]; }, propDecorators: { expandModalTitle: [{
+            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
@@ -2480,187 +2610,226 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
+var _SkyTextExpandRepeaterAdapterService_renderer;
 /**
  * @internal
  */
 class SkyTextExpandRepeaterAdapterService {
     constructor(rendererFactory) {
-        this.rendererFactory = rendererFactory;
-        this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
+        _SkyTextExpandRepeaterAdapterService_renderer.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterAdapterService_renderer, rendererFactory.createRenderer(undefined, null), "f");
     }
     getItems(elRef) {
         return elRef.nativeElement.querySelectorAll('.sky-text-expand-repeater-item');
     }
     hideItem(item) {
-        this.renderer.setStyle(item, 'display', 'none');
+        __classPrivateFieldGet(this, _SkyTextExpandRepeaterAdapterService_renderer, "f").setStyle(item, 'display', 'none');
     }
     showItem(item) {
-        this.renderer.setStyle(item, 'display', 'list-item');
+        __classPrivateFieldGet(this, _SkyTextExpandRepeaterAdapterService_renderer, "f").removeStyle(item, 'display');
     }
     getContainerHeight(containerEl) {
         return containerEl.nativeElement.offsetHeight;
     }
-    setContainerHeight(containerEl, height) {
-        if (height === undefined) {
-            this.renderer.removeStyle(containerEl.nativeElement, 'max-height');
-        }
-        else {
-            this.renderer.setStyle(containerEl.nativeElement, 'max-height', height);
-        }
+    removeContainerMaxHeight(containerEl) {
+        __classPrivateFieldGet(this, _SkyTextExpandRepeaterAdapterService_renderer, "f").removeStyle(containerEl.nativeElement, 'max-height');
     }
 }
+_SkyTextExpandRepeaterAdapterService_renderer = new WeakMap();
 SkyTextExpandRepeaterAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
 SkyTextExpandRepeaterAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandRepeaterAdapterService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
 
+var _SkyTextExpandRepeaterComponent_instances, _SkyTextExpandRepeaterComponent_seeMoreText, _SkyTextExpandRepeaterComponent_seeLessText, _SkyTextExpandRepeaterComponent_htmlItems, _SkyTextExpandRepeaterComponent__data, _SkyTextExpandRepeaterComponent__maxItems, _SkyTextExpandRepeaterComponent_resources, _SkyTextExpandRepeaterComponent_elRef, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, _SkyTextExpandRepeaterComponent_changeDetector, _SkyTextExpandRepeaterComponent_animateRepeater, _SkyTextExpandRepeaterComponent_setup, _SkyTextExpandRepeaterComponent_hideItems, _SkyTextExpandRepeaterComponent_showItems;
 /**
  * Auto-incrementing integer used to generate unique ids for text expand repeater components.
  */
 let nextId = 0;
 class SkyTextExpandRepeaterComponent {
     constructor(resources, elRef, textExpandRepeaterAdapter, changeDetector) {
-        this.resources = resources;
-        this.elRef = elRef;
-        this.textExpandRepeaterAdapter = textExpandRepeaterAdapter;
-        this.changeDetector = changeDetector;
+        _SkyTextExpandRepeaterComponent_instances.add(this);
         /**
          * Specifies 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.isExpanded = false;
+        this.transitionHeight = 1;
+        _SkyTextExpandRepeaterComponent_seeMoreText.set(this, '');
+        _SkyTextExpandRepeaterComponent_seeLessText.set(this, '');
+        _SkyTextExpandRepeaterComponent_htmlItems.set(this, void 0);
+        _SkyTextExpandRepeaterComponent__data.set(this, void 0);
+        _SkyTextExpandRepeaterComponent__maxItems.set(this, void 0);
+        _SkyTextExpandRepeaterComponent_resources.set(this, void 0);
+        _SkyTextExpandRepeaterComponent_elRef.set(this, void 0);
+        _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter.set(this, void 0);
+        _SkyTextExpandRepeaterComponent_changeDetector.set(this, void 0);
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_resources, resources, "f");
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_elRef, elRef, "f");
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, textExpandRepeaterAdapter, "f");
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_changeDetector, changeDetector, "f");
+    }
+    /**
+     * Specifies the data to truncate.
+     */
+    set data(value) {
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent__data, value, "f");
+        // Wait for the dom to render the new items based on the updated data
+        setTimeout(() => {
+            __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_htmlItems, __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f").getItems(__classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_elRef, "f")), "f");
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_setup).call(this, value);
+        });
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent__data, "f");
+    }
+    /**
+     * Specifies the number of items to display before truncating the list. If not supplied, all items are shown.
+     */
+    set maxItems(value) {
+        __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent__maxItems, value, "f");
+        __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_setup).call(this, this.data);
+    }
+    get maxItems() {
+        return __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent__maxItems, "f");
     }
     ngAfterViewInit() {
-        if (this.contentItems) {
-            this.items = this.textExpandRepeaterAdapter.getItems(this.elRef);
-            for (let i = this.maxItems; i < this.contentItems.length; i++) {
-                this.textExpandRepeaterAdapter.hideItem(this.items[i]);
-            }
-        }
         forkJoin([
-            this.resources.getString('skyux_text_expand_see_more'),
-            this.resources.getString('skyux_text_expand_see_less'),
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_resources, "f").getString('skyux_text_expand_see_more'),
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_resources, "f").getString('skyux_text_expand_see_less'),
         ])
             .pipe(take(1))
             .subscribe((resources) => {
-            this.seeMoreText = resources[0];
-            this.seeLessText = resources[1];
+            __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_seeMoreText, resources[0], "f");
+            __classPrivateFieldSet(this, _SkyTextExpandRepeaterComponent_seeLessText, resources[1], "f");
             /* sanity check */
             /* istanbul ignore else */
             if (!this.isExpanded) {
-                this.buttonText = this.seeMoreText;
+                this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_seeMoreText, "f");
             }
             else {
-                this.buttonText = this.seeLessText;
+                this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_seeLessText, "f");
             }
-            this.changeDetector.detectChanges();
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_changeDetector, "f").detectChanges();
         });
     }
-    ngOnChanges(changes) {
-        /* istanbul ignore else */
-        if (changes.maxItems || changes.data) {
-            this.setup(this.data);
-        }
-    }
     animationEnd() {
-        // Ensure the correct items are displayed
+        // 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) {
-            for (let i = this.maxItems; i < this.contentItems.length; i++) {
-                this.textExpandRepeaterAdapter.hideItem(this.items[i]);
-            }
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_hideItems).call(this);
         }
-        // Set height back to auto so the browser can change the height as needed with window changes
-        this.textExpandRepeaterAdapter.setContainerHeight(this.containerEl, undefined);
+        // 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
+                __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f").removeContainerMaxHeight(this.containerEl);
+            }
+        });
     }
     repeaterExpand() {
         if (!this.isExpanded) {
-            this.setContainerMaxHeight();
-            setTimeout(() => {
-                this.isExpanded = true;
-                this.animateRepeater(true);
-            });
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_animateRepeater).call(this, true);
         }
         else {
-            this.setContainerMaxHeight();
-            setTimeout(() => {
-                this.isExpanded = false;
-                this.animateRepeater(false);
-            });
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_animateRepeater).call(this, false);
         }
     }
-    setContainerMaxHeight() {
-        // ensure everything is reset
-        this.animationEnd();
-        /* Before animation is kicked off, ensure that a maxHeight exists */
-        /* Once we have support for angular v4 animations with parameters we can use that instead */
-        const currentHeight = this.textExpandRepeaterAdapter.getContainerHeight(this.containerEl);
-        this.textExpandRepeaterAdapter.setContainerHeight(this.containerEl, `${currentHeight}px`);
-    }
-    animateRepeater(expanding) {
-        const adapter = this.textExpandRepeaterAdapter;
-        const container = this.containerEl;
-        adapter.setContainerHeight(container, undefined);
-        const currentHeight = adapter.getContainerHeight(container);
-        for (let i = this.maxItems; i < this.contentItems.length; i++) {
-            if (!expanding) {
-                adapter.hideItem(this.items[i]);
-            }
-            else {
-                adapter.showItem(this.items[i]);
-            }
+}
+_SkyTextExpandRepeaterComponent_seeMoreText = new WeakMap(), _SkyTextExpandRepeaterComponent_seeLessText = new WeakMap(), _SkyTextExpandRepeaterComponent_htmlItems = new WeakMap(), _SkyTextExpandRepeaterComponent__data = new WeakMap(), _SkyTextExpandRepeaterComponent__maxItems = new WeakMap(), _SkyTextExpandRepeaterComponent_resources = new WeakMap(), _SkyTextExpandRepeaterComponent_elRef = new WeakMap(), _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter = new WeakMap(), _SkyTextExpandRepeaterComponent_changeDetector = new WeakMap(), _SkyTextExpandRepeaterComponent_instances = new WeakSet(), _SkyTextExpandRepeaterComponent_animateRepeater = function _SkyTextExpandRepeaterComponent_animateRepeater(expanding) {
+    const adapter = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f");
+    const container = this.containerEl;
+    if (container) {
+        if (expanding) {
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_showItems).call(this);
+        }
+        else {
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_hideItems).call(this);
         }
         const newHeight = adapter.getContainerHeight(container);
+        this.transitionHeight = newHeight;
         if (!expanding) {
-            this.buttonText = this.seeMoreText;
+            this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_seeMoreText, "f");
         }
         else {
-            this.buttonText = this.seeLessText;
+            this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_seeLessText, "f");
         }
-        if (newHeight < currentHeight) {
-            // The new text is smaller than the old text, so put the old text back before doing
-            // the collapse animation to avoid showing a big chunk of whitespace.
-            for (let i = this.maxItems; i < this.contentItems.length; i++) {
-                adapter.showItem(this.items[i]);
-            }
-        }
-        adapter.setContainerHeight(container, `${currentHeight}px`);
-        // This timeout is necessary due to the browser needing to pick up the non-auto height being set
-        // in order to do the transtion in height correctly. Without it the transition does not fire.
-        setTimeout(() => {
-            adapter.setContainerHeight(container, `${newHeight}px`);
-            /* This resets values if the transition does not get kicked off */
-            setTimeout(() => {
-                this.animationEnd();
-            }, 500);
-        }, 10);
-    }
-    setup(value) {
-        if (value) {
-            const length = value.length;
-            if (length > this.maxItems) {
-                this.expandable = true;
-                this.buttonText = this.seeMoreText;
-                this.isExpanded = false;
-            }
-            else {
-                this.expandable = false;
+        if (!expanding) {
+            // Show all items during animation for visual purposes.
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_showItems).call(this);
+        }
+        this.isExpanded = expanding;
+    }
+}, _SkyTextExpandRepeaterComponent_setup = function _SkyTextExpandRepeaterComponent_setup(value) {
+    if (value) {
+        const length = value.length;
+        if (this.maxItems && length > this.maxItems) {
+            this.expandable = true;
+            this.buttonText = __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_seeMoreText, "f");
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_instances, "m", _SkyTextExpandRepeaterComponent_hideItems).call(this);
+            if (this.containerEl) {
+                this.transitionHeight =
+                    __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f").getContainerHeight(this.containerEl);
             }
-            this.contentItems = value;
+            this.isExpanded = false;
         }
         else {
-            this.contentItems = undefined;
             this.expandable = false;
+            this.isExpanded = undefined;
         }
     }
-}
+    else {
+        this.expandable = false;
+        this.isExpanded = undefined;
+    }
+    __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_changeDetector, "f").markForCheck();
+}, _SkyTextExpandRepeaterComponent_hideItems = function _SkyTextExpandRepeaterComponent_hideItems() {
+    if (__classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f") && this.maxItems) {
+        for (let i = this.maxItems; i < __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f").length; i++) {
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f").hideItem(__classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f")[i]);
+        }
+    }
+}, _SkyTextExpandRepeaterComponent_showItems = function _SkyTextExpandRepeaterComponent_showItems() {
+    if (__classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f") && this.maxItems) {
+        for (let i = this.maxItems; i < __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f").length; i++) {
+            __classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_textExpandRepeaterAdapter, "f").showItem(__classPrivateFieldGet(this, _SkyTextExpandRepeaterComponent_htmlItems, "f")[i]);
+        }
+    }
+};
 SkyTextExpandRepeaterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [{ token: i1$3.SkyLibResourcesService }, { token: i0.ElementRef }, { token: SkyTextExpandRepeaterAdapterService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextExpandRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: SkyTextExpandRepeaterComponent, selector: "sky-text-expand-repeater", inputs: { data: "data", itemTemplate: "itemTemplate", listStyle: "listStyle", maxItems: "maxItems" }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  <ul\n    *ngIf=\"listStyle !== 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-list-style-none': listStyle === 'unstyled'\n    }\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ul>\n  <ol\n    *ngIf=\"listStyle === 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ol>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"contentSectionId\"\n    (click)=\"repeaterExpand()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-see-more-list-style-none':\n        listStyle === 'unstyled'\n    }\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n\n<ng-template let-item #defaultItemTemplate>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  <li *ngFor=\"let item of contentItems\" class=\"sky-text-expand-repeater-item\">\n    <ng-template\n      [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: item }\"\n    ></ng-template>\n  </li>\n</ng-template>\n", styles: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;transition:max-height .25s}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"], 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"] }] });
+SkyTextExpandRepeaterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom: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: "14.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], template: "<div class=\"sky-text-expand-repeater\">\n  <ul\n    *ngIf=\"listStyle !== 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-list-style-none': listStyle === 'unstyled'\n    }\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ul>\n  <ol\n    *ngIf=\"listStyle === 'ordered'\"\n    class=\"sky-text-expand-repeater-container\"\n    [id]=\"contentSectionId\"\n    (transitionend)=\"animationEnd()\"\n    #container\n  >\n    <ng-template [ngTemplateOutlet]=\"listItemTemplate\"></ng-template>\n  </ol>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"contentSectionId\"\n    (click)=\"repeaterExpand()\"\n    [ngClass]=\"{\n      'sky-text-expand-repeater-see-more-list-style-none':\n        listStyle === 'unstyled'\n    }\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n\n<ng-template let-item #defaultItemTemplate>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  <li *ngFor=\"let item of contentItems\" class=\"sky-text-expand-repeater-item\">\n    <ng-template\n      [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: item }\"\n    ></ng-template>\n  </li>\n</ng-template>\n", styles: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;transition:max-height .25s}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"] }]
+            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: [".sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom: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: [{
@@ -2783,5 +2952,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyActionButtonModule, SkyBackToTopMessageType, SkyBackToTopModule, SkyBoxModule, SkyCardModule, SkyDefinitionListModule, SkyDescriptionListMode, SkyDescriptionListModule, SkyFluidGridGutterSize, SkyFluidGridModule, SkyFormatModule, SkyInlineDeleteModule, SkyInlineDeleteType, SkyPageModule, SkyPageSummaryModule, SkyTextExpandModule, SkyTextExpandRepeaterModule, SkyToolbarModule, SkyActionButtonComponent as λ1, SkyCardActionsComponent as λ10, SkyCardContentComponent as λ11, SkyCardTitleComponent as λ12, SkyDefinitionListComponent as λ13, SkyDefinitionListContentComponent as λ14, SkyDefinitionListHeadingComponent as λ15, SkyDefinitionListLabelComponent as λ16, SkyDefinitionListValueComponent as λ17, SkyDescriptionListComponent as λ18, SkyDescriptionListTermComponent as λ19, SkyActionButtonContainerComponent as λ2, SkyDescriptionListDescriptionComponent as λ20, SkyDescriptionListContentComponent as λ21, SkyFluidGridComponent as λ22, SkyRowComponent as λ23, SkyColumnComponent as λ24, SkyFormatComponent as λ25, SkyPageComponent as λ26, SkyPageSummaryComponent as λ27, SkyPageSummaryAlertComponent as λ28, SkyPageSummaryContentComponent as λ29, SkyActionButtonDetailsComponent as λ3, SkyPageSummaryImageComponent as λ30, SkyPageSummaryKeyInfoComponent as λ31, SkyPageSummaryStatusComponent as λ32, SkyPageSummarySubtitleComponent as λ33, SkyPageSummaryTitleComponent as λ34, SkyTextExpandComponent as λ35, SkyTextExpandRepeaterComponent as λ36, SkyToolbarComponent as λ37, SkyToolbarSectionComponent as λ38, SkyToolbarItemComponent as λ39, SkyActionButtonHeaderComponent as λ4, SkyToolbarViewActionsComponent as λ40, SkyBoxComponent as λ41, SkyBoxHeaderComponent as λ42, SkyBoxContentComponent as λ43, SkyBoxControlsComponent as λ44, SkyActionButtonIconComponent as λ5, SkyBackToTopComponent as λ6, SkyBackToTopDirective as λ7, SkyInlineDeleteComponent as λ8, SkyCardComponent as λ9 };
+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