@skyux/code-examples 12.15.0 → 12.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -92,7 +92,7 @@ class ActionBarsSummaryActionBarBasicExampleComponent {
|
|
|
92
92
|
alert('Secondary action 2 button clicked.');
|
|
93
93
|
}
|
|
94
94
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ActionBarsSummaryActionBarBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ActionBarsSummaryActionBarBasicExampleComponent, isStandalone: true, selector: "app-action-bars-summary-action-bar-basic-example", ngImport: i0, template: "<sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onPrimaryActionClick()\"\n >\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n</sky-summary-action-bar>\n", dependencies: [{ 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: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ActionBarsSummaryActionBarBasicExampleComponent, isStandalone: true, selector: "app-action-bars-summary-action-bar-basic-example", ngImport: i0, template: "<sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onPrimaryActionClick()\"\n >\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n</sky-summary-action-bar>\n", dependencies: [{ 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: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
|
|
96
96
|
}
|
|
97
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ActionBarsSummaryActionBarBasicExampleComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
@@ -114,7 +114,7 @@ let ModalComponent$8 = class ModalComponent {
|
|
|
114
114
|
this.#modalInstance.save();
|
|
115
115
|
}
|
|
116
116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
117
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal headingText=\"Modal with summary action bar\">\n <sky-modal-content> Hello world! </sky-modal-content>\n <sky-modal-footer>\n <sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"save()\">\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-cancel (actionClick)=\"cancel()\">\n Cancel\n </sky-summary-action-bar-cancel>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n </sky-summary-action-bar>\n </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ4, selector: "sky-summary-action-bar-cancel", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
|
|
117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal headingText=\"Modal with summary action bar\">\n <sky-modal-content> Hello world! </sky-modal-content>\n <sky-modal-footer>\n <sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"save()\">\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-cancel (actionClick)=\"cancel()\">\n Cancel\n </sky-summary-action-bar-cancel>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n </sky-summary-action-bar>\n </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ 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: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ4, selector: "sky-summary-action-bar-cancel", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }] }); }
|
|
118
118
|
};
|
|
119
119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent$8, decorators: [{
|
|
120
120
|
type: Component,
|
|
@@ -154,7 +154,7 @@ class ActionBarsSummaryActionBarTabExampleComponent {
|
|
|
154
154
|
alert('Secondary action 2 button clicked.');
|
|
155
155
|
}
|
|
156
156
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ActionBarsSummaryActionBarTabExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ActionBarsSummaryActionBarTabExampleComponent, isStandalone: true, selector: "app-action-bars-summary-action-bar-tab-example", ngImport: i0, template: "<sky-tabset [active]=\"0\">\n <sky-tab tabHeading=\"Tab 1\"> Tab without summary action bar. </sky-tab>\n <sky-tab tabHeading=\"Tab 2\">\n Tab with summary action bar.\n <sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onPrimaryActionClick()\"\n >\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n </sky-summary-action-bar>\n </sky-tab>\n</sky-tabset>\n", dependencies: [{ 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: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$1.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }] }); }
|
|
157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ActionBarsSummaryActionBarTabExampleComponent, isStandalone: true, selector: "app-action-bars-summary-action-bar-tab-example", ngImport: i0, template: "<sky-tabset [active]=\"0\">\n <sky-tab tabHeading=\"Tab 1\"> Tab without summary action bar. </sky-tab>\n <sky-tab tabHeading=\"Tab 2\">\n Tab with summary action bar.\n <sky-summary-action-bar data-sky-id=\"donation-summary\">\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onPrimaryActionClick()\"\n >\n Primary action\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action\"\n (actionClick)=\"onSecondaryActionClick()\"\n >\n Secondary action\n </sky-summary-action-bar-secondary-action>\n <sky-summary-action-bar-secondary-action\n data-sky-id=\"secondary-action-2\"\n (actionClick)=\"onSecondaryAction2Click()\"\n >\n Secondary action 2\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n <sky-summary-action-bar-summary>\n <sky-key-info>\n <sky-key-info-value>$250</sky-key-info-value>\n <sky-key-info-label>Given this month</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,000</sky-key-info-value>\n <sky-key-info-label>Given this year</sky-key-info-label>\n </sky-key-info>\n <sky-key-info>\n <sky-key-info-value>$1,300</sky-key-info-value>\n <sky-key-info-label>Given all time</sky-key-info-label>\n </sky-key-info>\n </sky-summary-action-bar-summary>\n </sky-summary-action-bar>\n </sky-tab>\n</sky-tabset>\n", dependencies: [{ 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: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }, { kind: "component", type: i2.λ1, selector: "sky-summary-action-bar-summary" }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$1.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$1.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }] }); }
|
|
158
158
|
}
|
|
159
159
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ActionBarsSummaryActionBarTabExampleComponent, decorators: [{
|
|
160
160
|
type: Component,
|
|
@@ -12674,7 +12674,7 @@ class SplitViewPageContentComponent {
|
|
|
12674
12674
|
});
|
|
12675
12675
|
}
|
|
12676
12676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item.id; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace ariaLabel=\"Transaction form\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list class=\"sky-margin-stacked-xl\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Vendor </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <div>\n <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n <input\n formControlName=\"approvedAmount\"\n name=\"approvedAmount\"\n type=\"text\"\n />\n </sky-input-box>\n </div>\n\n <div>\n <sky-input-box stacked=\"true\" labelText=\"Comments\">\n <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n </sky-input-box>\n </div>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
12677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewPageContentComponent, isStandalone: true, selector: "app-split-view-page-content", ngImport: i0, template: "<sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\" [width]=\"listWidth\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item.id; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace ariaLabel=\"Transaction form\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list class=\"sky-margin-stacked-xl\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Vendor </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <div>\n <sky-input-box stacked=\"true\" labelText=\"Approved amount\">\n <input\n formControlName=\"approvedAmount\"\n name=\"approvedAmount\"\n type=\"text\"\n />\n </sky-input-box>\n </div>\n\n <div>\n <sky-input-box stacked=\"true\" labelText=\"Comments\">\n <textarea formControlName=\"comments\" name=\"comments\"></textarea>\n </sky-input-box>\n </div>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
12678
12678
|
}
|
|
12679
12679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageContentComponent, decorators: [{
|
|
12680
12680
|
type: Component,
|
|
@@ -13104,7 +13104,7 @@ class SplitViewBasicExampleComponent {
|
|
|
13104
13104
|
this.splitViewStream.next(message);
|
|
13105
13105
|
}
|
|
13106
13106
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace ariaLabel=\"Transaction form\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list labelWidth=\"150px\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Vendor </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n <input formControlName=\"approvedAmount\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Comments\">\n <textarea formControlName=\"comments\"></textarea>\n </sky-input-box>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
13107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewBasicExampleComponent, isStandalone: true, selector: "app-split-view-basic-example", ngImport: i0, template: "<sky-split-view [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace ariaLabel=\"Transaction form\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list labelWidth=\"150px\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Vendor </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n <input formControlName=\"approvedAmount\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Comments\">\n <textarea formControlName=\"comments\"></textarea>\n </sky-input-box>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action (actionClick)=\"onApprove()\">\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action (actionClick)=\"onDeny()\">\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n</sky-split-view>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
13108
13108
|
}
|
|
13109
13109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewBasicExampleComponent, decorators: [{
|
|
13110
13110
|
type: Component,
|
|
@@ -13301,7 +13301,7 @@ class SplitViewPageBoundExampleComponent {
|
|
|
13301
13301
|
this.splitViewStream.next(message);
|
|
13302
13302
|
}
|
|
13303
13303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageBoundExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13304
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n <div class=\"page-flex\">\n <div class=\"page-flex-header\">\n <sky-page-summary>\n @if (unapprovedTransaction) {\n <sky-page-summary-alert>\n <sky-alert alertType=\"info\"\n >There is an unapproved transaction.</sky-alert\n >\n </sky-page-summary-alert>\n }\n <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n <sky-page-summary-subtitle>\n Petty Cash Transactions\n </sky-page-summary-subtitle>\n <sky-page-summary-content>\n The transactions below cover various operating expenses which do not\n fall under one of the budgets areas of expenditures.\n </sky-page-summary-content>\n </sky-page-summary>\n </div>\n <div class=\"page-flex-main\">\n <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list labelWidth=\"150px\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Vendor\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n <input formControlName=\"approvedAmount\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Comments\">\n <textarea formControlName=\"comments\"></textarea>\n </sky-input-box>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onApprove()\"\n >\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n (actionClick)=\"onDeny()\"\n >\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n </sky-split-view>\n </div>\n </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$4.λ26, selector: "sky-page", inputs: ["layout"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$4.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$4.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$4.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$4.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$4.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar" }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
13304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SplitViewPageBoundExampleComponent, isStandalone: true, selector: "app-split-view-page-bound-example", ngImport: i0, template: "<sky-page layout=\"fit\">\n <div class=\"page-flex\">\n <div class=\"page-flex-header\">\n <sky-page-summary>\n @if (unapprovedTransaction) {\n <sky-page-summary-alert>\n <sky-alert alertType=\"info\"\n >There is an unapproved transaction.</sky-alert\n >\n </sky-page-summary-alert>\n }\n <sky-page-summary-title> SKY Developers, LLC </sky-page-summary-title>\n <sky-page-summary-subtitle>\n Petty Cash Transactions\n </sky-page-summary-subtitle>\n <sky-page-summary-content>\n The transactions below cover various operating expenses which do not\n fall under one of the budgets areas of expenditures.\n </sky-page-summary-content>\n </sky-page-summary>\n </div>\n <div class=\"page-flex-main\">\n <sky-split-view dock=\"fill\" [messageStream]=\"splitViewStream\">\n <sky-split-view-drawer [ariaLabel]=\"'Transaction list'\">\n <sky-repeater [activeIndex]=\"activeIndex\">\n @for (item of items; track item; let i = $index) {\n <sky-repeater-item\n (click)=\"onItemClick(i)\"\n (keyup.enter)=\"onItemClick(i)\"\n >\n <sky-repeater-item-content>\n {{ item.amount }} <br />\n {{ item.date }} <br />\n {{ item.vendor }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-split-view-drawer>\n\n <sky-split-view-workspace [ariaLabel]=\"'Transaction form'\">\n <sky-split-view-workspace-content class=\"sky-padding-even-xl\">\n <form [formGroup]=\"splitViewDemoForm\" (ngSubmit)=\"onApprove()\">\n <sky-description-list labelWidth=\"150px\">\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt amount\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.amount }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term> Date </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.date }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Vendor\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.vendor }}\n </sky-description-list-description>\n </sky-description-list-content>\n <sky-description-list-content>\n <sky-description-list-term>\n Receipt image\n </sky-description-list-term>\n <sky-description-list-description>\n {{ activeRecord.receiptImage }}\n </sky-description-list-description>\n </sky-description-list-content>\n </sky-description-list>\n <sky-input-box labelText=\"Approved amount\" stacked=\"true\">\n <input formControlName=\"approvedAmount\" type=\"text\" />\n </sky-input-box>\n <sky-input-box labelText=\"Comments\">\n <textarea formControlName=\"comments\"></textarea>\n </sky-input-box>\n </form>\n </sky-split-view-workspace-content>\n <sky-split-view-workspace-footer>\n <sky-summary-action-bar>\n <sky-summary-action-bar-actions>\n <sky-summary-action-bar-primary-action\n (actionClick)=\"onApprove()\"\n >\n Approve expense\n </sky-summary-action-bar-primary-action>\n <sky-summary-action-bar-secondary-actions>\n <sky-summary-action-bar-secondary-action\n (actionClick)=\"onDeny()\"\n >\n Deny expense\n </sky-summary-action-bar-secondary-action>\n </sky-summary-action-bar-secondary-actions>\n </sky-summary-action-bar-actions>\n </sky-summary-action-bar>\n </sky-split-view-workspace-footer>\n </sky-split-view-workspace>\n </sky-split-view>\n </div>\n </div>\n</sky-page>\n", styles: [".page-flex{display:flex;flex-direction:column;position:absolute;inset:0}.page-flex-header{flex-grow:0}.page-flex-main{flex-grow:1;overflow:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAlertModule }, { kind: "component", type: i1.λ1, selector: "sky-alert", inputs: ["alertType", "closeable", "closed", "descriptionType", "customDescription"], outputs: ["closedChange"] }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$4.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$4.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$4.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$4.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyPageModule }, { kind: "component", type: i1$4.λ26, selector: "sky-page", inputs: ["layout"] }, { kind: "ngmodule", type: SkyPageSummaryModule }, { kind: "component", type: i1$4.λ28, selector: "sky-page-summary-alert" }, { kind: "component", type: i1$4.λ27, selector: "sky-page-summary" }, { kind: "component", type: i1$4.λ29, selector: "sky-page-summary-content" }, { kind: "component", type: i1$4.λ33, selector: "sky-page-summary-subtitle" }, { kind: "component", type: i1$4.λ34, selector: "sky-page-summary-title" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i2$3.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i2$3.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i2$3.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySplitViewModule }, { kind: "component", type: i5.λ1, selector: "sky-split-view", inputs: ["backButtonText", "bindHeightToWindow", "dock", "messageStream"] }, { kind: "component", type: i5.λ2, selector: "sky-split-view-drawer", inputs: ["ariaLabel", "width"] }, { kind: "component", type: i5.λ3, selector: "sky-split-view-workspace", inputs: ["ariaLabel"] }, { kind: "component", type: i5.λ4, selector: "sky-split-view-workspace-content" }, { kind: "component", type: i5.λ5, selector: "sky-split-view-workspace-footer" }, { kind: "ngmodule", type: SkySummaryActionBarModule }, { kind: "component", type: i2.λ2, selector: "sky-summary-action-bar", inputs: ["formErrors"] }, { kind: "component", type: i2.λ3, selector: "sky-summary-action-bar-actions" }, { kind: "component", type: i2.λ5, selector: "sky-summary-action-bar-primary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ6, selector: "sky-summary-action-bar-secondary-action", inputs: ["disabled"], outputs: ["actionClick"] }, { kind: "component", type: i2.λ7, selector: "sky-summary-action-bar-secondary-actions" }] }); }
|
|
13305
13305
|
}
|
|
13306
13306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageBoundExampleComponent, decorators: [{
|
|
13307
13307
|
type: Component,
|