@skyux/layout 14.0.0-alpha.11 → 14.0.0-alpha.12

package/fesm2022/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, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, contentChildren, effect, Inject, input, signal, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef, contentChildren, effect, Inject, input, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@skyux/router';
@@ -13,11 +13,11 @@ import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
 import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/core';
-import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, SkyCoreAdapterService, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
+import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, SkyCoreAdapterService, _SkyAnimationEndHandlerDirective, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i3$1 from '@skyux/i18n';
+import * as i5$1 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import * as i1$3 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
@@ -25,9 +25,8 @@ import * as i3$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@skyux/forms';
 import { SkyCheckboxModule } from '@skyux/forms';
-import * as i2$2 from '@skyux/indicators';
+import * as i3$1 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
-import { trigger, transition, style, query, group, animate } from '@angular/animations';
 import * as i1$4 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 
@@ -407,7 +406,7 @@ class SkyBackToTopComponent {
         this.#_scrollToTopClick.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
             type: Component,
@@ -968,6 +967,7 @@ class SkyInlineDeleteComponent {
     #adapterService;
     #changeDetector;
     #elRef;
+    #initialized;
     constructor(adapterService, changeDetector, elRef) {
         /**
          * Whether the deletion is pending.
@@ -982,24 +982,24 @@ class SkyInlineDeleteComponent {
          * Fires when users click the delete button.
          */
         this.deleteTriggered = new EventEmitter();
-        this.animationState = 'shown';
         this.assistiveTextId = `sky-inline-delete-assistive-text-${++nextId$2}`;
         this.type = SkyInlineDeleteType.Standard;
+        this.enterAnimationTrigger = signal(true, ...(ngDevMode ? [{ debugName: "enterAnimationTrigger" }] : []));
+        this.#initialized = false;
         this.#adapterService = adapterService;
         this.#changeDetector = changeDetector;
         this.#elRef = elRef;
     }
-    /**
-     * Initialization lifecycle hook
-     * @internal
-     */
-    ngOnInit() {
-        this.animationState = 'shown';
+    onAnimationEnd() {
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#adapterService.setEl(this.#elRef.nativeElement);
+            // Defer focus so it runs after the animationend event handler completes.
+            setTimeout(() => {
+                this.deleteButton?.nativeElement.focus();
+            });
+        }
     }
-    /**
-     * Destruction lifecycle hook
-     * @internal
-     */
     ngOnDestroy() {
         this.#adapterService.clearListeners();
         this.cancelTriggered.complete();
@@ -1009,7 +1009,7 @@ class SkyInlineDeleteComponent {
      * @internal
      */
     onCancelClick() {
-        this.animationState = 'hidden';
+        this.cancelTriggered.emit();
     }
     /**
      * @internal
@@ -1026,81 +1026,12 @@ class SkyInlineDeleteComponent {
         this.type = type;
         this.#changeDetector.detectChanges();
     }
-    /**
-     * Handles actions that should be taken after the inline delete animates
-     * @param event The animation event
-     * @internal
-     */
-    onAnimationDone(event) {
-        if (event.toState === 'hidden') {
-            this.cancelTriggered.emit();
-        }
-        else {
-            this.deleteButton?.nativeElement.focus();
-            /* istanbul ignore else */
-            if (this.#elRef) {
-                this.#adapterService.setEl(this.#elRef.nativeElement);
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyInlineDeleteComponent, isStandalone: false, 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  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\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:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"], dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
-            trigger('inlineDeleteAnimation', [
-                transition('* => shown', [
-                    style({
-                        opacity: 0,
-                    }),
-                    query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
-                    group([
-                        animate('300ms ease-in-out', style({ opacity: 1 })),
-                        query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                            transform: 'scale(1)',
-                        }))),
-                    ]),
-                ]),
-                transition(`shown <=> *`, [
-                    query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
-                    group([
-                        animate('300ms ease-in-out', style({
-                            opacity: 0,
-                        })),
-                        query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                            transform: 'scale(0.0)',
-                        }))),
-                    ]),
-                ]),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyInlineDeleteComponent, isStandalone: false, 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  skyAnimationEndHandler\n  emitOnAnimateEnter\n  animate.enter=\"sky-inline-delete-entering\"\n  animate.leave=\"sky-inline-delete-leaving\"\n  [animationTrigger]=\"enterAnimationTrigger()\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (animationEnd)=\"onAnimationEnd()\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\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:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"], dependencies: [{ kind: "directive", type: i1$1._SkyAnimationEndHandlerDirective, selector: "[skyAnimationEndHandler]", inputs: ["emitOnAnimateEnter", "animationTrigger"], outputs: ["animationEnd"] }, { kind: "component", type: i3$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-inline-delete', animations: [
-                        trigger('inlineDeleteAnimation', [
-                            transition('* => shown', [
-                                style({
-                                    opacity: 0,
-                                }),
-                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
-                                group([
-                                    animate('300ms ease-in-out', style({ opacity: 1 })),
-                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                                        transform: 'scale(1)',
-                                    }))),
-                                ]),
-                            ]),
-                            transition(`shown <=> *`, [
-                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
-                                group([
-                                    animate('300ms ease-in-out', style({
-                                        opacity: 0,
-                                    })),
-                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                                        transform: 'scale(0.0)',
-                                    }))),
-                                ]),
-                            ]),
-                        ]),
-                    ], providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], standalone: false, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  [@inlineDeleteAnimation]=\"animationState\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\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:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"] }]
+            args: [{ selector: 'sky-inline-delete', providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], standalone: false, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  skyAnimationEndHandler\n  emitOnAnimateEnter\n  animate.enter=\"sky-inline-delete-entering\"\n  animate.leave=\"sky-inline-delete-leaving\"\n  [animationTrigger]=\"enterAnimationTrigger()\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (animationEnd)=\"onAnimationEnd()\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\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:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.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:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"] }]
         }], ctorParameters: () => [{ type: SkyInlineDeleteAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { pending: [{
                 type: Input
             }], cancelTriggered: [{
@@ -1117,14 +1048,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class SkyInlineDeleteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [SkyLayoutResourcesModule, SkyWaitModule], exports: [SkyInlineDeleteComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, imports: [SkyLayoutResourcesModule, SkyWaitModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [_SkyAnimationEndHandlerDirective,
+            SkyLayoutResourcesModule,
+            SkyWaitModule], exports: [SkyInlineDeleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, imports: [SkyLayoutResourcesModule,
+            SkyWaitModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyInlineDeleteComponent],
-                    imports: [SkyLayoutResourcesModule, SkyWaitModule],
+                    imports: [
+                        _SkyAnimationEndHandlerDirective,
+                        SkyLayoutResourcesModule,
+                        SkyWaitModule,
+                    ],
                     exports: [SkyInlineDeleteComponent],
                 }]
         }] });
@@ -1244,11 +1182,11 @@ class SkyCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyCardComponent, isStandalone: false, 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\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div 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            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyCardComponent, isStandalone: false, 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\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div 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            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color var(--sky-global-duration-short);vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color var(--sky-global-duration-short)}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-card', standalone: false, 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\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div 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            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"] }]
+            args: [{ selector: 'sky-card', standalone: false, 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\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div 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            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color var(--sky-global-duration-short);vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color var(--sky-global-duration-short)}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.SkyLogService }], propDecorators: { size: [{
                 type: Input
             }], selectable: [{
@@ -1378,7 +1316,7 @@ class SkyDefinitionListValueComponent {
         this.service = service;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content />\n  </span>\n  @if (!valueEl.textContent?.trim()) {\n    <span class=\"sky-deemphasized\">\n      {{\n        (service.defaultValue | async) ||\n          ('skyux_definition_list_none_found' | skyLibResources)\n      }}\n    </span>\n  }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content />\n  </span>\n  @if (!valueEl.textContent?.trim()) {\n    <span class=\"sky-deemphasized\">\n      {{\n        (service.defaultValue | async) ||\n          ('skyux_definition_list_none_found' | skyLibResources)\n      }}\n    </span>\n  }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListValueComponent, decorators: [{
             type: Component,
@@ -1511,7 +1449,7 @@ class SkyDescriptionListDescriptionComponent {
         this.#ngUnsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDescriptionListDescriptionComponent, isStandalone: false, 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: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDescriptionListDescriptionComponent, isStandalone: false, 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: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
             type: Component,
@@ -2234,11 +2172,11 @@ class SkyTextExpandModalComponent {
         this.instance.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyTextExpandModalComponent, isStandalone: true, 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\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { 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: "ngmodule", type: SkyLayoutResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyTextExpandModalComponent, isStandalone: true, 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\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { 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: "ngmodule", type: SkyLayoutResourcesModule }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand-modal', imports: [SkyModalModule, SkyLayoutResourcesModule], 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\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+            args: [{ selector: 'sky-text-expand-modal', imports: [SkyModalModule, SkyLayoutResourcesModule], 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\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SKY_TEXT_EXPAND_MODAL_CONTEXT]
@@ -2494,13 +2432,13 @@ class SkyTextExpandComponent {
             this.isExpanded = expanding;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i3$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandComponent, isStandalone: true, 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  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\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  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i5$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandComponent, isStandalone: true, 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  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\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  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
             type: Component,
-            args: [{ imports: [_SkyTransitionEndHandlerDirective], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\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  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
-        }], ctorParameters: () => [{ type: i3$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
+            args: [{ imports: [_SkyTransitionEndHandlerDirective], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\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  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.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:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.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-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: () => [{ type: i5$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
                 type: Input
             }], maxExpandedLength: [{
                 type: Input
@@ -2705,11 +2643,11 @@ class SkyTextExpandRepeaterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\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      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\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      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\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      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-transition-time-medium);transition-property:max-height;transition-timing-function:ease}.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: [{ selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\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      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.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: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], containerEl: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 class SkyTextExpandRepeaterModule {