@colijnit/corecomponents_v12 257.1.22 → 257.1.24

package/fesm2015/colijnit-corecomponents_v12.js

@@ -6555,9 +6555,14 @@ class CalendarTemplateComponent {
     }
     selectDate(day) {
         if (day) {
-            this.selectedDate = day;
-            this._fillDatesBetweenSelected();
-            if (this.doubleCalendar) {
+            if (!this.doubleCalendar) {
+                // Single calendar → select and close
+                this.selectedDate = day;
+                this.setAndClose();
+            }
+            else {
+                this.selectedDate = day;
+                this._fillDatesBetweenSelected();
                 this.dateSelected.emit(new Date(this.selectedDate));
             }
         }
@@ -6757,8 +6762,8 @@ CalendarTemplateComponent.decorators = [
           </div>
         </div>
         <div class="calendar-action-buttons" *ngIf="showButtons">
-          <span class="set-and-close-button" (click)="setAndClose()">Instellen</span>
-          <span class="clear-date-button" (click)="clearDate()">Wissen</span>
+          <span class="set-and-close-button" *ngIf="this.doubleCalendar" (click)="setAndClose()">Instellen</span>
+          <span class="clear-date-button" *ngIf="this.selectedDate" (click)="clearDate()">Wissen</span>
           <span class="cancel-button" (click)="closeDate()">Annuleren</span>
         </div>
       </div>
@@ -11170,12 +11175,16 @@ class ListOfValuesComponent extends BaseInputComponent {
         super(...arguments);
         this.icons = 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 = [];
     }
     set model(value) {
@@ -11210,6 +11219,38 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
         this.selectedModel = model;
     }
+    onModelChange(text) {
+        this.isLoading = true;
+        clearTimeout(this.debounceTimeout);
+        this.debounceTimeout = setTimeout(() => {
+            this.applyFilter(text);
+        }, 300);
+    }
+    applyFilter(text) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            if ((text === null || text === void 0 ? void 0 : text.length) < 3) {
+                yield new Promise(resolve => setTimeout(resolve, 300));
+                this.collection = undefined;
+            }
+            else {
+                yield new Promise(resolve => setTimeout(resolve, 300));
+                this.collection = yield this.collectionLoadFn(text);
+            }
+            this.filterText = text;
+            if (!this.collection) {
+                this.changeDetector.detectChanges();
+                this.isLoading = false;
+                return [];
+            }
+            this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(() => {
+                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();
+        });
+    }
     handleInputKeyDown(event) {
         if (event) {
             if (event.altKey && event.code === KeyboardKey.Down && !this._lovPopupComponentRef) {
@@ -11284,6 +11325,9 @@ class ListOfValuesComponent extends BaseInputComponent {
             }
             else {
                 this.selectedModel = option[this.displayField];
+                if (this.largeCollection) {
+                    this.filterText = option[this.displayField];
+                }
             }
         }
         this.model = option;
@@ -11324,6 +11368,9 @@ class ListOfValuesComponent extends BaseInputComponent {
         else {
             if (this.model) {
                 this.selectedModel = this.model[this.displayField];
+                if (this.largeCollection) {
+                    this.filterText = this.model[this.displayField];
+                }
             }
             else {
                 this.selectedModel = '';
@@ -11335,29 +11382,35 @@ ListOfValuesComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-list-of-values',
                 template: `
-        <co-input-text aria-haspopup="listbox" [attr.aria-expanded]="isSelectOpen" aria-controls="lov-popup" role="combobox"
-                       class="no-focus-line"
-                       overlayParent
-                       #parentForOverlay="overlayParent" type="text" [id]="label"
-                       [model]="multiselect ? selectedModels : selectedModel"
-                       [placeholder]="label"
-                       [readonly]="readonly"
-                       [disabled]="disabled"
-                       [required]="required"
-                       [noClickFocus]="false"
-                       [leftIconData]="leftIconData"
-                       [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
-                       [showClearButton]="true"
-                       [useContent]="multiselect"
-                       [customHeight]="multiselect"
-                       [keepFocussed]="keepFocussed"
-                       (modelChange)="handleInputModelChange($event)"
-                       (click)="openPopup()"
-                       (rightIconClick)="toggleSelect()"
-                       (keydown)="handleInputKeyDown($event)"
-                       (clearIconClick)="clearModel($event)"
-                       (blur)="checkModel()"
-        >
+        <co-input-text
+                *ngIf="!largeCollection"
+                aria-haspopup="listbox"
+                [attr.aria-expanded]="isSelectOpen"
+                aria-controls="lov-popup"
+                role="combobox"
+                class="no-focus-line"
+                overlayParent
+                #parentForOverlay="overlayParent"
+                type="text"
+                [id]="label"
+                [model]="multiselect ? selectedModels : selectedModel"
+                [placeholder]="label"
+                [readonly]="readonly"
+                [disabled]="disabled"
+                [required]="required"
+                [noClickFocus]="false"
+                [leftIconData]="leftIconData"
+                [rightIcon]="isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular"
+                [showClearButton]="true"
+                [useContent]="multiselect"
+                [customHeight]="multiselect"
+                [keepFocussed]="keepFocussed"
+                (modelChange)="handleInputModelChange($event)"
+                (click)="openPopup()"
+                (rightIconClick)="toggleSelect()"
+                (keydown)="handleInputKeyDown($event)"
+                (clearIconClick)="clearModel($event)"
+                (blur)="checkModel()">
             <ng-container *ngIf="multiselect && showChips">
                 <div class="multiselect-chips-wrapper">
                     <div class="chips" *ngFor="let chip of model">
@@ -11367,6 +11420,17 @@ ListOfValuesComponent.decorators = [
                 </div>
             </ng-container>
         </co-input-text>
+
+        <co-input-text
+                *ngIf="largeCollection"
+                [model]="filterText"
+                [placeholder]="label"
+                [required]="required"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                (modelChange)="onModelChange($event)">
+        </co-input-text>
+        <div *ngIf="isLoading" class="filter-loader"><span></span></div>
     `,
                 providers: [
                     OverlayService,
@@ -11382,8 +11446,10 @@ ListOfValuesComponent.propDecorators = {
     model: [{ type: Input }],
     parentForOverlay: [{ type: ViewChild, args: ['parentForOverlay', { read: ElementRef },] }],
     multiselect: [{ type: HostBinding, args: ['class.custom-height',] }, { type: HostBinding, args: ['class.multi-select',] }, { type: Input }],
+    largeCollection: [{ type: Input }],
     displayField: [{ type: Input }],
     collection: [{ type: Input }],
+    collectionLoadFn: [{ type: Input }],
     leftIconData: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
     label: [{ type: Input }],