@indice/ng-components 0.2.167-beta.8 → 0.2.167-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/_styles.css CHANGED
@@ -4259,6 +4259,35 @@
4259
4259
  }
4260
4260
  }
4261
4261
 
4262
+ @layer components {
4263
+ .combobox-wrapper {
4264
+ @apply relative mt-1;
4265
+ }
4266
+
4267
+ .combobox-input {
4268
+ @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
4269
+ }
4270
+
4271
+ .combobox-icons {
4272
+ @apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none;
4273
+ }
4274
+
4275
+ .combobox-results {
4276
+ @apply absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
4277
+ }
4278
+
4279
+ .combobox-default-item-template {
4280
+ @apply hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate;
4281
+ }
4282
+
4283
+ .combobox-selected-item-wrapper {
4284
+ @apply relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400;
4285
+ }
4286
+
4287
+ .combobox-selected-item-remove-btn {
4288
+ @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
4289
+ }
4290
+ }
4262
4291
 
4263
4292
  .modal-active {
4264
4293
  overflow: hidden;
@@ -14,14 +14,15 @@ export class ComboboxComponent {
14
14
  return selectedItem == null || selectedItem == undefined;
15
15
  };
16
16
  this.id = 'combobox';
17
- this.itemTemplate = null;
17
+ this.itemTemplate = undefined;
18
18
  this.selectedItemsFilter = () => true;
19
- this.selectedItemTemplate = null;
19
+ this.selectedItemTemplate = undefined;
20
20
  this.busy = false;
21
+ this.multiple = true;
21
22
  this.debounceMs = 1000;
22
23
  this.onSearch = new EventEmitter();
23
24
  this.onItemSelected = new EventEmitter();
24
- this.showOptions = false;
25
+ this.showResults = false;
25
26
  this.selectedItems = [];
26
27
  }
27
28
  set items(items) {
@@ -41,23 +42,32 @@ export class ComboboxComponent {
41
42
  }
42
43
  }
43
44
  ngOnInit() {
45
+ if (this.itemTemplate && !this.multiple) {
46
+ this.multiple = true;
47
+ console.warn('You cannot have a custom item template with single selection.');
48
+ }
44
49
  this.emitSearchEvent();
45
50
  this._debouncer
46
51
  .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
47
52
  .subscribe((value) => this.emitSearchEvent(value));
48
53
  }
49
54
  onInputClick() {
50
- this.showOptions = true;
55
+ this.showResults = true;
51
56
  }
52
57
  onInputClickOutside() {
53
- this.showOptions = false;
58
+ this.showResults = false;
54
59
  }
55
60
  onInputKeyUp(event) {
56
61
  this._debouncer.next(event.currentTarget.value);
57
62
  }
58
63
  onListItemSelected(item) {
59
64
  this.onItemSelected.emit(item);
60
- this.selectedItems.push(item);
65
+ if (this.multiple) {
66
+ this.selectedItems.push(item);
67
+ }
68
+ else {
69
+ this.value = item;
70
+ }
61
71
  }
62
72
  removeSelectedItem(item) {
63
73
  const index = this.selectedItems.indexOf(item);
@@ -70,12 +80,14 @@ export class ComboboxComponent {
70
80
  }
71
81
  }
72
82
  ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
73
- ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n </form>\r\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
83
+ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onInputClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeSelectedItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
74
84
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
75
85
  type: Component,
76
- args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\r\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n </form>\r\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
86
+ args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onInputClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeSelectedItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
77
87
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
78
88
  type: Input
89
+ }], placeholder: [{
90
+ type: Input
79
91
  }], items: [{
80
92
  type: Input,
81
93
  args: ['items']
@@ -87,6 +99,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
87
99
  type: Input
88
100
  }], busy: [{
89
101
  type: Input
102
+ }], multiple: [{
103
+ type: Input
90
104
  }], debounceMs: [{
91
105
  type: Input
92
106
  }], onSearch: [{
@@ -94,4 +108,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
94
108
  }], onItemSelected: [{
95
109
  type: Output
96
110
  }] } });
97
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tYm9ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL2NvbnRyb2xzL2NvbWJvYm94L2NvbWJvYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9jb21ib2JveC9jb21ib2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRTVGLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFlBQVksRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQU1wRSxNQUFNLE9BQU8saUJBQWlCO0lBUzFCO1FBUlEsZUFBVSxHQUFvQixJQUFJLE9BQU8sRUFBVSxDQUFDO1FBQ3BELFdBQU0sR0FBVSxFQUFFLENBQUM7UUFFbkIsd0JBQW1CLEdBQUcsQ0FBQyxJQUFTLEVBQUUsRUFBRTtZQUN4QyxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsQ0FBQztZQUM3RCxPQUFPLFlBQVksSUFBSSxJQUFJLElBQUksWUFBWSxJQUFJLFNBQVMsQ0FBQztRQUM3RCxDQUFDLENBQUM7UUFJYyxPQUFFLEdBQVcsVUFBVSxDQUFDO1FBa0J4QixpQkFBWSxHQUFvQyxJQUFJLENBQUM7UUFDckQsd0JBQW1CLEdBQWtDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztRQUNoRSx5QkFBb0IsR0FBb0MsSUFBSSxDQUFDO1FBQzdELFNBQUksR0FBWSxLQUFLLENBQUM7UUFDdEIs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IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgZGVib3VuY2VUaW1lLCBkaXN0aW5jdFVudGlsQ2hhbmdlZCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdsaWItY29tYm9ib3gnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NvbWJvYm94LmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29tYm9ib3hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gICAgcHJpdmF0ZSBfZGVib3VuY2VyOiBTdWJqZWN0PHN0cmluZz4gPSBuZXcgU3ViamVjdDxzdHJpbmc+KCk7XHJcbiAgICBwcml2YXRlIF9pdGVtczogYW55W10gPSBbXTtcclxuXHJcbiAgICBwcml2YXRlIF9kZWZhdWx0SXRlbXNGaWx0ZXIgPSAoaXRlbTogYW55KSA9PiB7XHJcbiAgICAgICAgY29uc3Qgc2VsZWN0ZWRJdGVtID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmZpbmQoeCA9PiB4ID09IGl0ZW0pO1xyXG4gICAgICAgIHJldHVybiBzZWxlY3RlZEl0ZW0gPT0gbnVsbCB8fCBzZWxlY3RlZEl0ZW0gPT0gdW5kZWZpbmVkO1xyXG4gICAgfTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBpZDogc3RyaW5nID0gJ2NvbWJvYm94JztcclxuXHJcbiAgICBASW5wdXQoJ2l0ZW1zJykgcHVibGljIHNldCBpdGVtcyhpdGVtczogYW55W10pIHtcclxuICAgICAgICBpZiAoIXRoaXMuaXRlbVRlbXBsYXRlKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2l0ZW1zID0gaXRlbXMuZmlsdGVyKHRoaXMuX2RlZmF1bHRJdGVtc0ZpbHRlcik7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy5faXRlbXMgPSBpdGVtcy5maWx0ZXIodGhpcy5zZWxlY3RlZEl0ZW1zRmlsdGVyKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIGdldCBpdGVtcygpOiBhbnlbXSB7XHJcbiAgICAgICAgaWYgKCF0aGlzLml0ZW1UZW1wbGF0ZSkge1xyXG4gICAgICAgICAgICByZXR1cm4gdGhpcy5faXRlbXMuZmlsdGVyKHRoaXMuX2RlZmF1bHRJdGVtc0ZpbHRlcik7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgcmV0dXJuIHRoaXMuX2l0ZW1zLmZpbHRlcih0aGlzLnNlbGVjdGVkSXRlbXNGaWx0ZXIpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgaXRlbVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxIVE1MRWxlbWVudD4gfCBudWxsID0gbnVsbDtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzZWxlY3RlZEl0ZW1zRmlsdGVyOiAoaXRlbTogYW55KSA9PiBib29sZWFuIHwgbnVsbCA9ICgpID0+IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2VsZWN0ZWRJdGVtVGVtcGxhdGU6IFRlbXBsYXRlUmVmPEhUTUxFbGVtZW50PiB8IG51bGwgPSBudWxsO1xyXG4gICAgQElucHV0KCkgcHVibGljIGJ1c3k6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBkZWJvdW5jZU1zOiBudW1iZXIgPSAxMDAwO1xyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBvblNlYXJjaDogRXZlbnRFbWl0dGVyPHN0cmluZyB8IHVuZGVmaW5lZD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgICBAT3V0cHV0KCkgcHVibGljIG9uSXRlbVNlbGVjdGVkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICAgIHB1YmxpYyBzaG93T3B0aW9uczogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgcHVibGljIHNlbGVjdGVkSXRlbXM6IGFueVtdID0gW107XHJcblxyXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuZW1pdFNlYXJjaEV2ZW50KCk7XHJcbiAgICAgICAgdGhpcy5fZGVib3VuY2VyXHJcbiAgICAgICAgICAgIC5waXBlKFxyXG4gICAgICAgICAgICAgICAgZGVib3VuY2VUaW1lKHRoaXMuZGVib3VuY2VNcyksXHJcbiAgICAgICAgICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpXHJcbiAgICAgICAgICAgIClcclxuICAgICAgICAgICAgLnN1YnNjcmliZSgodmFsdWU6IHN0cmluZykgPT4gdGhpcy5lbWl0U2VhcmNoRXZlbnQodmFsdWUpKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25JbnB1dENsaWNrKCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2hvd09wdGlvbnMgPSB0cnVlO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbklucHV0Q2xpY2tPdXRzaWRlKCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2hvd09wdGlvbnMgPSBmYWxzZTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25JbnB1dEtleVVwKGV2ZW50OiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLl9kZWJvdW5jZXIubmV4dChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25MaXN0SXRlbVNlbGVjdGVkKGl0ZW06IGFueSk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25JdGVtU2VsZWN0ZWQuZW1pdChpdGVtKTtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMucHVzaChpdGVtKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgcmVtb3ZlU2VsZWN0ZWRJdGVtKGl0ZW06IGFueSk6IHZvaWQge1xyXG4gICAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5zZWxlY3RlZEl0ZW1zLmluZGV4T2YoaXRlbSk7XHJcbiAgICAgICAgaWYgKGluZGV4ID4gLTEpIHtcclxuICAgICAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zLnNwbGljZShpbmRleCwgMSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZW1pdFNlYXJjaEV2ZW50KHNlYXJjaFRlcm06IHN0cmluZyB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25TZWFyY2guZW1pdChzZWFyY2hUZXJtKTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwicmVsYXRpdmUgbXQtMVwiPlxyXG4gICAgPGZvcm0gYXV0b2NvbXBsZXRlPVwib2ZmXCIgW2lkXT1cImlkICsgJy1mb3JtJ1wiPlxyXG4gICAgICAgIDxpbnB1dCBbaWRdPVwiaWQgKyAnLWlucHV0J1wiIHR5cGU9XCJ0ZXh0XCIgKGNsaWNrKT1cIm9uSW5wdXRDbGljaygpXCIgKGNsaWNrT3V0c2lkZSk9XCJvbklucHV0Q2xpY2tPdXRzaWRlKClcIiAoa2V5dXApPVwib25JbnB1dEtleVVwKCRldmVudClcIlxyXG4gICAgICAgICAgICBjbGFzcz1cInctZnVsbCByb3VuZGVkLW1kIGJvcmRlciBib3JkZXItZ3JheS0zMDAgYmctd2hpdGUgcHktMiBwbC0zIHByLTEyIHNoYWRvdy1zbSBmb2N1czpib3JkZXItaW5kaWdvLTUwMCBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6cmluZy0xIGZvY3VzOnJpbmctaW5kaWdvLTUwMCBzbTp0ZXh0LXNtXCIgcm9sZT1cImNvbWJvYm94XCIgYXJpYS1jb250cm9scz1cIm9wdGlvbnNcIlxyXG4gICAgICAgICAgICBhcmlhLWV4cGFuZGVkPVwiZmFsc2VcIiBhdXRvY29tcGxldGU9XCJvZmZcIiBsaXN0PVwiYXV0b2NvbXBsZXRlXCI+XHJcbiAgICA8L2Zvcm0+XHJcbiAgICA8ZGl2IGNsYXNzPVwiYWJzb2x1dGUgaW5zZXQteS0wIHJpZ2h0LTAgZmxleCBpdGVtcy1jZW50ZXIgcm91bmRlZC1yLW1kIHB4LTIgZm9jdXM6b3V0bGluZS1ub25lXCI+XHJcbiAgICAgICAgPHN2ZyAqbmdJZj1cIiFidXN5XCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIGNsYXNzPVwiaC02IHctNiB0ZXh0LWdyYXktNDAwXCIgZmlsbD1cIm5vbmVcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlLXdpZHRoPVwiMlwiPlxyXG4gICAgICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiBkPVwiTTIxIDIxbC02LTZtMi01YTcgNyAwIDExLTE0IDAgNyA3IDAgMDExNCAwelwiIC8+XHJcbiAgICAgICAgPC9zdmc+XHJcbiAgICAgICAgPHN2ZyAqbmdJZj1cImJ1c3lcIiBjbGFzcz1cImFuaW1hdGUtc3BpbiBoLTYgdy02IHRleHQtZ3JheS00MDBcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgZmlsbD1cIm5vbmVcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCI+XHJcbiAgICAgICAgICAgIDxjaXJjbGUgY2xhc3M9XCJvcGFjaXR5LTI1XCIgY3g9XCIxMlwiIGN5PVwiMTJcIiByPVwiMTBcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCI0XCI+PC9jaXJjbGU+XHJcbiAgICAgICAgICAgIDxwYXRoIGNsYXNzPVwib3BhY2l0eS03NVwiIGZpbGw9XCJjdXJyZW50Q29sb3JcIiBkPVwiTTQgMTJhOCA4IDAgMDE4LThWMEM1LjM3MyAwIDAgNS4zNzMgMCAxMmg0em0yIDUuMjkxQTcuOTYyIDcuOTYyIDAgMDE0IDEySDBjMCAzLjA0MiAxLjEzNSA1LjgyNCAzIDcuOTM4bDMtMi42NDd6XCI+PC9wYXRoPlxyXG4gICAgICAgIDwvc3ZnPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8dWwgW2lkXT1cImlkICsgJy1vcHRpb25zJ1wiICpuZ0lmPVwic2hvd09wdGlvbnNcIiBjbGFzcz1cImFic29sdXRlIHotMTAgbXQtMSBtYXgtaC02MCB3LWZ1bGwgb3ZlcmZsb3ctYXV0byByb3VuZGVkLW1kIGJnLXdoaXRlIHB5LTEgdGV4dC1iYXNlIHNoYWRvdy1sZyByaW5nLTEgcmluZy1ibGFjayByaW5nLW9wYWNpdHktNSBmb2N1czpvdXRsaW5lLW5vbmUgc206dGV4dC1zbVwiIHJvbGU9XCJsaXN0Ym94XCI+XHJcbiAgICAgICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zOyBsZXQgaSA9IGluZGV4O1wiIFtpZF09XCInb3B0aW9uLScrIGlcIiAoY2xpY2spPVwib25MaXN0SXRlbVNlbGVjdGVkKGl0ZW0pXCIgcm9sZT1cIm9wdGlvblwiIHRhYmluZGV4PVwiLTFcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJpdGVtVGVtcGxhdGUgfHwgZGVmYXVsdEl0ZW1UZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogaXRlbSB9XCI+PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPC9saT5cclxuICAgIDwvdWw+XHJcbjwvZGl2PlxyXG48dWwgKm5nSWY9XCJzZWxlY3RlZEl0ZW1zLmxlbmd0aCA+IDBcIiByb2xlPVwibGlzdFwiIGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMVwiPlxyXG4gICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIHNlbGVjdGVkSXRlbXM7IGxldCBpID0gaW5kZXg7XCIgY2xhc3M9XCJtdC0zXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJzZWxlY3RlZEl0ZW1UZW1wbGF0ZSB8fCBkZWZhdWx0U2VsZWN0ZWRJdGVtVGVtcGxhdGVcIiBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGl0ZW0gfVwiPjwvbmctY29udGFpbmVyPlxyXG4gICAgPC9saT5cclxuPC91bD5cclxuPG5nLXRlbXBsYXRlICNkZWZhdWx0SXRlbVRlbXBsYXRlIGxldC1pdGVtPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJob3ZlcjpiZy1ncmF5LTEwMCByZWxhdGl2ZSBjdXJzb3ItcG9pbnRlciBzZWxlY3Qtbm9uZSBweS0yIHBsLTMgcHItMyBibG9jayB0cnVuY2F0ZVwiPnt7IGl0ZW0gfX08L3NwYW4+XHJcbjwvbmctdGVtcGxhdGU+XHJcbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdFNlbGVjdGVkSXRlbVRlbXBsYXRlIGxldC1pdGVtPlxyXG4gICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTFcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwicmVsYXRpdmUgcm91bmRlZC1sZyBib3JkZXIgYm9yZGVyLWdyYXktMzAwIGJnLXdoaXRlIHB4LTYgcHktNSBzaGFkb3ctc20gZmxleCBpdGVtcy1jZW50ZXIgc3BhY2UteC0zIGhvdmVyOmJvcmRlci1ncmF5LTQwMFwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleC0xIG1pbi13LTBcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmb2N1czpvdXRsaW5lLW5vbmVcIj5cclxuICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImFic29sdXRlXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDxwIGNsYXNzPVwidGV4dC1zbSBmb250LW1lZGl1bSB0ZXh0LWdyYXktOTAwXCI+e3sgaXRlbSB9fTwvcD5cclxuICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIm1sLTQgZmxleC1zaHJpbmstMCBmbGV4XCI+XHJcbiAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwicmVtb3ZlU2VsZWN0ZWRJdGVtKGl0ZW0pXCIgY2xhc3M9XCJjdXJzb3ItcG9pbnRlciBiZy13aGl0ZSByb3VuZGVkLW1kIGlubGluZS1mbGV4IHRleHQtZ3JheS00MDAgaG92ZXI6dGV4dC1ncmF5LTUwMFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwic3Itb25seVwiPkNsb3NlPC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzdmcgY2xhc3M9XCJoLTUgdy01XCIgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHZpZXdCb3g9XCIwIDAgMjAgMjBcIiBmaWxsPVwiY3VycmVudENvbG9yXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGZpbGwtcnVsZT1cImV2ZW5vZGRcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZD1cIk00LjI5MyA0LjI5M2ExIDEgMCAwMTEuNDE0IDBMMTAgOC41ODZsNC4yOTMtNC4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNEwxMS40MTQgMTBsNC4yOTMgNC4yOTNhMSAxIDAgMDEtMS40MTQgMS40MTRMMTAgMTEuNDE0bC00LjI5MyA0LjI5M2ExIDEgMCAwMS0xLjQxNC0xLjQxNEw4LjU4NiAxMCA0LjI5MyA1LjcwN2ExIDEgMCAwMTAtMS40MTR6XCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsaXAtcnVsZT1cImV2ZW5vZGRcIiAvPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvc3ZnPlxyXG4gICAgICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvbmctdGVtcGxhdGU+Il19
111
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tYm9ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctY29tcG9uZW50cy9zcmMvbGliL2NvbnRyb2xzL2NvbWJvYm94L2NvbWJvYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9jb21ib2JveC9jb21ib2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRTVGLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFlBQVksRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQU1wRSxNQUFNLE9BQU8saUJBQWlCO0lBUzFCO1FBUlEsZUFBVSxHQUFvQixJQUFJLE9BQU8sRUFBVSxDQUFDO1FBQ3BELFdBQU0sR0FBVSxFQUFFLENBQUM7UUFFbkIsd0JBQW1CLEdBQUcsQ0FBQyxJQUFTLEVBQUUsRUFBRTtZQUN4QyxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUMsQ0FBQztZQUM3RCxPQUFPLFlBQVksSUFBSSxJQUFJLElBQUksWUFBWSxJQUFJLFNBQVMsQ0FBQztRQUM3RCxDQUFDLENBQUM7UUFJYyxPQUFFLEdBQVcsVUFBVSxDQUFDO1FBbUJ4QixpQkFBWSxHQUF5QyxTQUFTLENBQUM7UUFDL0Qsd0JBQW1CLEdBQWtDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztRQUNoRSx5QkFBb0IsR0FBeUMsU0FBUyxDQUFDO1FBQ3ZFLFNBQUksR0FBWSxLQUFLLENBQUM7UUFDdEIs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Y1IsRUFBRTtzQkFBakIsS0FBSztnQkFDVSxXQUFXO3NCQUExQixLQUFLO2dCQUVxQixLQUFLO3NCQUEvQixLQUFLO3VCQUFDLE9BQU87Z0JBZ0JFLFlBQVk7c0JBQTNCLEtBQUs7Z0JBQ1UsbUJBQW1CO3NCQUFsQyxLQUFLO2dCQUNVLG9CQUFvQjtzQkFBbkMsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVyxRQUFRO3NCQUF4QixNQUFNO2dCQUNVLGNBQWM7c0JBQTlCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgU3ViamVjdCB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBkZWJvdW5jZVRpbWUsIGRpc3RpbmN0VW50aWxDaGFuZ2VkIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2xpYi1jb21ib2JveCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vY29tYm9ib3guY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDb21ib2JveENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBwcml2YXRlIF9kZWJvdW5jZXI6IFN1YmplY3Q8c3RyaW5nPiA9IG5ldyBTdWJqZWN0PHN0cmluZz4oKTtcclxuICAgIHByaXZhdGUgX2l0ZW1zOiBhbnlbXSA9IFtdO1xyXG5cclxuICAgIHByaXZhdGUgX2RlZmF1bHRJdGVtc0ZpbHRlciA9IChpdGVtOiBhbnkpID0+IHtcclxuICAgICAgICBjb25zdCBzZWxlY3RlZEl0ZW0gPSB0aGlzLnNlbGVjdGVkSXRlbXMuZmluZCh4ID0+IHggPT0gaXRlbSk7XHJcbiAgICAgICAgcmV0dXJuIHNlbGVjdGVkSXRlbSA9PSBudWxsIHx8IHNlbGVjdGVkSXRlbSA9PSB1bmRlZmluZWQ7XHJcbiAgICB9O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGlkOiBzdHJpbmcgPSAnY29tYm9ib3gnO1xyXG4gICAgQElucHV0KCkgcHVibGljIHBsYWNlaG9sZGVyOiBzdHJpbmcgfCB1bmRlZmluZWQ7XHJcblxyXG4gICAgQElucHV0KCdpdGVtcycpIHB1YmxpYyBzZXQgaXRlbXMoaXRlbXM6IGFueVtdKSB7XHJcbiAgICAgICAgaWYgKCF0aGlzLml0ZW1UZW1wbGF0ZSkge1xyXG4gICAgICAgICAgICB0aGlzLl9pdGVtcyA9IGl0ZW1zLmZpbHRlcih0aGlzLl9kZWZhdWx0SXRlbXNGaWx0ZXIpO1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2l0ZW1zID0gaXRlbXMuZmlsdGVyKHRoaXMuc2VsZWN0ZWRJdGVtc0ZpbHRlcik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBnZXQgaXRlbXMoKTogYW55W10ge1xyXG4gICAgICAgIGlmICghdGhpcy5pdGVtVGVtcGxhdGUpIHtcclxuICAgICAgICAgICAgcmV0dXJuIHRoaXMuX2l0ZW1zLmZpbHRlcih0aGlzLl9kZWZhdWx0SXRlbXNGaWx0ZXIpO1xyXG4gICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgIHJldHVybiB0aGlzLl9pdGVtcy5maWx0ZXIodGhpcy5zZWxlY3RlZEl0ZW1zRmlsdGVyKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGl0ZW1UZW1wbGF0ZTogVGVtcGxhdGVSZWY8SFRNTEVsZW1lbnQ+IHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNlbGVjdGVkSXRlbXNGaWx0ZXI6IChpdGVtOiBhbnkpID0+IGJvb2xlYW4gfCBudWxsID0gKCkgPT4gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzZWxlY3RlZEl0ZW1UZW1wbGF0ZTogVGVtcGxhdGVSZWY8SFRNTEVsZW1lbnQ+IHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkO1xyXG4gICAgQElucHV0KCkgcHVibGljIGJ1c3k6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBtdWx0aXBsZTogYm9vbGVhbiA9IHRydWU7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgZGVib3VuY2VNczogbnVtYmVyID0gMTAwMDtcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgb25TZWFyY2g6IEV2ZW50RW1pdHRlcjxzdHJpbmcgfCB1bmRlZmluZWQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gICAgQE91dHB1dCgpIHB1YmxpYyBvbkl0ZW1TZWxlY3RlZDogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgICBwdWJsaWMgc2hvd1Jlc3VsdHM6IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIHB1YmxpYyBzZWxlY3RlZEl0ZW1zOiBhbnlbXSA9IFtdO1xyXG4gICAgcHVibGljIHZhbHVlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XHJcblxyXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLml0ZW1UZW1wbGF0ZSAmJiAhdGhpcy5tdWx0aXBsZSkgeyBcclxuICAgICAgICAgICAgdGhpcy5tdWx0aXBsZSA9IHRydWU7XHJcbiAgICAgICAgICAgIGNvbnNvbGUud2FybignWW91IGNhbm5vdCBoYXZlIGEgY3VzdG9tIGl0ZW0gdGVtcGxhdGUgd2l0aCBzaW5nbGUgc2VsZWN0aW9uLicpO1xyXG4gICAgICAgIH1cclxuICAgICAgICB0aGlzLmVtaXRTZWFyY2hFdmVudCgpO1xyXG4gICAgICAgIHRoaXMuX2RlYm91bmNlclxyXG4gICAgICAgICAgICAucGlwZShcclxuICAgICAgICAgICAgICAgIGRlYm91bmNlVGltZSh0aGlzLmRlYm91bmNlTXMpLFxyXG4gICAgICAgICAgICAgICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKVxyXG4gICAgICAgICAgICApXHJcbiAgICAgICAgICAgIC5zdWJzY3JpYmUoKHZhbHVlOiBzdHJpbmcpID0+IHRoaXMuZW1pdFNlYXJjaEV2ZW50KHZhbHVlKSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uSW5wdXRDbGljaygpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNob3dSZXN1bHRzID0gdHJ1ZTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25JbnB1dENsaWNrT3V0c2lkZSgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNob3dSZXN1bHRzID0gZmFsc2U7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uSW5wdXRLZXlVcChldmVudDogYW55KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5fZGVib3VuY2VyLm5leHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uTGlzdEl0ZW1TZWxlY3RlZChpdGVtOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLm9uSXRlbVNlbGVjdGVkLmVtaXQoaXRlbSk7XHJcbiAgICAgICAgaWYgKHRoaXMubXVsdGlwbGUpIHtcclxuICAgICAgICAgICAgdGhpcy5zZWxlY3RlZEl0ZW1zLnB1c2goaXRlbSk7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy52YWx1ZSA9IGl0ZW07XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyByZW1vdmVTZWxlY3RlZEl0ZW0oaXRlbTogYW55KTogdm9pZCB7XHJcbiAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLnNlbGVjdGVkSXRlbXMuaW5kZXhPZihpdGVtKTtcclxuICAgICAgICBpZiAoaW5kZXggPiAtMSkge1xyXG4gICAgICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbXMuc3BsaWNlKGluZGV4LCAxKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBlbWl0U2VhcmNoRXZlbnQoc2VhcmNoVGVybTogc3RyaW5nIHwgdW5kZWZpbmVkID0gdW5kZWZpbmVkKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5vblNlYXJjaC5lbWl0KHNlYXJjaFRlcm0pO1xyXG4gICAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb21ib2JveC13cmFwcGVyXCI+XHJcbiAgICA8Zm9ybSBhdXRvY29tcGxldGU9XCJvZmZcIlxyXG4gICAgICAgICAgW2lkXT1cImlkICsgJy1mb3JtJ1wiPlxyXG4gICAgICAgIDxpbnB1dCBbaWRdPVwiaWRcIlxyXG4gICAgICAgICAgICAgICB0eXBlPVwidGV4dFwiXHJcbiAgICAgICAgICAgICAgIChjbGljayk9XCJvbklucHV0Q2xpY2soKVwiXHJcbiAgICAgICAgICAgICAgIChjbGlja091dHNpZGUpPVwib25JbnB1dENsaWNrT3V0c2lkZSgpXCJcclxuICAgICAgICAgICAgICAgKGtleXVwKT1cIm9uSW5wdXRLZXlVcCgkZXZlbnQpXCJcclxuICAgICAgICAgICAgICAgY2xhc3M9XCJjb21ib2JveC1pbnB1dFwiXHJcbiAgICAgICAgICAgICAgIHJvbGU9XCJjb21ib2JveFwiXHJcbiAgICAgICAgICAgICAgIGFyaWEtY29udHJvbHM9XCJvcHRpb25zXCJcclxuICAgICAgICAgICAgICAgYXJpYS1leHBhbmRlZD1cImZhbHNlXCJcclxuICAgICAgICAgICAgICAgYXV0b2NvbXBsZXRlPVwib2ZmXCJcclxuICAgICAgICAgICAgICAgbGlzdD1cImF1dG9jb21wbGV0ZVwiXHJcbiAgICAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZSB8fCAnJ1wiXHJcbiAgICAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlciB8fCAnJ1wiPlxyXG4gICAgPC9mb3JtPlxyXG4gICAgPGRpdiBjbGFzcz1cImNvbWJvYm94LWljb25zXCI+XHJcbiAgICAgICAgPHN2ZyAqbmdJZj1cIiFidXN5XCJcclxuICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxyXG4gICAgICAgICAgICAgY2xhc3M9XCJoLTYgdy02IHRleHQtZ3JheS00MDBcIlxyXG4gICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxyXG4gICAgICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiXHJcbiAgICAgICAgICAgICBzdHJva2U9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICAgc3Ryb2tlLXdpZHRoPVwiMlwiPlxyXG4gICAgICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCJcclxuICAgICAgICAgICAgICAgICAgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIlxyXG4gICAgICAgICAgICAgICAgICBkPVwiTTIxIDIxbC02LTZtMi01YTcgNyAwIDExLTE0IDAgNyA3IDAgMDExNCAwelwiIC8+XHJcbiAgICAgICAgPC9zdmc+XHJcbiAgICAgICAgPHN2ZyAqbmdJZj1cImJ1c3lcIlxyXG4gICAgICAgICAgICAgY2xhc3M9XCJhbmltYXRlLXNwaW4gaC02IHctNiB0ZXh0LWdyYXktNDAwXCJcclxuICAgICAgICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxyXG4gICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxyXG4gICAgICAgICAgICAgdmlld0JveD1cIjAgMCAyNCAyNFwiPlxyXG4gICAgICAgICAgICA8Y2lyY2xlIGNsYXNzPVwib3BhY2l0eS0yNVwiXHJcbiAgICAgICAgICAgICAgICAgICAgY3g9XCIxMlwiXHJcbiAgICAgICAgICAgICAgICAgICAgY3k9XCIxMlwiXHJcbiAgICAgICAgICAgICAgICAgICAgcj1cIjEwXCJcclxuICAgICAgICAgICAgICAgICAgICBzdHJva2U9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZS13aWR0aD1cIjRcIj5cclxuICAgICAgICAgICAgPC9jaXJjbGU+XHJcbiAgICAgICAgICAgIDxwYXRoIGNsYXNzPVwib3BhY2l0eS03NVwiXHJcbiAgICAgICAgICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICAgICAgICBkPVwiTTQgMTJhOCA4IDAgMDE4LThWMEM1LjM3MyAwIDAgNS4zNzMgMCAxMmg0em0yIDUuMjkxQTcuOTYyIDcuOTYyIDAgMDE0IDEySDBjMCAzLjA0MiAxLjEzNSA1LjgyNCAzIDcuOTM4bDMtMi42NDd6XCI+PC9wYXRoPlxyXG4gICAgICAgIDwvc3ZnPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8dWwgW2lkXT1cImlkICsgJy1yZXN1bHRzJ1wiXHJcbiAgICAgICAgKm5nSWY9XCJzaG93UmVzdWx0c1wiXHJcbiAgICAgICAgY2xhc3M9XCJjb21ib2JveC1yZXN1bHRzXCJcclxuICAgICAgICByb2xlPVwibGlzdGJveFwiPlxyXG4gICAgICAgIDxsaSAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGkgPSBpbmRleDtcIlxyXG4gICAgICAgICAgICBbaWRdPVwiJ29wdGlvbi0nKyBpXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uTGlzdEl0ZW1TZWxlY3RlZChpdGVtKVwiXHJcbiAgICAgICAgICAgIHJvbGU9XCJvcHRpb25cIlxyXG4gICAgICAgICAgICB0YWJpbmRleD1cIi0xXCI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiaXRlbVRlbXBsYXRlIHx8IGRlZmF1bHRJdGVtVGVtcGxhdGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogaXRlbSB9XCI+XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvbGk+XHJcbiAgICA8L3VsPlxyXG48L2Rpdj5cclxuPHVsICpuZ0lmPVwic2VsZWN0ZWRJdGVtcy5sZW5ndGggPiAwXCJcclxuICAgIHJvbGU9XCJsaXN0XCJcclxuICAgIGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMVwiPlxyXG4gICAgPGxpICpuZ0Zvcj1cImxldCBpdGVtIG9mIHNlbGVjdGVkSXRlbXM7IGxldCBpID0gaW5kZXg7XCJcclxuICAgICAgICBjbGFzcz1cIm10LTNcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInNlbGVjdGVkSXRlbVRlbXBsYXRlIHx8IGRlZmF1bHRTZWxlY3RlZEl0ZW1UZW1wbGF0ZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICBbbmdUZW1wbGF0ZU91dGxldENvbnRleHRdPVwieyAkaW1wbGljaXQ6IGl0ZW0gfVwiPlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9saT5cclxuPC91bD5cclxuPG5nLXRlbXBsYXRlICNkZWZhdWx0SXRlbVRlbXBsYXRlXHJcbiAgICAgICAgICAgICBsZXQtaXRlbT5cclxuICAgIDxzcGFuIGNsYXNzPVwiY29tYm9ib3gtZGVmYXVsdC1pdGVtLXRlbXBsYXRlXCI+e3sgaXRlbSB9fTwvc3Bhbj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuPG5nLXRlbXBsYXRlICNkZWZhdWx0U2VsZWN0ZWRJdGVtVGVtcGxhdGVcclxuICAgICAgICAgICAgIGxldC1pdGVtPlxyXG4gICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTFcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29tYm9ib3gtc2VsZWN0ZWQtaXRlbS13cmFwcGVyXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4LTEgbWluLXctMFwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZvY3VzOm91dGxpbmUtbm9uZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiYWJzb2x1dGVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgICAgICAgICA8cCBjbGFzcz1cInRleHQtc20gZm9udC1tZWRpdW0gdGV4dC1ncmF5LTkwMFwiPnt7IGl0ZW0gfX08L3A+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJtbC00IGZsZXgtc2hyaW5rLTAgZmxleFwiPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cInJlbW92ZVNlbGVjdGVkSXRlbShpdGVtKVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiY29tYm9ib3gtc2VsZWN0ZWQtaXRlbS1yZW1vdmUtYnRuXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzci1vbmx5XCI+Q2xvc2U8L3NwYW4+XHJcbiAgICAgICAgICAgICAgICAgICAgPHN2ZyBjbGFzcz1cImgtNSB3LTVcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICB2aWV3Qm94PVwiMCAwIDIwIDIwXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGZpbGwtcnVsZT1cImV2ZW5vZGRcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkPVwiTTQuMjkzIDQuMjkzYTEgMSAwIDAxMS40MTQgMEwxMCA4LjU4Nmw0LjI5My00LjI5M2ExIDEgMCAxMTEuNDE0IDEuNDE0TDExLjQxNCAxMGw0LjI5MyA0LjI5M2ExIDEgMCAwMS0xLjQxNCAxLjQxNEwxMCAxMS40MTRsLTQuMjkzIDQuMjkzYTEgMSAwIDAxLTEuNDE0LTEuNDE0TDguNTg2IDEwIDQuMjkzIDUuNzA3YTEgMSAwIDAxMC0xLjQxNHpcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjbGlwLXJ1bGU9XCJldmVub2RkXCIgLz5cclxuICAgICAgICAgICAgICAgICAgICA8L3N2Zz5cclxuICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L25nLXRlbXBsYXRlPiJdfQ==
@@ -1948,14 +1948,15 @@ class ComboboxComponent {
1948
1948
  return selectedItem == null || selectedItem == undefined;
1949
1949
  };
1950
1950
  this.id = 'combobox';
1951
- this.itemTemplate = null;
1951
+ this.itemTemplate = undefined;
1952
1952
  this.selectedItemsFilter = () => true;
1953
- this.selectedItemTemplate = null;
1953
+ this.selectedItemTemplate = undefined;
1954
1954
  this.busy = false;
1955
+ this.multiple = true;
1955
1956
  this.debounceMs = 1000;
1956
1957
  this.onSearch = new EventEmitter();
1957
1958
  this.onItemSelected = new EventEmitter();
1958
- this.showOptions = false;
1959
+ this.showResults = false;
1959
1960
  this.selectedItems = [];
1960
1961
  }
1961
1962
  set items(items) {
@@ -1975,23 +1976,32 @@ class ComboboxComponent {
1975
1976
  }
1976
1977
  }
1977
1978
  ngOnInit() {
1979
+ if (this.itemTemplate && !this.multiple) {
1980
+ this.multiple = true;
1981
+ console.warn('You cannot have a custom item template with single selection.');
1982
+ }
1978
1983
  this.emitSearchEvent();
1979
1984
  this._debouncer
1980
1985
  .pipe(debounceTime(this.debounceMs), distinctUntilChanged())
1981
1986
  .subscribe((value) => this.emitSearchEvent(value));
1982
1987
  }
1983
1988
  onInputClick() {
1984
- this.showOptions = true;
1989
+ this.showResults = true;
1985
1990
  }
1986
1991
  onInputClickOutside() {
1987
- this.showOptions = false;
1992
+ this.showResults = false;
1988
1993
  }
1989
1994
  onInputKeyUp(event) {
1990
1995
  this._debouncer.next(event.currentTarget.value);
1991
1996
  }
1992
1997
  onListItemSelected(item) {
1993
1998
  this.onItemSelected.emit(item);
1994
- this.selectedItems.push(item);
1999
+ if (this.multiple) {
2000
+ this.selectedItems.push(item);
2001
+ }
2002
+ else {
2003
+ this.value = item;
2004
+ }
1995
2005
  }
1996
2006
  removeSelectedItem(item) {
1997
2007
  const index = this.selectedItems.indexOf(item);
@@ -2004,12 +2014,14 @@ class ComboboxComponent {
2004
2014
  }
2005
2015
  }
2006
2016
  ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2007
- ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"relative mt-1\">\r\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n </form>\r\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
2017
+ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ComboboxComponent, selector: "lib-combobox", inputs: { id: "id", placeholder: "placeholder", items: "items", itemTemplate: "itemTemplate", selectedItemsFilter: "selectedItemsFilter", selectedItemTemplate: "selectedItemTemplate", busy: "busy", multiple: "multiple", debounceMs: "debounceMs" }, outputs: { onSearch: "onSearch", onItemSelected: "onItemSelected" }, ngImport: i0, template: "<div class=\"combobox-wrapper\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onInputClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeSelectedItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] });
2008
2018
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ComboboxComponent, decorators: [{
2009
2019
  type: Component,
2010
- args: [{ selector: 'lib-combobox', template: "<div class=\"relative mt-1\">\r\n <form autocomplete=\"off\" [id]=\"id + '-form'\">\r\n <input [id]=\"id + '-input'\" type=\"text\" (click)=\"onInputClick()\" (clickOutside)=\"onInputClickOutside()\" (keyup)=\"onInputKeyUp($event)\"\r\n class=\"w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm\" role=\"combobox\" aria-controls=\"options\"\r\n aria-expanded=\"false\" autocomplete=\"off\" list=\"autocomplete\">\r\n </form>\r\n <div class=\"absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none\">\r\n <svg *ngIf=\"!busy\" xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\" class=\"animate-spin h-6 w-6 text-gray-400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-options'\" *ngIf=\"showOptions\" class=\"absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\" role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\" [id]=\"'option-'+ i\" (click)=\"onListItemSelected(item)\" role=\"option\" tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\" role=\"list\" class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\" class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate let-item>\r\n <span class=\"hover:bg-gray-100 relative cursor-pointer select-none py-2 pl-3 pr-3 block truncate\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\" aria-hidden=\"true\"></span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\" (click)=\"removeSelectedItem(item)\" class=\"cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
2020
+ args: [{ selector: 'lib-combobox', template: "<div class=\"combobox-wrapper\">\r\n <form autocomplete=\"off\"\r\n [id]=\"id + '-form'\">\r\n <input [id]=\"id\"\r\n type=\"text\"\r\n (click)=\"onInputClick()\"\r\n (clickOutside)=\"onInputClickOutside()\"\r\n (keyup)=\"onInputKeyUp($event)\"\r\n class=\"combobox-input\"\r\n role=\"combobox\"\r\n aria-controls=\"options\"\r\n aria-expanded=\"false\"\r\n autocomplete=\"off\"\r\n list=\"autocomplete\"\r\n [value]=\"value || ''\"\r\n [placeholder]=\"placeholder || ''\">\r\n </form>\r\n <div class=\"combobox-icons\">\r\n <svg *ngIf=\"!busy\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"h-6 w-6 text-gray-400\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" />\r\n </svg>\r\n <svg *ngIf=\"busy\"\r\n class=\"animate-spin h-6 w-6 text-gray-400\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\">\r\n <circle class=\"opacity-25\"\r\n cx=\"12\"\r\n cy=\"12\"\r\n r=\"10\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"4\">\r\n </circle>\r\n <path class=\"opacity-75\"\r\n fill=\"currentColor\"\r\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\r\n </svg>\r\n </div>\r\n <ul [id]=\"id + '-results'\"\r\n *ngIf=\"showResults\"\r\n class=\"combobox-results\"\r\n role=\"listbox\">\r\n <li *ngFor=\"let item of items; let i = index;\"\r\n [id]=\"'option-'+ i\"\r\n (click)=\"onListItemSelected(item)\"\r\n role=\"option\"\r\n tabindex=\"-1\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n</div>\r\n<ul *ngIf=\"selectedItems.length > 0\"\r\n role=\"list\"\r\n class=\"grid grid-cols-1\">\r\n <li *ngFor=\"let item of selectedItems; let i = index;\"\r\n class=\"mt-3\">\r\n <ng-container [ngTemplateOutlet]=\"selectedItemTemplate || defaultSelectedItemTemplate\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n </ng-container>\r\n </li>\r\n</ul>\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <span class=\"combobox-default-item-template\">{{ item }}</span>\r\n</ng-template>\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n <div class=\"grid grid-cols-1\">\r\n <div class=\"combobox-selected-item-wrapper\">\r\n <div class=\"flex-1 min-w-0\">\r\n <div class=\"focus:outline-none\">\r\n <span class=\"absolute\"\r\n aria-hidden=\"true\">\r\n </span>\r\n <p class=\"text-sm font-medium text-gray-900\">{{ item }}</p>\r\n </div>\r\n </div>\r\n <div class=\"ml-4 flex-shrink-0 flex\">\r\n <button type=\"button\"\r\n (click)=\"removeSelectedItem(item)\"\r\n class=\"combobox-selected-item-remove-btn\">\r\n <span class=\"sr-only\">Close</span>\r\n <svg class=\"h-5 w-5\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 20 20\"\r\n fill=\"currentColor\"\r\n aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\r\n clip-rule=\"evenodd\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>" }]
2011
2021
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
2012
2022
  type: Input
2023
+ }], placeholder: [{
2024
+ type: Input
2013
2025
  }], items: [{
2014
2026
  type: Input,
2015
2027
  args: ['items']
@@ -2021,6 +2033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
2021
2033
  type: Input
2022
2034
  }], busy: [{
2023
2035
  type: Input
2036
+ }], multiple: [{
2037
+ type: Input
2024
2038
  }], debounceMs: [{
2025
2039
  type: Input
2026
2040
  }], onSearch: [{