@skyux/code-examples 15.0.0-alpha.11 → 15.0.0-alpha.13

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.
@@ -6323,6 +6323,7 @@ class ViewGridComponent {
6323
6323
  iconName: 'table',
6324
6324
  searchEnabled: true,
6325
6325
  columnPickerEnabled: true,
6326
+ sortEnabled: true,
6326
6327
  columnOptions: this.#columnDefs.map((colDef) => ({
6327
6328
  id: colDef.colId,
6328
6329
  label: colDef.headerName ?? colDef.colId,
@@ -7600,7 +7601,7 @@ class FormsFieldGroupBasicExampleComponent {
7600
7601
  });
7601
7602
  }
7602
7603
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7603
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7604
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsFieldGroupBasicExampleComponent, isStandalone: true, selector: "app-forms-field-group-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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\">\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7604
7605
  }
7605
7606
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsFieldGroupBasicExampleComponent, decorators: [{
7606
7607
  type: Component,
@@ -7610,7 +7611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
7610
7611
  SkyFieldGroupModule,
7611
7612
  SkyFluidGridModule,
7612
7613
  SkyInputBoxModule,
7613
- ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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" }]
7614
+ ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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\">\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" }]
7614
7615
  }], ctorParameters: () => [] });
7615
7616
 
7616
7617
  /**
@@ -7681,7 +7682,7 @@ class FormsFieldGroupHelpKeyExampleComponent {
7681
7682
  });
7682
7683
  }
7683
7684
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7684
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7685
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsFieldGroupHelpKeyExampleComponent, isStandalone: true, selector: "app-forms-field-group-help-key-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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\">\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7685
7686
  }
7686
7687
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsFieldGroupHelpKeyExampleComponent, decorators: [{
7687
7688
  type: Component,
@@ -7691,7 +7692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
7691
7692
  SkyFieldGroupModule,
7692
7693
  SkyFluidGridModule,
7693
7694
  SkyInputBoxModule,
7694
- ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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" }]
7695
+ ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\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\">\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" }]
7695
7696
  }], ctorParameters: () => [] });
7696
7697
 
7697
7698
  /**
@@ -7909,7 +7910,7 @@ class FormsInputBoxBasicExampleComponent {
7909
7910
  });
7910
7911
  }
7911
7912
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsInputBoxBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7912
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n <form [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <h2>New member form</h2>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-first-name\"\n helpKey=\"first-name-help\"\n labelText=\"First name\"\n stacked=\"true\"\n >\n <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-last-name\"\n labelText=\"Last name\"\n stacked=\"true\"\n >\n <input\n class=\"last-name-input-box\"\n formControlName=\"lastName\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n characterLimit=\"250\"\n data-sky-id=\"input-box-bio\"\n hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n labelText=\"Bio\"\n stacked=\"true\"\n >\n <textarea formControlName=\"bio\"></textarea>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-email\"\n labelText=\"Email address\"\n stacked=\"true\"\n helpPopoverContent=\"We do not share this information with any third parties.\"\n helpPopoverTitle=\"Privacy notice\"\n >\n <input formControlName=\"email\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n <sky-datepicker>\n <input formControlName=\"dob\" skyDatepickerInput />\n </sky-datepicker>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n data-sky-id=\"input-box-favorite-color\"\n labelText=\"Favorite color\"\n >\n <select\n class=\"input-box-favorite-color-select\"\n formControlName=\"favoriteColor\"\n >\n <option value=\"none\">None</option>\n <option value=\"red\">Red</option>\n <option value=\"orange\">Orange</option>\n <option value=\"yellow\">Yellow</option>\n <option value=\"green\">Green</option>\n <option value=\"blue\">Blue</option>\n <option value=\"purple\">Purple</option>\n <option value=\"invalid\">Invalid Color</option>\n </select>\n <!-- Custom form error not handled by input box. -->\n @if (favoriteColor.errors?.['invalid']) {\n <sky-form-error\n errorName=\"invalid\"\n errorText=\"Invalid Color is not a color\"\n />\n }\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ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"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7913
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FormsInputBoxBasicExampleComponent, isStandalone: true, selector: "app-forms-input-box-basic-example", ngImport: i0, template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n <form [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" inset>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <h2>New member form</h2>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-first-name\"\n helpKey=\"first-name-help\"\n labelText=\"First name\"\n stacked=\"true\"\n >\n <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-last-name\"\n labelText=\"Last name\"\n stacked=\"true\"\n >\n <input\n class=\"last-name-input-box\"\n formControlName=\"lastName\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n characterLimit=\"250\"\n data-sky-id=\"input-box-bio\"\n hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n labelText=\"Bio\"\n stacked=\"true\"\n >\n <textarea formControlName=\"bio\"></textarea>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-email\"\n labelText=\"Email address\"\n stacked=\"true\"\n helpPopoverContent=\"We do not share this information with any third parties.\"\n helpPopoverTitle=\"Privacy notice\"\n >\n <input formControlName=\"email\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n <sky-datepicker>\n <input formControlName=\"dob\" skyDatepickerInput />\n </sky-datepicker>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n data-sky-id=\"input-box-favorite-color\"\n labelText=\"Favorite color\"\n >\n <select\n class=\"input-box-favorite-color-select\"\n formControlName=\"favoriteColor\"\n >\n <option value=\"none\">None</option>\n <option value=\"red\">Red</option>\n <option value=\"orange\">Orange</option>\n <option value=\"yellow\">Yellow</option>\n <option value=\"green\">Green</option>\n <option value=\"blue\">Blue</option>\n <option value=\"purple\">Purple</option>\n <option value=\"invalid\">Invalid Color</option>\n </select>\n <!-- Custom form error not handled by input box. -->\n @if (favoriteColor.errors?.['invalid']) {\n <sky-form-error\n errorName=\"invalid\"\n errorText=\"Invalid Color is not a color\"\n />\n }\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$8.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$8.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "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"] }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyStatusIndicatorModule }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
7913
7914
  }
7914
7915
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FormsInputBoxBasicExampleComponent, decorators: [{
7915
7916
  type: Component,
@@ -7920,7 +7921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
7920
7921
  SkyFluidGridModule,
7921
7922
  SkyInputBoxModule,
7922
7923
  SkyStatusIndicatorModule,
7923
- ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n <form [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"false\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <h2>New member form</h2>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-first-name\"\n helpKey=\"first-name-help\"\n labelText=\"First name\"\n stacked=\"true\"\n >\n <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-last-name\"\n labelText=\"Last name\"\n stacked=\"true\"\n >\n <input\n class=\"last-name-input-box\"\n formControlName=\"lastName\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n characterLimit=\"250\"\n data-sky-id=\"input-box-bio\"\n hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n labelText=\"Bio\"\n stacked=\"true\"\n >\n <textarea formControlName=\"bio\"></textarea>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-email\"\n labelText=\"Email address\"\n stacked=\"true\"\n helpPopoverContent=\"We do not share this information with any third parties.\"\n helpPopoverTitle=\"Privacy notice\"\n >\n <input formControlName=\"email\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n <sky-datepicker>\n <input formControlName=\"dob\" skyDatepickerInput />\n </sky-datepicker>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n data-sky-id=\"input-box-favorite-color\"\n labelText=\"Favorite color\"\n >\n <select\n class=\"input-box-favorite-color-select\"\n formControlName=\"favoriteColor\"\n >\n <option value=\"none\">None</option>\n <option value=\"red\">Red</option>\n <option value=\"orange\">Orange</option>\n <option value=\"yellow\">Yellow</option>\n <option value=\"green\">Green</option>\n <option value=\"blue\">Blue</option>\n <option value=\"purple\">Purple</option>\n <option value=\"invalid\">Invalid Color</option>\n </select>\n <!-- Custom form error not handled by input box. -->\n @if (favoriteColor.errors?.['invalid']) {\n <sky-form-error\n errorName=\"invalid\"\n errorText=\"Invalid Color is not a color\"\n />\n }\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </form>\n</div>\n" }]
7924
+ ], template: "<div class=\"sky-theme-padding-inset-balanced-l\">\n <form [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\" inset>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <h2>New member form</h2>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-first-name\"\n helpKey=\"first-name-help\"\n labelText=\"First name\"\n stacked=\"true\"\n >\n <input formControlName=\"firstName\" spellcheck=\"false\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-last-name\"\n labelText=\"Last name\"\n stacked=\"true\"\n >\n <input\n class=\"last-name-input-box\"\n formControlName=\"lastName\"\n spellcheck=\"false\"\n type=\"text\"\n />\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n characterLimit=\"250\"\n data-sky-id=\"input-box-bio\"\n hintText=\"A brief description of the member's background, such as hometown, school, hobbies, etc.\"\n labelText=\"Bio\"\n stacked=\"true\"\n >\n <textarea formControlName=\"bio\"></textarea>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box\n data-sky-id=\"input-box-email\"\n labelText=\"Email address\"\n stacked=\"true\"\n helpPopoverContent=\"We do not share this information with any third parties.\"\n helpPopoverTitle=\"Privacy notice\"\n >\n <input formControlName=\"email\" type=\"text\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Date of birth\" stacked=\"true\">\n <sky-datepicker>\n <input formControlName=\"dob\" skyDatepickerInput />\n </sky-datepicker>\n </sky-input-box>\n </sky-column>\n </sky-row>\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-input-box\n data-sky-id=\"input-box-favorite-color\"\n labelText=\"Favorite color\"\n >\n <select\n class=\"input-box-favorite-color-select\"\n formControlName=\"favoriteColor\"\n >\n <option value=\"none\">None</option>\n <option value=\"red\">Red</option>\n <option value=\"orange\">Orange</option>\n <option value=\"yellow\">Yellow</option>\n <option value=\"green\">Green</option>\n <option value=\"blue\">Blue</option>\n <option value=\"purple\">Purple</option>\n <option value=\"invalid\">Invalid Color</option>\n </select>\n <!-- Custom form error not handled by input box. -->\n @if (favoriteColor.errors?.['invalid']) {\n <sky-form-error\n errorName=\"invalid\"\n errorText=\"Invalid Color is not a color\"\n />\n }\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </form>\n</div>\n" }]
7924
7925
  }] });
7925
7926
 
7926
7927
  /**
@@ -9391,16 +9392,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
9391
9392
  /**
9392
9393
  * @title Fluid grid with basic setup
9393
9394
  */
9394
- class LayoutFluidGridExampleComponent {
9395
- constructor() {
9396
- this.disableMargin = false;
9397
- }
9398
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9399
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutFluidGridExampleComponent, isStandalone: true, selector: "app-layout-fluid-grid-example", ngImport: i0, template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" screenSmall=\"1\">\n screenSmall=\"1\"\n </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"5\"> screenSmall=\"5\" </sky-column>\n <sky-column screenSmall=\"7\"> screenSmall=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"8\"> screenSmall=\"8\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"9\"> screenSmall=\"9\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"10\"> screenSmall=\"10\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"11\"> screenSmall=\"11\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n screenXSmall=\"6\"\n screenSmall=\"8\"\n screenMedium=\"9\"\n screenLarge=\"10\"\n >\n screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\"\n </sky-column>\n <sky-column\n screenXSmall=\"6\"\n screenSmall=\"4\"\n screenMedium=\"3\"\n screenLarge=\"2\"\n >\n screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column screenSmall=\"4\"> First column </sky-column>\n <sky-column screenSmall=\"4\"> Second column </sky-column>\n <sky-column screenSmall=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9395
+ class LayoutFluidGridBasicExampleComponent {
9396
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridBasicExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9397
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutFluidGridBasicExampleComponent, isStandalone: true, selector: "app-layout-fluid-grid-basic-example", ngImport: i0, template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid data-sky-id=\"fluid-grid\" [gutterSize]=\"gutterSize\">\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" screenSmall=\"1\">\n screenSmall=\"1\"\n </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"5\"> screenSmall=\"5\" </sky-column>\n <sky-column screenSmall=\"7\"> screenSmall=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"8\"> screenSmall=\"8\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"9\"> screenSmall=\"9\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"10\"> screenSmall=\"10\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"11\"> screenSmall=\"11\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n screenXSmall=\"6\"\n screenSmall=\"8\"\n screenMedium=\"9\"\n screenLarge=\"10\"\n >\n screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\"\n </sky-column>\n <sky-column\n screenXSmall=\"6\"\n screenSmall=\"4\"\n screenMedium=\"3\"\n screenLarge=\"2\"\n >\n screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column screenSmall=\"4\"> First column </sky-column>\n <sky-column screenSmall=\"4\"> Second column </sky-column>\n <sky-column screenSmall=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9398
+ }
9399
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridBasicExampleComponent, decorators: [{
9400
+ type: Component,
9401
+ args: [{ selector: 'app-layout-fluid-grid-basic-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyFluidGridModule], template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid data-sky-id=\"fluid-grid\" [gutterSize]=\"gutterSize\">\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" screenSmall=\"1\">\n screenSmall=\"1\"\n </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"5\"> screenSmall=\"5\" </sky-column>\n <sky-column screenSmall=\"7\"> screenSmall=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"8\"> screenSmall=\"8\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"9\"> screenSmall=\"9\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"10\"> screenSmall=\"10\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"11\"> screenSmall=\"11\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n screenXSmall=\"6\"\n screenSmall=\"8\"\n screenMedium=\"9\"\n screenLarge=\"10\"\n >\n screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\"\n </sky-column>\n <sky-column\n screenXSmall=\"6\"\n screenSmall=\"4\"\n screenMedium=\"3\"\n screenLarge=\"2\"\n >\n screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column screenSmall=\"4\"> First column </sky-column>\n <sky-column screenSmall=\"4\"> Second column </sky-column>\n <sky-column screenSmall=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"] }]
9402
+ }] });
9403
+
9404
+ /**
9405
+ * @title Fluid grid with inset margins
9406
+ */
9407
+ class LayoutFluidGridInsetExampleComponent {
9408
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridInsetExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9409
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: LayoutFluidGridInsetExampleComponent, isStandalone: true, selector: "app-layout-fluid-grid-inset-example", ngImport: i0, template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid data-sky-id=\"fluid-grid\" inset>\n <sky-row data-sky-id=\"test-row\">\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "gutterSize"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
9400
9410
  }
9401
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridExampleComponent, decorators: [{
9411
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: LayoutFluidGridInsetExampleComponent, decorators: [{
9402
9412
  type: Component,
9403
- args: [{ selector: 'app-layout-fluid-grid-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyFluidGridModule], template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid\n data-sky-id=\"fluid-grid\"\n [disableMargin]=\"disableMargin\"\n [gutterSize]=\"gutterSize\"\n >\n <sky-row data-sky-id=\"test-row\">\n <sky-column data-sky-id=\"test-column\" screenSmall=\"1\">\n screenSmall=\"1\"\n </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"5\"> screenSmall=\"5\" </sky-column>\n <sky-column screenSmall=\"7\"> screenSmall=\"7\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"8\"> screenSmall=\"8\" </sky-column>\n <sky-column screenSmall=\"4\"> screenSmall=\"4\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"9\"> screenSmall=\"9\" </sky-column>\n <sky-column screenSmall=\"3\"> screenSmall=\"3\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"10\"> screenSmall=\"10\" </sky-column>\n <sky-column screenSmall=\"2\"> screenSmall=\"2\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column screenSmall=\"11\"> screenSmall=\"11\" </sky-column>\n <sky-column screenSmall=\"1\"> screenSmall=\"1\" </sky-column>\n </sky-row>\n\n <sky-row>\n <sky-column\n data-sky-id=\"dynamic-column\"\n screenXSmall=\"6\"\n screenSmall=\"8\"\n screenMedium=\"9\"\n screenLarge=\"10\"\n >\n screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\"\n </sky-column>\n <sky-column\n screenXSmall=\"6\"\n screenSmall=\"4\"\n screenMedium=\"3\"\n screenLarge=\"2\"\n >\n screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\"\n </sky-column>\n </sky-row>\n\n <sky-row data-sky-id=\"reverse-row\" [reverseColumnOrder]=\"true\">\n <sky-column screenSmall=\"4\"> First column </sky-column>\n <sky-column screenSmall=\"4\"> Second column </sky-column>\n <sky-column screenSmall=\"4\"> Third column </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"] }]
9413
+ args: [{ selector: 'app-layout-fluid-grid-inset-example', changeDetection: ChangeDetectionStrategy.Eager, imports: [SkyFluidGridModule], template: "<div class=\"highlight-columns sky-theme-color-classify-1-soft\">\n <sky-fluid-grid data-sky-id=\"fluid-grid\" inset>\n <sky-row data-sky-id=\"test-row\">\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n <sky-column screenSmall=\"6\"> screenSmall=\"6\" </sky-column>\n </sky-row>\n </sky-fluid-grid>\n</div>\n", styles: [".highlight-columns .sky-column{border:1px solid var(--sky-theme-color-classify-1-heavy);overflow-wrap:break-word}\n"] }]
9404
9414
  }] });
9405
9415
 
9406
9416
  /**
@@ -13418,7 +13428,7 @@ let RecordPageContentComponent$1 = class RecordPageContentComponent {
13418
13428
  ];
13419
13429
  }
13420
13430
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13421
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.date) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "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: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
13431
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageContentComponent, isStandalone: true, selector: "app-record-page-content", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.date) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "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: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
13422
13432
  };
13423
13433
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageContentComponent$1, decorators: [{
13424
13434
  type: Component,
@@ -13430,7 +13440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
13430
13440
  SkyIconModule,
13431
13441
  SkyKeyInfoModule,
13432
13442
  SkyRepeaterModule,
13433
- ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.date) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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"] }]
13443
+ ], template: "<sky-fluid-grid gutterSize=\"medium\">\n <sky-row>\n <sky-column [screenMedium]=\"4\" [screenSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.date) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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"] }]
13434
13444
  }] });
13435
13445
 
13436
13446
  /**
@@ -13704,7 +13714,7 @@ class RecordPageOverviewTabComponent {
13704
13714
  ];
13705
13715
  }
13706
13716
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageOverviewTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13707
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.id) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "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: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
13717
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: RecordPageOverviewTabComponent, isStandalone: true, selector: "app-record-page-overview-tab", ngImport: i0, template: "<sky-fluid-grid gutterSize=\"medium\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.id) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyBoxModule }, { kind: "component", type: i1$5.λ41, selector: "sky-box", inputs: ["headingText", "headingHidden", "headingLevel", "headingStyle", "helpPopoverContent", "helpPopoverTitle", "helpKey", "ariaLabel", "ariaLabelledBy", "ariaRole"] }, { kind: "component", type: i1$5.λ43, selector: "sky-box-content" }, { kind: "component", type: i1$5.λ44, selector: "sky-box-controls" }, { kind: "ngmodule", type: SkyDescriptionListModule }, { kind: "component", type: i1$5.λ18, selector: "sky-description-list", inputs: ["defaultDescription", "listItemWidth", "mode"] }, { kind: "component", type: i1$5.λ21, selector: "sky-description-list-content", inputs: ["helpKey", "helpPopoverContent", "helpPopoverTitle"] }, { kind: "component", type: i1$5.λ19, selector: "sky-description-list-term" }, { kind: "component", type: i1$5.λ20, selector: "sky-description-list-description" }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "gutterSize"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$a.λ1, selector: "sky-icon", inputs: ["iconName", "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: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode", "selectionMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
13708
13718
  }
13709
13719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: RecordPageOverviewTabComponent, decorators: [{
13710
13720
  type: Component,
@@ -13716,7 +13726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
13716
13726
  SkyIconModule,
13717
13727
  SkyKeyInfoModule,
13718
13728
  SkyRepeaterModule,
13719
- ], template: "<sky-fluid-grid gutterSize=\"medium\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.id) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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"] }]
13729
+ ], template: "<sky-fluid-grid gutterSize=\"medium\">\n <sky-row>\n <sky-column [screenSmall]=\"4\" [screenXSmall]=\"12\">\n <sky-box class=\"sky-theme-margin-bottom-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-theme-margin-bottom-xl\" headingText=\"Payments\">\n <sky-box-content>\n <div class=\"box-2-content\">\n <div class=\"box-2-actuals\">\n <h3 class=\"sky-theme-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-theme-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-theme-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-theme-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.id) {\n <sky-repeater-item>\n <sky-repeater-item-content>\n <div class=\"sky-theme-margin-bottom-xs\">\n {{ activity.activity }}\n </div>\n <div class=\"sky-theme-font-body-deemphasized-m\">\n {{ activity.date }}\n </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"] }]
13720
13730
  }] });
13721
13731
 
13722
13732
  class RecordPageContentComponent {
@@ -14622,7 +14632,7 @@ class InformationFormComponent {
14622
14632
  }
14623
14633
  }
14624
14634
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InformationFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14625
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ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 }); }
14635
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: InformationFormComponent, isStandalone: true, selector: "app-information-form", ngImport: i0, template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\">\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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "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 }); }
14626
14636
  }
14627
14637
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: InformationFormComponent, decorators: [{
14628
14638
  type: Component,
@@ -14631,7 +14641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
14631
14641
  SkyInputBoxModule,
14632
14642
  SkyFluidGridModule,
14633
14643
  SkyStatusIndicatorModule,
14634
- ], 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" }]
14644
+ ], template: "<form novalidate [formGroup]=\"formGroup\">\n <sky-fluid-grid gutterSize=\"small\">\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" }]
14635
14645
  }], ctorParameters: () => [] });
14636
14646
 
14637
14647
  class PhoneFormComponent {
@@ -14970,7 +14980,7 @@ class ModalComponent {
14970
14980
  this.isSaveDisabled = !this.formGroup?.get('termsAccepted')?.value;
14971
14981
  }
14972
14982
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
14973
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"firstName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"middleName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Last name\">\n <input type=\"text\" formControlName=\"lastName\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n <sky-phone-field defaultCountry=\"us\">\n <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n </sky-phone-field>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Email\">\n <input type=\"email\" formControlName=\"email\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ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"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$3.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$3.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14983
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: ModalComponent, isStandalone: true, selector: "app-modal", ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"firstName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"middleName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Last name\">\n <input type=\"text\" formControlName=\"lastName\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n <sky-phone-field defaultCountry=\"us\">\n <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n </sky-phone-field>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Email\">\n <input type=\"email\" formControlName=\"email\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyFluidGridModule }, { kind: "component", type: i1$5.λ23, selector: "sky-row", inputs: ["reverseColumnOrder"] }, { kind: "component", type: i1$5.λ24, selector: "sky-column", inputs: ["screenXSmall", "screenSmall", "screenMedium", "screenLarge"] }, { kind: "component", type: i1$5.λ22, selector: "sky-fluid-grid", inputs: ["disableMargin", "inset", "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"] }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i3.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i3.λ2, selector: "sky-modal-content" }, { kind: "component", type: i3.λ3, selector: "sky-modal-footer" }, { kind: "ngmodule", type: SkyPhoneFieldModule }, { kind: "component", type: i3$3.λ1, selector: "sky-phone-field", inputs: ["allowExtensions", "defaultCountry", "returnFormat", "supportedCountryISOs", "selectedCountry"], outputs: ["selectedCountryChange"] }, { kind: "directive", type: i3$3.λ2, selector: "[skyPhoneFieldInput]", inputs: ["disabled", "skyPhoneFieldNoValidate"] }, { kind: "ngmodule", type: SkyTabsModule }, { kind: "component", type: i1$2.λ1, selector: "sky-tab", inputs: ["active", "disabled", "permalinkValue", "tabHeaderCount", "tabHeading", "tabIndexValue", "layout"], outputs: ["close"] }, { kind: "component", type: i1$2.λ2, selector: "sky-tabset", inputs: ["active", "ariaLabel", "ariaLabelledBy", "permalinkId", "tabStyle"], outputs: ["activeChange", "newTab", "openTab", "tabIndexesChange"] }, { kind: "component", type: i1$2.λ3, selector: "sky-tabset-nav-button", inputs: ["tabset", "buttonType", "buttonText", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
14974
14984
  }
14975
14985
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ModalComponent, decorators: [{
14976
14986
  type: Component,
@@ -14982,7 +14992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
14982
14992
  SkyModalModule,
14983
14993
  SkyPhoneFieldModule,
14984
14994
  SkyTabsModule,
14985
- ], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"firstName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"middleName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Last name\">\n <input type=\"text\" formControlName=\"lastName\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n <sky-phone-field defaultCountry=\"us\">\n <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n </sky-phone-field>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Email\">\n <input type=\"email\" formControlName=\"email\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\" [disableMargin]=\"true\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n" }]
14995
+ ], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"onSave()\">\n <sky-modal [headingText]=\"title\">\n <sky-modal-content>\n <sky-tabset\n #wizardDemo\n ariaLabel=\"Sign-up steps\"\n data-sky-id=\"sign-up-wizard\"\n tabStyle=\"wizard\"\n [(active)]=\"activeIndex\"\n >\n <sky-tab tabHeading=\"1. Biographical Details\">\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"First name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"firstName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Middle name\" [stacked]=\"true\">\n <input type=\"text\" formControlName=\"middleName\" />\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"4\">\n <sky-input-box labelText=\"Last name\">\n <input type=\"text\" formControlName=\"lastName\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab\n tabHeading=\"2. Contact Information\"\n [disabled]=\"isStep2Disabled\"\n >\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Phone Number\" [stacked]=\"true\">\n <sky-phone-field defaultCountry=\"us\">\n <input formControlName=\"phoneNumber\" skyPhoneFieldInput />\n </sky-phone-field>\n </sky-input-box>\n </sky-column>\n <sky-column [screenSmall]=\"12\" [screenMedium]=\"6\">\n <sky-input-box labelText=\"Email\">\n <input type=\"email\" formControlName=\"email\" />\n </sky-input-box>\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n <sky-tab tabHeading=\"3. More Information\" [disabled]=\"isStep3Disabled\">\n <sky-fluid-grid gutterSize=\"small\">\n <sky-row>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"termsAccepted\"\n labelText=\"Accept terms and conditions\"\n required\n />\n </sky-column>\n <sky-column [screenSmall]=\"12\">\n <sky-checkbox\n formControlName=\"mailingList\"\n labelText=\"Sign up for our email newsletter\"\n />\n </sky-column>\n </sky-row>\n </sky-fluid-grid>\n </sky-tab>\n </sky-tabset>\n </sky-modal-content>\n <sky-modal-footer>\n <sky-tabset-nav-button buttonType=\"previous\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button buttonType=\"next\" [tabset]=\"wizardDemo\" />\n <sky-tabset-nav-button\n buttonType=\"finish\"\n [tabset]=\"wizardDemo\"\n [disabled]=\"isSaveDisabled\"\n />\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n Cancel\n </button>\n </sky-modal-footer>\n </sky-modal>\n</form>\n" }]
14986
14996
  }], ctorParameters: () => [] });
14987
14997
 
14988
14998
  /**
@@ -15312,5 +15322,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
15312
15322
  * Generated bundle index. Do not edit.
15313
15323
  */
15314
15324
 
15315
- export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ChartsChartBarAsyncExample, ChartsChartBarBasicExample, ChartsChartBarFloatingExample, ChartsChartBarFloatingMultipleSeriesExample, ChartsChartBarGroupedStackedExample, ChartsChartBarHiddenLabelsExample, ChartsChartBarHorizontalExample, ChartsChartBarLogarithmicExample, ChartsChartBarMultipleSeriesExample, ChartsChartBarStackedExample, ChartsChartBarValueBoundsExample, ChartsChartBarValueFormatExample, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataGridBasicExampleComponent, DataGridLoadingExampleComponent, DataGridPagingExampleComponent, DataGridSortingExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxCharacterLimitExample, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, 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, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
15325
+ export { ActionBarsSummaryActionBarBasicExampleComponent, ActionBarsSummaryActionBarErrorExampleComponent, ActionBarsSummaryActionBarModalExampleComponent, ActionBarsSummaryActionBarTabExampleComponent, AgGridDataEntryGridBasicExampleComponent, AgGridDataEntryGridDataManagerAddedExampleComponent, AgGridDataEntryGridFocusExampleComponent, AgGridDataEntryGridInlineHelpExampleComponent, AgGridDataGridBasicExampleComponent, AgGridDataGridBasicMultiselectExampleComponent, AgGridDataGridDataManagerExampleComponent, AgGridDataGridDataManagerMultiselectExampleComponent, AgGridDataGridInlineHelpExampleComponent, AgGridDataGridPagingExampleComponent, AgGridDataGridTemplateRefColumnExampleComponent, AgGridDataGridTopScrollExampleComponent, AngularTreeComponentAngularTreeBasicExampleComponent, AngularTreeComponentAngularTreeHelpKeyExampleComponent, AngularTreeComponentAngularTreePreselectedNodesExampleComponent, AutonumericCurrencyExampleComponent, AutonumericInternationalFormattingExampleComponent, AutonumericOptionsProviderExampleComponent, AutonumericPresetExampleComponent, AvatarExampleComponent, ChartsChartBarAsyncExample, ChartsChartBarBasicExample, ChartsChartBarFloatingExample, ChartsChartBarFloatingMultipleSeriesExample, ChartsChartBarGroupedStackedExample, ChartsChartBarHiddenLabelsExample, ChartsChartBarHorizontalExample, ChartsChartBarLogarithmicExample, ChartsChartBarMultipleSeriesExample, ChartsChartBarStackedExample, ChartsChartBarValueBoundsExample, ChartsChartBarValueFormatExample, ColorpickerBasicExampleComponent, ColorpickerHelpKeyExampleComponent, ColorpickerProgrammaticExampleComponent, CoreIdExampleComponent, CoreMediaQueryBasicExampleComponent, CoreMediaQueryResponsiveHostExampleComponent, CoreNumericBasicExampleComponent, DataGridBasicExampleComponent, DataGridLoadingExampleComponent, DataGridPagingExampleComponent, DataGridSortingExampleComponent, DataManagerBasicExampleComponent, DatetimeDatePipeBasicExampleComponent, DatetimeDateRangePickerBasicExampleComponent, DatetimeDateRangePickerCustomCalculatorExampleComponent, DatetimeDateRangePickerHelpKeyExampleComponent, DatetimeDatepickerBasicExampleComponent, DatetimeDatepickerCustomDatesExampleComponent, DatetimeDatepickerFuzzyExampleComponent, DatetimeTimepickerBasicExampleComponent, ErrorsErrorEmbeddedExampleComponent, ErrorsErrorModalExampleComponent, FilterBarLookupExampleComponent, FilterBarModalExampleComponent, FilterBarSelectableExampleComponent, FlyoutBasicExampleComponent, FlyoutCustomHeadersExampleComponent, FormsCharacterCountExampleComponent, FormsCheckboxBasicExampleComponent, FormsCheckboxHelpKeyExampleComponent, FormsCheckboxIconGroupExampleComponent, FormsFieldGroupBasicExampleComponent, FormsFieldGroupHelpKeyExampleComponent, FormsFileAttachmentBasicExampleComponent, FormsFileAttachmentHelpKeyExampleComponent, FormsFileDropBasicExampleComponent, FormsFileDropHelpKeyExampleComponent, FormsInputBoxBasicExampleComponent, FormsInputBoxCharacterLimitExample, FormsInputBoxWithCustomFormErrorsExampleComponent, FormsRadioHelpKeyExampleComponent, FormsRadioIconExampleComponent, FormsRadioStandardExampleComponent, FormsSelectionBoxCheckboxExampleComponent, FormsSelectionBoxRadioExampleComponent, FormsToggleSwitchBasicExampleComponent, FormsToggleSwitchHelpKeyExampleComponent, HelpInlineActionClickExampleComponent, HelpInlineHelpKeyExampleComponent, HelpInlinePopoverExampleComponent, 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, LayoutFluidGridBasicExampleComponent, LayoutFluidGridInsetExampleComponent, LayoutFormatExampleComponent, LayoutInlineDeleteCustomExampleComponent, LayoutInlineDeleteRepeaterExampleComponent, LayoutPageSummaryBasicExampleComponent, LayoutTextExpandInlineExampleComponent, LayoutTextExpandModalExampleComponent, LayoutTextExpandNewlineExampleComponent, LayoutTextExpandRepeaterExampleComponent, LayoutToolbarBasicExampleComponent, LayoutToolbarSectionedExampleComponent, ListsFilterInlineExampleComponent, ListsInfiniteScrollRepeaterExampleComponent, ListsListSummaryBasicExampleComponent, ListsPagingBasicExampleComponent, ListsPagingWithContentExampleComponent, ListsRepeaterAddRemoveExampleComponent, ListsRepeaterBasicExampleComponent, ListsRepeaterInlineFormExampleComponent, ListsSortBasicExampleComponent, LookupAddItemExampleComponent, LookupAutocompleteAdvancedExampleComponent, LookupAutocompleteAnyValueExampleComponent, LookupAutocompleteBasicExampleComponent, LookupAutocompleteCustomSearchExampleComponent, LookupAutocompleteSearchFiltersExampleComponent, LookupCountryFieldBasicExampleComponent, LookupCustomPickerExampleComponent, LookupMultiSelectExampleComponent, LookupResultTemplatesExampleComponent, LookupSearchBasicExampleComponent, LookupSelectionModalAddItemExampleComponent, LookupSelectionModalBasicExampleComponent, LookupSingleSelectExampleComponent, ModalsConfirmBasicWithControllerExampleComponent, ModalsConfirmBasicWithHarnessExampleComponent, ModalsModalBasicWithBannerExampleComponent, ModalsModalBasicWithControllerExampleComponent, ModalsModalBasicWithHarnessExampleComponent, ModalsModalBasicWithHarnessHelpKeyExampleComponent, ModalsModalWithErrorExampleComponent, NavbarExampleComponent, PagesActionHubExampleComponent, PagesPageDataManagerSplitViewFitLayoutExampleComponent, PagesPageHomePageBlocksLayoutExampleComponent, PagesPageListPageListLayoutExampleComponent, PagesPageListPageTabsLayoutExampleComponent, PagesPageRecordPageBlocksLayoutExampleComponent, PagesPageRecordPageTabsLayoutExampleComponent, PagesPageSplitViewPageFitLayoutExampleComponent, PhoneFieldBasicExampleComponent, PopoversDropdownBasicExampleComponent, PopoversPopoverBasicExampleComponent, PopoversPopoverProgrammaticExampleComponent, ProgressIndicatorPassiveIndicatorBasicExampleComponent, ProgressIndicatorWaterfallIndicatorBasicExampleComponent, ProgressIndicatorWizardBasicExampleComponent, RouterHrefBasicExampleComponent, SplitViewBasicExampleComponent, SplitViewPageBoundExampleComponent, TabsDynamicAddCloseExampleComponent, TabsDynamicExampleComponent, TabsSectionedFormModalExampleComponent, TabsStaticAddCloseExampleComponent, TabsStaticExampleComponent, TabsVerticalTabsBasicExampleComponent, TabsVerticalTabsGroupedExampleComponent, TabsVerticalTabsMixedExampleComponent, TabsWizardBasicExampleComponent, TextEditorExampleComponent, TextEditorHelpKeyExampleComponent, TextEditorRichTextDisplayExampleComponent, TilesBasicExampleComponent, ToastBasicExampleComponent, ToastCustomComponentExampleComponent, ValidationEmailValidationControlValidatorExampleComponent, ValidationEmailValidationDirectiveExampleComponent, ValidationUrlValidationControlValidatorExampleComponent, ValidationUrlValidationDirectiveExampleComponent };
15316
15326
  //# sourceMappingURL=skyux-code-examples.mjs.map