@colijnit/corecomponents_v12 12.1.2 → 12.1.3

package/fesm2015/colijnit-corecomponents_v12.js

@@ -4387,7 +4387,7 @@ CoDialogComponent.decorators = [
                     <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
                 </div>
                 <div class="dialog-close-button" *ngIf="showCloseIcon" (click)="handleCloseDialog($event)">
-                    <co-icon [icon]="icons.Cancel"></co-icon>
+                    <co-icon [icon]="icons.CrossSkinny"></co-icon>
                 </div>
             </div>
             <div class="dialog-content" [ngClass]="customCssClass ? customCssClass : undefined">
@@ -6576,6 +6576,9 @@ class InputDateRangePickerComponent extends BaseInputDatePickerDirective {
             this.toggleCalendar();
         }
     }
+    clearDate(index) {
+        this.model[index] = undefined;
+    }
     toggleCalendar() {
         if (this.readonly) {
             return;
@@ -6643,6 +6646,7 @@ InputDateRangePickerComponent.decorators = [
                        [leftIconData]="leftIconData"
                        [placeholder]="placeholder"
                        (blur)="handleFirstDateChanged(firstDateAsString)"
+                       (clearIconClick)="clearDate(0)"
         ></co-input-text>
         <co-input-text class="no-focus-line custom-height"
                        [(model)]= "secondDateAsString"
@@ -6652,6 +6656,7 @@ InputDateRangePickerComponent.decorators = [
                        [rightIcon]="rightIcon"
                        (rightIconClick)="toggleCalendar()"
                        (blur)="handleSecondDateChanged(secondDateAsString)"
+                       (clearIconClick)="clearDate(1)"
         ></co-input-text>
       </div>
     `,
@@ -10230,7 +10235,6 @@ class ListOfValuesPopupComponent {
         this._collection = [];
         this._searchTerm = '';
         this._lovItems = [];
-        this._activeIndex = -1;
     }
     set lovItems(children) {
         this._lovItems = children.toArray();
@@ -10256,6 +10260,8 @@ class ListOfValuesPopupComponent {
     }
     set searchTerm(value) {
         this._searchTerm = value;
+        this.model = undefined;
+        this.highLightModel = undefined;
         this.filterViewModels();
     }
     get searchTerm() {
@@ -10264,7 +10270,6 @@ class ListOfValuesPopupComponent {
     ngOnInit() {
         if (this.model) {
             if (!this.multiselect) {
-                this._activeIndex = this.viewModelsMain.findIndex(v => v.model === this.model);
                 this._scrollIntoView();
             }
             else {
@@ -10277,52 +10282,87 @@ class ListOfValuesPopupComponent {
             }
         }
     }
+    handleInputKeyDown(event) {
+        if (event) {
+            switch (event.code) {
+                case KeyboardKey.Down:
+                    this.selectNextOption();
+                    return false;
+                case KeyboardKey.Up:
+                    this.selectNextOption(true);
+                    return false;
+                case KeyboardKey.SpaceBar:
+                    if (this.highLightModel) {
+                        this.selectViewModel(this.highLightModel, false);
+                        return false;
+                    }
+            }
+        }
+    }
     filterViewModels() {
         if (!this.collection) {
             return;
         }
         this._prepareViewModels();
     }
-    selectViewModel(viewModel) {
-        const idx = this.viewModelsMain.findIndex(vm => vm === viewModel);
+    selectViewModel(viewModel, closePopup = true) {
         if (!this.multiselect) {
-            this._activeIndex = idx;
-            this.selectOptionByActiveIndex();
+            this.selectModelByViewModel(viewModel, closePopup);
         }
         else {
-            this.viewModelsMain[idx].checked = !this.viewModelsMain[idx].checked;
+            const idx = this.viewModels.findIndex(vm => vm === viewModel);
+            this.viewModels[idx].checked = !this.viewModels[idx].checked;
             this.selectOptions();
         }
     }
+    selectModelByViewModel(viewModel, closePopup = true) {
+        this.model = this.viewModelsMain.find(vm => vm === viewModel).model;
+        this.modelChange.emit(this.model);
+        this._scrollIntoView();
+        if (closePopup) {
+            this.closePopup.emit();
+        }
+    }
     // for single select
-    selectOptionByActiveIndex(closePopup = true) {
-        if (this._activeIndex > -1) {
-            this.model = this.viewModelsMain[this._activeIndex].model;
-            this.modelChange.emit(this.model);
-            this._scrollIntoView();
-            if (closePopup) {
-                this.closePopup.emit();
+    selectOptionAndClosePopup() {
+        if (!this.model && this.searchTerm) {
+            const wishModel = this.viewModelsMain.find(vmm => vmm.model[this.displayField] === this.searchTerm);
+            if (wishModel) {
+                this.selectViewModel(wishModel);
+            }
+            else {
+                this.model = undefined;
+                this.modelChange.emit(this.model);
+                this.searchTerm = '';
             }
         }
+        else {
+            this.closePopup.emit();
+        }
     }
     // for multi select
     selectOptions() {
         this.model = this.viewModelsMain.filter(v => v.checked).map(m => m.model);
         this.modelChange.emit(this.model);
     }
-    selectNextOption() {
-        if (!this._lovItems || this._activeIndex >= this._lovItems.length - 1) {
-            return;
+    selectNextOption(back = false) {
+        let nextModel;
+        if (!this.highLightModel) {
+            nextModel = this.viewModels[back ? this.viewModels.length - 1 : 0];
         }
-        this._activeIndex++;
-        this.selectOptionByActiveIndex(false);
-    }
-    selectPreviousOption() {
-        if (this._activeIndex <= 0) {
-            return;
+        else {
+            const currentViewModelIdx = this.viewModels.findIndex(vm => vm === this.highLightModel);
+            if (back) {
+                nextModel = this.viewModels[currentViewModelIdx <= 0 ? this.viewModels.length - 1 : currentViewModelIdx - 1];
+            }
+            else {
+                nextModel = this.viewModels[currentViewModelIdx >= this.viewModels.length - 1 ? 0 : currentViewModelIdx + 1];
+            }
+        }
+        this.highLightModel = nextModel;
+        if (!this.multiselect) {
+            this.selectViewModel(nextModel, false);
         }
-        this._activeIndex--;
-        this.selectOptionByActiveIndex(false);
     }
     _prepareViewModelsMain() {
         this.viewModelsMain.length = 0;
@@ -10335,10 +10375,11 @@ class ListOfValuesPopupComponent {
         this.viewModels = this.viewModelsMain.filter(vm => vm.model[this.displayField] && vm.model[this.displayField].toLowerCase().includes(this.searchTerm ? this.searchTerm.toLowerCase() : ""));
     }
     _scrollIntoView() {
-        if (!this._lovItems || this._lovItems.length <= 0 || this._activeIndex < 0 || !this._lovItems[this._activeIndex] || !this.dropDownList) {
+        const activeIndex = this.viewModels.findIndex(vmm => vmm === this.highLightModel);
+        if (!this._lovItems || this._lovItems.length <= 0 || activeIndex < 0 || !this.dropDownList) {
             return;
         }
-        const activeItem = this._lovItems[this._activeIndex].nativeElement ? this._lovItems[this._activeIndex].nativeElement : undefined;
+        const activeItem = this._lovItems[activeIndex].nativeElement ? this._lovItems[activeIndex].nativeElement : undefined;
         const scrollParent = this.dropDownList.nativeElement ? this.dropDownList.nativeElement : undefined;
         this._scrollActiveItemIntoView(activeItem, scrollParent);
     }
@@ -10362,18 +10403,22 @@ ListOfValuesPopupComponent.decorators = [
     { type: Component, args: [{
                 selector: 'co-list-of-values-popup',
                 template: `
-        <div class="lov-options" #dropDownList [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass" id="lov-popup"
+        <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass" id="lov-popup"
              [tabIndex]="-1" role="listbox"
              (clickOutside)="closePopup.emit($event)">
-            <co-input-search *ngIf="multiselect" [(model)]="searchTerm" (modelChange)="filterViewModels()" [placeholder]="searchPlaceholder"></co-input-search>
-            <ul class="dropdown-list">
-                <li #lovItem *ngFor="let viewModel of viewModels; let index = index" [class.selected]="viewModel.model === model"
-                    (click)="selectViewModel(viewModel)" role="option">
+            <co-input-search *ngIf="multiselect" 
+                             [(model)]="searchTerm"
+                             [placeholder]="searchPlaceholder"
+                             (keydown)="handleInputKeyDown($event)"
+                             (modelChange)="filterViewModels()"></co-input-search>
+            <ul class="dropdown-list" #dropDownList>
+                <li #lovItem *ngFor="let viewModel of viewModels; let index = index" [class.selected]="viewModel === highLightModel"
+                    (click)="selectViewModel(viewModel, false)" role="option">
                     <ng-container *ngIf="!multiselect">
                         <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
                     </ng-container>
                     <ng-container *ngIf="multiselect">
-                        <co-input-checkbox [model]="viewModel.checked" (modelChange)="selectViewModel(viewModel)"></co-input-checkbox>
+                        <co-input-checkbox [model]="viewModel.checked" (modelChange)="selectViewModel(viewModel, false)"></co-input-checkbox>
                         <span class="lov-options-text" [textContent]="viewModel.model[displayField]"></span>
                     </ng-container>
                 </li>
@@ -10436,6 +10481,7 @@ class ListOfValuesComponent extends BaseInputComponent {
         if (this._lovPopupComponentRef) {
             this._lovPopupComponentRef.instance.searchTerm = model;
         }
+        this.selectedModel = model;
     }
     handleInputKeyDown(event) {
         if (event) {
@@ -10449,13 +10495,13 @@ class ListOfValuesComponent extends BaseInputComponent {
                         this._lovPopupComponentRef.instance.selectNextOption();
                         return false;
                     case KeyboardKey.Up:
-                        this._lovPopupComponentRef.instance.selectPreviousOption();
+                        this._lovPopupComponentRef.instance.selectNextOption(true);
                         return false;
                     case KeyboardKey.Enter:
-                        this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                         return false;
                     case KeyboardKey.Tab:
-                        this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                        this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                 }
             }
         }
@@ -10503,11 +10549,13 @@ class ListOfValuesComponent extends BaseInputComponent {
         }
     }
     optionChosen(option) {
-        if (this.multiselect) {
-            this.selectedModels = option.map(o => o[this.displayField]);
-        }
-        else {
-            this.selectedModel = option[this.displayField];
+        if (option) {
+            if (this.multiselect) {
+                this.selectedModels = option.map(o => o[this.displayField]);
+            }
+            else {
+                this.selectedModel = option[this.displayField];
+            }
         }
         this.model = option;
         this.modelChange.emit(this.model);
@@ -10518,6 +10566,18 @@ class ListOfValuesComponent extends BaseInputComponent {
         this._lovPopupComponentRef = undefined;
         this.focused = false;
     }
+    checkModel() {
+        if (!this.multiselect && this.selectedModel && this.collection) {
+            const model = this.collection.find(c => c[this.displayField] === this.selectedModel);
+            if (model) {
+                this.model = model;
+            }
+            else {
+                this.model = undefined;
+            }
+            this.modelChange.emit(this.model);
+        }
+    }
     _setSelectedModel() {
         if (this.multiselect) {
             if (this.model) {
@@ -10563,6 +10623,7 @@ ListOfValuesComponent.decorators = [
                        (rightIconClick)="toggleSelect()"
                        (keydown)="handleInputKeyDown($event)"
                        (clearIconClick)="clearModel($event)"
+                       (blur)="checkModel()"
         >
         </co-input-text>
         <ng-container *ngIf="multiselect">