@skyux/code-examples 12.9.0 → 12.10.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.
- package/fesm2022/skyux-code-examples.mjs +112 -45
- package/fesm2022/skyux-code-examples.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/modules/inline-form/inline-form/basic/example.component.d.ts +1 -1
- package/lib/modules/inline-form/inline-form/custom-buttons/example.component.d.ts +1 -1
- package/lib/modules/layout/inline-delete/custom/example.component.d.ts +1 -1
- package/lib/modules/layout/inline-delete/repeater/example.component.d.ts +2 -2
- package/lib/modules/lookup/autocomplete/any-value/color-option.d.ts +4 -0
- package/lib/modules/lookup/autocomplete/any-value/example.component.d.ts +17 -0
- package/lib/modules/lookup/autocomplete/any-value/example.service.d.ts +8 -0
- package/lib/modules/lookup/autocomplete/any-value/search-results.d.ts +6 -0
- package/lib/modules/tabs/sectioned-form/modal/example.component.d.ts +1 -1
- package/lib/modules/tabs/sectioned-form/modal/modal.component.d.ts +5 -3
- package/package.json +33 -33
|
@@ -7,7 +7,7 @@ import { SkyKeyInfoModule, SkyStatusIndicatorModule, SkyAlertModule, SkyIllustra
|
|
|
7
7
|
import * as i3 from '@skyux/modals';
|
|
8
8
|
import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, SkyConfirmType } from '@skyux/modals';
|
|
9
9
|
import * as i1$1 from '@skyux/tabs';
|
|
10
|
-
import { SkyTabsModule, SkySectionedFormService,
|
|
10
|
+
import { SkyTabsModule, SkySectionedFormService, SkySectionedFormMessageType, SkySectionedFormModule, SkyVerticalTabsetModule } from '@skyux/tabs';
|
|
11
11
|
import * as i2$1 from '@skyux/ag-grid';
|
|
12
12
|
import { SkyAgGridService, SkyCellType, SkyAgGridModule, SkyAgGridHeaderInfo } from '@skyux/ag-grid';
|
|
13
13
|
import * as i1$4 from '@skyux/layout';
|
|
@@ -17,7 +17,7 @@ import { SkySearchModule, SkyAutocompleteModule, SkyCountryFieldModule, SkyLooku
|
|
|
17
17
|
import * as i1$3 from 'ag-grid-angular';
|
|
18
18
|
import { AgGridModule } from 'ag-grid-angular';
|
|
19
19
|
import { ModuleRegistry, AllCommunityModule } from 'ag-grid-community';
|
|
20
|
-
import { of, Subject, takeUntil, Subscription, delay, switchMap, tap, shareReplay } from 'rxjs';
|
|
20
|
+
import { of, Subject, takeUntil, Subscription, delay, switchMap, tap, shareReplay, map as map$1 } from 'rxjs';
|
|
21
21
|
import * as i1$2 from '@skyux/popovers';
|
|
22
22
|
import { SkyDropdownModule, SkyPopoverModule, SkyPopoverMessageType } from '@skyux/popovers';
|
|
23
23
|
import * as i3$3 from '@skyux/data-manager';
|
|
@@ -5764,11 +5764,11 @@ class ViewRepeaterComponent {
|
|
|
5764
5764
|
this.#changeDetector.markForCheck();
|
|
5765
5765
|
}
|
|
5766
5766
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ViewRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5767
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ViewRepeaterComponent, isStandalone: true, selector: "app-view-repeater", inputs: { items: "items" }, ngImport: i0, template: "<sky-data-view [viewId]=\"viewId\">\n @if (isActive) {\n <sky-repeater expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n }\n</sky-data-view>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { 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: "component", type: i2$3.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ViewRepeaterComponent, isStandalone: true, selector: "app-view-repeater", inputs: { items: "items" }, ngImport: i0, template: "<sky-data-view [viewId]=\"viewId\">\n @if (isActive) {\n <sky-repeater expandMode=\"none\">\n @for (item of displayedItems; track item.id) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n }\n</sky-data-view>\n", dependencies: [{ kind: "ngmodule", type: SkyDataManagerModule }, { kind: "component", type: i3$3.λ8, selector: "sky-data-view", inputs: ["viewId"] }, { 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: "component", type: i2$3.λ12, selector: "sky-repeater-item-title" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5768
5768
|
}
|
|
5769
5769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ViewRepeaterComponent, decorators: [{
|
|
5770
5770
|
type: Component,
|
|
5771
|
-
args: [{ selector: 'app-view-repeater', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDataManagerModule, SkyRepeaterModule], template: "<sky-data-view [viewId]=\"viewId\">\n @if (isActive) {\n <sky-repeater expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n }\n</sky-data-view>\n" }]
|
|
5771
|
+
args: [{ selector: 'app-view-repeater', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyDataManagerModule, SkyRepeaterModule], template: "<sky-data-view [viewId]=\"viewId\">\n @if (isActive) {\n <sky-repeater expandMode=\"none\">\n @for (item of displayedItems; track item.id) {\n <sky-repeater-item\n [selectable]=\"true\"\n [(isSelected)]=\"item.selected\"\n (isSelectedChange)=\"onItemSelect($event, item)\"\n >\n <sky-repeater-item-title>\n {{ item.name }}\n </sky-repeater-item-title>\n <sky-repeater-item-content>\n {{ item.description }}\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n }\n</sky-data-view>\n" }]
|
|
5772
5772
|
}], propDecorators: { items: [{
|
|
5773
5773
|
type: Input
|
|
5774
5774
|
}] } });
|
|
@@ -6634,7 +6634,7 @@ class FormsFieldGroupBasicExampleComponent {
|
|
|
6634
6634
|
});
|
|
6635
6635
|
}
|
|
6636
6636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n [helpPopoverContent]=\"helpPopoverContent\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [
|
|
6637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n [helpPopoverContent]=\"helpPopoverContent\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"5\">\n <sky-input-box labelText=\"City\" stacked=\"true\">\n <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n <sky-input-box labelText=\"State\" stacked=\"true\">\n <select formControlName=\"state\">\n <option [attr.value]=\"undefined\"></option>\n @for (state of states; track state) {\n <option value=\"state\">\n {{ state }}\n </option>\n }\n </select>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n <sky-input-box labelText=\"Zip code\">\n <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-field-group>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { 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"] }] }); }
|
|
6638
6638
|
}
|
|
6639
6639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, decorators: [{
|
|
6640
6640
|
type: Component,
|
|
@@ -6644,7 +6644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6644
6644
|
SkyFieldGroupModule,
|
|
6645
6645
|
SkyFluidGridModule,
|
|
6646
6646
|
SkyInputBoxModule,
|
|
6647
|
-
], template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n [helpPopoverContent]=\"helpPopoverContent\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [
|
|
6647
|
+
], template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n [helpPopoverContent]=\"helpPopoverContent\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"5\">\n <sky-input-box labelText=\"City\" stacked=\"true\">\n <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n <sky-input-box labelText=\"State\" stacked=\"true\">\n <select formControlName=\"state\">\n <option [attr.value]=\"undefined\"></option>\n @for (state of states; track state) {\n <option value=\"state\">\n {{ state }}\n </option>\n }\n </select>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n <sky-input-box labelText=\"Zip code\">\n <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-field-group>\n </form>\n</div>\n" }]
|
|
6648
6648
|
}], ctorParameters: () => [] });
|
|
6649
6649
|
|
|
6650
6650
|
/**
|
|
@@ -6715,7 +6715,7 @@ class FormsFieldGroupHelpKeyExampleComponent {
|
|
|
6715
6715
|
});
|
|
6716
6716
|
}
|
|
6717
6717
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6718
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n helpKey=\"address-help\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [
|
|
6718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n helpKey=\"address-help\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"5\">\n <sky-input-box labelText=\"City\" stacked=\"true\">\n <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n <sky-input-box labelText=\"State\" stacked=\"true\">\n <select formControlName=\"state\">\n <option [attr.value]=\"undefined\"></option>\n @for (state of states; track state) {\n <option value=\"state\">\n {{ state }}\n </option>\n }\n </select>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n <sky-input-box labelText=\"Zip code\">\n <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-field-group>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: SkyFieldGroupModule }, { kind: "component", type: i2$2.λ25, selector: "sky-field-group", inputs: ["headingText", "hintText", "headingHidden", "stacked", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { 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"] }] }); }
|
|
6719
6719
|
}
|
|
6720
6720
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, decorators: [{
|
|
6721
6721
|
type: Component,
|
|
@@ -6725,7 +6725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6725
6725
|
SkyFieldGroupModule,
|
|
6726
6726
|
SkyFluidGridModule,
|
|
6727
6727
|
SkyInputBoxModule,
|
|
6728
|
-
], template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n helpKey=\"address-help\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [
|
|
6728
|
+
], template: "<div class=\"sky-padding-even-lg\">\n <form [formGroup]=\"formGroup\">\n <sky-field-group\n headingText=\"Address\"\n helpKey=\"address-help\"\n hintText=\"We use this address for your end-of-year statement.\"\n [headingStyle]=\"4\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"12\">\n <sky-input-box labelText=\"Street address\" stacked=\"true\">\n <input\n formControlName=\"streetAddress\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"5\">\n <sky-input-box labelText=\"City\" stacked=\"true\">\n <input formControlName=\"city\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"5\" [screenXSmall]=\"8\">\n <sky-input-box labelText=\"State\" stacked=\"true\">\n <select formControlName=\"state\">\n <option [attr.value]=\"undefined\"></option>\n @for (state of states; track state) {\n <option value=\"state\">\n {{ state }}\n </option>\n }\n </select>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"2\" [screenXSmall]=\"4\">\n <sky-input-box labelText=\"Zip code\">\n <input formControlName=\"zipCode\" maxlength=\"5\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-field-group>\n </form>\n</div>\n" }]
|
|
6729
6729
|
}], ctorParameters: () => [] });
|
|
6730
6730
|
|
|
6731
6731
|
/**
|
|
@@ -7652,7 +7652,7 @@ class InlineFormBasicExampleComponent {
|
|
|
7652
7652
|
});
|
|
7653
7653
|
}
|
|
7654
7654
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InlineFormBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7655
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
|
|
7655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InlineFormBasicExampleComponent, isStandalone: true, selector: "app-inline-form-basic-example", ngImport: i0, template: "<sky-inline-form\n data-sky-id=\"first-name\"\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
|
|
7656
7656
|
}
|
|
7657
7657
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InlineFormBasicExampleComponent, decorators: [{
|
|
7658
7658
|
type: Component,
|
|
@@ -7662,7 +7662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7662
7662
|
SkyIconModule,
|
|
7663
7663
|
SkyInlineFormModule,
|
|
7664
7664
|
SkyInputBoxModule,
|
|
7665
|
-
], template: "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n" }]
|
|
7665
|
+
], template: "<sky-inline-form\n data-sky-id=\"first-name\"\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n" }]
|
|
7666
7666
|
}], ctorParameters: () => [] });
|
|
7667
7667
|
|
|
7668
7668
|
/**
|
|
@@ -7734,7 +7734,7 @@ class InlineFormCustomButtonsExampleComponent {
|
|
|
7734
7734
|
});
|
|
7735
7735
|
}
|
|
7736
7736
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7737
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" required type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\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: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
|
|
7737
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InlineFormCustomButtonsExampleComponent, isStandalone: true, selector: "app-inline-form-custom-buttons-example", ngImport: i0, template: "<sky-inline-form\n data-sky-id=\"first-name\"\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" required type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\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: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineFormModule }, { kind: "component", type: i3$5.λ1, selector: "sky-inline-form", inputs: ["config", "template", "showForm"], outputs: ["close"] }, { 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"] }] }); }
|
|
7738
7738
|
}
|
|
7739
7739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InlineFormCustomButtonsExampleComponent, decorators: [{
|
|
7740
7740
|
type: Component,
|
|
@@ -7744,7 +7744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7744
7744
|
SkyIconModule,
|
|
7745
7745
|
SkyInlineFormModule,
|
|
7746
7746
|
SkyInputBoxModule,
|
|
7747
|
-
], template: "<sky-inline-form\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" required type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n" }]
|
|
7747
|
+
], template: "<sky-inline-form\n data-sky-id=\"first-name\"\n [config]=\"inlineFormConfig\"\n [showForm]=\"showForm\"\n [template]=\"inlineFormTemplate\"\n (close)=\"onInlineFormClose($event)\"\n>\n <table>\n <tr>\n <th>First name:</th>\n <td>\n {{ firstName }}\n </td>\n <td>\n <button\n aria-label=\"Edit\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n (click)=\"onInlineFormOpen()\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </td>\n </tr>\n </table>\n</sky-inline-form>\n\n<ng-template #inlineFormTemplate>\n <form [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"First name\">\n <input formControlName=\"firstName\" required type=\"text\" />\n </sky-input-box>\n </form>\n</ng-template>\n" }]
|
|
7748
7748
|
}], ctorParameters: () => [] });
|
|
7749
7749
|
|
|
7750
7750
|
/**
|
|
@@ -8430,11 +8430,11 @@ class LayoutInlineDeleteCustomExampleComponent {
|
|
|
8430
8430
|
this.pending = true;
|
|
8431
8431
|
}
|
|
8432
8432
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n <strong>Custom content</strong>\n <div>\n <button\n class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n type=\"button\"\n (click)=\"deleteItem()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n @if (deleting) {\n <sky-inline-delete\n [pending]=\"pending\"\n (cancelTriggered)=\"onCancelTriggered()\"\n (deleteTriggered)=\"onDeleteTriggered()\"\n />\n }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$4.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
|
|
8433
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LayoutInlineDeleteCustomExampleComponent, isStandalone: true, selector: "app-layout-inline-delete-custom-example", ngImport: i0, template: "<div class=\"inline-delete-container\">\n <strong>Custom content</strong>\n <div>\n <button\n class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n type=\"button\"\n (click)=\"deleteItem()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n @if (deleting) {\n <sky-inline-delete\n data-sky-id=\"inline-delete-custom\"\n [pending]=\"pending\"\n (cancelTriggered)=\"onCancelTriggered()\"\n (deleteTriggered)=\"onDeleteTriggered()\"\n />\n }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInlineDeleteModule }, { kind: "component", type: i1$4.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }] }); }
|
|
8434
8434
|
}
|
|
8435
8435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LayoutInlineDeleteCustomExampleComponent, decorators: [{
|
|
8436
8436
|
type: Component,
|
|
8437
|
-
args: [{ selector: 'app-layout-inline-delete-custom-example', imports: [SkyIconModule, SkyInlineDeleteModule], template: "<div class=\"inline-delete-container\">\n <strong>Custom content</strong>\n <div>\n <button\n class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n type=\"button\"\n (click)=\"deleteItem()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n @if (deleting) {\n <sky-inline-delete\n [pending]=\"pending\"\n (cancelTriggered)=\"onCancelTriggered()\"\n (deleteTriggered)=\"onDeleteTriggered()\"\n />\n }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"] }]
|
|
8437
|
+
args: [{ selector: 'app-layout-inline-delete-custom-example', imports: [SkyIconModule, SkyInlineDeleteModule], template: "<div class=\"inline-delete-container\">\n <strong>Custom content</strong>\n <div>\n <button\n class=\"sky-btn sky-btn-danger inline-delete-trigger\"\n type=\"button\"\n (click)=\"deleteItem()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n </div>\n @if (deleting) {\n <sky-inline-delete\n data-sky-id=\"inline-delete-custom\"\n [pending]=\"pending\"\n (cancelTriggered)=\"onCancelTriggered()\"\n (deleteTriggered)=\"onDeleteTriggered()\"\n />\n }\n</div>\n", styles: [".inline-delete-container{padding:15px;background-color:#fff;border:black solid 1px;height:400px;width:400px;position:relative}.inline-delete-trigger{position:absolute;bottom:10px;left:0;width:100%}\n"] }]
|
|
8438
8438
|
}] });
|
|
8439
8439
|
|
|
8440
8440
|
/**
|
|
@@ -9415,7 +9415,7 @@ class LookupAutocompleteAdvancedExampleComponent {
|
|
|
9415
9415
|
alert(`You selected ${args.selectedItem.name}`);
|
|
9416
9416
|
}
|
|
9417
9417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAdvancedExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9418
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteAdvancedExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-advanced-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <div class=\"sky-margin-stacked-lg\">\n The following field:<br />\n <ul>\n <li>utilizes a custom search result template,</li>\n <li>searches against the name and description properties,</li>\n <li>limits the search results to two,</li>\n <li>runs the search if the query is at least three characters long,</li>\n <li>and fires an event when a selection is made.</li>\n </ul>\n </div>\n\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteAdvancedExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-advanced-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <div class=\"sky-margin-stacked-lg\">\n The following field:<br />\n <ul>\n <li>utilizes a custom search result template,</li>\n <li>searches against the name and description properties,</li>\n <li>limits the search results to two,</li>\n <li>runs the search if the query is at least three characters long,</li>\n <li>and fires an event when a selection is made.</li>\n </ul>\n </div>\n\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n <sky-autocomplete\n [data]=\"planets\"\n [propertiesToSearch]=\"['name', 'description']\"\n [searchResultsLimit]=\"2\"\n [searchResultTemplate]=\"planetSearchResultTemplate\"\n [searchTextMinimumCharacters]=\"3\"\n (selectionChange)=\"onPlanetSelection($event)\"\n >\n <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #planetSearchResultTemplate let-item=\"item\">\n <strong>\n {{ item.name }}\n </strong>\n <br />\n {{ item.description }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { 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: SkyAutocompleteModule }, { kind: "component", type: i3$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i3$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { 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"] }] }); }
|
|
9419
9419
|
}
|
|
9420
9420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAdvancedExampleComponent, decorators: [{
|
|
9421
9421
|
type: Component,
|
|
@@ -9424,10 +9424,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
9424
9424
|
FormsModule,
|
|
9425
9425
|
ReactiveFormsModule,
|
|
9426
9426
|
SkyAutocompleteModule,
|
|
9427
|
-
|
|
9428
|
-
], template: "<form novalidate [formGroup]=\"formGroup\">\n <div class=\"sky-margin-stacked-lg\">\n The following field:<br />\n <ul>\n <li>utilizes a custom search result template,</li>\n <li>searches against the name and description properties,</li>\n <li>limits the search results to two,</li>\n <li>runs the search if the query is at least three characters long,</li>\n <li>and fires an event when a selection is made.</li>\n </ul>\n </div>\n\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9427
|
+
SkyInputBoxModule,
|
|
9428
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <div class=\"sky-margin-stacked-lg\">\n The following field:<br />\n <ul>\n <li>utilizes a custom search result template,</li>\n <li>searches against the name and description properties,</li>\n <li>limits the search results to two,</li>\n <li>runs the search if the query is at least three characters long,</li>\n <li>and fires an event when a selection is made.</li>\n </ul>\n </div>\n\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText=\"Farthest planet from the sun\" stacked>\n <sky-autocomplete\n [data]=\"planets\"\n [propertiesToSearch]=\"['name', 'description']\"\n [searchResultsLimit]=\"2\"\n [searchResultTemplate]=\"planetSearchResultTemplate\"\n [searchTextMinimumCharacters]=\"3\"\n (selectionChange)=\"onPlanetSelection($event)\"\n >\n <input formControlName=\"farthestPlanet\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #planetSearchResultTemplate let-item=\"item\">\n <strong>\n {{ item.name }}\n </strong>\n <br />\n {{ item.description }}\n</ng-template>\n" }]
|
|
9429
9429
|
}], ctorParameters: () => [] });
|
|
9430
9430
|
|
|
9431
|
+
const colors = [
|
|
9432
|
+
{ id: 1, name: 'Red' },
|
|
9433
|
+
{ id: 2, name: 'Blue' },
|
|
9434
|
+
{ id: 3, name: 'Green' },
|
|
9435
|
+
];
|
|
9436
|
+
class LookupAutocompleteAnyValueExampleService {
|
|
9437
|
+
search(searchText) {
|
|
9438
|
+
// Simulate a network call with latency. A real-world application might
|
|
9439
|
+
// use Angular's HttpClient to create an Observable from a call to a
|
|
9440
|
+
// web service.
|
|
9441
|
+
searchText = searchText.toUpperCase();
|
|
9442
|
+
const matchingColors = colors.filter((color) => color.name.toUpperCase().includes(searchText));
|
|
9443
|
+
return of({
|
|
9444
|
+
hasMore: false,
|
|
9445
|
+
colors: matchingColors,
|
|
9446
|
+
totalCount: matchingColors.length,
|
|
9447
|
+
}).pipe(delay(800));
|
|
9448
|
+
}
|
|
9449
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAnyValueExampleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
9450
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAnyValueExampleService, providedIn: 'root' }); }
|
|
9451
|
+
}
|
|
9452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAnyValueExampleService, decorators: [{
|
|
9453
|
+
type: Injectable,
|
|
9454
|
+
args: [{
|
|
9455
|
+
providedIn: 'root',
|
|
9456
|
+
}]
|
|
9457
|
+
}] });
|
|
9458
|
+
|
|
9459
|
+
/**
|
|
9460
|
+
* @title Autocomplete with any value allowed
|
|
9461
|
+
*/
|
|
9462
|
+
class LookupAutocompleteAnyValueExampleComponent {
|
|
9463
|
+
constructor() {
|
|
9464
|
+
this.#svc = inject(LookupAutocompleteAnyValueExampleService);
|
|
9465
|
+
this.favoriteColor = new FormControl(undefined);
|
|
9466
|
+
this.formGroup = inject(FormBuilder).group({
|
|
9467
|
+
favoriteColor: this.favoriteColor,
|
|
9468
|
+
});
|
|
9469
|
+
}
|
|
9470
|
+
#svc;
|
|
9471
|
+
onSearchAsync(args) {
|
|
9472
|
+
// In a real-world application the search service might return an Observable
|
|
9473
|
+
// created by calling HttpClient.get(). Assigning that Observable to the result
|
|
9474
|
+
// allows the autocomplete component to cancel the web request if it does not
|
|
9475
|
+
// // complete before the user searches again.
|
|
9476
|
+
args.result = this.#svc.search(args.searchText).pipe(map$1((result) => ({
|
|
9477
|
+
hasMore: result.hasMore,
|
|
9478
|
+
items: result.colors,
|
|
9479
|
+
totalCount: result.totalCount,
|
|
9480
|
+
})));
|
|
9481
|
+
}
|
|
9482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAnyValueExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteAnyValueExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-basic-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"Favorite color\" stacked>\n <sky-autocomplete\n data-sky-id=\"favorite-color\"\n allowAnyValue=\"true\"\n highlightSearchText=\"false\"\n (searchAsync)=\"onSearchAsync($event)\"\n >\n <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n\n <span class=\"selected-color\">{{\n formGroup.get('favoriteColor')?.value?.name\n }}</span>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: SkyAutocompleteModule }, { kind: "component", type: i3$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i3$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { 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"] }] }); }
|
|
9484
|
+
}
|
|
9485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteAnyValueExampleComponent, decorators: [{
|
|
9486
|
+
type: Component,
|
|
9487
|
+
args: [{ selector: 'app-lookup-autocomplete-basic-example', imports: [
|
|
9488
|
+
CommonModule,
|
|
9489
|
+
FormsModule,
|
|
9490
|
+
ReactiveFormsModule,
|
|
9491
|
+
SkyAutocompleteModule,
|
|
9492
|
+
SkyInputBoxModule,
|
|
9493
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"Favorite color\" stacked>\n <sky-autocomplete\n data-sky-id=\"favorite-color\"\n allowAnyValue=\"true\"\n highlightSearchText=\"false\"\n (searchAsync)=\"onSearchAsync($event)\"\n >\n <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n\n <span class=\"selected-color\">{{\n formGroup.get('favoriteColor')?.value?.name\n }}</span>\n</form>\n" }]
|
|
9494
|
+
}] });
|
|
9495
|
+
|
|
9431
9496
|
/**
|
|
9432
9497
|
* @title Autocomplete with basic setup
|
|
9433
9498
|
*/
|
|
@@ -9451,7 +9516,7 @@ class LookupAutocompleteBasicExampleComponent {
|
|
|
9451
9516
|
});
|
|
9452
9517
|
}
|
|
9453
9518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteBasicExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-basic-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <
|
|
9519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteBasicExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-basic-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"Favorite color\" stacked>\n <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n </sky-autocomplete>\n </sky-input-box>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { 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: SkyAutocompleteModule }, { kind: "component", type: i3$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i3$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIdModule }, { 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"] }] }); }
|
|
9455
9520
|
}
|
|
9456
9521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteBasicExampleComponent, decorators: [{
|
|
9457
9522
|
type: Component,
|
|
@@ -9461,7 +9526,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
9461
9526
|
ReactiveFormsModule,
|
|
9462
9527
|
SkyAutocompleteModule,
|
|
9463
9528
|
SkyIdModule,
|
|
9464
|
-
|
|
9529
|
+
SkyInputBoxModule,
|
|
9530
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-input-box labelText=\"Favorite color\" stacked>\n <sky-autocomplete data-sky-id=\"favorite-color\" [data]=\"colors\">\n <input formControlName=\"favoriteColor\" type=\"text\" skyAutocomplete />\n </sky-autocomplete>\n </sky-input-box>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n" }]
|
|
9465
9531
|
}] });
|
|
9466
9532
|
|
|
9467
9533
|
/**
|
|
@@ -9499,7 +9565,7 @@ class LookupAutocompleteCustomSearchExampleComponent {
|
|
|
9499
9565
|
return searchFunction;
|
|
9500
9566
|
}
|
|
9501
9567
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9502
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field has a preselected value and utilizes a custom search\n function, as well as a custom template for the search results.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteCustomSearchExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-custom-search-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field has a preselected value and utilizes a custom search\n function, as well as a custom template for the search results.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText=\"Largest ocean\" stacked>\n <sky-autocomplete\n descriptorProperty=\"title\"\n [data]=\"oceans\"\n [search]=\"getOceanSearchFunction()\"\n [searchResultTemplate]=\"oceanSearchResultTemplate\"\n >\n <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n <sky-icon iconName=\"arrow-right\" />\n {{ item.title }} • ID {{ item.id }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { 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: SkyAutocompleteModule }, { kind: "component", type: i3$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i3$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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"] }] }); }
|
|
9503
9569
|
}
|
|
9504
9570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteCustomSearchExampleComponent, decorators: [{
|
|
9505
9571
|
type: Component,
|
|
@@ -9509,8 +9575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
9509
9575
|
ReactiveFormsModule,
|
|
9510
9576
|
SkyAutocompleteModule,
|
|
9511
9577
|
SkyIconModule,
|
|
9512
|
-
|
|
9513
|
-
], template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field has a preselected value and utilizes a custom search\n function, as well as a custom template for the search results.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9578
|
+
SkyInputBoxModule,
|
|
9579
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field has a preselected value and utilizes a custom search\n function, as well as a custom template for the search results.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText=\"Largest ocean\" stacked>\n <sky-autocomplete\n descriptorProperty=\"title\"\n [data]=\"oceans\"\n [search]=\"getOceanSearchFunction()\"\n [searchResultTemplate]=\"oceanSearchResultTemplate\"\n >\n <input formControlName=\"largestOcean\" type=\"text\" skyAutocomplete />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n\n<ng-template #oceanSearchResultTemplate let-item=\"item\">\n <sky-icon iconName=\"arrow-right\" />\n {{ item.title }} • ID {{ item.id }}\n</ng-template>\n" }]
|
|
9514
9580
|
}], ctorParameters: () => [] });
|
|
9515
9581
|
|
|
9516
9582
|
/**
|
|
@@ -9541,7 +9607,7 @@ class LookupAutocompleteSearchFiltersExampleComponent {
|
|
|
9541
9607
|
});
|
|
9542
9608
|
}
|
|
9543
9609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteSearchFiltersExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteSearchFiltersExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-search-filters-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field provides a custom function that filters the data before\n every search attempt.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAutocompleteSearchFiltersExampleComponent, isStandalone: true, selector: "app-lookup-autocomplete-search-filters-example", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field provides a custom function that filters the data before\n every search attempt.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { 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: SkyAutocompleteModule }, { kind: "component", type: i3$1.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i3$1.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { 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"] }] }); }
|
|
9545
9611
|
}
|
|
9546
9612
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAutocompleteSearchFiltersExampleComponent, decorators: [{
|
|
9547
9613
|
type: Component,
|
|
@@ -9550,8 +9616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
9550
9616
|
FormsModule,
|
|
9551
9617
|
ReactiveFormsModule,
|
|
9552
9618
|
SkyAutocompleteModule,
|
|
9553
|
-
|
|
9554
|
-
], template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field provides a custom function that filters the data before\n every search attempt.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <
|
|
9619
|
+
SkyInputBoxModule,
|
|
9620
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <p>\n The following field provides a custom function that filters the data before\n every search attempt.\n </p>\n <div class=\"sky-margin-stacked-lg\">\n <sky-input-box labelText='Color (\"Red\" is not available)' stacked>\n <sky-autocomplete [data]=\"colors\" [searchFilters]=\"searchFilters\">\n <input formControlName=\"favoriteColor\" skyAutocomplete type=\"text\" />\n </sky-autocomplete>\n </sky-input-box>\n </div>\n <p class=\"sky-font-emphasized\">Form model:</p>\n <pre>{{ formGroup.value | json }}</pre>\n</form>\n" }]
|
|
9555
9621
|
}], ctorParameters: () => [] });
|
|
9556
9622
|
|
|
9557
9623
|
function validateCountry(control) {
|
|
@@ -12127,7 +12193,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
|
|
|
12127
12193
|
];
|
|
12128
12194
|
}
|
|
12129
12195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (actual of actualPayments
|
|
12196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail.detail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (\n actual of actualPayments;\n track actual.category;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < actualPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ actual.value }}\n </sky-key-info-value>\n <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n </sky-key-info>\n }\n </div>\n <div class=\"box-2-projected\">\n <h3 class=\"sky-font-heading-4\">Projected</h3>\n @for (\n projected of projectedPayments;\n track projected;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < projectedPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ projected.value }}\n </sky-key-info-value>\n <sky-key-info-label>\n {{ projected.category }}\n </sky-key-info-label>\n </sky-key-info>\n }\n </div>\n </div>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box headingText=\"Recent activity\">\n <sky-box-content>\n <sky-repeater>\n @for (activity of recentActivity; track activity.activity) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-box-content>\n </sky-box>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$4.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$4.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$4.λ44, selector: "sky-box-controls" }, { 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: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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: 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" }] }); }
|
|
12131
12197
|
};
|
|
12132
12198
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
|
|
12133
12199
|
type: Component,
|
|
@@ -12139,7 +12205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
12139
12205
|
SkyIconModule,
|
|
12140
12206
|
SkyKeyInfoModule,
|
|
12141
12207
|
SkyRepeaterModule,
|
|
12142
|
-
], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (actual of actualPayments
|
|
12208
|
+
], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail.detail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (\n actual of actualPayments;\n track actual.category;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < actualPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ actual.value }}\n </sky-key-info-value>\n <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n </sky-key-info>\n }\n </div>\n <div class=\"box-2-projected\">\n <h3 class=\"sky-font-heading-4\">Projected</h3>\n @for (\n projected of projectedPayments;\n track projected;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < projectedPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ projected.value }}\n </sky-key-info-value>\n <sky-key-info-label>\n {{ projected.category }}\n </sky-key-info-label>\n </sky-key-info>\n }\n </div>\n </div>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box headingText=\"Recent activity\">\n <sky-box-content>\n <sky-repeater>\n @for (activity of recentActivity; track activity.activity) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-box-content>\n </sky-box>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"] }]
|
|
12143
12209
|
}] });
|
|
12144
12210
|
|
|
12145
12211
|
/**
|
|
@@ -12305,7 +12371,7 @@ class RecordPageNotesTabComponent {
|
|
|
12305
12371
|
];
|
|
12306
12372
|
}
|
|
12307
12373
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageNotesTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12308
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-margin-stacked-xs\">\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"New note\"\n >\n <sky-icon iconName=\"add\" />\n New\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (newest first)\">\n Date created (newest first)\n </span>\n </sky-sort-item>\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (oldest first)\">\n Date created (oldest first)\n </span>\n </sky-sort-item>\n </sky-sort>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"Export notes\"\n >\n <sky-icon iconName=\"document-xls\" />\n Export\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search placeholderText=\"Find in notes\" />\n </sky-toolbar-item>\n </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n <sky-key-info layout=\"horizontal\">\n <sky-key-info-value class=\"sky-font-display-4\">\n {{ notes.length }}\n </sky-key-info-value>\n <sky-key-info-label> Notes </sky-key-info-label>\n </sky-key-info>\n</div>\n<sky-repeater>\n @for (note of notes; track note) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'Context menu for note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Edit note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Edit\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Delete note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ note.content }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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: 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: "component", type: i2$3.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i3$1.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$3.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$3.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$4.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$4.λ39, selector: "sky-toolbar-item" }] }); }
|
|
12374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageNotesTabComponent, isStandalone: true, selector: "app-record-page-notes-tab", ngImport: i0, template: "<div class=\"sky-margin-stacked-xs\">\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"New note\"\n >\n <sky-icon iconName=\"add\" />\n New\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (newest first)\">\n Date created (newest first)\n </span>\n </sky-sort-item>\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (oldest first)\">\n Date created (oldest first)\n </span>\n </sky-sort-item>\n </sky-sort>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"Export notes\"\n >\n <sky-icon iconName=\"document-xls\" />\n Export\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search placeholderText=\"Find in notes\" />\n </sky-toolbar-item>\n </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n <sky-key-info layout=\"horizontal\">\n <sky-key-info-value class=\"sky-font-display-4\">\n {{ notes.length }}\n </sky-key-info-value>\n <sky-key-info-label> Notes </sky-key-info-label>\n </sky-key-info>\n</div>\n<sky-repeater>\n @for (note of notes; track note.noteNumber) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'Context menu for note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Edit note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Edit\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Delete note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ note.content }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n", dependencies: [{ kind: "ngmodule", type: SkyDropdownModule }, { kind: "component", type: i1$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i1$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i1$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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: 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: "component", type: i2$3.λ9, selector: "sky-repeater-item-context-menu" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: i3$1.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkySortModule }, { kind: "component", type: i2$3.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i2$3.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i1$4.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i1$4.λ39, selector: "sky-toolbar-item" }] }); }
|
|
12309
12375
|
}
|
|
12310
12376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageNotesTabComponent, decorators: [{
|
|
12311
12377
|
type: Component,
|
|
@@ -12317,7 +12383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
12317
12383
|
SkySearchModule,
|
|
12318
12384
|
SkySortModule,
|
|
12319
12385
|
SkyToolbarModule,
|
|
12320
|
-
], template: "<div class=\"sky-margin-stacked-xs\">\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"New note\"\n >\n <sky-icon iconName=\"add\" />\n New\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (newest first)\">\n Date created (newest first)\n </span>\n </sky-sort-item>\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (oldest first)\">\n Date created (oldest first)\n </span>\n </sky-sort-item>\n </sky-sort>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"Export notes\"\n >\n <sky-icon iconName=\"document-xls\" />\n Export\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search placeholderText=\"Find in notes\" />\n </sky-toolbar-item>\n </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n <sky-key-info layout=\"horizontal\">\n <sky-key-info-value class=\"sky-font-display-4\">\n {{ notes.length }}\n </sky-key-info-value>\n <sky-key-info-label> Notes </sky-key-info-label>\n </sky-key-info>\n</div>\n<sky-repeater>\n @for (note of notes; track note) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'Context menu for note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Edit note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Edit\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Delete note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ note.content }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
|
|
12386
|
+
], template: "<div class=\"sky-margin-stacked-xs\">\n <sky-toolbar>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"New note\"\n >\n <sky-icon iconName=\"add\" />\n New\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (newest first)\">\n Date created (newest first)\n </span>\n </sky-sort-item>\n <sky-sort-item>\n <span aria-label=\"Sort notes by date created (oldest first)\">\n Date created (oldest first)\n </span>\n </sky-sort-item>\n </sky-sort>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n aria-label=\"Export notes\"\n >\n <sky-icon iconName=\"document-xls\" />\n Export\n </button>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-search placeholderText=\"Find in notes\" />\n </sky-toolbar-item>\n </sky-toolbar>\n</div>\n<div class=\"sky-margin-stacked-sm\">\n <sky-key-info layout=\"horizontal\">\n <sky-key-info-value class=\"sky-font-display-4\">\n {{ notes.length }}\n </sky-key-info-value>\n <sky-key-info-label> Notes </sky-key-info-label>\n </sky-key-info>\n</div>\n<sky-repeater>\n @for (note of notes; track note.noteNumber) {\n <sky-repeater-item>\n <sky-repeater-item-context-menu>\n <sky-dropdown\n buttonType=\"context-menu\"\n [label]=\"\n 'Context menu for note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n <sky-dropdown-menu>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Edit note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Edit\n </button>\n </sky-dropdown-item>\n <sky-dropdown-item>\n <button\n type=\"button\"\n [attr.aria-label]=\"\n 'Delete note ' + note.noteNumber + ' from ' + note.date\n \"\n >\n Delete\n </button>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n </sky-repeater-item-context-menu>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ note.content }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ note.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n</sky-repeater>\n" }]
|
|
12321
12387
|
}] });
|
|
12322
12388
|
|
|
12323
12389
|
class RecordPageOverviewTabComponent {
|
|
@@ -12392,7 +12458,7 @@ class RecordPageOverviewTabComponent {
|
|
|
12392
12458
|
];
|
|
12393
12459
|
}
|
|
12394
12460
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageOverviewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12395
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (actual of actualPayments
|
|
12461
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail.detail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (\n actual of actualPayments;\n track actual.category;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < actualPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ actual.value }}\n </sky-key-info-value>\n <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n </sky-key-info>\n }\n </div>\n <div class=\"box-2-projected\">\n <h3 class=\"sky-font-heading-4\">Projected</h3>\n @for (\n projected of projectedPayments;\n track projected;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < projectedPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ projected.value }}\n </sky-key-info-value>\n <sky-key-info-label>\n {{ projected.category }}\n </sky-key-info-label>\n </sky-key-info>\n }\n </div>\n </div>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box headingText=\"Recent activity\">\n <sky-box-content>\n <sky-repeater>\n @for (activity of recentActivity; track activity.activity) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-box-content>\n </sky-box>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$a.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$4.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$4.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$4.λ44, selector: "sky-box-controls" }, { 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: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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: 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" }] }); }
|
|
12396
12462
|
}
|
|
12397
12463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RecordPageOverviewTabComponent, decorators: [{
|
|
12398
12464
|
type: Component,
|
|
@@ -12404,7 +12470,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
12404
12470
|
SkyIconModule,
|
|
12405
12471
|
SkyKeyInfoModule,
|
|
12406
12472
|
SkyRepeaterModule,
|
|
12407
|
-
], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (actual of actualPayments
|
|
12473
|
+
], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Details\">\n <sky-box-controls>\n <button\n aria-label=\"Edit button for details\"\n class=\"sky-btn sky-btn-icon-borderless\"\n type=\"button\"\n >\n <sky-icon iconName=\"edit\" />\n </button>\n </sky-box-controls>\n <sky-box-content>\n <sky-description-list mode=\"vertical\">\n @for (recordDetail of recordDetails; track recordDetail.detail) {\n <sky-description-list-content>\n <sky-description-list-term>\n {{ recordDetail.detail }}\n </sky-description-list-term>\n <sky-description-list-description>\n {{ recordDetail.info }}\n </sky-description-list-description>\n </sky-description-list-content>\n }\n </sky-description-list>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-margin-stacked-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-font-heading-4\">Actuals</h3>\n @for (\n actual of actualPayments;\n track actual.category;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < actualPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ actual.value }}\n </sky-key-info-value>\n <sky-key-info-label>{{ actual.category }}</sky-key-info-label>\n </sky-key-info>\n }\n </div>\n <div class=\"box-2-projected\">\n <h3 class=\"sky-font-heading-4\">Projected</h3>\n @for (\n projected of projectedPayments;\n track projected;\n let i = $index\n ) {\n <sky-key-info\n [ngClass]=\"{\n 'sky-margin-stacked-lg': i < projectedPayments.length - 1\n }\"\n >\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ projected.value }}\n </sky-key-info-value>\n <sky-key-info-label>\n {{ projected.category }}\n </sky-key-info-label>\n </sky-key-info>\n }\n </div>\n </div>\n </sky-box-content>\n </sky-box>\n </sky-column>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box headingText=\"Recent activity\">\n <sky-box-content>\n <sky-repeater>\n @for (activity of recentActivity; track activity.activity) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-margin-stacked-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-font-deemphasized\">{{ activity.date }}</div>\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n </sky-box-content>\n </sky-box>\n </sky-column>\n </sky-row>\n</sky-fluid-grid>\n", styles: [".box-2-content{display:flex}.box-2-content div{display:flex;flex-direction:column;flex-grow:1}.box-2-content .box-2-actuals{margin-right:60px}\n"] }]
|
|
12408
12474
|
}] });
|
|
12409
12475
|
|
|
12410
12476
|
class RecordPageContentComponent {
|
|
@@ -12608,7 +12674,7 @@ class SplitViewPageContentComponent {
|
|
|
12608
12674
|
});
|
|
12609
12675
|
}
|
|
12610
12676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12611
|
-
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; 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" }, { 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" }] }); }
|
|
12612
12678
|
}
|
|
12613
12679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SplitViewPageContentComponent, decorators: [{
|
|
12614
12680
|
type: Component,
|
|
@@ -12620,7 +12686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
12620
12686
|
SkyRepeaterModule,
|
|
12621
12687
|
SkySplitViewModule,
|
|
12622
12688
|
SkySummaryActionBarModule,
|
|
12623
|
-
], 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; 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" }]
|
|
12689
|
+
], 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" }]
|
|
12624
12690
|
}] });
|
|
12625
12691
|
|
|
12626
12692
|
/**
|
|
@@ -13311,7 +13377,7 @@ class InformationFormComponent {
|
|
|
13311
13377
|
}
|
|
13312
13378
|
}
|
|
13313
13379
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InformationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InformationFormComponent, isStandalone: true, selector: "app-information-form", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box labelText=\"Name\" stacked=\"true\">\n <input formControlName=\"name\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box labelText=\"ID\" stacked=\"true\">\n <input formControlName=\"id\" type=\"text\" />\n <span class=\"sky-error-indicator\">\n @if (formGroup.get('id')?.invalid) {\n <sky-status-indicator\n indicatorType=\"danger\"\n descriptionType=\"error\"\n >\n Enter a valid value.\n </sky-status-indicator>\n }\n </span>\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: 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: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InformationFormComponent, isStandalone: true, selector: "app-information-form", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box data-sky-id=\"name-field\" labelText=\"Name\" stacked=\"true\">\n <input formControlName=\"name\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box data-sky-id=\"id-field\" labelText=\"ID\" stacked=\"true\">\n <input formControlName=\"id\" type=\"text\" />\n <span class=\"sky-error-indicator\">\n @if (formGroup.get('id')?.invalid) {\n <sky-status-indicator\n indicatorType=\"danger\"\n descriptionType=\"error\"\n >\n Enter a valid value.\n </sky-status-indicator>\n }\n </span>\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: 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: SkyFluidGridModule }, { kind: "component", type: i1$4.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$4.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$4.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13315
13381
|
}
|
|
13316
13382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InformationFormComponent, decorators: [{
|
|
13317
13383
|
type: Component,
|
|
@@ -13320,7 +13386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
13320
13386
|
SkyInputBoxModule,
|
|
13321
13387
|
SkyFluidGridModule,
|
|
13322
13388
|
SkyStatusIndicatorModule,
|
|
13323
|
-
], template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box labelText=\"Name\" stacked=\"true\">\n <input formControlName=\"name\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box labelText=\"ID\" stacked=\"true\">\n <input formControlName=\"id\" type=\"text\" />\n <span class=\"sky-error-indicator\">\n @if (formGroup.get('id')?.invalid) {\n <sky-status-indicator\n indicatorType=\"danger\"\n descriptionType=\"error\"\n >\n Enter a valid value.\n </sky-status-indicator>\n }\n </span>\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</form>\n" }]
|
|
13389
|
+
], template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box data-sky-id=\"name-field\" labelText=\"Name\" stacked=\"true\">\n <input formControlName=\"name\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenXSmall]=\"6\">\n <sky-input-box data-sky-id=\"id-field\" labelText=\"ID\" stacked=\"true\">\n <input formControlName=\"id\" type=\"text\" />\n <span class=\"sky-error-indicator\">\n @if (formGroup.get('id')?.invalid) {\n <sky-status-indicator\n indicatorType=\"danger\"\n descriptionType=\"error\"\n >\n Enter a valid value.\n </sky-status-indicator>\n }\n </span>\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</form>\n" }]
|
|
13324
13390
|
}], ctorParameters: () => [] });
|
|
13325
13391
|
|
|
13326
13392
|
class PhoneFormComponent {
|
|
@@ -13340,6 +13406,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
13340
13406
|
let ModalComponent$1 = class ModalComponent {
|
|
13341
13407
|
constructor() {
|
|
13342
13408
|
this.activeTab = true;
|
|
13409
|
+
this.sectionedFormController = new Subject();
|
|
13410
|
+
this.tabsHidden = false;
|
|
13343
13411
|
this.modalInstance = inject(SkyModalInstance);
|
|
13344
13412
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
13345
13413
|
}
|
|
@@ -13348,14 +13416,16 @@ let ModalComponent$1 = class ModalComponent {
|
|
|
13348
13416
|
this.activeIndexDisplay = newIndex;
|
|
13349
13417
|
this.#changeDetector.markForCheck();
|
|
13350
13418
|
}
|
|
13351
|
-
|
|
13352
|
-
|
|
13419
|
+
onTabsVisibleChanged(visible) {
|
|
13420
|
+
this.tabsHidden = !visible;
|
|
13353
13421
|
}
|
|
13354
13422
|
showTabs() {
|
|
13355
|
-
this.
|
|
13423
|
+
this.sectionedFormController.next({
|
|
13424
|
+
type: SkySectionedFormMessageType.ShowTabs,
|
|
13425
|
+
});
|
|
13356
13426
|
}
|
|
13357
13427
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal",
|
|
13428
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n <sky-modal-content>\n <sky-sectioned-form\n data-sky-id=\"modal-sectioned-form\"\n [messageStream]=\"sectionedFormController\"\n (indexChanged)=\"onIndexChanged($event)\"\n (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n >\n <sky-sectioned-form-section heading=\"Basic information\">\n <app-information-form />\n </sky-sectioned-form-section>\n <sky-sectioned-form-section\n heading=\"Addresses\"\n [itemCount]=\"2\"\n [active]=\"activeTab\"\n >\n <app-address-form />\n </sky-sectioned-form-section>\n <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n <app-phone-form />\n </sky-sectioned-form-section>\n </sky-sectioned-form>\n </sky-modal-content>\n <sky-modal-footer>\n @if (tabsHidden) {\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n Show sections\n </button>\n }\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"modalInstance.save()\"\n >\n Save\n </button>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"modalInstance.cancel()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n</sky-modal>\n", dependencies: [{ kind: "component", type: AddressFormComponent, selector: "app-address-form" }, { kind: "component", type: InformationFormComponent, selector: "app-information-form" }, { kind: "component", type: PhoneFormComponent, selector: "app-phone-form" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$9.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { 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: SkySectionedFormModule }, { kind: "component", type: i1$1.SkySectionedFormComponent, selector: "sky-sectioned-form", inputs: ["maintainSectionContent", "messageStream"], outputs: ["indexChanged", "tabsVisibleChanged"] }, { kind: "component", type: i1$1.λ5, selector: "sky-sectioned-form-section", inputs: ["heading", "itemCount", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13359
13429
|
};
|
|
13360
13430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent$1, decorators: [{
|
|
13361
13431
|
type: Component,
|
|
@@ -13366,11 +13436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
13366
13436
|
SkyIconModule,
|
|
13367
13437
|
SkyModalModule,
|
|
13368
13438
|
SkySectionedFormModule,
|
|
13369
|
-
], template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n <sky-modal-content>\n <sky-sectioned-form
|
|
13370
|
-
}]
|
|
13371
|
-
type: ViewChild,
|
|
13372
|
-
args: [SkySectionedFormComponent]
|
|
13373
|
-
}] } });
|
|
13439
|
+
], template: "<sky-modal [headingText]=\"'Sectioned form \u2014 Index: ' + activeIndexDisplay\">\n <sky-modal-content>\n <sky-sectioned-form\n data-sky-id=\"modal-sectioned-form\"\n [messageStream]=\"sectionedFormController\"\n (indexChanged)=\"onIndexChanged($event)\"\n (tabsVisibleChanged)=\"onTabsVisibleChanged($event)\"\n >\n <sky-sectioned-form-section heading=\"Basic information\">\n <app-information-form />\n </sky-sectioned-form-section>\n <sky-sectioned-form-section\n heading=\"Addresses\"\n [itemCount]=\"2\"\n [active]=\"activeTab\"\n >\n <app-address-form />\n </sky-sectioned-form-section>\n <sky-sectioned-form-section heading=\"Phone numbers\" [itemCount]=\"3\">\n <app-phone-form />\n </sky-sectioned-form-section>\n </sky-sectioned-form>\n </sky-modal-content>\n <sky-modal-footer>\n @if (tabsHidden) {\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"showTabs()\"\n >\n <sky-icon iconName=\"chevron-left\" />\n Show sections\n </button>\n }\n <button\n class=\"sky-btn sky-btn-primary\"\n type=\"button\"\n (click)=\"modalInstance.save()\"\n >\n Save\n </button>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"modalInstance.cancel()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n</sky-modal>\n" }]
|
|
13440
|
+
}] });
|
|
13374
13441
|
|
|
13375
13442
|
/**
|
|
13376
13443
|
* @title Sectioned form inside modal
|
|
@@ -13941,5 +14008,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
13941
14008
|
* Generated bundle index. Do not edit.
|
|
13942
14009
|
*/
|
|
13943
14010
|
|
|
13944
|
-
export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineBasicExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageLayoutFitExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
|
|
14011
|
+
export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineBasicExampleComponent, IconBasicExampleComponent, IconIconButtonExampleComponent, IndicatorsAlertBasicExampleComponent, IndicatorsIllustrationBasicExampleComponent, IndicatorsKeyInfoBasicExampleComponent, IndicatorsKeyInfoHelpKeyExampleComponent, IndicatorsLabelBasicExampleComponent, IndicatorsStatusIndicatorBasicExampleComponent, IndicatorsStatusIndicatorHelpKeyExampleComponent, IndicatorsTextHighlightBasicExampleComponent, IndicatorsTokensBasicExampleComponent, IndicatorsTokensCustomExampleComponent, IndicatorsWaitElementExampleComponent, IndicatorsWaitPageExampleComponent, InlineFormBasicExampleComponent, InlineFormCustomButtonsExampleComponent, InlineFormRepeatersExampleComponent, LayoutActionButtonBasicExampleComponent, LayoutActionButtonPermalinkExampleComponent, LayoutBackToTopInfiniteScrollExampleComponent, LayoutBackToTopRepeaterExampleComponent, LayoutBoxBasicExampleComponent, LayoutBoxHelpKeyExampleComponent, LayoutCardBasicExampleComponent, LayoutDefinitionListBasicExampleComponent, LayoutDescriptionListHelpKeyExampleComponent, LayoutDescriptionListHorizontalExampleComponent, LayoutDescriptionListInlineHelpExampleComponent, LayoutDescriptionListLongDescriptionExampleComponent, LayoutDescriptionListVerticalExampleComponent, LayoutFluidGridExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageLayoutFitExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsFilterModalExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
|
|
13945
14012
|
//# sourceMappingURL=skyux-code-examples.mjs.map
|