@colijnit/corecomponents_v12 260.1.0 → 260.1.2

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -2074,8 +2074,9 @@
             this._injector = _injector;
             this._componentRefs = new Map();
         }
-        OverlayService.prototype.createComponent = function (compClass, inputs, events) {
+        OverlayService.prototype.createComponent = function (compClass, inputs, events, parentRef) {
             var _this = this;
+            var _a;
             if (this._componentRefExists(compClass)) {
                 this._removeComponentRef(compClass);
             }
@@ -2102,7 +2103,8 @@
             this._appRef.attachView(componentRef.hostView);
             var domElem = componentRef.hostView
                 .rootNodes[0];
-            document.body.appendChild(domElem);
+            var container = (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.nativeElement) !== null && _a !== void 0 ? _a : document.body;
+            container.appendChild(domElem);
             componentRef.onDestroy(function () {
                 _this._appRef.detachView(componentRef.hostView);
             });
@@ -5992,7 +5994,7 @@
                 }, {
                     dateSelected: function (event) { return _this.handleDateSelected(event); },
                     clickedOutside: function () { return _this.toggleCalendar(false); } // Close when clicked outside
-                });
+                }, this.elementRef);
             }
             else {
                 this.overlayService.removeComponent(this._calendarComponentRef);
@@ -10837,7 +10839,7 @@
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    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 || '&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=\"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)\">\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  ",
+                    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 || '&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=\"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  ",
                     providers: [FormMasterService],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None
@@ -12116,7 +12118,7 @@
                 modelChange: function (value) { return _this.optionChosen(value); },
                 closePopup: function () { return _this.closePopup(); },
                 keyDown: function (event) { return _this.handleInputKeyDown(event); }
-            });
+            }, this.elementRef);
             this.keepFocussed = true;
         };
         ListOfValuesComponent.prototype.removeOptionFromModel = function (chip) {
@@ -12358,6 +12360,19 @@
                 },] }
     ];
 
+    // Values are corresponding dictionary keys in text_nl.
+    var BatchDeliveryCategory;
+    (function (BatchDeliveryCategory) {
+        BatchDeliveryCategory["Overview"] = "OVERVIEW";
+        BatchDeliveryCategory["Purchase"] = "COST_OF_SALES";
+        BatchDeliveryCategory["Allocate"] = "ALLOCATION";
+        BatchDeliveryCategory["Logistics"] = "LOGISTICS";
+        BatchDeliveryCategory["DeliveryOrder"] = "DELIVERY_ORDER";
+        BatchDeliveryCategory["Invoice"] = "INVOICE";
+        BatchDeliveryCategory["ToPick"] = "TO_PICK";
+        BatchDeliveryCategory["Picked"] = "PICKED";
+    })(BatchDeliveryCategory || (BatchDeliveryCategory = {}));
+
     var ListOfIconsComponent = /** @class */ (function () {
         function ListOfIconsComponent(iconCacheService, icons) {
             this.iconCacheService = iconCacheService;
@@ -12369,8 +12384,8 @@
             this.showSubCategories = false;
             this._collection = [];
             this.subCategories = [
-                { icon: this.iconCacheService.getIcon(this.Icon.BoxesPackingRegular), label: 'To be picked' },
-                { icon: this.iconCacheService.getIcon(this.Icon.RegularBoxesPackingCircleCheck), label: 'Picked' }
+                { icon: this.iconCacheService.getIcon(this.Icon.BoxesPackingRegular), label: BatchDeliveryCategory.ToPick },
+                { icon: this.iconCacheService.getIcon(this.Icon.RegularBoxesPackingCircleCheck), label: BatchDeliveryCategory.Picked }
             ];
         }
         Object.defineProperty(ListOfIconsComponent.prototype, "collection", {
@@ -12395,7 +12410,7 @@
             this.showMenu = !this.showMenu;
         };
         ListOfIconsComponent.prototype.selectItem = function (item) {
-            if (item.label.toUpperCase() === 'LOGISTICS' || item.label.toUpperCase() === 'LOGISTIEK') {
+            if (item.label === BatchDeliveryCategory.Logistics) {
                 this.showSubCategories = !this.showSubCategories;
                 return;
             }
@@ -12417,7 +12432,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 *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  ",
+                    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  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -12444,7 +12459,8 @@
                         common.CommonModule,
                         forms.FormsModule,
                         IconModule,
-                        ClickoutsideModule
+                        ClickoutsideModule,
+                        CoreComponentsTranslationModule
                     ],
                     declarations: [
                         ListOfIconsComponent
@@ -12845,6 +12861,8 @@
             this.isLoading = false;
             this._collection = [];
             this._mode = this.modes.Filterlist;
+            this._defaultSet = false;
+            this._collectionSubject = new rxjs.BehaviorSubject(undefined);
         }
         Object.defineProperty(FilterItemComponent.prototype, "mode", {
             get: function () {
@@ -12867,6 +12885,7 @@
                 this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
                 //reset the model in case there was no collection to set its values on when it was set.
                 this.model = this._model;
+                this._collectionSubject.next(this._collection);
             },
             enumerable: false,
             configurable: true
@@ -12901,11 +12920,20 @@
             configurable: true
         });
         FilterItemComponent.prototype.ngOnInit = function () {
+            var _this = this;
             this.setToInitialLimit();
             this.showButton = this.valueSelected();
             if (this.checkBoxToTextModel === undefined || this.checkBoxToTextModel === null) {
                 this.checkBoxToTextModel = false;
             }
+            this._collectionSubscription = this._collectionSubject.subscribe(function (collection) {
+                if (!_this._defaultSet && collection) {
+                    _this._applyDefaultFilters();
+                }
+            });
+        };
+        FilterItemComponent.prototype.ngOnDestroy = function () {
+            this._collectionSubscription.unsubscribe();
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
             this.limitTo = this.initialLimit;
@@ -13424,6 +13452,212 @@
                 this.dateRangeEnd = undefined;
             }
         };
+        FilterItemComponent.prototype._applyDefaultForFilterList = function () {
+            var _this = this;
+            var defaultString = this.defaultValue.toString();
+            var codes = defaultString.split(',').map(function (code) { return code.trim(); });
+            codes.forEach(function (code) {
+                var item = _this._collection.find(function (i) { return i.code.toString() === code; });
+                if (item) {
+                    item.checked = true;
+                }
+            });
+            this._createModelForFilterList();
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultForStringCollectionList = function () {
+            var _this = this;
+            var defaultString = this.defaultValue.toString();
+            var codes = defaultString.split(',').map(function (code) { return code.trim(); });
+            codes.forEach(function (code) {
+                var item = _this._collection.find(function (i) { return i.code.toString() === code; });
+                if (item) {
+                    item.checked = true;
+                }
+            });
+            this._createModelForStringCollectionList();
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultForSingleSelectList = function () {
+            var defaultCode = this.defaultValue.toString().trim();
+            var item = this._collection.find(function (i) { return i.code.toString() === defaultCode; });
+            if (item) {
+                item.checked = true;
+                this._createModelForSingleSelectList();
+                this.modelChange.emit(this._model);
+                this.showButton = true;
+            }
+        };
+        FilterItemComponent.prototype._applyDefaultForSelectListWithNumberOutput = function () {
+            var e_3, _g;
+            var defaultNumber = Number(this.defaultValue);
+            if (!isNaN(defaultNumber) && defaultNumber > 0) {
+                try {
+                    // Decode the number to determine which items should be checked
+                    for (var _h = __values(this._collection), _j = _h.next(); !_j.done; _j = _h.next()) {
+                        var item = _j.value;
+                        var itemCode = Number(item.code);
+                        var modValue = (defaultNumber % (2 * itemCode));
+                        item.checked = (modValue >= itemCode);
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (_j && !_j.done && (_g = _h.return)) _g.call(_h);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+                this._createModelForSelectListWithNumberOutput();
+                this.modelChange.emit(this._model);
+                this.showButton = true;
+            }
+        };
+        FilterItemComponent.prototype._applyDefaultForSlider = function () {
+            var defaultString = this.defaultValue.toString();
+            var _g = __read(defaultString.split('-').map(function (s) { return Number(s.trim()); }), 2), min = _g[0], max = _g[1];
+            if (!isNaN(min) && !isNaN(max)) {
+                this.sliderMin = min;
+                this.sliderMax = max;
+                this._createModelForSliderMode();
+                this.modelChange.emit(this._model);
+                this.showButton = true;
+            }
+        };
+        FilterItemComponent.prototype._applyDefaultForCheckboxToText = function () {
+            var defaultString = this.defaultValue.toString().toUpperCase();
+            this.checkBoxToTextModel = (defaultString === 'J' || defaultString === 'Y' || defaultString === 'TRUE');
+            if (this.mode === this.modes.CheckboxToText) {
+                this._createModelForCheckboxToText();
+            }
+            else {
+                this._createModelForCheckboxToSimpleText();
+            }
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultForCheckboxToBinary = function () {
+            var defaultValue = Number(this.defaultValue);
+            this.checkBoxToTextModel = (!isNaN(defaultValue) && defaultValue >= 1);
+            this._createModelForCheckboxToBinary();
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultForDateField = function () {
+            var defaultString = this.defaultValue.toString();
+            if (defaultString.match(/^\d{2}-\d{2}-\d{4}$/)) {
+                // dd-MM-yyyy format
+                var _g = __read(defaultString.split('-'), 3), dd = _g[0], mm = _g[1], yyyy = _g[2];
+                this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
+            }
+            else if (defaultString.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                // yyyy-MM-dd format
+                var _h = __read(defaultString.split('-'), 3), yyyy = _h[0], mm = _h[1], dd = _h[2];
+                this.dateFieldValue = new Date(+yyyy, +mm - 1, +dd);
+            }
+            else {
+                // Try parsing as standard date
+                var date = new Date(defaultString);
+                if (!isNaN(date.getTime())) {
+                    this.dateFieldValue = date;
+                }
+            }
+            if (this.dateFieldValue) {
+                this._createModelForDateField(this.dateFieldValue);
+                this.modelChange.emit(this._model);
+                this.showButton = true;
+            }
+        };
+        FilterItemComponent.prototype._applyDefaultForDateRangeField = function () {
+            var defaultString = this.defaultValue.toString();
+            if (defaultString.includes('&')) {
+                // Format: "startDate & endDate"
+                var _g = __read(defaultString.split('&').map(function (s) { return s.trim(); }), 2), startStr = _g[0], endStr = _g[1];
+                var parseDate = function (dateStr) {
+                    if (dateStr.match(/^\d{2}-\d{2}-\d{4}$/)) {
+                        var _g = __read(dateStr.split('-'), 3), dd = _g[0], mm = _g[1], yyyy = _g[2];
+                        return new Date(+yyyy, +mm - 1, +dd);
+                    }
+                    else if (dateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                        var _h = __read(dateStr.split('-'), 3), yyyy = _h[0], mm = _h[1], dd = _h[2];
+                        return new Date(+yyyy, +mm - 1, +dd);
+                    }
+                    return null;
+                };
+                var startDate = parseDate(startStr);
+                var endDate = parseDate(endStr);
+                if (startDate && endDate) {
+                    this.dateRangeStart = startDate;
+                    this.dateRangeEnd = endDate;
+                    this._createModelForDateRange([this.dateRangeStart, this.dateRangeEnd]);
+                    this.modelChange.emit(this._model);
+                    this.showButton = true;
+                }
+            }
+        };
+        FilterItemComponent.prototype._applyDefaultForTextField = function () {
+            this._model = this.defaultValue.toString();
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultForCheckbox = function () {
+            var defaultString = this.defaultValue.toString().toLowerCase();
+            this._model = (defaultString === 'true' || defaultString === '1' || defaultString === 'yes');
+            this.modelChange.emit(this._model);
+            this.showButton = true;
+        };
+        FilterItemComponent.prototype._applyDefaultFilters = function () {
+            var _a;
+            var modeWithoutCollection = this.mode === this.modes.DateField ||
+                this.mode === this.modes.DateRangeField ||
+                this.mode === this.modes.Slider;
+            var canApplyDefaults = (modeWithoutCollection || (!modeWithoutCollection && this.collection && this.collection.length > 0)) &&
+                this.defaultValue &&
+                !(((_a = this._model) === null || _a === void 0 ? void 0 : _a.length) || this._model > 0);
+            if (!canApplyDefaults) {
+                return;
+            }
+            switch (this.mode) {
+                case this.modes.Filterlist:
+                    this._applyDefaultForFilterList();
+                    break;
+                case this.modes.SelectListWithStringCollectionOutput:
+                    this._applyDefaultForStringCollectionList();
+                    break;
+                case this.modes.SingleSelectList:
+                    this._applyDefaultForSingleSelectList();
+                    break;
+                case this.modes.SelectListWithNumberOutput:
+                    this._applyDefaultForSelectListWithNumberOutput();
+                    break;
+                case this.modes.Slider:
+                case this.modes.NullableSlider:
+                    this._applyDefaultForSlider();
+                    break;
+                case this.modes.CheckboxToText:
+                case this.modes.CheckboxToSimpleText:
+                    this._applyDefaultForCheckboxToText();
+                    break;
+                case this.modes.CheckboxToBinary:
+                    this._applyDefaultForCheckboxToBinary();
+                    break;
+                case this.modes.DateField:
+                    this._applyDefaultForDateField();
+                    break;
+                case this.modes.DateRangeField:
+                    this._applyDefaultForDateRangeField();
+                    break;
+                case this.modes.TextField:
+                    this._applyDefaultForTextField();
+                    break;
+                case this.modes.Checkbox:
+                    this._applyDefaultForCheckbox();
+                    break;
+            }
+            this._defaultSet = true;
+        };
         return FilterItemComponent;
     }());
     FilterItemComponent.decorators = [