@colijnit/corecomponents_v12 259.1.11 → 259.1.13

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1418,6 +1418,8 @@
         CoreComponentsIcon["Cancel"] = "cancel";
         CoreComponentsIcon["CancelRoundFilled"] = "cancel_round_filled";
         CoreComponentsIcon["CancelRoundOpen"] = "cancel_round_open";
+        CoreComponentsIcon["CaretDownSolid"] = "caret_down_solid";
+        CoreComponentsIcon["CaretUpSolid"] = "caret_up_solid";
         CoreComponentsIcon["Cart"] = "cart";
         CoreComponentsIcon["CartOpen"] = "cart_open";
         CoreComponentsIcon["CaseManager"] = "case_manager";
@@ -1722,6 +1724,8 @@
         "cancel": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"36 35.16 30.45 35.16 14 14.84 19.55 14.84 36 35.16\" fill=\"#484f60\"/><polygon points=\"14 35.16 19.55 35.16 36 14.84 30.45 14.84 14 35.16\" fill=\"#484f60\"/></svg>",
         "cancel_round_filled": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,10A15,15,0,1,0,40,25,15,15,0,0,0,25,10Zm9.38,23.32h-5.3L25,28.27l-4.08,5.05H15.63L22.35,25l-6.72-8.32h5.29L25,21.73l4.08-5.05h5.3L27.64,25Z\" fill=\"#484f60\"/></svg>",
         "cancel_round_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,40.17a15,15,0,1,1,15-15A15,15,0,0,1,25,40.17Zm0-29a14,14,0,1,0,14,14A14,14,0,0,0,25,11.13Z\" fill=\"#484f60\"/><polygon points=\"29.41 32.25 25 26.79 20.59 32.25 17.96 32.25 23.68 25.17 17.96 18.09 20.59 18.09 25 23.54 29.41 18.09 32.04 18.09 26.32 25.17 32.04 32.25 29.41 32.25\" fill=\"#484f60\"/></svg>",
+        "caret_down_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M480 224C492.9 224 504.6 231.8 509.6 243.8C514.6 255.8 511.8 269.5 502.7 278.7L342.7 438.7C330.2 451.2 309.9 451.2 297.4 438.7L137.4 278.7C128.2 269.5 125.5 255.8 130.5 243.8C135.5 231.8 147.1 224 160 224L480 224z\"/></svg>",
+        "caret_up_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M160 416C147.1 416 135.4 408.2 130.4 396.2C125.4 384.2 128.2 370.5 137.4 361.4L297.4 201.4C309.9 188.9 330.2 188.9 342.7 201.4L502.7 361.4C511.9 370.6 514.6 384.3 509.6 396.3C504.6 408.3 492.9 416 480 416L160 416z\"/></svg>",
         "cart": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.58,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,16.58,34.84Z\" fill=\"#484f60\"/><path d=\"M31.49,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,31.49,34.84Z\" fill=\"#484f60\"/><path d=\"M13.39,31.55A1.73,1.73,0,0,0,15,32.72H32.64a1.51,1.51,0,0,0,1.43-1.2L36.6,19a.89.89,0,0,0-1-1.09L10.92,20.83a1,1,0,0,0-.87,1.28Zm19-2.05a1.52,1.52,0,0,1-1.44,1.2H16.51a1.75,1.75,0,0,1-1.57-1.17l-2.31-5.6a1,1,0,0,1,.85-1.29l19.71-2.51a.88.88,0,0,1,1,1.08Z\" fill=\"#484f60\"/><path d=\"M39,17a1.87,1.87,0,0,0-1.36,1.46l-.42,2.89c-.1.67.31,1,.9.7a2.75,2.75,0,0,0,1.33-1.7L40,18A.73.73,0,0,0,39,17Z\" fill=\"#484f60\"/></svg>",
         "cart_open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><circle cx=\"17.08\" cy=\"34.14\" r=\"1.8\" fill=\"#4d5050\"/><circle cx=\"31.99\" cy=\"34.14\" r=\"1.8\" fill=\"#4d5050\"/><path d=\"M672.39,388.55a1.73,1.73,0,0,0,1.56,1.17h17.69a1.51,1.51,0,0,0,1.43-1.2L695.6,376a.88.88,0,0,0-1-1.08l-24.68,2.93a1,1,0,0,0-.87,1.28Zm19-2.05a1.52,1.52,0,0,1-1.43,1.2h-14.4a1.75,1.75,0,0,1-1.57-1.16l-2.31-5.61a1,1,0,0,1,.86-1.28l19.71-2.51a.87.87,0,0,1,1,1.08Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/><path d=\"M698,374a1.88,1.88,0,0,0-1.37,1.46l-.42,2.9c-.1.66.31,1,.9.7a2.74,2.74,0,0,0,1.33-1.7L699,375A.74.74,0,0,0,698,374Z\" transform=\"translate(-658.5 -359.5)\" fill=\"#4d5050\"/></svg>",
         "case_manager": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M26.85,29H23.46a.89.89,0,0,0-.88.88v5.28L24,32.3c.08-.74.69-1.32,2.86-1.36H36v-1.1a.89.89,0,0,0-.88-.88H26.85Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M35.38,38.29a.88.88,0,0,1-.88.88H23.76a.88.88,0,0,1-.88-.88l2.2-5.38A.88.88,0,0,1,26,32H36.7a.88.88,0,0,1,.88.88Z\" fill=\"#484f60\" opacity=\"0.75\"/><path d=\"M20.58,35.11V29.83A2.89,2.89,0,0,1,23.46,27h7.4l1.72-1.89a4.22,4.22,0,0,0-4-3.87h-.49c-1.11,1.57-3.41,3.44-5.56,3.44S18,22.76,16.94,21.19h-.49a4.21,4.21,0,0,0-4,3.87l2.68,3c0,1.77,1.81,8.15,4,8.15h1.44Z\" fill=\"#484f60\"/><path d=\"M28.68,16.31c0,2.71-2.77,5.77-6.18,5.77S16.31,19,16.31,16.31s2.77-5.14,6.19-5.14S28.68,13.59,28.68,16.31Z\" fill=\"#484f60\"/></svg>",
@@ -5071,7 +5075,7 @@
     CoDialogWizardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-dialog-wizard',
-                    template: "\n    <div class=\"co-dialog-wizard-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\">\n        <ng-content select=\"[header]\"></ng-content>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"closeClick.emit($event)\">\n          <co-icon [icon]=\"icons.Cancel\"></co-icon>\n        </div>\n      </div>\n\n      <hr class=\"co-dialog-wizard-divider\">\n\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"co-dialog-wizard-wrapper\" [@showHideDialog]=\"animation\">\n      <div class=\"dialog-header\">\n        <ng-content select=\"[header]\"></ng-content>\n        <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"closeClick.emit($event)\">\n          <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n        </div>\n      </div>\n\n      <hr class=\"co-dialog-wizard-divider\">\n\n      <div class=\"dialog-content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideDialog', [
                             animations.state('*', animations.style({ opacity: 1 })),
@@ -9875,7 +9879,8 @@
     };
 
     var BaseSimpleGridComponent = /** @class */ (function () {
-        function BaseSimpleGridComponent() {
+        function BaseSimpleGridComponent(changeDetection) {
+            this.changeDetection = changeDetection;
             this.MIN_COLUMN_WIDTH = 50;
             this.dataChanged = new rxjs.Subject();
             this.dragDropEnabled = false;
@@ -9891,6 +9896,7 @@
             this.emitDragDrop = false;
             this.onDrop = new i0.EventEmitter();
             this.selectRow = new i0.EventEmitter();
+            this.deselectRow = new i0.EventEmitter();
             this.dblClickRow = new i0.EventEmitter();
             this.saveRow = new i0.EventEmitter();
             this.deleteRow = new i0.EventEmitter();
@@ -9984,6 +9990,11 @@
             return row.singleColumnIndex;
         };
         BaseSimpleGridComponent.prototype.prepareDataRow = function (row, index) {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    return [2 /*return*/];
+                });
+            });
         };
         BaseSimpleGridComponent.prototype._setColumns = function (columns) {
             var _a;
@@ -9991,34 +10002,66 @@
             this.columns.sort(function (a, b) { return a.order < b.order ? -1 : 1; });
         };
         BaseSimpleGridComponent.prototype._prepareData = function () {
-            if (this._prepared) {
-                return;
-            }
-            this.disabledRows.length = 0;
-            if (this.columns && this.columns.length > 0) {
-                this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
-                this.headerColumnsCopy = this.headerColumns;
-                var singleColumnIndex = -1;
-                for (var i = 0; i < this.columns.length; i++) {
-                    if (this.columns[i].singleColumn) {
-                        singleColumnIndex = i;
-                        break;
-                    }
-                }
-                // first check if there's single column data
-                if (singleColumnIndex > -1 && this.data && this.data.length > 0) {
-                    var field = this.columns[singleColumnIndex].field;
-                    for (var i = 0; i < this.data.length; i++) { // then mark row as single column row
-                        if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
-                            // bit nasty to add prop, but cool for now
-                            this.data[i].singleColumnIndex = singleColumnIndex;
-                        }
-                        this.prepareDataRow(this.data[i], i);
+            return __awaiter(this, void 0, void 0, function () {
+                var singleColumnIndex, i, field, i, j;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (this._prepared) {
+                                return [2 /*return*/];
+                            }
+                            this.disabledRows.length = 0;
+                            if (!(this.columns && this.columns.length > 0)) return [3 /*break*/, 10];
+                            this.headerColumns = this.columns.filter(function (c) { return !c.singleColumn; });
+                            this.headerColumnsCopy = this.headerColumns;
+                            singleColumnIndex = -1;
+                            for (i = 0; i < this.columns.length; i++) {
+                                if (this.columns[i].singleColumn) {
+                                    singleColumnIndex = i;
+                                    break;
+                                }
+                            }
+                            if (!(this.data && this.data.length > 0)) return [3 /*break*/, 9];
+                            if (!(singleColumnIndex > -1)) return [3 /*break*/, 5];
+                            field = this.columns[singleColumnIndex].field;
+                            i = 0;
+                            _a.label = 1;
+                        case 1:
+                            if (!(i < this.data.length)) return [3 /*break*/, 4];
+                            if (this.data[i][field] !== undefined && this.data[i][field] !== null && this.data[i][field] !== "") {
+                                // bit nasty to add prop, but cool for now
+                                this.data[i].singleColumnIndex = singleColumnIndex;
+                            }
+                            return [4 /*yield*/, this.prepareDataRow(this.data[i], i)];
+                        case 2:
+                            _a.sent();
+                            _a.label = 3;
+                        case 3:
+                            i++;
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 9];
+                        case 5:
+                            j = 0;
+                            _a.label = 6;
+                        case 6:
+                            if (!(j < this.data.length)) return [3 /*break*/, 9];
+                            return [4 /*yield*/, this.prepareDataRow(this.data[j], j)];
+                        case 7:
+                            _a.sent();
+                            _a.label = 8;
+                        case 8:
+                            j++;
+                            return [3 /*break*/, 6];
+                        case 9:
+                            this._prepared = true;
+                            _a.label = 10;
+                        case 10:
+                            this._resizeColumnsToFit();
+                            this.changeDetection.detectChanges();
+                            return [2 /*return*/];
                     }
-                }
-                this._prepared = true;
-            }
-            this._resizeColumnsToFit();
+                });
+            });
         };
         BaseSimpleGridComponent.prototype._resizeColumnsToFit = function () {
             var calculateColumns = this.columns.filter(function (c) { return !c.autoFit && !c.width; });
@@ -10039,6 +10082,9 @@
     BaseSimpleGridComponent.decorators = [
         { type: i0.Directive }
     ];
+    BaseSimpleGridComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
     BaseSimpleGridComponent.propDecorators = {
         content: [{ type: i0.ContentChildren, args: [SimpleGridColumnDirective,] }],
         data: [{ type: i0.Input }],
@@ -10053,6 +10099,7 @@
         extraColumns: [{ type: i0.Input }],
         onDrop: [{ type: i0.Output }],
         selectRow: [{ type: i0.Output }],
+        deselectRow: [{ type: i0.Output }],
         dblClickRow: [{ type: i0.Output }],
         saveRow: [{ type: i0.Output }],
         deleteRow: [{ type: i0.Output }],
@@ -10064,14 +10111,15 @@
 
     var SimpleGridComponent = /** @class */ (function (_super) {
         __extends(SimpleGridComponent, _super);
-        function SimpleGridComponent(icons, _changeDetection, _formMaster) {
-            var _this = _super.call(this) || this;
+        function SimpleGridComponent(icons, changeDetection, _formMaster) {
+            var _this = _super.call(this, changeDetection) || this;
             _this.icons = icons;
-            _this._changeDetection = _changeDetection;
+            _this.changeDetection = changeDetection;
             _this._formMaster = _formMaster;
             _this.defaultTextAlign = exports.ColumnAlign.Left;
             _this.showAdd = false;
             _this.showDelete = false;
+            _this.deselectAllowed = false;
             _this.editOnCellClick = true;
             _this.rightToolbar = false;
             _this.showGridSettings = false;
@@ -10119,7 +10167,7 @@
                 this._nextAvailableCellToEdit(!event.shiftKey, this.editCellIndex)
                     .then(function (index) {
                     _this.editCellIndex = index;
-                    _this._changeDetection.markForCheck();
+                    _this.changeDetection.markForCheck();
                 });
                 this._detectChanges();
             }
@@ -10285,6 +10333,12 @@
                     this.selectRow.next(this.data[absoluteIndex]);
                 }
             }
+            else if (this.selectedRowIndex === index && this.deselectAllowed && ((this.editing && this.validateAndSave()) || !this.editing)) {
+                this.selectedRowIndex = -1;
+                if (emit) {
+                    this.deselectRow.next();
+                }
+            }
             this._detectChanges();
         };
         SimpleGridComponent.prototype.handleDblClickRow = function (event, index, row) {
@@ -10519,7 +10573,16 @@
             return hasSelectedTrue ? items.filter(function (item) { return item.selected === true; }) : items;
         };
         SimpleGridComponent.prototype.prepareDataRow = function (row, index) {
-            this.isRowDisabled(row, index);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.isRowDisabled(row, index)];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         SimpleGridComponent.prototype._resetDblClick = function () {
             var _this = this;
@@ -10662,7 +10725,7 @@
             this._detectChanges();
         };
         SimpleGridComponent.prototype._detectChanges = function () {
-            this._changeDetection.detectChanges();
+            this.changeDetection.detectChanges();
         };
         SimpleGridComponent.prototype._resetEdit = function () {
             this._newRow = false;
@@ -10693,6 +10756,7 @@
         rowElements: [{ type: i0.ViewChildren, args: ['rowElement',] }],
         showAdd: [{ type: i0.Input }],
         showDelete: [{ type: i0.Input }],
+        deselectAllowed: [{ type: i0.Input }],
         editOnCellClick: [{ type: i0.Input }],
         rightToolbar: [{ type: i0.Input }],
         showGridSettings: [{ type: i0.Input }],
@@ -12256,7 +12320,7 @@
     ListOfIconsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-icons',
-                    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 class=\"drop-arrow\" [iconData]=\"icons.getIcon(Icon.ArrowPointDown)\"></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\">{{ item.label }}</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 class=\"co-transaction-button-bar-icon\" [iconData]=\"subCategory.icon\"></co-icon>\n          <span class=\"button-title\">{{subCategory.label}}</span>\n        </div>\n      </div>\n    </div>\n  ",
+                    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\">{{ item.label }}</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 class=\"co-transaction-button-bar-icon\" [iconData]=\"subCategory.icon\"></co-icon>\n          <span class=\"button-title\">{{subCategory.label}}</span>\n        </div>\n      </div>\n    </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];