@colijnit/corecomponents_v12 258.1.0 → 258.1.2

package/fesm2015/colijnit-corecomponents_v12.js

@@ -11170,12 +11170,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 +11214,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 +11320,9 @@ class ListOfValuesComponent extends BaseInputComponent {
             }
             else {
                 this.selectedModel = option[this.displayField];
+                if (this.largeCollection) {
+                    this.filterText = option[this.displayField];
+                }
             }
         }
         this.model = option;
@@ -11324,6 +11363,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,39 +11377,56 @@ 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()"
-        >
-            <ng-container *ngIf="multiselect && showChips">
-                <div class="multiselect-chips-wrapper">
-                    <div class="chips" *ngFor="let chip of model">
-                        <span class="chips-description" [textContent]="chip[displayField]"></span>
-                        <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
-                    </div>
-                </div>
-            </ng-container>
-        </co-input-text>
-    `,
+      <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">
+                      <span class="chips-description" [textContent]="chip[displayField]"></span>
+                      <co-icon class="remove-chip-icon" [icon]="icons.CrossSkinny" (click)="removeOptionFromModel(chip)"></co-icon>
+                  </div>
+              </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 +11441,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 }],
@@ -14625,36 +14686,56 @@ class HourSchedulingExpandableTemplateComponent {
         onDragStartCustom === null || onDragStartCustom === void 0 ? void 0 : onDragStartCustom.call(obj);
         event.dataTransfer.setData("text", JSON.stringify({ obj }));
     }
+    leftForObject(index, objects) {
+        if (index === 0) {
+            return 0;
+        }
+        else {
+            return index * this.widthForObject(index, objects);
+        }
+    }
+    widthForObject(index, objects) {
+        if (objects.length > 1) {
+            return 100 / objects.length;
+        }
+        if (objects.length === 1) {
+            return 100;
+        }
+    }
 }
 HourSchedulingExpandableTemplateComponent.decorators = [
     { type: Component, args: [{
                 selector: "co-hour-scheduling-expandable-template",
                 template: `
-      <div
-        *ngFor="let obj of objects"
-        [class]="'custom-scheduled-object'"
-        [class.selected]="obj['selected']"
-        [draggable]="!obj['selected']"
-        [style.--height]="obj['height'] + 'px'"
-        [style.--top]="obj['top'] + 'px'"
-        (click)="onSelectBlock(obj)"
-        (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
+        <div class="row">
+            <div
+                    *ngFor="let obj of objects"
+                    [class]="'custom-scheduled-object'"
+                    [class.selected]="obj['selected']"
+                    [draggable]="!obj['selected']"
+                    [style.--height]="obj['height'] + 'px'"
+                    [style.--top]="obj['top'] + 'px'"
+                    [style.--left]="leftForObject(objects.indexOf(obj), objects) + '%'"
+                    [style.--width]="widthForObject(objects.indexOf(obj), objects) + '%'"
+                    (click)="onSelectBlock(obj)"
+                    (dragstart)="onExpandableDragStart($event, obj, onDragStartCustom(obj) )">
 
-        <div
-          *ngIf="obj['selected']"
-          class="top-resizer"
-          (mousedown)="onResizeStart($event, obj, 'top')"></div>
-        <ng-template
-          [ngTemplateOutlet]="objectTemplate"
-          [ngTemplateOutletContext]="{
+                <div
+                        *ngIf="obj['selected']"
+                        class="top-resizer"
+                        (mousedown)="onResizeStart($event, obj, 'top')"></div>
+                <ng-template
+                        [ngTemplateOutlet]="objectTemplate"
+                        [ngTemplateOutletContext]="{
               object: obj
             }"
-        >
-        </ng-template>
-        <div *ngIf="obj['selected']"
-             class="bottom-resizer"
-             (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
-      </div>
+                >
+                </ng-template>
+                <div *ngIf="obj['selected']"
+                     class="bottom-resizer"
+                     (mousedown)="onResizeStart($event, obj, 'bottom')"></div>
+            </div>
+        </div>
     `,
                 encapsulation: ViewEncapsulation.None
             },] }