@skyux/layout 6.0.0-beta.9 → 6.0.2

package/fesm2020/skyux-layout.mjs

@@ -16,12 +16,12 @@ import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/i18n';
 import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i3$2 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1$2 from '@skyux/forms';
+import * as i2$2 from '@skyux/forms';
 import { SkyCheckboxModule } from '@skyux/forms';
 import { trigger, transition, style, query, group, animate } from '@angular/animations';
-import * as i2$2 from '@skyux/modals';
+import * as i2$3 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 
 const RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';
@@ -1020,6 +1020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Specifies an action that users can perform on the card.
+ * @deprecated
  */
 class SkyCardActionsComponent {
 }
@@ -1032,6 +1033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Specifies the content to display in the body of the card.
+ * @deprecated
  */
 class SkyCardContentComponent {
 }
@@ -1044,6 +1046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Specifies a title to identify what the card represents.
+ * @deprecated
  */
 class SkyCardTitleComponent {
 }
@@ -1056,14 +1059,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * 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() {
+    constructor(logger) {
         /**
          * Fires when users select or deselect the card.
          */
         this.selectedChange = new EventEmitter();
         this.showTitle = true;
+        logger.deprecated('SkyCardComponent', {
+            deprecationMajorVersion: 6,
+            moreInfoUrl: 'https://developer.blackbaud.com/skyux/design/guidelines/content-containers',
+            replacementRecommendation: 'For other SKY UX components that group and list content, see the content containers guidelines.',
+        });
     }
     ngAfterContentInit() {
         this.showTitle = this.titleComponent.length > 0;
@@ -1099,12 +1108,12 @@ class SkyCardComponent {
         }
     }
 }
-SkyCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\"></ng-content>\n  <header>\n    <div\n      *ngIf=\"selectable || showTitle\"\n      class=\"sky-card-header\"\n      (click)=\"contentClick()\"\n    >\n      <div class=\"sky-card-heading-middle\">\n        <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div *ngIf=\"selectable\" class=\"sky-card-check\">\n        <sky-checkbox\n          [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n          [ngModel]=\"selected\"\n          (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"onCheckboxChange($event)\"\n        ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n    #actionsEl\n  >\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], components: [{ type: i1$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+SkyCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
+SkyCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyCardComponent, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\"></ng-content>\n  <header>\n    <div\n      *ngIf=\"selectable || showTitle\"\n      class=\"sky-card-header\"\n      (click)=\"contentClick()\"\n    >\n      <div class=\"sky-card-heading-middle\">\n        <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div *ngIf=\"selectable\" class=\"sky-card-check\">\n        <sky-checkbox\n          [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n          [ngModel]=\"selected\"\n          (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"onCheckboxChange($event)\"\n        ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n    #actionsEl\n  >\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"], components: [{ type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-card', template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\"></ng-content>\n  <header>\n    <div\n      *ngIf=\"selectable || showTitle\"\n      class=\"sky-card-header\"\n      (click)=\"contentClick()\"\n    >\n      <div class=\"sky-card-heading-middle\">\n        <h1 *ngIf=\"showTitle\" class=\"sky-card-title sky-section-heading\">\n          <ng-content select=\"sky-card-title\"></ng-content>\n        </h1>\n      </div>\n      <div *ngIf=\"selectable\" class=\"sky-card-check\">\n        <sky-checkbox\n          [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n          [ngModel]=\"selected\"\n          (click)=\"$event.stopPropagation()\"\n          (ngModelChange)=\"onCheckboxChange($event)\"\n        ></sky-checkbox>\n      </div>\n    </div>\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\"></ng-content>\n  </div>\n  <div\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n    #actionsEl\n  >\n    <ng-content select=\"sky-card-actions\"></ng-content>\n  </div>\n</section>\n", styles: [".sky-card{background-color:#fff;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;display:inline-flex;flex-direction:column;height:350px;margin:0 10px 10px 0;transition:background-color .15s;vertical-align:top;width:350px;position:relative}.sky-card-small{height:250px;width:225px}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:#f1eef6;transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:10px 0 0}.sky-card-heading-left,.sky-card-heading-right{font-weight:400;max-width:34px}.sky-card-heading-left{padding-left:10px}.sky-card-heading-right{padding-right:10px}.sky-card-heading-middle{flex-grow:1;padding:0 10px;overflow:hidden}.sky-card-title{margin:0;line-height:1.428571429}.sky-card-check{flex-shrink:0;padding-right:10px}.sky-card-check .sky-check-wrapper{margin-bottom:2px}.sky-card-content{flex-grow:1;font-weight:400;margin:0;overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}.sky-card-actions .sky-context-menu-btn{height:32px;width:32px}\n"] }]
-        }], propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: i1.SkyLogService }]; }, propDecorators: { size: [{
                 type: Input
             }], selectable: [{
                 type: Input
@@ -1120,6 +1129,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 args: [SkyCardTitleComponent]
             }] } });
 
+/**
+ * @deprecated `SkyCardModule` is deprecated. For other SKY UX components that group and list content, see the content containers guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/content-containers.
+ */
 class SkyCardModule {
 }
 SkyCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1363,12 +1375,14 @@ class SkyDescriptionListDescriptionComponent {
         this.ngUnsubscribe.complete();
     }
 }
-SkyDescriptionListDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i3$1.SkyThemeService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDescriptionListDescriptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 SkyDescriptionListDescriptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyDescriptionListDescriptionComponent, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span\n    *ngIf=\"!valueEl.textContent.trim()\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n", directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], pipes: { "async": i3.AsyncPipe, "skyLibResources": i1$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-description-list-description', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #descriptionTemplateRef>\n  <span #valueEl>\n    <ng-content></ng-content>\n  </span>\n  <span\n    *ngIf=\"!valueEl.textContent.trim()\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: SkyDescriptionListService }, { type: i0.ChangeDetectorRef }, { type: i3$1.SkyThemeService }]; }, propDecorators: { templateRef: [{
+        }], ctorParameters: function () { return [{ type: SkyDescriptionListService }, { type: i0.ChangeDetectorRef }, { type: i3$1.SkyThemeService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: ['descriptionTemplateRef', {
                         read: TemplateRef,
@@ -1907,6 +1921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 /**
  * Displays messages that require immediate attention as [alerts](https://developer.blackbaud.com/skyux/components/alert) within
  * the page summary.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1921,6 +1936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Displays content in the arbitrary section of the page summary.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1936,6 +1952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 /**
  * Displays an image in the page summary to identify a record
  * or help users complete a core task.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1951,6 +1968,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 /**
  * Highlights important information about a page in the key information section of the
  * page summary.
+ * @deprecated
  */
 class SkyPageSummaryKeyInfoComponent {
 }
@@ -1964,6 +1982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 /**
  * Displays [labels](https://developer.blackbaud.com/skyux/components/label)
  * to highlight important status information about a page's content.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1978,6 +1997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Specifies a subtitle to identify the page content.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1992,6 +2012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * Specifies a title to identify the page content.
+ * @deprecated
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -2027,12 +2048,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
 
 /**
  * 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) {
+    constructor(elRef, adapter, mediaQueryService, logger) {
         this.elRef = elRef;
         this.adapter = adapter;
         this.mediaQueryService = mediaQueryService;
+        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;
@@ -2050,18 +2077,21 @@ class SkyPageSummaryComponent {
         }
     }
 }
-SkyPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageSummaryComponent, deps: [{ token: i0.ElementRef }, { token: SkyPageSummaryAdapterService }, { token: i1.SkyMediaQueryService }], target: i0.ɵɵFactoryTarget.Component });
+SkyPageSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageSummaryComponent, deps: [{ token: i0.ElementRef }, { token: SkyPageSummaryAdapterService }, { token: i1.SkyMediaQueryService }, { token: i1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component });
 SkyPageSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyPageSummaryComponent, selector: "sky-page-summary", providers: [SkyPageSummaryAdapterService], queries: [{ propertyName: "keyInfoComponents", predicate: SkyPageSummaryKeyInfoComponent, read: SkyPageSummaryKeyInfoComponent }], ngImport: i0, template: "<div\n  class=\"sky-page-summary\"\n  [ngClass]=\"{ 'sky-page-summary-with-key-info': hasKeyInfo }\"\n>\n  <ng-content select=\"sky-page-summary-alert\"></ng-content>\n  <div class=\"sky-page-summary-row\">\n    <div class=\"sky-page-summary-left\">\n      <ng-content select=\"sky-page-summary-image\"></ng-content>\n      <div class=\"sky-page-summary-data\">\n        <ng-content select=\"sky-page-summary-title\"></ng-content>\n        <ng-content select=\"sky-page-summary-subtitle\"></ng-content>\n        <ng-content select=\"sky-page-summary-status\"></ng-content>\n        <div class=\"sky-page-summary-key-info-xs\"></div>\n        <ng-content select=\"sky-page-summary-content\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-page-summary-key-info-sm\">\n      <div class=\"sky-page-summary-key-info-container\">\n        <ng-content select=\"sky-page-summary-key-info\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-page-summary{background-color:#fff;padding:20px 15px}.sky-page-summary-row{align-items:stretch;display:flex}:host .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}@media (min-width: 768px){:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host .sky-page-summary-left{align-items:stretch;display:flex}:host .sky-page-summary-data{flex-grow:1}}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{align-items:stretch;display:flex}:host-context(.sky-responsive-container-sm) .sky-page-summary-data,:host-context(.sky-responsive-container-md) .sky-page-summary-data,:host-context(.sky-responsive-container-lg) .sky-page-summary-data{flex-grow:1}\n"], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-page-summary', providers: [SkyPageSummaryAdapterService], template: "<div\n  class=\"sky-page-summary\"\n  [ngClass]=\"{ 'sky-page-summary-with-key-info': hasKeyInfo }\"\n>\n  <ng-content select=\"sky-page-summary-alert\"></ng-content>\n  <div class=\"sky-page-summary-row\">\n    <div class=\"sky-page-summary-left\">\n      <ng-content select=\"sky-page-summary-image\"></ng-content>\n      <div class=\"sky-page-summary-data\">\n        <ng-content select=\"sky-page-summary-title\"></ng-content>\n        <ng-content select=\"sky-page-summary-subtitle\"></ng-content>\n        <ng-content select=\"sky-page-summary-status\"></ng-content>\n        <div class=\"sky-page-summary-key-info-xs\"></div>\n        <ng-content select=\"sky-page-summary-content\"></ng-content>\n      </div>\n    </div>\n    <div class=\"sky-page-summary-key-info-sm\">\n      <div class=\"sky-page-summary-key-info-container\">\n        <ng-content select=\"sky-page-summary-key-info\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-page-summary{background-color:#fff;padding:20px 15px}.sky-page-summary-row{align-items:stretch;display:flex}:host .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{flex-basis:100%;display:initial;align-items:initial}:host-context(.sky-responsive-container-xs) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:100%;padding-right:initial}@media (min-width: 768px){:host .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host .sky-page-summary-left{align-items:stretch;display:flex}:host .sky-page-summary-data{flex-grow:1}}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-left{flex-basis:75%;padding-right:15px}:host-context(.sky-responsive-container-sm) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-md) .sky-page-summary-with-key-info .sky-page-summary-right,:host-context(.sky-responsive-container-lg) .sky-page-summary-with-key-info .sky-page-summary-right{flex-basis:25%}:host-context(.sky-responsive-container-sm) .sky-page-summary-left,:host-context(.sky-responsive-container-md) .sky-page-summary-left,:host-context(.sky-responsive-container-lg) .sky-page-summary-left{align-items:stretch;display:flex}:host-context(.sky-responsive-container-sm) .sky-page-summary-data,:host-context(.sky-responsive-container-md) .sky-page-summary-data,:host-context(.sky-responsive-container-lg) .sky-page-summary-data{flex-grow:1}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyPageSummaryAdapterService }, { type: i1.SkyMediaQueryService }]; }, propDecorators: { keyInfoComponents: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyPageSummaryAdapterService }, { type: i1.SkyMediaQueryService }, { type: i1.SkyLogService }]; }, propDecorators: { keyInfoComponents: [{
                 type: ContentChildren,
                 args: [SkyPageSummaryKeyInfoComponent, {
                         read: SkyPageSummaryKeyInfoComponent,
                     }]
             }] } });
 
+/**
+ * @deprecated `SkyPageSummaryModule` is deprecated. For page templates and techniques to summarize page content, see the page design guidelines. For more information, see https://developer.blackbaud.com/skyux/design/guidelines/page-layouts.
+ */
 class SkyPageSummaryModule {
 }
 SkyPageSummaryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyPageSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2126,12 +2156,12 @@ class SkyTextExpandModalComponent {
         this.instance.close();
     }
 }
-SkyTextExpandModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SkyTextExpandModalContext }, { token: i2$2.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
-SkyTextExpandModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTextExpandModalComponent, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], components: [{ type: i2$2.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i2$2.λ4, selector: "sky-modal-header" }, { type: i2$2.λ2, selector: "sky-modal-content" }, { type: i2$2.λ3, selector: "sky-modal-footer" }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
+SkyTextExpandModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SkyTextExpandModalContext }, { token: i2$3.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTextExpandModalComponent, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], components: [{ type: i2$3.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody"] }, { type: i2$3.λ4, selector: "sky-modal-header" }, { type: i2$3.λ2, selector: "sky-modal-content" }, { type: i2$3.λ3, selector: "sky-modal-footer" }], pipes: { "skyLibResources": i1$1.SkyLibResourcesPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", 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 }]; } });
+        }], ctorParameters: function () { return [{ type: SkyTextExpandModalContext }, { type: i2$3.SkyModalInstance }]; } });
 
 /**
  * @internal
@@ -2365,12 +2395,12 @@ class SkyTextExpandComponent {
         }, 10);
     }
 }
-SkyTextExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$1.SkyLibResourcesService }, { token: i2$2.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component });
+SkyTextExpandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i1$1.SkyLibResourcesService }, { token: i2$3.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component });
 SkyTextExpandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyTextExpandComponent, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  class=\"sky-text-expand-container\"\n  (transitionend)=\"animationEnd()\"\n  #container\n>\n  <span class=\"sky-text-expand-text\" [id]=\"contentSectionId\" #text></span>\n  <span class=\"sky-text-expand-ellipsis\" *ngIf=\"!isExpanded && expandable\"\n    >...\n  </span>\n  <button\n    *ngIf=\"expandable\"\n    type=\"button\"\n    class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n    [attr.aria-expanded]=\"isModal ? undefined : isExpanded\"\n    [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n    [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n    (click)=\"textExpand()\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [".sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:5px}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition:max-height .25s}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.SkyLibResourcesService }, { type: i2$2.SkyModalService }, { type: SkyTextExpandAdapterService }]; }, propDecorators: { expandModalTitle: [{
+        }], ctorParameters: function () { return [{ type: i1$1.SkyLibResourcesService }, { type: i2$3.SkyModalService }, { type: SkyTextExpandAdapterService }]; }, propDecorators: { expandModalTitle: [{
                 type: Input
             }], maxExpandedLength: [{
                 type: Input