@skyux/code-examples 12.14.0 → 12.14.2

package/fesm2022/skyux-code-examples.mjs

@@ -9804,7 +9804,7 @@ class LookupAddItemExampleComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAddItemExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAddItemExampleComponent, isStandalone: true, selector: "app-lookup-add-item-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupAddItemExampleComponent, isStandalone: true, selector: "app-lookup-add-item-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupAddItemExampleComponent, decorators: [{
             type: Component,
@@ -10047,7 +10047,7 @@ class LookupCustomPickerExampleComponent {
         alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupCustomPickerExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupCustomPickerExampleComponent, isStandalone: true, selector: "app-lookup-custom-picker-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupCustomPickerExampleComponent, isStandalone: true, selector: "app-lookup-custom-picker-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupCustomPickerExampleComponent, decorators: [{
             type: Component,
@@ -10172,7 +10172,7 @@ class LookupMultiSelectExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupMultiSelectExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LookupMultiSelectExampleComponent, isStandalone: true, selector: "app-lookup-multi-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LookupMultiSelectExampleComponent, isStandalone: true, selector: "app-lookup-multi-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name(s)\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteNames.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose names that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupMultiSelectExampleComponent, decorators: [{
             type: Component,
@@ -10363,7 +10363,7 @@ class LookupResultTemplatesExampleComponent {
         alert('Form submitted with: ' + JSON.stringify(this.favoritesForm.value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupResultTemplatesExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupResultTemplatesExampleComponent, isStandalone: true, selector: "app-lookup-result-templates-example", viewQueries: [{ propertyName: "modalItemTemplate", first: true, predicate: ["modalItemTemplate"], descendants: true }], ngImport: i0, template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LookupResultTemplatesExampleComponent, isStandalone: true, selector: "app-lookup-result-templates-example", viewQueries: [{ propertyName: "modalItemTemplate", first: true, predicate: ["modalItemTemplate"], descendants: true }], ngImport: i0, template: "<form\n  class=\"lookup-example-form\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite names\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteNames\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [searchResultTemplate]=\"dropdownItemTemplate\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (addClick)=\"addClick($event)\"\n      (searchAsync)=\"searchAsync($event)\"\n    />\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template #dropdownItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <strong class=\"lookup-example-template-name\">{{ item.name }}</strong\n    ><br />\n    <span class=\"lookup-example-template-formal-name\">\n      {{ item.formal }}\n    </span>\n  </span>\n</ng-template>\n<ng-template #modalItemTemplate let-item=\"item\">\n  <span class=\"lookup-example-template-item\">\n    <span class=\"lookup-example-template-name\">{{ item.name }}</span\n    ><br />\n    <i class=\"lookup-example-template-formal-name\">{{ item.formal }}</i>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupResultTemplatesExampleComponent, decorators: [{
             type: Component,
@@ -10491,7 +10491,7 @@ class LookupSingleSelectExampleComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupSingleSelectExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LookupSingleSelectExampleComponent, isStandalone: true, selector: "app-lookup-single-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: LookupSingleSelectExampleComponent, isStandalone: true, selector: "app-lookup-single-select-example", ngImport: i0, template: "<form\n  class=\"sky-padding-even-md\"\n  novalidate\n  [formGroup]=\"favoritesForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <sky-input-box\n    data-sky-id=\"favorite-names-field\"\n    helpPopoverContent=\"A name can be selected from the list or added as a new name.\"\n    hintText=\"Choose a name from the list or add a new name.\"\n    labelText=\"Favorite name\"\n    stacked\n  >\n    <sky-lookup\n      formControlName=\"favoriteName\"\n      idProperty=\"name\"\n      [enableShowMore]=\"true\"\n      [selectMode]=\"'single'\"\n      [showAddButton]=\"true\"\n      [showMoreConfig]=\"showMoreConfig\"\n      (searchAsync)=\"searchAsync($event)\"\n      (addClick)=\"addClick($event)\"\n    />\n    @if (favoritesForm.controls.favoriteName.errors?.['letterE']) {\n      <sky-form-error\n        errorName=\"letterE\"\n        errorText=\"Please only choose a name that contain the letter E\"\n      />\n    }\n  </sky-input-box>\n  <div\n    class=\"sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg\"\n  >\n    <strong>Form model:</strong>\n    <pre>{{ favoritesForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$a.JsonPipe, name: "json" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyFormErrorModule }, { kind: "component", type: i2$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { 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: "ngmodule", type: SkyLookupModule }, { kind: "component", type: i3$1.λ4, selector: "sky-lookup", inputs: ["ariaLabel", "ariaLabelledBy", "autocompleteAttribute", "data", "disabled", "required", "enableShowMore", "placeholderText", "idProperty", "showAddButton", "showMoreConfig", "selectMode", "wrapperClass"], outputs: ["addClick", "openChange", "selectionModalOpenChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LookupSingleSelectExampleComponent, decorators: [{
             type: Component,