@colijnit/corecomponents_v12 258.1.26 → 258.1.27
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 +12 -4
- package/bundles/colijnit-corecomponents_v12.umd.js.map +1 -1
- package/colijnit-corecomponents_v12.metadata.json +1 -1
- package/esm2015/lib/components/list-of-icons/list-of-icons.component.js +26 -25
- package/esm2015/lib/components/list-of-values/list-of-values.component.js +9 -3
- package/esm2015/lib/components/simple-grid/simple-grid.component.js +9 -1
- package/fesm2015/colijnit-corecomponents_v12.js +41 -26
- package/fesm2015/colijnit-corecomponents_v12.js.map +1 -1
- package/lib/components/list-of-values/list-of-values.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -10799,7 +10799,7 @@
|
|
|
10799
10799
|
SimpleGridComponent.decorators = [
|
|
10800
10800
|
{ type: i0.Component, args: [{
|
|
10801
10801
|
selector: 'co-simple-grid',
|
|
10802
|
-
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)=\"removeRow()\">\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 </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=\"inlineEdit && showRowButtons\">\n <div class=\"icons-container\" *ngIf=\"!editing\">\n <co-icon class=\"icon-item icon-edit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n </div>\n <div class=\"icons-container\">\n <co-button class=\"save-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </div>\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 ",
|
|
10802
|
+
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)=\"removeRow()\">\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 </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=\"inlineEdit && showRowButtons\">\n <div class=\"icons-container\" *ngIf=\"!editing\">\n <co-icon class=\"icon-item icon-edit\"\n [iconData]=\"icons.getIcon(Icons.PenToSquareSolid)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"editRow($event, true, rowIndex); $event.stopPropagation()\"></co-icon>\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\"></co-icon>\n </div>\n <div class=\"icons-container\">\n <co-button class=\"save-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CheckDuotone)\"\n (click)=\"validateAndSave(); $event.stopPropagation()\"></co-button>\n <co-button class=\"close-button\"\n *ngIf=\"editing && (selectedRowIndex === rowIndex || (isNewRow && rowIndex === editRowIndex))\"\n [iconData]=\"icons.getIcon(Icons.CrossSkinny)\"\n (click)=\"cancelEditRow(); $event.stopPropagation() \"></co-button>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!(inlineEdit && showRowButtons) && showDelete\">\n <div class=\"icons-container\">\n <co-icon class=\"icon-item icon-delete\"\n [iconData]=\"icons.getIcon(Icons.TrashBin)\" *ngIf=\"hoveredRowIndex === rowIndex\"\n (click)=\"selectTheRow(rowIndex); removeRow();\">\n </co-icon>\n </div>\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 ",
|
|
10803
10803
|
providers: [FormMasterService],
|
|
10804
10804
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
10805
10805
|
encapsulation: i0.ViewEncapsulation.None
|
|
@@ -11980,6 +11980,7 @@
|
|
|
11980
11980
|
var _a, _b, _c;
|
|
11981
11981
|
return __awaiter(this, void 0, void 0, function () {
|
|
11982
11982
|
var _d;
|
|
11983
|
+
var _this = this;
|
|
11983
11984
|
return __generator(this, function (_e) {
|
|
11984
11985
|
switch (_e.label) {
|
|
11985
11986
|
case 0:
|
|
@@ -12004,8 +12005,13 @@
|
|
|
12004
12005
|
this.isLoading = false;
|
|
12005
12006
|
return [2 /*return*/, []];
|
|
12006
12007
|
}
|
|
12007
|
-
this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function () {
|
|
12008
|
-
|
|
12008
|
+
this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
|
|
12009
|
+
if (_this.collectionLoadFnProp && _this.collectionLoadFnProp.length > 0) {
|
|
12010
|
+
return item[_this.collectionLoadFnProp] && item[_this.collectionLoadFnProp].toLowerCase().includes(text.toLowerCase());
|
|
12011
|
+
}
|
|
12012
|
+
else {
|
|
12013
|
+
return true;
|
|
12014
|
+
}
|
|
12009
12015
|
});
|
|
12010
12016
|
(((_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();
|
|
12011
12017
|
this.isLoading = false;
|
|
@@ -12178,6 +12184,7 @@
|
|
|
12178
12184
|
displayField: [{ type: i0.Input }],
|
|
12179
12185
|
collection: [{ type: i0.Input }],
|
|
12180
12186
|
collectionLoadFn: [{ type: i0.Input }],
|
|
12187
|
+
collectionLoadFnProp: [{ type: i0.Input }],
|
|
12181
12188
|
leftIconData: [{ type: i0.Input }],
|
|
12182
12189
|
searchPlaceholder: [{ type: i0.Input }],
|
|
12183
12190
|
label: [{ type: i0.Input }],
|
|
@@ -12347,6 +12354,7 @@
|
|
|
12347
12354
|
},
|
|
12348
12355
|
set: function (value) {
|
|
12349
12356
|
this._collection = value || [];
|
|
12357
|
+
this.activeItem = this.collection[0];
|
|
12350
12358
|
},
|
|
12351
12359
|
enumerable: false,
|
|
12352
12360
|
configurable: true
|
|
@@ -12385,7 +12393,7 @@
|
|
|
12385
12393
|
ListOfIconsComponent.decorators = [
|
|
12386
12394
|
{ type: i0.Component, args: [{
|
|
12387
12395
|
selector: 'co-list-of-icons',
|
|
12388
|
-
template: "\n <div class=\"icon-item active\" [class.menu-opened]=\"showMenu\" (click)=\"toggleMenu()\">\n <co-icon [iconData]=\"activeItem.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n <co-icon *ngIf=\"!showMenu\" class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.CaretDownSolid)\"></co-icon>\n <co-icon *ngIf=\"showMenu\" class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.CaretUpSolid)\"></co-icon>\n </div>\n <div class=\"dropdown-menu\" *ngIf=\"showMenu\" (clickOutside)=\"onClickOutside()\">\n <div class=\"icon-item\" *ngFor=\"let item of collection\" (click)=\"selectItem(item)\"\n [class.active]=\"item === activeItem\">\n <co-icon [iconData]=\"item.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n <div class=\"label\" [textContent]=\"item.label | coreLocalize\"></div>\n </div>\n <div class=\"picking-type-wrapper\" *ngIf=\"showSubCategories\">\n <div class=\"button-wrapper\" *ngFor=\"let subCategory of subCategories\" (click)=\"handlePickingCategoryClicked(subCategory)\">\n
|
|
12396
|
+
template: "\n <div class=\"icon-item active\" [class.menu-opened]=\"showMenu\" (click)=\"toggleMenu()\">\n <co-icon [iconData]=\"activeItem.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n <co-icon *ngIf=\"!showMenu\" class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.CaretDownSolid)\"></co-icon>\n <co-icon *ngIf=\"showMenu\" class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.CaretUpSolid)\"></co-icon>\n </div>\n <div class=\"dropdown-menu\" *ngIf=\"showMenu\" (clickOutside)=\"onClickOutside()\">\n <div class=\"icon-item\" *ngFor=\"let item of collection\" (click)=\"selectItem(item)\"\n [class.active]=\"item === activeItem\">\n <co-icon [iconData]=\"item.icon\" [style.width.px]=\"iconSize\" [style.height.px]=\"iconSize\"></co-icon>\n <div class=\"label\" [textContent]=\"item.label | coreLocalize\"></div>\n </div>\n <div class=\"picking-type-wrapper\" *ngIf=\"showSubCategories\">\n <div class=\"button-wrapper\" *ngFor=\"let subCategory of subCategories\" (click)=\"handlePickingCategoryClicked(subCategory)\">\n <co-icon\n class=\"co-transaction-button-bar-icon\"\n [iconData]=\"subCategory.icon\"\n [style.width.px]=\"iconSize\"\n [style.height.px]=\"iconSize\">\n </co-icon>\n <span class=\"button-title\" [textContent]=\"subCategory.label | coreLocalize\"></span>\n </div>\n </div>\n </div>\n ",
|
|
12389
12397
|
encapsulation: i0.ViewEncapsulation.None
|
|
12390
12398
|
},] }
|
|
12391
12399
|
];
|