@colijnit/corecomponents_v12 257.1.22 → 258.1.1

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -11687,12 +11687,16 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this.icons = exports.CoreComponentsIcon;
             _this.multiselect = false;
+            _this.largeCollection = false;
             _this.displayField = 'description';
             _this.searchDisabled = false;
             _this.showChips = true;
             _this.isSelectOpen = false;
             _this.state = 'default';
+            _this.filterText = '';
             _this.selectedModels = [];
+            _this.filteredCollection = [];
+            _this.isLoading = false;
             _this._collection = [];
             return _this;
         }
@@ -11736,6 +11740,53 @@
             }
             this.selectedModel = model;
         };
+        ListOfValuesComponent.prototype.onModelChange = function (text) {
+            var _this = this;
+            this.isLoading = true;
+            clearTimeout(this.debounceTimeout);
+            this.debounceTimeout = setTimeout(function () {
+                _this.applyFilter(text);
+            }, 300);
+        };
+        ListOfValuesComponent.prototype.applyFilter = function (text) {
+            var _a, _b, _c;
+            return __awaiter(this, void 0, void 0, function () {
+                var _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (!((text === null || text === void 0 ? void 0 : text.length) < 3)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                        case 1:
+                            _e.sent();
+                            this.collection = undefined;
+                            return [3 /*break*/, 5];
+                        case 2: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 300); })];
+                        case 3:
+                            _e.sent();
+                            _d = this;
+                            return [4 /*yield*/, this.collectionLoadFn(text)];
+                        case 4:
+                            _d.collection = _e.sent();
+                            _e.label = 5;
+                        case 5:
+                            this.filterText = text;
+                            if (!this.collection) {
+                                this.changeDetector.detectChanges();
+                                this.isLoading = false;
+                                return [2 /*return*/, []];
+                            }
+                            this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function () {
+                                return true;
+                            });
+                            (((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = this.filterText) === null || _c === void 0 ? void 0 : _c.length) > 2) ? this.openPopup() : this.closePopup();
+                            this.isLoading = false;
+                            this.changeDetector.detectChanges();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ListOfValuesComponent.prototype.handleInputKeyDown = function (event) {
             if (event) {
                 if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
@@ -11812,6 +11863,9 @@
                 }
                 else {
                     this.selectedModel = option[this.displayField];
+                    if (this.largeCollection) {
+                        this.filterText = option[this.displayField];
+                    }
                 }
             }
             this.model = option;
@@ -11854,6 +11908,9 @@
             else {
                 if (this.model) {
                     this.selectedModel = this.model[this.displayField];
+                    if (this.largeCollection) {
+                        this.filterText = this.model[this.displayField];
+                    }
                 }
                 else {
                     this.selectedModel = '';
@@ -11865,7 +11922,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"leftIconData\"\n                       [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n                       [showClearButton]=\"true\"\n                       [useContent]=\"multiselect\"\n                       [customHeight]=\"multiselect\"\n                       [keepFocussed]=\"keepFocussed\"\n                       (modelChange)=\"handleInputModelChange($event)\"\n                       (click)=\"openPopup()\"\n                       (rightIconClick)=\"toggleSelect()\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (clearIconClick)=\"clearModel($event)\"\n                       (blur)=\"checkModel()\"\n        >\n            <ng-container *ngIf=\"multiselect && showChips\">\n                <div class=\"multiselect-chips-wrapper\">\n                    <div class=\"chips\" *ngFor=\"let chip of model\">\n                        <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                        <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                    </div>\n                </div>\n            </ng-container>\n        </co-input-text>\n    ",
+                    template: "\n      <co-input-text\n              *ngIf=\"!largeCollection\"\n              aria-haspopup=\"listbox\"\n              [attr.aria-expanded]=\"isSelectOpen\"\n              aria-controls=\"lov-popup\"\n              role=\"combobox\"\n              class=\"no-focus-line\"\n              overlayParent\n              #parentForOverlay=\"overlayParent\"\n              type=\"text\"\n              [id]=\"label\"\n              [model]=\"multiselect ? selectedModels : selectedModel\"\n              [placeholder]=\"label\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [required]=\"required\"\n              [noClickFocus]=\"false\"\n              [leftIconData]=\"leftIconData\"\n              [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n              [showClearButton]=\"true\"\n              [useContent]=\"multiselect\"\n              [customHeight]=\"multiselect\"\n              [keepFocussed]=\"keepFocussed\"\n              (modelChange)=\"handleInputModelChange($event)\"\n              (click)=\"openPopup()\"\n              (rightIconClick)=\"toggleSelect()\"\n              (keydown)=\"handleInputKeyDown($event)\"\n              (clearIconClick)=\"clearModel($event)\"\n              (blur)=\"checkModel()\">\n          <ng-container *ngIf=\"multiselect && showChips\">\n              <div class=\"multiselect-chips-wrapper\">\n                  <div class=\"chips\" *ngFor=\"let chip of model\">\n                      <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                      <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                  </div>\n              </div>\n          </ng-container>\n      </co-input-text>\n      \n      <co-input-text\n              *ngIf=\"largeCollection\"\n              [model]=\"filterText\"\n              [placeholder]=\"label\"\n              [required]=\"required\"\n              [disabled]=\"disabled\"\n              [readonly]=\"readonly\"\n              (modelChange)=\"onModelChange($event)\">\n      </co-input-text>\n      <div *ngIf=\"isLoading\" class=\"filter-loader\"><span></span></div>\n  ",
                     providers: [
                         OverlayService,
                         {
@@ -11880,8 +11937,10 @@
         model: [{ type: i0.Input }],
         parentForOverlay: [{ type: i0.ViewChild, args: ['parentForOverlay', { read: i0.ElementRef },] }],
         multiselect: [{ type: i0.HostBinding, args: ['class.custom-height',] }, { type: i0.HostBinding, args: ['class.multi-select',] }, { type: i0.Input }],
+        largeCollection: [{ type: i0.Input }],
         displayField: [{ type: i0.Input }],
         collection: [{ type: i0.Input }],
+        collectionLoadFn: [{ type: i0.Input }],
         leftIconData: [{ type: i0.Input }],
         searchPlaceholder: [{ type: i0.Input }],
         label: [{ type: i0.Input }],