@colijnit/corecomponents_v12 261.1.0 → 261.1.1

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.
@@ -6438,7 +6438,7 @@
6438
6438
  event.preventDefault();
6439
6439
  event.stopPropagation();
6440
6440
  if (this.type === 'date') {
6441
- this.isFocusedOnDate = true; // Switch to 'date' type when focused
6441
+ this.isFocusedOnDate = true;
6442
6442
  }
6443
6443
  if (this.selectOnFocus) {
6444
6444
  this.input.select();
@@ -6496,7 +6496,6 @@
6496
6496
  }
6497
6497
  }
6498
6498
  }
6499
- /* old excludeCharacter function */
6500
6499
  if (this.digitsOnly && !this.isWeekInputMode) {
6501
6500
  var excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
6502
6501
  if (excludedKeys.includes(event.key)) {
@@ -6518,7 +6517,6 @@
6518
6517
  if (isNaN(weekdayOffset) || weekdayOffset < 1 || weekdayOffset > 7) {
6519
6518
  weekdayOffset = 2;
6520
6519
  }
6521
- // Convert to JS weekday index where 0 = Sunday ... 6 = Saturday
6522
6520
  var jsWeekdayIndex = (weekdayOffset - 1) % 7;
6523
6521
  var jan4 = new Date(year, 0, 4);
6524
6522
  var jan4Day = jan4.getDay();
@@ -10827,8 +10825,14 @@
10827
10825
  }
10828
10826
  else {
10829
10827
  var index = -1; // existing row
10828
+ if (this.rowsPerPage) {
10829
+ index = (this.currentPage - 1) * this.rowsPerPage + this.editRowIndex;
10830
+ }
10831
+ else {
10832
+ index = this.editRowIndex;
10833
+ }
10830
10834
  if (index >= 0 && index < this.data.length) {
10831
- this.saveRow.next(this.data[this.editRowIndex]);
10835
+ this.saveRow.next(this.data[index]);
10832
10836
  }
10833
10837
  }
10834
10838
  this._newRow = false;
@@ -10853,7 +10857,7 @@
10853
10857
  SimpleGridComponent.decorators = [
10854
10858
  { type: i0.Component, args: [{
10855
10859
  selector: 'co-simple-grid',
10856
- template: "\n <co-grid-toolbar\n *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeSelectedRow()\">\n </co-grid-toolbar>\n\n <table\n id=\"simple-grid-table\"\n class=\"simple-grid-table\"\n [clickOutside]=\"editing\"\n (clickOutside)=\"handleClickOutsideRow()\">\n <colgroup>\n <col\n *ngFor=\"let column of headerColumnsCopy; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n <col\n *ngIf=\"showRowButtons\"\n [class.simple-grid-column-auto-fit]=\"true\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n >\n </colgroup>\n <thead>\n <tr>\n <th\n scope=\"col\"\n #headerCell\n class=\"simple-grid-column-header\"\n *ngFor=\"let column of headerColumnsCopy; let index = index\">\n <div\n class=\"simple-grid-column-header-wrapper\"\n [class.resizable]=\"resizable\"\n [class.selected]=\"column.isSelected\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div\n class=\"simple-grid-column-header-label\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [class.with-menu]=\"showGridSettings\"\n [class.with-sort]=\"showColumnSort\"\n [textContent]=\"column.headerText || '&nbsp;'\" [title]=\"column.headerText\"\n (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n </div>\n\n <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n <co-button\n (click)=\"sortColumn(column, column?.field)\"\n [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n </co-button>\n </div>\n\n <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"hideColumn(column)\">Hide Column</li>\n <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n </ul>\n </div>\n </ng-template>\n <div\n *ngIf=\"resizable && column.resizable\"\n class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\">\n </div>\n </div>\n </th>\n </tr>\n\n <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n <co-button\n [class.selected]=\"isSettingsMenuOpen\"\n [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n (click)=\"toggleSettingsMenu()\">\n </co-button>\n\n <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"exportToExcel()\">Export to Excel</li>\n <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n Show All Columns\n </li>\n </ul>\n </div>\n </div>\n </thead>\n <tbody\n #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <co-form class=\"simple-grid-row-form\">\n <tr\n #rowElement\n class=\"simple-grid-row\"\n [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n [class.editing]=\"rowIndex === editRowIndex\"\n *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n (visibilityChange)=\"rowVisible.next(row)\"\n (mouseenter)=\"hoveredRowIndex = rowIndex\"\n (mouseleave)=\"hoveredRowIndex = -1\"\n >\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n <co-simple-grid-cell\n [column]=\"columns[singleColumnIndex(row)]\"\n [row]=\"row\"\n [editMode]=\"false\">\n </co-simple-grid-cell>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n <co-simple-grid-cell\n [column]=\"column\"\n [row]=\"row\"\n [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n </co-simple-grid-cell>\n <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"showRowButtons\">\n <td class=\"icons-container\" [class.show-content]=\"selectedRowIndex === rowIndex || hoveredRowIndex === rowIndex\">\n <ng-container>\n <co-icon class=\"icon-item icon-edit\"\n *ngIf=\"editRowIndex !== rowIndex && inlineEdit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\"\n *ngIf=\"(editRowIndex !== rowIndex && showDelete)\"\n (click)=\"removeRow(data[rowIndex])\"></co-icon>\n </ng-container>\n <ng-container *ngIf=\"editing && inlineEdit && (selectedRowIndex === rowIndex || isNewRow) && editRowIndex === rowIndex\">\n <co-button class=\"save-button\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </ng-container>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n </co-form>\n </tbody>\n </table>\n <co-pagination-bar\n *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n [itemsPerPage]=\"rowsPerPage\"\n [currentPage]=\"currentPage\"\n [totalItems]=\"data.length\"\n [autoHide]=\"true\"\n (previousClick)=\"goToPreviousPage()\"\n (nextClick)=\"goToNextPage()\"\n (pageClick)=\"setCurrentPage($event)\">\n </co-pagination-bar>\n ",
10860
+ template: "\n <co-grid-toolbar\n *ngIf=\"showToolbar\" [class.right]=\"rightToolbar\"\n [showEdit]=\"showEdit\"\n [showAdd]=\"showAdd\"\n [showDelete]=\"showDelete\"\n [deleteEnabled]=\"selectedRowIndex > -1\"\n (addClick)=\"addNewRow()\"\n (editClick)=\"editRow($event)\"\n (saveClick)=\"validateAndSave()\"\n (cancelClick)=\"cancelEditRow()\"\n (deleteClick)=\"removeSelectedRow()\">\n </co-grid-toolbar>\n\n <table\n id=\"simple-grid-table\"\n class=\"simple-grid-table\"\n [clickOutside]=\"editing\"\n (clickOutside)=\"handleClickOutsideRow()\">\n <colgroup>\n <col\n *ngFor=\"let column of headerColumnsCopy; let index = index\"\n [class.simple-grid-column-auto-fit]=\"column.autoFit\"\n [style.width.px]=\"column.width\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n <col\n *ngIf=\"showRowButtons\"\n [class.simple-grid-column-auto-fit]=\"true\"\n [style.min-width.px]=\"MIN_COLUMN_WIDTH\">\n >\n </colgroup>\n <thead>\n <tr>\n <th\n scope=\"col\"\n #headerCell\n class=\"simple-grid-column-header\"\n *ngFor=\"let column of headerColumnsCopy; let index = index\">\n <div\n class=\"simple-grid-column-header-wrapper\"\n [class.resizable]=\"resizable\"\n [class.selected]=\"column.isSelected\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n <ng-container *ngIf=\"column.headerTemplate; else noHeaderTemplate\">\n <ng-container [ngTemplateOutlet]=\"column.headerTemplate\"></ng-container>\n </ng-container>\n <ng-template #noHeaderTemplate>\n <div\n class=\"simple-grid-column-header-label\"\n [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n [class.with-menu]=\"showGridSettings\"\n [class.with-sort]=\"showColumnSort\"\n [textContent]=\"column.headerText || '&nbsp;'\" [title]=\"column.headerText\"\n (click)=\"showColumnSort ? sortColumn(column, column.field) : toggleColumnMenu(column)\">\n </div>\n\n <div class=\"sort-column\" *ngIf=\"showColumnSort\">\n <co-button\n (click)=\"sortColumn(column, column?.field)\"\n [iconData]=\"icons.getIcon(Icons.ArrowUpArrowDown)\">\n </co-button>\n </div>\n\n <div class=\"column-menu\" *ngIf=\"column.isSelected\">\n <h3 [textContent]=\"'COLUMN_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"hideColumn(column)\">Hide Column</li>\n <li (click)=\"sortColumn(column, column.field)\">Sort Column</li>\n </ul>\n </div>\n </ng-template>\n <div\n *ngIf=\"resizable && column.resizable\"\n class=\"simple-grid-column-sizer\"\n (mousedown)=\"handleSizerMouseDown($event, column)\">\n </div>\n </div>\n </th>\n </tr>\n\n <div *ngIf=\"showGridSettings\" class=\"grid-settings\">\n <co-button\n [class.selected]=\"isSettingsMenuOpen\"\n [iconData]=\"icons.getIcon(Icons.CogWheels)\"\n (click)=\"toggleSettingsMenu()\">\n </co-button>\n\n <div class=\"settings-menu\" *ngIf=\"isSettingsMenuOpen\">\n <h3 [textContent]=\"'GRID_OPTIONS' | coreLocalize\"></h3>\n <ul>\n <li (click)=\"exportToExcel()\">Export to Excel</li>\n <li *ngIf=\"headerColumnsCopy.length !== headerColumns.length\" (click)=\"showAllColumns()\">\n Show All Columns\n </li>\n </ul>\n </div>\n </div>\n </thead>\n <tbody\n #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n class=\"simple-grid-drag-drop-list\"\n [cdkDropListDisabled]=\"!dragDropEnabled || editing\"\n [cdkDropListData]=\"data\"\n [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n (cdkDropListDropped)=\"handleDrop($event)\">\n <co-form class=\"simple-grid-row-form\">\n <tr\n #rowElement\n class=\"simple-grid-row\"\n [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n [class.disabled]=\"getIsRowDisabled(rowIndex)\"\n [class.editing]=\"rowIndex === editRowIndex\"\n *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\"\n cdkDrag\n (click)=\"handleClickRow($event, rowIndex)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\"\n (visibilityChange)=\"rowVisible.next(row)\"\n (mouseenter)=\"hoveredRowIndex = rowIndex\"\n (mouseleave)=\"hoveredRowIndex = -1\"\n >\n <ng-container *ngIf=\"isSingleColumnRow(row)\">\n <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumnsCopy.length\">\n <co-simple-grid-cell\n [column]=\"columns[singleColumnIndex(row)]\"\n [row]=\"row\"\n [editMode]=\"false\">\n </co-simple-grid-cell>\n </td>\n </ng-container>\n <ng-container *ngIf=\"!isSingleColumnRow(row)\">\n <ng-container *ngFor=\"let column of headerColumnsCopy; let columnIndex = index\">\n <td class=\"simple-grid-column-cell\" *ngIf=\"columnIndex !== singleColumnIndex(row)\">\n <co-simple-grid-cell\n [column]=\"column\"\n [row]=\"row\"\n [editMode]=\"inlineEdit && editing && rowIndex === editRowIndex\"\n [fieldEditMode]=\"editCellIndex === columnIndex && rowIndex === editRowIndex\"\n (cellClick)=\"handleCellClick($event, row, rowIndex, columnIndex)\">\n </co-simple-grid-cell>\n <div *ngIf=\"column.resizable\" class=\"simple-grid-column-sizer-placeholder\"></div>\n </td>\n </ng-container>\n <ng-container *ngIf=\"showRowButtons\">\n <td class=\"icons-container\"\n [class.show-content]=\"selectedRowIndex === rowIndex || hoveredRowIndex === rowIndex\">\n <ng-container>\n <co-icon class=\"icon-item icon-edit\"\n *ngIf=\"editRowIndex !== rowIndex && inlineEdit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\"\n *ngIf=\"(editRowIndex !== rowIndex && showDelete)\"\n (click)=\"removeRow(data[rowIndex])\"></co-icon>\n </ng-container>\n <ng-container\n *ngIf=\"editing && inlineEdit && (selectedRowIndex === rowIndex || isNewRow) && editRowIndex === rowIndex\">\n <co-button class=\"save-button\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </ng-container>\n </td>\n </ng-container>\n </ng-container>\n </tr>\n </co-form>\n </tbody>\n </table>\n <co-pagination-bar\n *ngIf=\"data?.length > rowsPerPage\" class=\"pagination-bar\"\n [itemsPerPage]=\"rowsPerPage\"\n [currentPage]=\"currentPage\"\n [totalItems]=\"data.length\"\n [autoHide]=\"true\"\n (previousClick)=\"goToPreviousPage()\"\n (nextClick)=\"goToNextPage()\"\n (pageClick)=\"setCurrentPage($event)\">\n </co-pagination-bar>\n ",
10857
10861
  providers: [FormMasterService],
10858
10862
  changeDetection: i0.ChangeDetectionStrategy.OnPush,
10859
10863
  encapsulation: i0.ViewEncapsulation.None
@@ -11717,6 +11721,8 @@
11717
11721
  this.modelChange = new i0.EventEmitter();
11718
11722
  this.closePopup = new i0.EventEmitter();
11719
11723
  this.keyDown = new i0.EventEmitter();
11724
+ this.animBase = true;
11725
+ this.isOpen = false;
11720
11726
  this.viewModels = [];
11721
11727
  this.viewModelsMain = [];
11722
11728
  this.allSelected = false;
@@ -11773,6 +11779,9 @@
11773
11779
  });
11774
11780
  ListOfValuesPopupComponent.prototype.ngOnInit = function () {
11775
11781
  var _this = this;
11782
+ requestAnimationFrame(function () {
11783
+ _this.isOpen = true;
11784
+ });
11776
11785
  if (this.model) {
11777
11786
  if (!this.multiselect) {
11778
11787
  this._scrollIntoView();
@@ -11912,6 +11921,22 @@
11912
11921
  }
11913
11922
  this.allSelected = !this.allSelected;
11914
11923
  };
11924
+ ListOfValuesPopupComponent.prototype.startCloseAnimation = function () {
11925
+ this.isOpen = false;
11926
+ };
11927
+ ListOfValuesPopupComponent.prototype.isActive = function (vm) {
11928
+ var _a, _b;
11929
+ if (!vm)
11930
+ return false;
11931
+ if (this.multiselect) {
11932
+ return !!vm.checked;
11933
+ }
11934
+ if (!this.model)
11935
+ return false;
11936
+ var selected = (_a = this.model) === null || _a === void 0 ? void 0 : _a[this.displayField];
11937
+ var current = (_b = vm.model) === null || _b === void 0 ? void 0 : _b[this.displayField];
11938
+ return selected != null && current != null && selected === current;
11939
+ };
11915
11940
  ListOfValuesPopupComponent.prototype._prepareViewModelsMain = function () {
11916
11941
  var _this = this;
11917
11942
  this.viewModelsMain.length = 0;
@@ -11964,7 +11989,7 @@
11964
11989
  ListOfValuesPopupComponent.decorators = [
11965
11990
  { type: i0.Component, args: [{
11966
11991
  selector: 'co-list-of-values-popup',
11967
- template: "\n <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n id=\"lov-popup\"\n role=\"listbox\" [tabindex]=\"-1\"\n (clickOutside)=\"closePopup.emit($event)\">\n <co-input-search *ngIf=\"multiselect\"\n tabindex=\"-1\"\n [(model)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\"\n (keydown)=\"handleInputKeyDown($event)\"\n (modelChange)=\"filterViewModels()\"></co-input-search>\n <div class=\"row gap\" *ngIf=\"showToggleAll && multiselect\">\n <co-input-checkbox [model]=\"allSelected\" (modelChange)=\"toggleAll()\"></co-input-checkbox>\n <span [textContent]=\"'DESELECT_ALL' | coreLocalize\" (click)=\"toggleAll()\"></span>\n </div>\n <ul class=\"dropdown-list\" #dropDownList>\n <li\n #lovItem\n *ngFor=\"let viewModel of viewModels; let index = index\"\n [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n (click)=\"selectViewModel(viewModel, !multiselect)\"\n role=\"option\">\n <ng-container *ngIf=\"!multiselect\">\n <co-icon *ngIf=\"viewModel.model[optionIcon]\" class=\"input-text-left-icon\" [iconData]=\"iconCacheService.getIcon(viewModel.model[optionIcon])\">\n </co-icon>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n <ng-container *ngIf=\"multiselect\">\n <co-input-checkbox [model]=\"viewModel.checked\"\n (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n </li>\n </ul>\n </div>\n ",
11992
+ template: "\n <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\"\n id=\"lov-popup\"\n role=\"listbox\" [tabindex]=\"-1\"\n (clickOutside)=\"closePopup.emit($event)\">\n <co-input-search *ngIf=\"multiselect\"\n tabindex=\"-1\"\n [(model)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\"\n (keydown)=\"handleInputKeyDown($event)\"\n (modelChange)=\"filterViewModels()\"></co-input-search>\n <div class=\"row gap\" *ngIf=\"showToggleAll && multiselect\">\n <co-input-checkbox [model]=\"allSelected\" (modelChange)=\"toggleAll()\"></co-input-checkbox>\n <span [textContent]=\"'DESELECT_ALL' | coreLocalize\" (click)=\"toggleAll()\"></span>\n </div>\n <ul class=\"dropdown-list\" #dropDownList>\n <li\n #lovItem\n *ngFor=\"let viewModel of viewModels; let index = index\"\n [class.selected]=\"viewModel === highLightModel || viewModels.length === 1\"\n [class.active]=\"isActive(viewModel)\"\n [class.highlighted]=\"viewModel === highLightModel\"\n [attr.aria-selected]=\"isActive(viewModel)\"\n (click)=\"selectViewModel(viewModel, !multiselect)\"\n role=\"option\">\n <ng-container *ngIf=\"!multiselect\">\n <co-icon *ngIf=\"viewModel.model[optionIcon]\" class=\"input-text-left-icon\" [iconData]=\"iconCacheService.getIcon(viewModel.model[optionIcon])\">\n </co-icon>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n <ng-container *ngIf=\"multiselect\">\n <co-input-checkbox [model]=\"viewModel.checked\"\n (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n </ng-container>\n </li>\n </ul>\n </div>\n ",
11968
11993
  encapsulation: i0.ViewEncapsulation.None
11969
11994
  },] }
11970
11995
  ];
@@ -11989,7 +12014,9 @@
11989
12014
  modelChange: [{ type: i0.Output }],
11990
12015
  closePopup: [{ type: i0.Output }],
11991
12016
  keyDown: [{ type: i0.Output }],
11992
- showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-values-popup',] }]
12017
+ showClass: [{ type: i0.HostBinding, args: ['class.co-list-of-values-popup',] }],
12018
+ animBase: [{ type: i0.HostBinding, args: ['class.lov-anim',] }],
12019
+ isOpen: [{ type: i0.HostBinding, args: ['class.lov-anim--open',] }]
11993
12020
  };
11994
12021
 
11995
12022
  var ListOfValuesComponent = /** @class */ (function (_super) {
@@ -12205,9 +12232,18 @@
12205
12232
  this.detectChanges();
12206
12233
  };
12207
12234
  ListOfValuesComponent.prototype.closePopup = function () {
12235
+ var _this = this;
12208
12236
  this.keepFocussed = false;
12209
12237
  this.isSelectOpen = false;
12210
- this.overlayService.removeComponent(this._lovPopupComponentRef);
12238
+ var ref = this._lovPopupComponentRef;
12239
+ if (ref) {
12240
+ if (typeof ref.instance.startCloseAnimation === 'function') {
12241
+ ref.instance.startCloseAnimation();
12242
+ }
12243
+ setTimeout(function () {
12244
+ _this.overlayService.removeComponent(ref);
12245
+ }, 220);
12246
+ }
12211
12247
  this._lovPopupComponentRef = undefined;
12212
12248
  this.focused = false;
12213
12249
  };