@skyux/lookup 5.8.2 → 5.9.0

package/documentation.json

@@ -9437,7 +9437,7 @@
     {
       "fileName": "lookup-custom-picker-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.component.scss",
@@ -9447,7 +9447,7 @@
     {
       "fileName": "lookup-custom-picker-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/custom-picker/lookup-custom-picker-demo.component.ts",
-      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: FormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { ChangeDetectorRef, Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n  SkyLookupShowMoreCustomPickerContext,\n} from '@skyux/lookup';\nimport { SkyModalCloseArgs, SkyModalService } from '@skyux/modals';\n\nimport { LookupCustomPickerDemoModalComponent } from './lookup-custom-picker-demo-modal.component';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-custom-picker-demo.component.html',\n  styleUrls: ['./lookup-custom-picker-demo.component.scss'],\n})\nexport class LookupCustomPickerDemoComponent implements OnInit {\n  public showMoreConfig: SkyLookupShowMoreConfig;\n\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(\n    private changeDetector: ChangeDetectorRef,\n    private formBuilder: FormBuilder,\n    private modalService: SkyModalService\n  ) {\n    this.showMoreConfig = {\n      customPicker: {\n        open: (context: SkyLookupShowMoreCustomPickerContext) => {\n          const instance = this.modalService.open(\n            LookupCustomPickerDemoModalComponent,\n            {\n              providers: [\n                {\n                  provide: SkyLookupShowMoreCustomPickerContext,\n                  useValue: context,\n                },\n              ],\n            }\n          );\n\n          instance.closed.subscribe((closeArgs: SkyModalCloseArgs) => {\n            if (closeArgs.reason === 'save') {\n              if (closeArgs.data) {\n                this.myForm.setValue({\n                  names: [this.people[this.people.length - 1]],\n                });\n                this.changeDetector.markForCheck();\n              }\n            }\n          });\n        },\n      },\n    };\n  }\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-custom-picker-demo.module.ts",
@@ -9457,7 +9457,7 @@
     {
       "fileName": "lookup-multiple-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-multiple-demo.component.scss",
@@ -9467,7 +9467,7 @@
     {
       "fileName": "lookup-multiple-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/multi-select/lookup-multiple-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-multiple-demo.component.html',\n  styleUrls: ['./lookup-multiple-demo.component.scss'],\n})\nexport class LookupMultipleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-multiple-demo.module.ts",
@@ -9477,7 +9477,7 @@
     {
       "fileName": "lookup-result-templates-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [searchResultTemplate]=\"dropdownItemTemplate\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template let-item=\"item\" #dropdownItemTemplate>\n  <strong>{{ item.name }}</strong\n  ><br />\n  {{ item.formal }}\n</ng-template>\n<ng-template let-item=\"item\" #modalItemTemplate>\n  {{ item.name }}<br />\n  <i>{{ item.formal }}</i>\n</ng-template>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #namesLabel=\"skyId\">\n        Favorite names\n      </label>\n      <sky-lookup\n        formControlName=\"names\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"namesLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [searchResultTemplate]=\"dropdownItemTemplate\"\n        [showAddButton]=\"true\"\n        [showMoreConfig]=\"showMoreConfig\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n\n<ng-template let-item=\"item\" #dropdownItemTemplate>\n  <strong>{{ item.name }}</strong\n  ><br />\n  {{ item.formal }}\n</ng-template>\n<ng-template let-item=\"item\" #modalItemTemplate>\n  {{ item.name }}<br />\n  <i>{{ item.formal }}</i>\n</ng-template>\n"
     },
     {
       "fileName": "lookup-result-templates-demo.component.scss",
@@ -9487,7 +9487,7 @@
     {
       "fileName": "lookup-result-templates-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/result-templates/lookup-result-templates-demo.component.ts",
-      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<any>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport {\n  SkyAutocompleteSearchFunctionFilter,\n  SkyLookupShowMoreConfig,\n} from '@skyux/lookup';\n\n@Component({\n  selector: 'app-lookup-demo',\n  templateUrl: './lookup-result-templates-demo.component.html',\n  styleUrls: ['./lookup-result-templates-demo.component.scss'],\n})\nexport class LookupResultTemplatesDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    {\n      name: 'Abed',\n      formal: 'Mr. Nadir',\n    },\n    {\n      name: 'Alex',\n      formal: 'Mr. Osbourne',\n    },\n    {\n      name: 'Ben',\n      formal: 'Mr. Chang',\n    },\n    {\n      name: 'Britta',\n      formal: 'Ms. Perry',\n    },\n    {\n      name: 'Buzz',\n      formal: 'Mr. Hickey',\n    },\n    {\n      name: 'Craig',\n      formal: 'Mr. Pelton',\n    },\n    {\n      name: 'Elroy',\n      formal: 'Mr. Patashnik',\n    },\n    {\n      name: 'Garrett',\n      formal: 'Mr. Lambert',\n    },\n    {\n      name: 'Ian',\n      formal: 'Mr. Duncan',\n    },\n    {\n      name: 'Jeff',\n      formal: 'Mr. Winger',\n    },\n    {\n      name: 'Leonard',\n      formal: 'Mr. Rodriguez',\n    },\n    {\n      name: 'Neil',\n      formal: 'Mr. Neil',\n    },\n    {\n      name: 'Pierce',\n      formal: 'Mr. Hawthorne',\n    },\n    {\n      name: 'Preston',\n      formal: 'Mr. Koogler',\n    },\n    {\n      name: 'Rachel',\n      formal: 'Ms. Rachel',\n    },\n    {\n      name: 'Shirley',\n      formal: 'Ms. Bennett',\n    },\n    {\n      name: 'Todd',\n      formal: 'Mr. Jacobson',\n    },\n    {\n      name: 'Troy',\n      formal: 'Mr. Barnes',\n    },\n    {\n      name: 'Vaughn',\n      formal: 'Mr. Miller',\n    },\n    {\n      name: 'Vicki',\n      formal: 'Ms. Jenkins',\n    },\n  ];\n\n  public names: any[] = [this.people[15]];\n\n  public showMoreConfig: SkyLookupShowMoreConfig = {\n    nativePickerConfig: {},\n  };\n\n  @ViewChild('modalItemTemplate')\n  public set modalItemTempalte(template: TemplateRef<any>) {\n    this.showMoreConfig.nativePickerConfig.itemTemplate = template;\n  }\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const names: any[] = this.myForm.controls.names.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = names.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      names: new FormControl(this.names),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-result-templates-demo.module.ts",
@@ -9497,7 +9497,7 @@
     {
       "fileName": "lookup-single-demo.component.html",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.html",
-      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #nameLabel=\"skyId\">\n        Favorite name\n      </label>\n      <sky-lookup\n        formControlName=\"name\"\n        selectMode=\"single\"\n        [ariaLabelledBy]=\"nameLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
+      "rawContents": "<form\n  class=\"lookup-demo-form\"\n  novalidate\n  [formGroup]=\"myForm\"\n  (ngSubmit)=\"onSubmit()\"\n>\n  <div class=\"sky-form-group\">\n    <sky-input-box>\n      <label class=\"sky-control-label\" skyId #nameLabel=\"skyId\">\n        Favorite name\n      </label>\n      <sky-lookup\n        formControlName=\"name\"\n        selectMode=\"single\"\n        (addClick)=\"onAddButtonClicked()\"\n        [ariaLabelledBy]=\"nameLabel.id\"\n        [data]=\"people\"\n        [enableShowMore]=\"true\"\n        [searchFilters]=\"getSearchFilters()\"\n        [showAddButton]=\"true\"\n      >\n      </sky-lookup>\n    </sky-input-box>\n  </div>\n  <div class=\"lookup-demo-alert\">\n    <strong>Form model:</strong>\n    <pre>{{ myForm.value | json }}</pre>\n  </div>\n  <button class=\"sky-btn sky-btn-default\" type=\"submit\">Submit</button>\n</form>\n"
     },
     {
       "fileName": "lookup-single-demo.component.scss",
@@ -9507,7 +9507,7 @@
     {
       "fileName": "lookup-single-demo.component.ts",
       "filePath": "/projects/lookup/documentation/code-examples/lookup/single-select/lookup-single-demo.component.ts",
-      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: any[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnInit } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup } from '@angular/forms';\nimport { SkyAutocompleteSearchFunctionFilter } from '@skyux/lookup';\n\n@Component({\n  selector: 'app-single-select-lookup-demo',\n  templateUrl: './lookup-single-demo.component.html',\n  styleUrls: ['./lookup-single-demo.component.scss'],\n})\nexport class LookupSingleSelectDemoComponent implements OnInit {\n  public myForm: FormGroup;\n\n  public people: any[] = [\n    { name: 'Abed' },\n    { name: 'Alex' },\n    { name: 'Ben' },\n    { name: 'Britta' },\n    { name: 'Buzz' },\n    { name: 'Craig' },\n    { name: 'Elroy' },\n    { name: 'Garrett' },\n    { name: 'Ian' },\n    { name: 'Jeff' },\n    { name: 'Leonard' },\n    { name: 'Neil' },\n    { name: 'Pierce' },\n    { name: 'Preston' },\n    { name: 'Rachel' },\n    { name: 'Shirley' },\n    { name: 'Todd' },\n    { name: 'Troy' },\n    { name: 'Vaughn' },\n    { name: 'Vicki' },\n  ];\n\n  public name: any[] = [this.people[15]];\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  public ngOnInit(): void {\n    this.createForm();\n\n    // If you need to execute some logic after the lookup values change,\n    // subscribe to Angular's built-in value changes observable.\n    this.myForm.valueChanges.subscribe((changes) => {\n      console.log('Lookup value changes:', changes);\n    });\n  }\n\n  // Only show people in the search results that have not been chosen already.\n  public getSearchFilters(): SkyAutocompleteSearchFunctionFilter[] {\n    const name: any[] = this.myForm.controls.name.value;\n    return [\n      (searchText: string, item: any): boolean => {\n        const found = name.find((option) => option.name === item.name);\n        return !found;\n      },\n    ];\n  }\n\n  public onAddButtonClicked(): void {\n    alert('Add button clicked!');\n  }\n\n  public onSubmit(): void {\n    alert('Form submitted with: ' + JSON.stringify(this.myForm.value));\n  }\n\n  private createForm(): void {\n    this.myForm = this.formBuilder.group({\n      name: new FormControl(this.name),\n    });\n  }\n}\n"
     },
     {
       "fileName": "lookup-single-demo.module.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/lookup",
-  "version": "5.8.2",
+  "version": "5.9.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -21,15 +21,15 @@
     "@angular/core": "^12.2.16",
     "@angular/forms": "^12.2.16",
     "@angular/platform-browser": "^12.2.16",
-    "@skyux-sdk/testing": "5.8.2",
-    "@skyux/core": "5.8.2",
-    "@skyux/forms": "5.8.2",
-    "@skyux/i18n": "5.8.2",
-    "@skyux/indicators": "5.8.2",
-    "@skyux/layout": "5.8.2",
-    "@skyux/lists": "5.8.2",
-    "@skyux/modals": "5.8.2",
-    "@skyux/theme": "5.8.2"
+    "@skyux-sdk/testing": "5.9.0",
+    "@skyux/core": "5.9.0",
+    "@skyux/forms": "5.9.0",
+    "@skyux/i18n": "5.9.0",
+    "@skyux/indicators": "5.9.0",
+    "@skyux/layout": "5.9.0",
+    "@skyux/lists": "5.9.0",
+    "@skyux/modals": "5.9.0",
+    "@skyux/theme": "5.9.0"
   },
   "dependencies": {
     "intl-tel-input": "17.0.16",