@skyux/code-examples 14.0.0-alpha.9 → 14.0.0-beta.0

package/fesm2022/skyux-code-examples.mjs

@@ -8224,11 +8224,11 @@ class LayoutCardBasicExampleComponent {
         alert('Action clicked!');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutCardBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutCardBasicExampleComponent, isStandalone: true, selector: "app-layout-card-basic-example", ngImport: i0, template: "<sky-card [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Large card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the amount of space that is available for a card\n      that uses the default large size. If the content does not require this\n      much space, you can set the card size to small. The type of content to\n      display in the body of a card varies based on what the card represents and\n      whether it prompts users to action.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"triggerAlert()\"\n      >\n        Action\n      </button>\n    </sky-card-actions>\n  }\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Small card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the reduced amount of space that is available\n      when you set the card size to small.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-card-actions>\n  }\n</sky-card>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show content\" [(ngModel)]=\"showContent\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show action\" [(ngModel)]=\"showAction\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show checkbox\" [(ngModel)]=\"showCheckbox\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCardModule }, { kind: "component", type: i1$5.λ10, selector: "sky-card-actions" }, { kind: "component", type: i1$5.λ9, selector: "sky-card", inputs: ["size", "selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i1$5.λ11, selector: "sky-card-content" }, { kind: "component", type: i1$5.λ12, selector: "sky-card-title" }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ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: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutCardBasicExampleComponent, isStandalone: true, selector: "app-layout-card-basic-example", ngImport: i0, template: "<sky-card [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Large card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the amount of space that is available for a card\n      that uses the default large size. If the content does not require this\n      much space, you can set the card size to small. The type of content to\n      display in the body of a card varies based on what the card represents and\n      whether it prompts users to action.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"triggerAlert()\"\n      >\n        Action\n      </button>\n    </sky-card-actions>\n  }\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Small card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the reduced amount of space that is available\n      when you set the card size to small.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-card-actions>\n  }\n</sky-card>\n\n<ul class=\"sky-theme-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show content\" [(ngModel)]=\"showContent\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show action\" [(ngModel)]=\"showAction\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show checkbox\" [(ngModel)]=\"showCheckbox\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyCardModule }, { kind: "component", type: i1$5.λ10, selector: "sky-card-actions" }, { kind: "component", type: i1$5.λ9, selector: "sky-card", inputs: ["size", "selectable", "selected"], outputs: ["selectedChange"] }, { kind: "component", type: i1$5.λ11, selector: "sky-card-content" }, { kind: "component", type: i1$5.λ12, selector: "sky-card-title" }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ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: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$3.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$3.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$3.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutCardBasicExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-layout-card-basic-example', imports: [FormsModule, SkyCardModule, SkyCheckboxModule, SkyDropdownModule], template: "<sky-card [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Large card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the amount of space that is available for a card\n      that uses the default large size. If the content does not require this\n      much space, you can set the card size to small. The type of content to\n      display in the body of a card varies based on what the card represents and\n      whether it prompts users to action.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"triggerAlert()\"\n      >\n        Action\n      </button>\n    </sky-card-actions>\n  }\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Small card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the reduced amount of space that is available\n      when you set the card size to small.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-card-actions>\n  }\n</sky-card>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show content\" [(ngModel)]=\"showContent\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show action\" [(ngModel)]=\"showAction\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show checkbox\" [(ngModel)]=\"showCheckbox\" />\n  </li>\n</ul>\n" }]
+            args: [{ selector: 'app-layout-card-basic-example', imports: [FormsModule, SkyCardModule, SkyCheckboxModule, SkyDropdownModule], template: "<sky-card [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Large card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the amount of space that is available for a card\n      that uses the default large size. If the content does not require this\n      much space, you can set the card size to small. The type of content to\n      display in the body of a card varies based on what the card represents and\n      whether it prompts users to action.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"triggerAlert()\"\n      >\n        Action\n      </button>\n    </sky-card-actions>\n  }\n</sky-card>\n<sky-card size=\"small\" [selectable]=\"showCheckbox\">\n  @if (showTitle) {\n    <sky-card-title> Small card </sky-card-title>\n  }\n  @if (showContent) {\n    <sky-card-content>\n      This card examplenstrates the reduced amount of space that is available\n      when you set the card size to small.\n    </sky-card-content>\n  }\n  @if (showAction) {\n    <sky-card-actions>\n      <sky-dropdown buttonType=\"context-menu\">\n        <sky-dropdown-menu>\n          <sky-dropdown-item>\n            <button type=\"button\" (click)=\"triggerAlert()\">Action</button>\n          </sky-dropdown-item>\n        </sky-dropdown-menu>\n      </sky-dropdown>\n    </sky-card-actions>\n  }\n</sky-card>\n\n<ul class=\"sky-theme-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show content\" [(ngModel)]=\"showContent\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show action\" [(ngModel)]=\"showAction\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show checkbox\" [(ngModel)]=\"showCheckbox\" />\n  </li>\n</ul>\n" }]
         }] });
 
 /**
@@ -8547,7 +8547,7 @@ class LayoutPageSummaryBasicExampleComponent {
         this.showTitle = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutPageSummaryBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutPageSummaryBasicExampleComponent, isStandalone: true, selector: "app-layout-page-summary-basic-example", ngImport: i0, template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ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: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ30, selector: "sky-page-summary-image" }, { kind: "component", type: i1$5.λ31, selector: "sky-page-summary-key-info" }, { kind: "component", type: i1$5.λ32, selector: "sky-page-summary-status" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LayoutPageSummaryBasicExampleComponent, isStandalone: true, selector: "app-layout-page-summary-basic-example", ngImport: i0, template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-theme-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyAvatarModule }, { kind: "component", type: i1$8.λ1, selector: "sky-avatar", inputs: ["canChange", "name", "src", "maxFileSize", "size"], outputs: ["avatarChanged"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ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: "ngmodule", type: SkyKeyInfoModule }, { kind: "component", type: i1.λ8, selector: "sky-key-info", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle", "layout"] }, { kind: "component", type: i1.λ6, selector: "sky-key-info-label" }, { kind: "component", type: i1.λ7, selector: "sky-key-info-value" }, { kind: "ngmodule", type: SkyLabelModule }, { kind: "component", type: i1.λ9, selector: "sky-label", inputs: ["labelType", "descriptionType", "customDescription"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$5.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$5.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$5.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$5.λ30, selector: "sky-page-summary-image" }, { kind: "component", type: i1$5.λ31, selector: "sky-page-summary-key-info" }, { kind: "component", type: i1$5.λ32, selector: "sky-page-summary-status" }, { kind: "component", type: i1$5.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$5.λ34, selector: "sky-page-summary-title" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LayoutPageSummaryBasicExampleComponent, decorators: [{
             type: Component,
@@ -8559,7 +8559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         SkyKeyInfoModule,
                         SkyLabelModule,
                         SkyPageSummaryModule,
-                    ], template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n" }]
+                    ], template: "<sky-page-summary>\n  @if (showAlert) {\n    <sky-page-summary-alert>\n      <sky-alert alertType=\"info\"> This is an alert. </sky-alert>\n    </sky-page-summary-alert>\n  }\n  @if (showImage) {\n    <sky-page-summary-image>\n      <sky-avatar [name]=\"name\" [canChange]=\"true\" />\n    </sky-page-summary-image>\n  }\n  @if (showTitle) {\n    <sky-page-summary-title>\n      {{ name }}\n    </sky-page-summary-title>\n  }\n  @if (showSubtitle) {\n    <sky-page-summary-subtitle> Board member </sky-page-summary-subtitle>\n  }\n  @if (showStatus) {\n    <sky-page-summary-status>\n      <sky-label labelType=\"success\"> Fundraiser </sky-label>\n      <sky-label> Inactive </sky-label>\n    </sky-page-summary-status>\n  }\n  @if (showContent) {\n    <sky-page-summary-content>\n      This is the arbitrary content section. You can display any kind of content\n      to complement the content on a page. We recommend that you display content\n      to support the key tasks of users of users who visit the page. We also\n      recommend that you keep in mind the context of how users will use the\n      content and limit the amount of content to avoid overloading the summary.\n    </sky-page-summary-content>\n  }\n  @if (showKeyInfo) {\n    <sky-page-summary-key-info>\n      <sky-key-info>\n        <sky-key-info-value> $1,500 </sky-key-info-value>\n        <sky-key-info-label> Largest gift </sky-key-info-label>\n      </sky-key-info>\n      <sky-key-info>\n        <sky-key-info-value> 37 </sky-key-info-value>\n        <sky-key-info-label> Total gifts </sky-key-info-label>\n      </sky-key-info>\n    </sky-page-summary-key-info>\n  }\n</sky-page-summary>\n\n<ul class=\"sky-theme-list-unstyled\">\n  <li>\n    <sky-checkbox labelText=\"Show title\" [(ngModel)]=\"showTitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show subtitle\" [(ngModel)]=\"showSubtitle\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show image\" [(ngModel)]=\"showImage\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show record status\" [(ngModel)]=\"showStatus\" />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show key information\" [(ngModel)]=\"showKeyInfo\" />\n  </li>\n  <li>\n    <sky-checkbox\n      labelText=\"Show arbitrary content\"\n      [(ngModel)]=\"showContent\"\n    />\n  </li>\n  <li>\n    <sky-checkbox labelText=\"Show alert\" [(ngModel)]=\"showAlert\" />\n  </li>\n</ul>\n" }]
         }] });
 
 /**