@colijnit/corecomponents_v12 260.1.18 → 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.
- package/bundles/colijnit-corecomponents_v12.umd.js +69 -15
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12-261.1.0.tgz +0 -0
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/filter-item/filter-item.component.js +164 -164
- package/esm2015/lib/components/input-text/input-text.component.js +28 -10
- package/esm2015/lib/components/list-of-values/list-of-values-popup.component.js +30 -4
- package/esm2015/lib/components/list-of-values/list-of-values.component.js +62 -54
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +12 -4
- package/esm2015/lib/directives/screen-configuration/screen-configuration.directive.js +1 -1
- package/fesm2015/colijnit-corecomponents_v12.js +291 -231
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/input-text/input-text.component.d.ts +3 -1
- package/lib/components/list-of-values/list-of-values-popup.component.d.ts +4 -0
- package/lib/components/list-of-values/style/_layout.scss +34 -2
- package/lib/components/list-of-values/style/_material-definition.scss +1 -1
- package/lib/style/_variables.scss +1 -1
- package/package.json +2 -2
|
@@ -6339,12 +6339,14 @@
|
|
|
6339
6339
|
enumerable: false,
|
|
6340
6340
|
configurable: true
|
|
6341
6341
|
});
|
|
6342
|
-
InputTextComponent.prototype.
|
|
6342
|
+
InputTextComponent.prototype.handleDocumentPointerUp = function (event) {
|
|
6343
6343
|
if (this._isLeftIconMouseDown) {
|
|
6344
|
-
this.
|
|
6344
|
+
this._isLeftIconMouseDown = false;
|
|
6345
|
+
this.leftIconMouseUp.emit(event);
|
|
6345
6346
|
}
|
|
6346
6347
|
if (this._isRightIconMouseDown) {
|
|
6347
|
-
this.
|
|
6348
|
+
this._isRightIconMouseDown = false;
|
|
6349
|
+
this.rightIconMouseUp.emit(event);
|
|
6348
6350
|
}
|
|
6349
6351
|
};
|
|
6350
6352
|
Object.defineProperty(InputTextComponent.prototype, "model", {
|
|
@@ -6416,11 +6418,27 @@
|
|
|
6416
6418
|
this._isRightIconMouseDown = false;
|
|
6417
6419
|
this.rightIconMouseUp.emit(event);
|
|
6418
6420
|
};
|
|
6421
|
+
InputTextComponent.prototype.handleRightIconPointerDown = function (event) {
|
|
6422
|
+
var _a;
|
|
6423
|
+
event.preventDefault();
|
|
6424
|
+
event.stopPropagation();
|
|
6425
|
+
this._isRightIconMouseDown = true;
|
|
6426
|
+
this.rightIconMouseDown.emit(event);
|
|
6427
|
+
(_a = event.target) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
|
|
6428
|
+
};
|
|
6429
|
+
InputTextComponent.prototype.handleRightIconPointerUp = function (event) {
|
|
6430
|
+
var _a;
|
|
6431
|
+
event.preventDefault();
|
|
6432
|
+
event.stopPropagation();
|
|
6433
|
+
this._isRightIconMouseDown = false;
|
|
6434
|
+
this.rightIconMouseUp.emit(event);
|
|
6435
|
+
(_a = event.target) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(event.pointerId);
|
|
6436
|
+
};
|
|
6419
6437
|
InputTextComponent.prototype.handleInputFocus = function (event) {
|
|
6420
6438
|
event.preventDefault();
|
|
6421
6439
|
event.stopPropagation();
|
|
6422
6440
|
if (this.type === 'date') {
|
|
6423
|
-
this.isFocusedOnDate = true;
|
|
6441
|
+
this.isFocusedOnDate = true;
|
|
6424
6442
|
}
|
|
6425
6443
|
if (this.selectOnFocus) {
|
|
6426
6444
|
this.input.select();
|
|
@@ -6478,7 +6496,6 @@
|
|
|
6478
6496
|
}
|
|
6479
6497
|
}
|
|
6480
6498
|
}
|
|
6481
|
-
/* old excludeCharacter function */
|
|
6482
6499
|
if (this.digitsOnly && !this.isWeekInputMode) {
|
|
6483
6500
|
var excludedKeys = this.excludePlusMinus ? ['e', '-', '+'] : ['e'];
|
|
6484
6501
|
if (excludedKeys.includes(event.key)) {
|
|
@@ -6500,7 +6517,6 @@
|
|
|
6500
6517
|
if (isNaN(weekdayOffset) || weekdayOffset < 1 || weekdayOffset > 7) {
|
|
6501
6518
|
weekdayOffset = 2;
|
|
6502
6519
|
}
|
|
6503
|
-
// Convert to JS weekday index where 0 = Sunday ... 6 = Saturday
|
|
6504
6520
|
var jsWeekdayIndex = (weekdayOffset - 1) % 7;
|
|
6505
6521
|
var jan4 = new Date(year, 0, 4);
|
|
6506
6522
|
var jan4Day = jan4.getDay();
|
|
@@ -6532,7 +6548,7 @@
|
|
|
6532
6548
|
InputTextComponent.decorators = [
|
|
6533
6549
|
{ type: i0.Component, args: [{
|
|
6534
6550
|
selector: 'co-input-text',
|
|
6535
|
-
template: "\n <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n <div class=\"input-wrapper\">\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <span class=\"input-text-formatted\" *ngIf=\"!focused && !useContent && formatPipe\"\n [class.show]=\"!focused && !useContent && formatPipe\"\n [ngClass]=\"align\"\n [textContent]=\"pipedModel\"\n (click)=\"handleDoFocus($event)\"\n ></span>\n <input [class.show]=\"focused || !formatPipe\" #input\n [class.input-input-hidden]=\"useContent\"\n [ngClass]=\"align\"\n [type]=\"isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))\"\n [placeholder]=\"type === 'date' && !isFocusedOnDate ? '' : ''\"\n [pattern]=\"type === 'date' ? pattern : undefined\"\n [ngModel]=\"model\"\n [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"handleKeyDownInput($event)\"\n (keyup)=\"keyUp.emit($event)\"\n (focusin)=\"handleInputFocus($event)\"\n (focusout)=\"handleBlur($event)\"\n >\n <ng-container *ngIf=\"useContent\">\n <div class=\"input-content-wrapper\">\n <ng-content></ng-content>\n </div>\n </ng-container>\n <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n <div class=\"required-indicator\"></div>\n </div>\n <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n [iconData]=\"rightIconData\"\n (click)=\"handleRightIconClick($event)\"
|
|
6551
|
+
template: "\n <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n <co-icon *ngIf=\"leftIcon || leftIconData\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n (click)=\"handleLeftIconClick($event)\" (mousedown)=\"handleLeftIconMouseDown($event)\"\n (mouseup)=\"handleLeftIconMouseUp($event)\"></co-icon>\n <div *ngIf=\"leftIcon || leftIconData\" class=\"spacer left-icon\"></div>\n <div class=\"input-wrapper\">\n <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n [textContent]=\"placeholder\"></label>\n <span class=\"input-text-formatted\" *ngIf=\"!focused && !useContent && formatPipe\"\n [class.show]=\"!focused && !useContent && formatPipe\"\n [ngClass]=\"align\"\n [textContent]=\"pipedModel\"\n (click)=\"handleDoFocus($event)\"\n ></span>\n <input [class.show]=\"focused || !formatPipe\" #input\n [class.input-input-hidden]=\"useContent\"\n [ngClass]=\"align\"\n [type]=\"isWeekInputMode ? 'text' : (isFocusedOnDate || (hasValue && emptyPlace)) ? 'date' : (digitsOnly ? 'number' : (type === 'date' ? 'text' : type))\"\n [placeholder]=\"type === 'date' && !isFocusedOnDate ? '' : ''\"\n [pattern]=\"type === 'date' ? pattern : undefined\"\n [ngModel]=\"model\"\n [min]=\"(type === 'number' || type === 'date') && this.min ? this.min : undefined\"\n [max]=\"(type === 'number' || type === 'date') && this.max ? this.max : undefined\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (ngModelChange)=\"modelChange.emit($event)\"\n (keydown)=\"handleKeyDownInput($event)\"\n (keyup)=\"keyUp.emit($event)\"\n (focusin)=\"handleInputFocus($event)\"\n (focusout)=\"handleBlur($event)\"\n >\n <ng-container *ngIf=\"useContent\">\n <div class=\"input-content-wrapper\">\n <ng-content></ng-content>\n </div>\n </ng-container>\n <co-icon [class.show]=\"showClearButton && hasValue && !readonly\" class=\"input-text-clear-button\"\n [icon]=\"icons.CrossSkinny\" (click)=\"clearInput($event)\"></co-icon>\n <div class=\"required-indicator\"></div>\n </div>\n <div *ngIf=\"rightIcon || rightIconData\" class=\"spacer right-icon\"></div>\n <co-icon *ngIf=\"rightIcon || rightIconData\" class=\"input-text-right-icon\" [icon]=\"rightIcon\"\n [iconData]=\"rightIconData\"\n (click)=\"handleRightIconClick($event)\"\n (pointerdown)=\"handleRightIconPointerDown($event)\"\n (pointerup)=\"handleRightIconPointerUp($event)\"\n (pointercancel)=\"handleRightIconPointerUp($event)\"></co-icon>\n </div>\n <!--\n <co-commit-buttons *ngIf=\"showSaveCancel && focused && canSaveOrCancel\"\n [committing]=\"committing\"\n [commitFinished]=\"commitFinished\"\n (commitClick)=\"commitClick($event)\"\n (cancelClick)=\"cancelClick($event)\"\n >\n </co-commit-buttons>\n -->\n ",
|
|
6536
6552
|
providers: [
|
|
6537
6553
|
OverlayService, {
|
|
6538
6554
|
provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
|
|
@@ -6591,7 +6607,7 @@
|
|
|
6591
6607
|
hasLeftIcon: [{ type: i0.HostBinding, args: ['class.has-left-icon',] }],
|
|
6592
6608
|
hasRightIcon: [{ type: i0.HostBinding, args: ['class.has-right-icon',] }],
|
|
6593
6609
|
hasOwnLabel: [{ type: i0.HostBinding, args: ['class.has-own-label',] }],
|
|
6594
|
-
|
|
6610
|
+
handleDocumentPointerUp: [{ type: i0.HostListener, args: ['document:pointerup', ['$event'],] }, { type: i0.HostListener, args: ['document:pointercancel', ['$event'],] }],
|
|
6595
6611
|
model: [{ type: i0.Input }]
|
|
6596
6612
|
};
|
|
6597
6613
|
|
|
@@ -10809,8 +10825,14 @@
|
|
|
10809
10825
|
}
|
|
10810
10826
|
else {
|
|
10811
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
|
+
}
|
|
10812
10834
|
if (index >= 0 && index < this.data.length) {
|
|
10813
|
-
this.saveRow.next(this.data[
|
|
10835
|
+
this.saveRow.next(this.data[index]);
|
|
10814
10836
|
}
|
|
10815
10837
|
}
|
|
10816
10838
|
this._newRow = false;
|
|
@@ -10835,7 +10857,7 @@
|
|
|
10835
10857
|
SimpleGridComponent.decorators = [
|
|
10836
10858
|
{ type: i0.Component, args: [{
|
|
10837
10859
|
selector: 'co-simple-grid',
|
|
10838
|
-
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 || ' '\" [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\"
|
|
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 || ' '\" [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 ",
|
|
10839
10861
|
providers: [FormMasterService],
|
|
10840
10862
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
10841
10863
|
encapsulation: i0.ViewEncapsulation.None
|
|
@@ -11699,6 +11721,8 @@
|
|
|
11699
11721
|
this.modelChange = new i0.EventEmitter();
|
|
11700
11722
|
this.closePopup = new i0.EventEmitter();
|
|
11701
11723
|
this.keyDown = new i0.EventEmitter();
|
|
11724
|
+
this.animBase = true;
|
|
11725
|
+
this.isOpen = false;
|
|
11702
11726
|
this.viewModels = [];
|
|
11703
11727
|
this.viewModelsMain = [];
|
|
11704
11728
|
this.allSelected = false;
|
|
@@ -11755,6 +11779,9 @@
|
|
|
11755
11779
|
});
|
|
11756
11780
|
ListOfValuesPopupComponent.prototype.ngOnInit = function () {
|
|
11757
11781
|
var _this = this;
|
|
11782
|
+
requestAnimationFrame(function () {
|
|
11783
|
+
_this.isOpen = true;
|
|
11784
|
+
});
|
|
11758
11785
|
if (this.model) {
|
|
11759
11786
|
if (!this.multiselect) {
|
|
11760
11787
|
this._scrollIntoView();
|
|
@@ -11894,6 +11921,22 @@
|
|
|
11894
11921
|
}
|
|
11895
11922
|
this.allSelected = !this.allSelected;
|
|
11896
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
|
+
};
|
|
11897
11940
|
ListOfValuesPopupComponent.prototype._prepareViewModelsMain = function () {
|
|
11898
11941
|
var _this = this;
|
|
11899
11942
|
this.viewModelsMain.length = 0;
|
|
@@ -11906,11 +11949,11 @@
|
|
|
11906
11949
|
this.viewModels.length = 0;
|
|
11907
11950
|
this.viewModels = this.viewModelsMain.filter(function (vm) {
|
|
11908
11951
|
return Object.values(vm.model).some(function (value) {
|
|
11909
|
-
if (!_this.searchTerm
|
|
11952
|
+
if (!_this.searchTerm) {
|
|
11910
11953
|
return true;
|
|
11911
11954
|
}
|
|
11912
11955
|
else {
|
|
11913
|
-
return value.toString().toLowerCase().includes(_this.searchTerm.toLowerCase());
|
|
11956
|
+
return value && value.toString().toLowerCase().includes(_this.searchTerm.toLowerCase());
|
|
11914
11957
|
}
|
|
11915
11958
|
});
|
|
11916
11959
|
});
|
|
@@ -11946,7 +11989,7 @@
|
|
|
11946
11989
|
ListOfValuesPopupComponent.decorators = [
|
|
11947
11990
|
{ type: i0.Component, args: [{
|
|
11948
11991
|
selector: 'co-list-of-values-popup',
|
|
11949
|
-
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 ",
|
|
11950
11993
|
encapsulation: i0.ViewEncapsulation.None
|
|
11951
11994
|
},] }
|
|
11952
11995
|
];
|
|
@@ -11971,7 +12014,9 @@
|
|
|
11971
12014
|
modelChange: [{ type: i0.Output }],
|
|
11972
12015
|
closePopup: [{ type: i0.Output }],
|
|
11973
12016
|
keyDown: [{ type: i0.Output }],
|
|
11974
|
-
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',] }]
|
|
11975
12020
|
};
|
|
11976
12021
|
|
|
11977
12022
|
var ListOfValuesComponent = /** @class */ (function (_super) {
|
|
@@ -12187,9 +12232,18 @@
|
|
|
12187
12232
|
this.detectChanges();
|
|
12188
12233
|
};
|
|
12189
12234
|
ListOfValuesComponent.prototype.closePopup = function () {
|
|
12235
|
+
var _this = this;
|
|
12190
12236
|
this.keepFocussed = false;
|
|
12191
12237
|
this.isSelectOpen = false;
|
|
12192
|
-
this.
|
|
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
|
+
}
|
|
12193
12247
|
this._lovPopupComponentRef = undefined;
|
|
12194
12248
|
this.focused = false;
|
|
12195
12249
|
};
|