@colijnit/corecomponents_v12 12.2.12 → 12.2.14

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -1422,6 +1422,7 @@
         CoreComponentsIcon["CashRegisterSimple"] = "cash_register_simple";
         CoreComponentsIcon["ChangeLocation"] = "change_location";
         CoreComponentsIcon["Check"] = "check";
+        CoreComponentsIcon["CheckDuotone"] = "check_duotone";
         CoreComponentsIcon["CheckRound"] = "check_round";
         CoreComponentsIcon["CheckRoundOpen"] = "check_round_open";
         CoreComponentsIcon["CheckSimple"] = "check_simple";
@@ -1720,6 +1721,7 @@
         "cash_register_simple": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path style= \"fill: #484f60\" d=\"M288 0C305.7 0 320 14.33 320 32V96C320 113.7 305.7 128 288 128H208V160H424.1C456.6 160 483.5 183.1 488.2 214.4L510.9 364.1C511.6 368.8 512 373.6 512 378.4V448C512 483.3 483.3 512 448 512H64C28.65 512 0 483.3 0 448V378.4C0 373.6 .3622 368.8 1.083 364.1L23.76 214.4C28.5 183.1 55.39 160 87.03 160H143.1V128H63.1C46.33 128 31.1 113.7 31.1 96V32C31.1 14.33 46.33 0 63.1 0L288 0zM96 48C87.16 48 80 55.16 80 64C80 72.84 87.16 80 96 80H256C264.8 80 272 72.84 272 64C272 55.16 264.8 48 256 48H96zM80 448H432C440.8 448 448 440.8 448 432C448 423.2 440.8 416 432 416H80C71.16 416 64 423.2 64 432C64 440.8 71.16 448 80 448zM112 216C98.75 216 88 226.7 88 240C88 253.3 98.75 264 112 264C125.3 264 136 253.3 136 240C136 226.7 125.3 216 112 216zM208 264C221.3 264 232 253.3 232 240C232 226.7 221.3 216 208 216C194.7 216 184 226.7 184 240C184 253.3 194.7 264 208 264zM160 296C146.7 296 136 306.7 136 320C136 333.3 146.7 344 160 344C173.3 344 184 333.3 184 320C184 306.7 173.3 296 160 296zM304 264C317.3 264 328 253.3 328 240C328 226.7 317.3 216 304 216C290.7 216 280 226.7 280 240C280 253.3 290.7 264 304 264zM256 296C242.7 296 232 306.7 232 320C232 333.3 242.7 344 256 344C269.3 344 280 333.3 280 320C280 306.7 269.3 296 256 296zM400 264C413.3 264 424 253.3 424 240C424 226.7 413.3 216 400 216C386.7 216 376 226.7 376 240C376 253.3 386.7 264 400 264zM352 296C338.7 296 328 306.7 328 320C328 333.3 338.7 344 352 344C365.3 344 376 333.3 376 320C376 306.7 365.3 296 352 296z\"/></svg>",
         "change_location": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"16.96 25 24.27 32.31 24.27 27.76 29.09 27.76 29.09 22.23 24.27 22.23 24.27 17.69 16.96 25\" fill=\"#484f60\"/><polygon points=\"16.21 23.18 10 23.18 10 26.82 16.21 26.82 14.39 25 16.21 23.18\" fill=\"#484f60\"/><polygon points=\"10 14.77 10 18.4 20.99 18.4 24.63 14.77 10 14.77\" fill=\"#484f60\"/><polygon points=\"10 31.6 10 35.23 24.63 35.23 20.99 31.6 10 31.6\" fill=\"#484f60\"/><polygon points=\"31.35 13.84 35.45 11.47 39.55 13.83 35.45 16.2 31.35 13.84\" fill=\"#484f60\"/><polygon points=\"40 19.32 39.99 14.59 35.89 16.96 35.9 18.05 39.06 19.86 40 19.32\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"35.02 16.96 30.91 14.6 30.92 19.34 31.84 19.87 35.02 18.03 35.02 16.96\" fill=\"#484f60\" opacity=\"0.25\"/><polygon points=\"31.35 22.26 35.45 19.88 39.55 22.24 35.45 24.62 31.35 22.26\" fill=\"#484f60\"/><polygon points=\"40 27.74 39.99 23 35.89 25.38 35.9 26.46 39.06 28.28 40 27.74\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"35.02 25.38 30.91 23.02 30.92 27.75 31.84 28.29 35.02 26.45 35.02 25.38\" fill=\"#484f60\" opacity=\"0.25\"/><polygon points=\"31.35 30.67 35.45 28.3 39.55 30.66 35.45 33.03 31.35 30.67\" fill=\"#484f60\"/><polygon points=\"35.89 33.79 39.99 31.42 40 36.15 35.9 38.53 35.89 33.79\" fill=\"#484f60\" opacity=\"0.5\"/><polygon points=\"30.92 36.17 30.91 31.43 35.02 33.8 35.03 38.53 30.92 36.17\" fill=\"#484f60\" opacity=\"0.25\"/></svg>",
         "check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"16.97 22.92 20.78 28.61 29.96 13 36.16 13 20.78 37 13.84 26.9 16.97 22.92\" fill=\"#484f60\"/></svg>",
+        "check_duotone": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><defs><style>.fa-secondary{opacity:.4}</style></defs><path class=\"fa-primary\" d=\"M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z\"/></svg>",
         "check_round": "<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,10ZM23,34l-6.24-9.09,2.81-3.59L23,26.45,27.66,16h5.58Z\" fill=\"#484f60\"/></svg>",
         "check_round_open": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#2A363B\" d=\"M40.5,25.5C40.5,34,33.5,41,25,41S9.5,34,9.5,25.5S16.5,10,25,10S40.5,16.9,40.5,25.5z M10.5,25.5C10.5,33.5,17,40,25,40s14.5-6.5,14.5-14.5S33,11,25,11S10.5,17.5,10.5,25.5z\"/></g><polygon fill=\"#2A363B\" points=\"19.9,24 22.5,28 29,17.1 33.3,17.1 22.5,33.9 17.7,26.8 \"/></svg>",
         "check_simple": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon fill=\"#2A363B\" points=\"19.9,24 22.5,28 29,17.1 33.3,17.1 22.5,33.9 17.7,26.8 \"/></svg>",
@@ -2034,7 +2036,7 @@
     ValidationErrorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-validation-error",
-                    template: "\n    <div class=\"validation-error-wrapper\" [overlay]=\"parentForOverlay\">\n      <div class=\"validation-error-content\">\n        <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n          <div class=\"validation-error-message\" [textContent]=\"error | localize\"></div>\n      </div>\n    </div>\n  ",
+                    template: "\n      <div class=\"validation-error-wrapper\" [overlay]=\"parentForOverlay\">\n          <div class=\"validation-error-content\">\n              <co-icon [iconData]=\"icons.getIcon(Icons.InformationRoundOpen)\"></co-icon>\n              <div class=\"validation-error-message\" [textContent]=\"error | coreLocalize\"></div>\n          </div>\n      </div>\n  ",
                     animations: [],
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
@@ -6312,7 +6314,7 @@
     InputTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-text',
-                    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        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\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)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\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 && focused && !readonly\" class=\"input-text-clear-button\" [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\" [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\" (mouseup)=\"handleRightIconMouseUp($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  ",
+                    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        <input #input\n               [class.input-input-hidden]=\"useContent\"\n               [ngClass]=\"align\"\n               [type]=\"digitsOnly ? 'number' : type\"\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)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n               (keyup)=\"keyUp.emit($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 && focused && !readonly\" class=\"input-text-clear-button\" [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\" [iconData]=\"rightIconData\"\n               (click)=\"handleRightIconClick($event)\" (mousedown)=\"handleRightIconMouseDown($event)\" (mouseup)=\"handleRightIconMouseUp($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  ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -6405,8 +6407,8 @@
     ];
 
     // The localization service, providing peers with text translation functionality.
-    var DictionaryService = /** @class */ (function () {
-        function DictionaryService() {
+    var CoreDictionaryService = /** @class */ (function () {
+        function CoreDictionaryService() {
             // Some dictionary values have one or more '|~' texts in them, meant to be replaced with client-side given texts.
             this._placeholder = "|~";
         }
@@ -6417,7 +6419,7 @@
          * @param {string[]} replacementTexts Rest params for replacement of '|~' in returned dict value
          * @returns {string} The translated text for given dictionary key
          */
-        DictionaryService.prototype.get = function (key, upperCaseFirst) {
+        CoreDictionaryService.prototype.get = function (key, upperCaseFirst) {
             if (upperCaseFirst === void 0) { upperCaseFirst = true; }
             var replacementTexts = [];
             for (var _i = 2; _i < arguments.length; _i++) {
@@ -6432,9 +6434,9 @@
             }
             return text;
         };
-        return DictionaryService;
+        return CoreDictionaryService;
     }());
-    DictionaryService.decorators = [
+    CoreDictionaryService.decorators = [
         { type: i0.Injectable }
     ];
 
@@ -6451,14 +6453,14 @@
         { type: i0.Injectable }
     ];
     CoreComponentsTranslationService.ctorParameters = function () { return [
-        { type: DictionaryService }
+        { type: CoreDictionaryService }
     ]; };
 
-    var LocalizePipe = /** @class */ (function () {
-        function LocalizePipe(_dictionaryService) {
+    var CoreLocalizePipe = /** @class */ (function () {
+        function CoreLocalizePipe(_dictionaryService) {
             this._dictionaryService = _dictionaryService;
         }
-        LocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
+        CoreLocalizePipe.prototype.transform = function (value, upperCaseFirst, replace) {
             var _a;
             if (upperCaseFirst === void 0) { upperCaseFirst = true; }
             if (replace === void 0) { replace = []; }
@@ -6471,15 +6473,15 @@
             }
             return (_a = this._dictionaryService).get.apply(_a, __spreadArray([value, upperCaseFirst], __read(replace)));
         };
-        return LocalizePipe;
+        return CoreLocalizePipe;
     }());
-    LocalizePipe.decorators = [
+    CoreLocalizePipe.decorators = [
         { type: i0.Pipe, args: [{
-                    name: "localize"
+                    name: "coreLocalize"
                 },] }
     ];
-    LocalizePipe.ctorParameters = function () { return [
-        { type: DictionaryService }
+    CoreLocalizePipe.ctorParameters = function () { return [
+        { type: CoreDictionaryService }
     ]; };
 
     var CoreComponentsTranslationModule = /** @class */ (function () {
@@ -6498,14 +6500,14 @@
     CoreComponentsTranslationModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [
-                        LocalizePipe
+                        CoreLocalizePipe
                     ],
                     providers: [
                         CoreComponentsTranslationService,
-                        DictionaryService
+                        CoreDictionaryService
                     ],
                     exports: [
-                        LocalizePipe
+                        CoreLocalizePipe
                     ]
                 },] }
     ];
@@ -8164,7 +8166,7 @@
     InputSearchComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-search',
-                    template: "\n    <co-input-text\n      [ngClass]=\"customCssClass\"\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [leftIconData]=\"useLeftIcon && leftIconData ? leftIconData : undefined\"\n      [rightIconData]=\"useRightIcon && rightIconData ? rightIconData : undefined\"\n      [placeholder]=\"placeholder\"\n      [customHeight]=\"true\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n      (leftIconClick)=\"leftIconClick.emit($event)\"\n      (rightIconClick)=\"rightIconClick.emit($event)\"\n    ></co-input-text>\n  ",
+                    template: "\n    <co-input-text\n      [ngClass]=\"customCssClass\"\n      [model]=\"model\"\n      [leftIcon]=\"useLeftIcon ? searchIcon : null\"\n      [rightIcon]=\"useRightIcon ? searchIcon : null\"\n      [leftIconData]=\"useLeftIcon && leftIconData ? leftIconData : undefined\"\n      [rightIconData]=\"useRightIcon && rightIconData ? rightIconData : undefined\"\n      [placeholder]=\"placeholder\"\n      [customHeight]=\"true\"\n      [showPlaceholderOnFocus]=\"false\"\n      (modelChange)=\"modelChange.emit($event)\"\n      (leftIconClick)=\"leftIconClick.emit($event)\"\n      (rightIconClick)=\"rightIconClick.emit($event)\"\n      (keyup)=\"keyUp.emit($event)\"\n    ></co-input-text>\n  ",
                     providers: [
                         OverlayService
                     ],
@@ -9899,6 +9901,9 @@
                 this.validateAndSave();
             }
         };
+        SimpleGridComponent.prototype.handleClickOutsideRow = function () {
+            this.validateAndSave();
+        };
         SimpleGridComponent.prototype.isRowDisabled = function (row) {
             if (this.rowDisabledFn && (typeof this.rowDisabledFn === 'function')) {
                 return this.rowDisabledFn.call(this, row);
@@ -9916,26 +9921,34 @@
             return !!singleColumn;
         };
         SimpleGridComponent.prototype.addNewRow = function () {
-            var _this = this;
-            if (this.inlineEdit) {
-                var valid = this.validateAndSave();
-                this._detectChanges();
-                if (valid) {
-                    this.data.push({});
-                    this._newRow = true;
-                    this.editRowIndex = this.data.length - 1;
-                    this._nextAvailableCellToEdit(true).then(function (index) {
-                        _this.editCellIndex = index;
-                        _this._detectChanges();
-                    });
-                    this.editing = true;
-                    this.rowToEdit = this.data[this.data.length - 1];
-                    this._detectChanges();
-                }
-            }
-            else {
-                this.addRow.next();
-            }
+            return __awaiter(this, void 0, void 0, function () {
+                var valid, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this.inlineEdit) return [3 /*break*/, 3];
+                            valid = this.validateAndSave();
+                            if (!valid) return [3 /*break*/, 2];
+                            this.data.push({});
+                            this._detectChanges();
+                            this._newRow = true;
+                            this.editing = true;
+                            this.editRowIndex = this.data.length - 1;
+                            this.rowToEdit = this.data[this.editRowIndex];
+                            _a = this;
+                            return [4 /*yield*/, this._nextAvailableCellToEdit(true)];
+                        case 1:
+                            _a.editCellIndex = _b.sent();
+                            this._detectChanges();
+                            _b.label = 2;
+                        case 2: return [3 /*break*/, 4];
+                        case 3:
+                            this.addRow.next();
+                            _b.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
         };
         SimpleGridComponent.prototype.validateAndSave = function (stopediting) {
             if (stopediting === void 0) { stopediting = true; }
@@ -9960,8 +9973,7 @@
             else {
                 this.data[this.editRowIndex] = this.rowToEdit;
             }
-            this._newRow = false;
-            this.editing = false;
+            this._resetEdit();
             this._detectChanges();
         };
         SimpleGridComponent.prototype.removeRow = function () {
@@ -9982,7 +9994,7 @@
         };
         SimpleGridComponent.prototype.selectTheRow = function (index, emit) {
             if (emit === void 0) { emit = true; }
-            if (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing)) {
+            if (this.selectedRowIndex === -1 || (this.selectedRowIndex !== index && ((this.editing && this.validateAndSave()) || !this.editing))) {
                 this.selectedRowIndex = index;
             }
             if (emit) {
@@ -10003,18 +10015,31 @@
             }
             this._resetDblClick();
         };
-        SimpleGridComponent.prototype.editRow = function (event) {
+        SimpleGridComponent.prototype.editRow = function (event, selectCell) {
             var _this = this;
+            if (selectCell === void 0) { selectCell = true; }
             this.editRowIndex = this.selectedRowIndex;
             this.rowToEdit = this.data[this.editRowIndex];
             this.editing = true;
-            this._nextAvailableCellToEdit(true).then(function (index) {
-                _this.editCellIndex = index;
-            });
+            if (selectCell) {
+                this._nextAvailableCellToEdit(true).then(function (index) {
+                    _this.editCellIndex = index;
+                });
+            }
             this._detectChanges();
         };
-        SimpleGridComponent.prototype.handleCellClick = function (index) {
-            this.editCellIndex = index;
+        SimpleGridComponent.prototype.handleCellClick = function (event, row, rowIndex, cellIndex) {
+            if (this.isRowDisabled(row)) {
+                this.selectedRowIndex = -1;
+                return;
+            }
+            this.selectTheRow(rowIndex, false);
+            if (this.inlineEdit) {
+                this.editRowIndex = rowIndex;
+                this.editCellIndex = cellIndex;
+                this.editing = true;
+                this.editRow(event, false);
+            }
             this._detectChanges();
         };
         SimpleGridComponent.prototype._resetDblClick = function () {
@@ -10136,10 +10161,7 @@
             }
             this._newRow = false;
             if (stopediting) {
-                this.editRowIndex = -1;
-                this.editCellIndex = -1;
-                this.editing = false;
-                this.rowToEdit = undefined;
+                this._resetEdit();
             }
             this._detectChanges();
         };
@@ -10155,12 +10177,20 @@
         SimpleGridComponent.prototype._detectChanges = function () {
             this._changeDetection.detectChanges();
         };
+        SimpleGridComponent.prototype._resetEdit = function () {
+            this._newRow = false;
+            this.selectedRowIndex = -1;
+            this.editRowIndex = -1;
+            this.editCellIndex = -1;
+            this.editing = false;
+            this.rowToEdit = undefined;
+        };
         return SimpleGridComponent;
     }(BaseSimpleGridComponent));
     SimpleGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-simple-grid',
-                    template: "\n    <co-grid-toolbar *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    <table class=\"simple-grid-table\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; 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 scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\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 class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #dropList cdkDropList cdkDropListOrientation=\"vertical\"\n             class=\"simple-grid-drag-drop-list\"\n             [cdkDropListDisabled]=\"!dragDropEnabled\"\n             [cdkDropListData]=\"data\"\n             [cdkDropListEnterPredicate]=\"handleCanDragDrop\"\n             (cdkDropListDropped)=\"handleDrop($event)\">\n        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"isRowDisabled(row)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n          <co-form-test class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.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 headerColumns; 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\"\n                    (cellClick)=\"handleCellClick(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>\n          </co-form-test>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *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 *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    <table class=\"simple-grid-table\" [clickOutside]=\"editing\" (clickOutside)=\"handleClickOutsideRow()\">\n      <colgroup>\n        <col *ngFor=\"let column of headerColumns; 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 scope=\"col\" #headerCell class=\"simple-grid-column-header\" *ngFor=\"let column of headerColumns; let index = index\">\n          <div class=\"simple-grid-column-header-wrapper\" [class.resizable]=\"resizable\"\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 class=\"simple-grid-column-header-label\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\"\n                   [textContent]=\"column.headerText || '&nbsp;'\"\n              ></div>\n            </ng-template>\n            <div *ngIf=\"resizable && column.resizable\" class=\"simple-grid-column-sizer\"\n                 (mousedown)=\"handleSizerMouseDown($event, column)\"\n            ></div>\n          </div>\n        </th>\n      </tr>\n      </thead>\n      <tbody #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        <tr class=\"simple-grid-row\" [class.selected]=\"rowIndex === selectedRowIndex && !editing\" observeVisibility\n            [class.disabled]=\"isRowDisabled(row)\"\n          [class.editing]=\"rowIndex === editRowIndex\" *ngFor=\"let row of (!!rowsPerPage ? (data | paginate: {itemsPerPage: rowsPerPage, currentPage: currentPage}) : data); last as last; let rowIndex = index\" cdkDrag\n          (click)=\"handleClickRow($event, rowIndex, row)\" (dblclick)=\"handleDblClickRow($event, rowIndex, row)\" (visibilityChange)=\"rowVisible.next(row)\">\n          <co-form-test class=\"simple-grid-row-form\">\n            <ng-container *ngIf=\"isSingleColumnRow(row)\">\n              <td class=\"simple-grid-single-column-cell\" [attr.colspan]=\"headerColumns.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 headerColumns; 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>\n          </co-form-test>\n        </tr>\n      </tbody>\n    </table>\n    <co-pagination-bar *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
                     ],
@@ -10670,11 +10700,21 @@
         function SimpleGridCellComponent(_changeDetector) {
             this._changeDetector = _changeDetector;
             this.defaultTextAlign = exports.ColumnAlign.Left;
-            this.editMode = false;
+            this._editMode = false;
             this.cellClick = new i0.EventEmitter();
             this._fieldEditMode = false;
             this._focused = false;
         }
+        Object.defineProperty(SimpleGridCellComponent.prototype, "editMode", {
+            get: function () {
+                return this._editMode;
+            },
+            set: function (value) {
+                this._editMode = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(SimpleGridCellComponent.prototype, "editTemplateContent", {
             set: function (template) {
                 if (template) {
@@ -10725,7 +10765,7 @@
             }
         };
         SimpleGridCellComponent.prototype._setFocusComponent = function () {
-            if (this.editMode && this.fieldEditMode) {
+            if (this._editMode && this.fieldEditMode) {
                 var element = this._getElement();
                 if (element) {
                     var focusEvent = this._createNewEvent(element, 'focus');
@@ -10796,7 +10836,7 @@
     SimpleGridCellComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-simple-grid-cell",
-                    template: "\n    <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n      <ng-container *ngIf=\"editMode; else noInlineEdit\">\n        <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                      [ngTemplateOutlet]=\"column.editTemplate\"\n                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        <ng-template #noEditTemplate>\n          <ng-container *ngIf=\"column.template; else noTemplate\">\n            <ng-container [ngTemplateOutlet]=\"column.template\"\n                          [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n          </ng-container>\n          <ng-template #noTemplate>\n            <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n          </ng-template>\n        </ng-template>\n      </ng-container>\n      <ng-template #noInlineEdit>\n        <ng-container *ngIf=\"column.template; else noTemplate\">\n          <ng-container [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n        </ng-container>\n        <ng-template #noTemplate>\n          <span [textContent]=\"column.getFieldValue(row[column.field])\"></span>\n        </ng-template>\n      </ng-template>\n    </div>\n  ",
+                    template: "\n      <div class=\"simple-grid-column-cell-value\" [ngClass]=\"column.textAlign ? column.textAlign : defaultTextAlign\">\n          <ng-container *ngIf=\"editMode; else noInlineEdit\">\n              <div class=\"simple-grid-column-cell-field\">\n                <ng-container #editTemplate *ngIf=\"column.editTemplate; else noEditTemplate\"\n                              [ngTemplateOutlet]=\"column.editTemplate\"\n                              [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n                <ng-template #noEditTemplate>\n                    <ng-container *ngIf=\"column.template; else noTemplate\">\n                        <ng-container [ngTemplateOutlet]=\"column.template\"\n                                      [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n                    </ng-container>\n                    <ng-template #noTemplate>\n                        <co-input-text [(model)]=\"row[column.field]\" [required]=\"column.required\"></co-input-text>\n                    </ng-template>\n                </ng-template>\n              </div>\n          </ng-container>\n          <ng-template #noInlineEdit>\n              <div class=\"simple-grid-column-cell-field\">\n                <ng-container *ngIf=\"column.template; else noTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"column.template\"\n                                  [ngTemplateOutletContext]=\"{value: row[column.field], row: row}\"></ng-container>\n                </ng-container>\n                <ng-template #noTemplate>\n                    <span [textContent]=\"column.getFieldValue(row[column.field])\"></span>\n                </ng-template>\n              </div>\n          </ng-template>\n      </div>\n  ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -10804,12 +10844,12 @@
         { type: i0.ChangeDetectorRef }
     ]; };
     SimpleGridCellComponent.propDecorators = {
+        editMode: [{ type: i0.Input }],
         editTemplateContent: [{ type: i0.ViewChild, args: ["editTemplate", { read: BaseInputComponent },] }],
         noEditTemplateContent: [{ type: i0.ViewChild, args: ["noEditTemplate",] }],
         noTemplateContent: [{ type: i0.ViewChild, args: ["noTemplate",] }],
         column: [{ type: i0.Input }],
         row: [{ type: i0.Input }],
-        editMode: [{ type: i0.Input }],
         fieldEditMode: [{ type: i0.Input }],
         cellClick: [{ type: i0.Output }],
         showClass: [{ type: i0.HostBinding, args: ["class.co-simple-grid-cell",] }],
@@ -10901,7 +10941,8 @@
                         FormModule,
                         ObserveVisibilityModule,
                         PaginationModule,
-                        PaginationBarModule
+                        PaginationBarModule,
+                        ClickoutsideModule
                     ],
                     declarations: [
                         SimpleGridComponent,
@@ -11662,87 +11703,273 @@
                 },] }
     ];
 
-    var FilterPipe = /** @class */ (function () {
-        function FilterPipe() {
+    var CoreDynamicComponentService = /** @class */ (function () {
+        function CoreDynamicComponentService(_compFactoryResolver, appRef, injector) {
+            this._compFactoryResolver = _compFactoryResolver;
+            this.appRef = appRef;
+            this.injector = injector;
+            this._componentRefs = [];
         }
-        FilterPipe.prototype.transform = function (items, field, value) {
-            if (!items || !field) {
-                return items;
+        CoreDynamicComponentService.prototype.getComponentRefs = function () {
+            return this._componentRefs;
+        };
+        CoreDynamicComponentService.prototype.createAndReturnComponentRef = function (componentClass, inputs) {
+            var _this = this;
+            return new Promise(function (resolve) {
+                var componentRef = _this._compFactoryResolver
+                    .resolveComponentFactory(componentClass)
+                    .create(_this.injector);
+                if (inputs) {
+                    for (var property in inputs) {
+                        if (inputs.hasOwnProperty(property)) {
+                            componentRef.instance[property] = inputs[property];
+                        }
+                    }
+                }
+                _this.appRef.attachView(componentRef.hostView);
+                var domElem = componentRef.hostView
+                    .rootNodes[0];
+                document.body.appendChild(domElem);
+                componentRef.onDestroy(function () {
+                    _this.appRef.detachView(componentRef.hostView);
+                });
+                resolve(componentRef);
+            });
+        };
+        CoreDynamicComponentService.prototype.createComponent = function (componentClass, inputs, outputs, providers) {
+            var _this = this;
+            return new Promise(function (resolve) {
+                if (providers) {
+                    i0.Injector.create(providers, _this.injector);
+                }
+                var componentRef = _this._compFactoryResolver
+                    .resolveComponentFactory(componentClass)
+                    .create(_this.injector);
+                _this._componentRefs.push(componentRef);
+                if (inputs) {
+                    for (var property in inputs) {
+                        if (inputs.hasOwnProperty(property)) {
+                            componentRef.instance[property] = inputs[property];
+                        }
+                    }
+                }
+                if (outputs) {
+                    var _loop_1 = function (event) {
+                        if (outputs.hasOwnProperty(event)) {
+                            componentRef.instance[event].subscribe(function () { return outputs[event](); });
+                        }
+                    };
+                    for (var event in outputs) {
+                        _loop_1(event);
+                    }
+                }
+                _this.appRef.attachView(componentRef.hostView);
+                var domElem = componentRef.hostView
+                    .rootNodes[0];
+                document.body.appendChild(domElem);
+                componentRef.onDestroy(function () {
+                    _this.appRef.detachView(componentRef.hostView);
+                });
+                componentRef.instance.onClose = function (button, output, rememberChoice) {
+                    var idx = _this._componentRefs.indexOf(componentRef);
+                    _this.appRef.detachView(componentRef.hostView);
+                    _this._componentRefs[idx] = undefined;
+                    _this._componentRefs.splice(idx, 1);
+                    if (outputs) {
+                        for (var event in outputs) {
+                            if (outputs.hasOwnProperty(event)) {
+                                componentRef.instance[event].unsubscribe();
+                            }
+                        }
+                    }
+                    resolve({ button: button, output: output ? output : undefined, rememberChoice: rememberChoice });
+                };
+            });
+        };
+        return CoreDynamicComponentService;
+    }());
+    CoreDynamicComponentService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CoreDynamicComponentService_Factory() { return new CoreDynamicComponentService(i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(i0__namespace.ApplicationRef), i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: CoreDynamicComponentService, providedIn: "root" });
+    CoreDynamicComponentService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root"
+                },] }
+    ];
+    CoreDynamicComponentService.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ApplicationRef },
+        { type: i0.Injector }
+    ]; };
+
+    var AppPopupType;
+    (function (AppPopupType) {
+        AppPopupType[AppPopupType["Error"] = 0] = "Error";
+        AppPopupType[AppPopupType["Warning"] = 1] = "Warning";
+        AppPopupType[AppPopupType["Information"] = 2] = "Information";
+        AppPopupType[AppPopupType["Confirmation"] = 3] = "Confirmation";
+    })(AppPopupType || (AppPopupType = {}));
+
+    var AppPopupButtonType;
+    (function (AppPopupButtonType) {
+        AppPopupButtonType[AppPopupButtonType["Ok"] = 0] = "Ok";
+        AppPopupButtonType[AppPopupButtonType["Open"] = 1] = "Open";
+        AppPopupButtonType[AppPopupButtonType["Save"] = 2] = "Save";
+        AppPopupButtonType[AppPopupButtonType["Cancel"] = 3] = "Cancel";
+        AppPopupButtonType[AppPopupButtonType["Yes"] = 4] = "Yes";
+        AppPopupButtonType[AppPopupButtonType["No"] = 5] = "No";
+        AppPopupButtonType[AppPopupButtonType["NoButton"] = 6] = "NoButton";
+    })(AppPopupButtonType || (AppPopupButtonType = {}));
+
+    var DialogBaseComponent = /** @class */ (function () {
+        function DialogBaseComponent() {
+        }
+        DialogBaseComponent.prototype.onClose = function (eventType, output, rememberChoice) {
+            return;
+        };
+        return DialogBaseComponent;
+    }());
+
+    var ConfirmationDialogComponent = /** @class */ (function (_super) {
+        __extends(ConfirmationDialogComponent, _super);
+        function ConfirmationDialogComponent(iconCacheService) {
+            var _this = _super.call(this) || this;
+            _this.iconCacheService = iconCacheService;
+            _this.icons = exports.CoreComponentsIcon;
+            _this.ptype = AppPopupType;
+            _this.showRememberCheckbox = false;
+            _this.rememberChoice = false;
+            return _this;
+        }
+        ConfirmationDialogComponent.prototype.showClass = function () {
+            return true;
+        };
+        ConfirmationDialogComponent.prototype.handleYesClick = function (event) {
+            this.onClose(AppPopupButtonType.Yes, undefined, this.rememberChoice);
+        };
+        ConfirmationDialogComponent.prototype.handleNoClick = function (event) {
+            this.onClose(AppPopupButtonType.No, undefined, this.rememberChoice);
+        };
+        ConfirmationDialogComponent.prototype.handleOkClick = function (event) {
+            this.onClose(AppPopupButtonType.Ok, undefined, this.rememberChoice);
+        };
+        return ConfirmationDialogComponent;
+    }(DialogBaseComponent));
+    ConfirmationDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-confirmation-dialog",
+                    template: "\n    <co-dialog [showCloseIcon]=\"false\" [headerTemplate]=\"headerTemplate\" [footerTemplate]=\"footerTemplate\">\n      <div class=\"confirmation-dialog-wrapper\">\n        <div class=\"text\" [innerHTML]=\"text\"></div>\n        <co-collapsible [headerTitle]=\"'DETAILS' | coreLocalize\" [iconData]=\"iconCacheService.getIcon(icons.TriangleDown)\" *ngIf=\"details\">\n          <div class=\"dialog-details\" [innerHTML]=\"details\"></div>\n        </co-collapsible>\n      </div>\n    </co-dialog>\n    <ng-template #headerTemplate>\n      <div class=\"co-dialog-header-title\" [textContent]=\"title\"></div>\n    </ng-template>\n    <ng-template #footerTemplate>\n      <div class=\"co-dialog-footer-button-wrapper\">\n        <ng-container *ngIf=\"type === ptype.Confirmation\">\n          <co-button class=\"save-button\"\n                     [label]=\"'YES' | coreLocalize\"\n                     (click)=\"handleYesClick($event)\"></co-button>\n          <co-button class=\"close-button\"\n                     [label]=\"'NO' | coreLocalize\"\n                     (click)=\"handleNoClick($event)\"></co-button>\n        </ng-container>\n        <ng-container *ngIf=\"type === ptype.Information || type === ptype.Error || type === ptype.Warning\">\n          <co-button class=\"save-button\"\n                     [iconData]=\"iconCacheService.getIcon(icons.CheckDuotone)\"\n                     (click)=\"handleYesClick($event)\"></co-button>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"showRememberCheckbox\">\n        <co-input-checkbox [label]=\"'REMEMBER_CHOICE' | coreLocalize\" [(model)]=\"rememberChoice\"></co-input-checkbox>\n      </ng-container>\n    </ng-template>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ConfirmationDialogComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    ConfirmationDialogComponent.propDecorators = {
+        title: [{ type: i0.Input }],
+        text: [{ type: i0.Input }],
+        details: [{ type: i0.Input }],
+        type: [{ type: i0.Input }],
+        showRememberCheckbox: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-confirmation-dialog",] }]
+    };
+
+    var CoreDialogService = /** @class */ (function () {
+        function CoreDialogService(_compFactoryResolver, appRef, injector, dynamicComponentService) {
+            this._compFactoryResolver = _compFactoryResolver;
+            this.appRef = appRef;
+            this.injector = injector;
+            this.dynamicComponentService = dynamicComponentService;
+            this._componentRefs = [];
+        }
+        CoreDialogService.prototype.showYesNo = function (title, text, showRememberChoice) {
+            if (showRememberChoice === void 0) { showRememberChoice = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                var data;
+                return __generator(this, function (_a) {
+                    data = {
+                        title: title,
+                        text: text,
+                        type: AppPopupType.Confirmation,
+                        showRememberCheckbox: showRememberChoice
+                    };
+                    return [2 /*return*/, this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data)];
+                });
+            });
+        };
+        CoreDialogService.prototype.showError = function (message, details) {
+            var data = {
+                title: 'ERROR',
+                text: message,
+                type: AppPopupType.Error
+            };
+            if (details) {
+                data.details = details;
             }
-            return items.filter(function (item) { return item[field] === value; });
+            return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
         };
-        return FilterPipe;
+        CoreDialogService.prototype.showInformation = function (message) {
+            var data = {
+                title: 'INFORMATION',
+                text: message,
+                type: AppPopupType.Information
+            };
+            return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+        };
+        CoreDialogService.prototype.showWarning = function (message) {
+            var data = {
+                title: 'WARNING',
+                text: message,
+                type: AppPopupType.Warning
+            };
+            return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+        };
+        return CoreDialogService;
     }());
-    FilterPipe.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: "filter",
-                    pure: false
+    CoreDialogService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function CoreDialogService_Factory() { return new CoreDialogService(i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(i0__namespace.ApplicationRef), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject(CoreDynamicComponentService)); }, token: CoreDialogService, providedIn: "root" });
+    CoreDialogService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: "root"
                 },] }
-    ];
+    ];
+    CoreDialogService.ctorParameters = function () { return [
+        { type: i0.ComponentFactoryResolver },
+        { type: i0.ApplicationRef },
+        { type: i0.Injector },
+        { type: CoreDynamicComponentService }
+    ]; };
 
-    var FilterPipeModule = /** @class */ (function () {
-        function FilterPipeModule() {
+    var CoreDialogModule = /** @class */ (function () {
+        function CoreDialogModule() {
         }
-        return FilterPipeModule;
+        CoreDialogModule.forRoot = function () {
+            return {
+                ngModule: CoreDialogModule,
+                providers: [
+                    CoreDialogService
+                ]
+            };
+        };
+        return CoreDialogModule;
     }());
-    FilterPipeModule.decorators = [
+    CoreDialogModule.decorators = [
         { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CoDialogModule,
+                        CollapsibleModule,
+                        CoreComponentsTranslationModule,
+                        ButtonModule,
+                        InputCheckboxModule
+                    ],
                     declarations: [
-                        FilterPipe
+                        ConfirmationDialogComponent
                     ],
-                    exports: [
-                        FilterPipe
-                    ]
+                    providers: [
+                        CoreDialogService
+                    ],
+                    exports: []
                 },] }
     ];
 
-    function equalValidator(valueGetterFn) {
-        return function (control) {
-            var isValid = true;
-            if (valueGetterFn) {
-                var mustBeEqualTo = valueGetterFn.call(this);
-                isValid = control.value === mustBeEqualTo;
-            }
-            return isValid ? null : { "equality": "MESSAGE_FIELD_WRONG_VALUE" };
-        };
-    }
-
-    function passwordValidator(userNameGetterFn) {
-        return function (control) {
-            if (control && control.value) {
-                var username = userNameGetterFn.call(this);
-                var errorString = getValidatePasswordErrorString(StringUtils.ToStringOrDefault(control.value), username);
-                if (errorString) {
-                    return { "password": errorString };
-                }
-            }
-        };
-    }
-    // @returns undefined if valid, or an error string if there's an error
-    function getValidatePasswordErrorString(password, username) {
-        var minimumPasswordLength = 10;
-        var lengthOk = password && minimumPasswordLength <= password.length;
-        if (!lengthOk) {
-            return "PASSWORD_MUST_BE_10_CHARACTERS";
-        }
-        var atLeastOneNumber = RegExp(".*[0-9].*").test(password);
-        var atLeastOneLetter = RegExp(".*[a-zA-Z].*").test(password);
-        var atLeastOneSpecial = RegExp(".*[!@#$%&*()'+,\\-./:;<=>?\\[\\]^_`{|}\\\\].*").test(password);
-        if (!atLeastOneNumber || !atLeastOneLetter || !atLeastOneSpecial) {
-            return "PASSWORD_MUST_CONTAIN_LETTER_NUMBER_SPECIAL";
-        }
-        var hasUsernameInPassword = username && RegExp(".*" + username.trim() + ".*", "i").test(password);
-        if (hasUsernameInPassword) {
-            return "PASSWORD_CONTAINS_USERNAME";
-        }
-    }
-
-    function emailValidator(control) {
-        var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        var isValid = !!emailRegex.test(control.value);
-        return isValid ? null : { 'email': 'MESSAGE_EMAIL_NOT_CORRECT' };
-    }
-
     var FilterItemComponent = /** @class */ (function () {
         function FilterItemComponent(iconService, _changeDetector) {
             this.iconService = iconService;
@@ -12252,7 +12479,7 @@
     FilterItemComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-filter-item",
-                    template: "\n    <div class=\"co-filter-item-header\">\n      <co-collapsible\n        [headerTitle]=\"placeholder\"\n        [expandButtonLast]=\"true\"\n        [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n        [expanded]=\"expanded\"\n        [showButton]=\"showButton\"\n        [buttonText]=\"filterButtonLabel\"\n        (buttonClicked)=\"onButtonClicked()\"\n      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n               (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n              <co-input-text\n                *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                [placeholder]=\"searchPlaceholder\"\n                [model]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <ng-container\n                  *ngFor=\"let option of filteredCollection; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       [clickableLabel]=\"false\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                           [label]=\"option.description\"\n                                           [model]=\"option.checked\"\n                                           (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-radio-button>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </ng-container>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                <div class=\"co-filter-show-more clickable\"\n                     *ngIf=\"moreToShow()\">\n                  <a (click)=\"increaseLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                    <span [textContent]=\"showMoreLabel\"></span>\n                  </a>\n                </div>\n                <div class=\"co-filter-show-less clickable\"\n                     *ngIf=\"lessToShow()\">\n                  <a (click)=\"setToInitialLimit()\">\n                    <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                    <span [textContent]=\"showLessLabel\"></span>\n                  </a>\n                </div>\n              </div>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | localize\"\n                [(model)]=\"sliderMin\"\n                (focusout)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | localize\"\n                [(model)]=\"sliderMax\"\n                (focusout)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n              <co-input-text\n                class=\"slider-from\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'FROM' | localize\"\n                [(model)]=\"sliderMin\"\n                (focusout)=\"handleModelChange(sliderMin)\"\n              ></co-input-text>\n              <co-input-text\n                class=\"slider-to\"\n                [type]=\"'number'\"\n                [digitsOnly]=\"true\"\n                [hideArrowButtons]=\"true\"\n                [excludePlusMinus]=\"true\"\n                [label]=\"'TO' | localize\"\n                [(model)]=\"sliderMax\"\n                (focusout)=\"handleModelChange(sliderMax)\"\n              ></co-input-text>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n              <co-input-checkbox\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n                [label]=\"placeholder\">\n              </co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-checkbox-content\"\n                 *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n              <co-input-checkbox\n                [(model)]=\"checkBoxToTextModel\"\n                (modelChange)=\"handleModelChange($event)\"\n                [label]=\"placeholder\"></co-input-checkbox>\n            </div>\n            <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n              <co-input-text\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"></co-input-text>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n              <co-input-date\n                [(model)]=\"model\"\n                (modelChange)=\"handleModelChange($event)\"\n              ></co-input-date>\n            </div>\n            <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n              <co-input-date-range\n                [model]=\"[dateRangeStart, dateRangeEnd]\"\n                (modelChange)=\"handleModelChange($event)\"\n                [placeholder]=\"'SELECT_DATE' | localize\">\n              </co-input-date-range>\n            </div>\n          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
+                    template: "\n      <div class=\"co-filter-item-header\">\n          <co-collapsible\n                  [headerTitle]=\"placeholder\"\n                  [expandButtonLast]=\"true\"\n                  [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"\n                  [expanded]=\"expanded\"\n                  [showButton]=\"showButton\"\n                  [buttonText]=\"filterButtonLabel\"\n                  (buttonClicked)=\"onButtonClicked()\"\n          >\n              <div class=\"co-filter-item-collapsable-content\">\n                  <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\"\n                       (keydown)=\"showButton=true\" (mousedown)=\"showButton=true\">\n                      <ng-content></ng-content>\n                  </div>\n                  <ng-template #collectionContent>\n                      <div class=\"co-filter-item-collection-content\" *ngIf=\"mode === modes.Filterlist || mode === modes.SingleSelectList\n                                                                   || mode === modes.SelectListWithNumberOutput || mode === modes.SelectListWithStringCollectionOutput\">\n                          <co-input-text\n                                  *ngIf=\"collection?.length > 10 || minSearchCharsToLoadCollection\"\n                                  [placeholder]=\"searchPlaceholder\"\n                                  [model]=\"filterText\"\n                                  (modelChange)=\"applyFilter($event)\"\n                          >\n                          </co-input-text>\n                          <div class=\"no-results\" *ngIf=\"filteredCollection?.length === 0\">\n                              <span [textContent]=\"noResultsLabel\"></span>\n                          </div>\n                          <div class=\"co-filter-item-collection-results\">\n                              <ng-container\n                                      *ngFor=\"let option of filteredCollection; let index = index\">\n                                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                                      <co-input-checkbox *ngIf=\"mode !== modes.SingleSelectList\"\n                                                         [label]=\"option.description\"\n                                                         [model]=\"option.checked\"\n                                                         [clickableLabel]=\"false\"\n                                                         (modelChange)=\"handleModelChange(option)\"\n                                      ></co-input-checkbox>\n                                      <co-input-radio-button *ngIf=\"mode === modes.SingleSelectList\"\n                                                             [label]=\"option.description\"\n                                                             [model]=\"option.checked\"\n                                                             (modelChange)=\"handleModelChange(option)\"\n                                      ></co-input-radio-button>\n                                      <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                                           [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                                      ></div>\n                                  </div>\n\n                              </ng-container>\n                          </div>\n                          <div class=\"co-filter-show-more-or-less\" *ngIf=\"!showAllResults\">\n                              <div class=\"co-filter-show-more clickable\"\n                                   *ngIf=\"moreToShow()\">\n                                  <a (click)=\"increaseLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointDown)\"></co-icon>\n                                      <span [textContent]=\"showMoreLabel\"></span>\n                                  </a>\n                              </div>\n                              <div class=\"co-filter-show-less clickable\"\n                                   *ngIf=\"lessToShow()\">\n                                  <a (click)=\"setToInitialLimit()\">\n                                      <co-icon [iconData]=\"iconService.getIcon(icons.ArrowPointUp)\"></co-icon>\n                                      <span [textContent]=\"showLessLabel\"></span>\n                                  </a>\n                              </div>\n                          </div>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.Slider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-slider-content\" *ngIf=\"mode === modes.NullableSlider\">\n                          <co-input-text\n                                  class=\"slider-from\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'FROM' | coreLocalize\"\n                                  [(model)]=\"sliderMin\"\n                                  (focusout)=\"handleModelChange(sliderMin)\"\n                          ></co-input-text>\n                          <co-input-text\n                                  class=\"slider-to\"\n                                  [type]=\"'number'\"\n                                  [digitsOnly]=\"true\"\n                                  [hideArrowButtons]=\"true\"\n                                  [excludePlusMinus]=\"true\"\n                                  [label]=\"'TO' | coreLocalize\"\n                                  [(model)]=\"sliderMax\"\n                                  (focusout)=\"handleModelChange(sliderMax)\"\n                          ></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\" *ngIf=\"mode === modes.Checkbox \">\n                          <co-input-checkbox\n                                  [(model)]=\"model\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [label]=\"placeholder\">\n                          </co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-checkbox-content\"\n                           *ngIf=\"mode === modes.CheckboxToText || mode === modes.CheckboxToSimpleText || mode === modes.CheckboxToBinary\">\n                          <co-input-checkbox\n                                  [(model)]=\"checkBoxToTextModel\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [label]=\"placeholder\"></co-input-checkbox>\n                      </div>\n                      <div class=\"co-filter-item-textfield-content\" *ngIf=\"mode === modes.TextField\">\n                          <co-input-text\n                                  [(model)]=\"model\"\n                                  (modelChange)=\"handleModelChange($event)\"></co-input-text>\n                      </div>\n                      <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateField\">\n                          <co-input-date\n                                  [(model)]=\"model\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                          ></co-input-date>\n                      </div>\n                      <div class=\"co-filter-item-dateField-content\" *ngIf=\"mode === modes.DateRangeField\">\n                          <co-input-date-range\n                                  [model]=\"[dateRangeStart, dateRangeEnd]\"\n                                  (modelChange)=\"handleModelChange($event)\"\n                                  [placeholder]=\"'SELECT_DATE' | coreLocalize\">\n                          </co-input-date-range>\n                      </div>\n                  </ng-template>\n              </div>\n          </co-collapsible>\n      </div>\n\n  ",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush
                 },] }
@@ -12353,36 +12580,371 @@
                 },] }
     ];
 
-    var TooltipComponent = /** @class */ (function () {
-        function TooltipComponent(_elementRef, _changeDetector) {
-            this._elementRef = _elementRef;
-            this._changeDetector = _changeDetector;
-            this.top = -100;
-            this.left = -100;
-            this.bottom = false;
-            this.animate = true;
+    var CheckmarkOverlayComponent = /** @class */ (function () {
+        function CheckmarkOverlayComponent(_renderer) {
+            var _this = this;
+            this._renderer = _renderer;
+            this.showOverlay = false;
+            this.showWrapper = false;
+            this._visible = false;
+            this._handleAnimationIteration = function (event) {
+                _this.animateDivs.forEach(function (a) { return _this._renderer.removeClass(a.nativeElement, 'animate'); });
+                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
+            };
         }
-        Object.defineProperty(TooltipComponent.prototype, "hostElement", {
+        Object.defineProperty(CheckmarkOverlayComponent.prototype, "content", {
+            set: function (children) {
+                this.animateDivs = children.toArray();
+                this._checkAnimation();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CheckmarkOverlayComponent.prototype, "visible", {
             get: function () {
-                return this._hostElement;
+                return this._visible;
             },
             set: function (value) {
-                this._hostElement = value;
-                // this._positionTooltip();
+                var _this = this;
+                if (value) {
+                    this.showOverlay = true;
+                    this.showWrapper = true;
+                }
+                else {
+                    setTimeout(function () { return _this.showOverlay = false; }, 800);
+                    setTimeout(function () { return _this.showWrapper = false; }, 600);
+                }
+                this._visible = value;
+                this._checkAnimation();
+                this._checkAnimationFinished();
             },
             enumerable: false,
             configurable: true
         });
-        TooltipComponent.prototype.showClass = function () {
+        CheckmarkOverlayComponent.prototype.showClass = function () {
             return true;
         };
-        TooltipComponent.prototype.ngAfterViewInit = function () {
+        CheckmarkOverlayComponent.prototype._checkAnimation = function () {
             var _this = this;
-            setTimeout(function () {
-                _this._positionTooltip();
-            });
-        };
-        TooltipComponent.prototype._positionTooltip = function () {
+            if (this.visible && this.animateDivs) {
+                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
+            }
+        };
+        CheckmarkOverlayComponent.prototype._checkAnimationFinished = function () {
+            var _this = this;
+            if (!this.visible && this.animateDivs) {
+                this.animateDivs.forEach(function (a) {
+                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
+                });
+            }
+        };
+        return CheckmarkOverlayComponent;
+    }());
+    CheckmarkOverlayComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-checkmark-overlay",
+                    template: "\n    <div *ngIf=\"showOverlay\">\n      <div class=\"checkmark-overlay-wrapper\" *ngIf=\"showWrapper\" @showHideSaveCancel>\n        <div class=\"checkmark-buttons-button save\" [class.finished]=\"!visible\">\n          <div class=\"save-button-spinner\">\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n          </div>\n          <div class=\"spinner-checkmark\" *ngIf=\"!visible && successful\"></div>\n        </div>\n      </div>\n    </div>\n  ",
+                    animations: [
+                        animations.trigger('showHideSaveCancel', [
+                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
+                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
+                            animations.transition('void <=> *', animations.animate(200))
+                        ]),
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    CheckmarkOverlayComponent.ctorParameters = function () { return [
+        { type: i0.Renderer2 }
+    ]; };
+    CheckmarkOverlayComponent.propDecorators = {
+        content: [{ type: i0.ViewChildren, args: ['animatediv', { read: i0.ElementRef },] }],
+        visible: [{ type: i0.Input }],
+        successful: [{ type: i0.Input }],
+        showClass: [{ type: i0.HostBinding, args: ["class.co-checkmark-overlay",] }]
+    };
+
+    var CheckmarkOverlayModule = /** @class */ (function () {
+        function CheckmarkOverlayModule() {
+        }
+        return CheckmarkOverlayModule;
+    }());
+    CheckmarkOverlayModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule
+                    ],
+                    declarations: [
+                        CheckmarkOverlayComponent
+                    ],
+                    exports: [
+                        CheckmarkOverlayComponent
+                    ]
+                },] }
+    ];
+
+    var FilterItemViewmodel = /** @class */ (function () {
+        function FilterItemViewmodel(code, description, checked, count, valueName) {
+            this.checked = false;
+            this.code = code;
+            this.description = description === null || description === void 0 ? void 0 : description.toString();
+            this.checked = checked;
+            this.count = count;
+            this.valueName = valueName;
+        }
+        FilterItemViewmodel.prototype.codeAsNumber = function () { return NumberUtils.ParseInt(this.code); };
+        return FilterItemViewmodel;
+    }());
+
+    var FilterViewmodel = /** @class */ (function () {
+        function FilterViewmodel(collection, fields) {
+            var _this = this;
+            this.filterItems = [];
+            collection.forEach(function (item) {
+                var _a, _b, _c;
+                _this.filterItems.push(new FilterItemViewmodel(item[fields.value], item[fields.text], (_a = item.checked) !== null && _a !== void 0 ? _a : false, (_b = item.count) !== null && _b !== void 0 ? _b : null, (_c = item.valueName) !== null && _c !== void 0 ? _c : null));
+            });
+        }
+        return FilterViewmodel;
+    }());
+
+    var BarCodeScanner = /** @class */ (function () {
+        function BarCodeScanner() {
+            var _this = this;
+            this._buffer = [];
+            this._keyPress = function (event) {
+                if (event.key === "Enter") {
+                    document.dispatchEvent(_this._createScanEvent());
+                    _this._buffer.length = 0;
+                }
+                else {
+                    var str = event.key;
+                    _this._buffer.push(str);
+                }
+            };
+            document.addEventListener('keypress', this._keyPress);
+        }
+        BarCodeScanner.prototype.close = function () {
+            document.removeEventListener('keypress', this._keyPress);
+        };
+        BarCodeScanner.prototype._createScanEvent = function () {
+            return new CustomEvent("barcodescanned", { detail: this._buffer.join("") });
+        };
+        return BarCodeScanner;
+    }());
+
+    var ScannerService = /** @class */ (function () {
+        function ScannerService(_ngZone) {
+            var _this = this;
+            this._ngZone = _ngZone;
+            this.barCodeScanner = new BarCodeScanner();
+            this._barCodeScanned = function (event) {
+                if (_this._activeInput) {
+                    _this._activeInput.triggerCodeScanned(event.detail);
+                }
+            };
+            document.addEventListener("barcodescanned", this._barCodeScanned);
+        }
+        ScannerService.prototype.ngOnDestroy = function () {
+            document.removeEventListener("barcodescanned", this._barCodeScanned);
+            this.barCodeScanner.close();
+        };
+        ScannerService.prototype.registerInput = function (input) {
+            this._activeInput = input;
+        };
+        return ScannerService;
+    }());
+    ScannerService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ScannerService.ctorParameters = function () { return [
+        { type: i0.NgZone }
+    ]; };
+
+    var InputScannerComponent = /** @class */ (function () {
+        function InputScannerComponent(_scannerService) {
+            this._scannerService = _scannerService;
+            this.centerLabel = false;
+            this.useLeftIcon = false;
+            this.useRightIcon = false;
+            this.modelChange = new i0.EventEmitter();
+            this.leftIconClick = new i0.EventEmitter();
+            this.rightIconClick = new i0.EventEmitter();
+            this.search = new i0.EventEmitter();
+            this.barCodeScanned = new i0.EventEmitter();
+            this._scannerService.registerInput(this);
+        }
+        InputScannerComponent.prototype.showClass = function () {
+            return true;
+        };
+        InputScannerComponent.prototype.triggerCodeScanned = function (code) {
+            this.model = code;
+            this.barCodeScanned.next(this.model);
+        };
+        return InputScannerComponent;
+    }());
+    InputScannerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'co-input-scanner',
+                    template: "\n      <co-input-search\n              [(model)]=\"model\"\n              [customCssClass]=\"customCssClass\"\n              [placeholder]=\"placeholder\"\n              [centerLabel]=\"centerLabel\"\n              [useLeftIcon]=\"useLeftIcon\"\n              [leftIconData]=\"leftIconData\"\n              [useRightIcon]=\"useRightIcon\"\n              [rightIconData]=\"rightIconData\"\n              (leftIconClick)=\"leftIconClick.emit($event)\"\n              (rightIconClick)=\"rightIconClick.emit($event)\"\n              (search)=\"search.emit($event)\"\n      ></co-input-search>\n    ",
+                    providers: [
+                        ScannerService,
+                        OverlayService
+                    ],
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    InputScannerComponent.ctorParameters = function () { return [
+        { type: ScannerService }
+    ]; };
+    InputScannerComponent.propDecorators = {
+        model: [{ type: i0.Input }],
+        placeholder: [{ type: i0.Input }],
+        centerLabel: [{ type: i0.Input }],
+        useLeftIcon: [{ type: i0.Input }],
+        useRightIcon: [{ type: i0.Input }],
+        leftIconData: [{ type: i0.Input }],
+        rightIconData: [{ type: i0.Input }],
+        customCssClass: [{ type: i0.Input }],
+        modelChange: [{ type: i0.Output }],
+        leftIconClick: [{ type: i0.Output }],
+        rightIconClick: [{ type: i0.Output }],
+        search: [{ type: i0.Output }],
+        barCodeScanned: [{ type: i0.Output }],
+        showClass: [{ type: i0.HostBinding, args: ['class.co-input-scanner',] }]
+    };
+
+    var InputScannerModule = /** @class */ (function () {
+        function InputScannerModule() {
+        }
+        return InputScannerModule;
+    }());
+    InputScannerModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        InputSearchModule
+                    ],
+                    declarations: [
+                        InputScannerComponent
+                    ],
+                    exports: [
+                        InputScannerComponent
+                    ]
+                },] }
+    ];
+
+    var FilterPipe = /** @class */ (function () {
+        function FilterPipe() {
+        }
+        FilterPipe.prototype.transform = function (items, field, value) {
+            if (!items || !field) {
+                return items;
+            }
+            return items.filter(function (item) { return item[field] === value; });
+        };
+        return FilterPipe;
+    }());
+    FilterPipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: "filter",
+                    pure: false
+                },] }
+    ];
+
+    var FilterPipeModule = /** @class */ (function () {
+        function FilterPipeModule() {
+        }
+        return FilterPipeModule;
+    }());
+    FilterPipeModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        FilterPipe
+                    ],
+                    exports: [
+                        FilterPipe
+                    ]
+                },] }
+    ];
+
+    function equalValidator(valueGetterFn) {
+        return function (control) {
+            var isValid = true;
+            if (valueGetterFn) {
+                var mustBeEqualTo = valueGetterFn.call(this);
+                isValid = control.value === mustBeEqualTo;
+            }
+            return isValid ? null : { "equality": "MESSAGE_FIELD_WRONG_VALUE" };
+        };
+    }
+
+    function passwordValidator(userNameGetterFn) {
+        return function (control) {
+            if (control && control.value) {
+                var username = userNameGetterFn.call(this);
+                var errorString = getValidatePasswordErrorString(StringUtils.ToStringOrDefault(control.value), username);
+                if (errorString) {
+                    return { "password": errorString };
+                }
+            }
+        };
+    }
+    // @returns undefined if valid, or an error string if there's an error
+    function getValidatePasswordErrorString(password, username) {
+        var minimumPasswordLength = 10;
+        var lengthOk = password && minimumPasswordLength <= password.length;
+        if (!lengthOk) {
+            return "PASSWORD_MUST_BE_10_CHARACTERS";
+        }
+        var atLeastOneNumber = RegExp(".*[0-9].*").test(password);
+        var atLeastOneLetter = RegExp(".*[a-zA-Z].*").test(password);
+        var atLeastOneSpecial = RegExp(".*[!@#$%&*()'+,\\-./:;<=>?\\[\\]^_`{|}\\\\].*").test(password);
+        if (!atLeastOneNumber || !atLeastOneLetter || !atLeastOneSpecial) {
+            return "PASSWORD_MUST_CONTAIN_LETTER_NUMBER_SPECIAL";
+        }
+        var hasUsernameInPassword = username && RegExp(".*" + username.trim() + ".*", "i").test(password);
+        if (hasUsernameInPassword) {
+            return "PASSWORD_CONTAINS_USERNAME";
+        }
+    }
+
+    function emailValidator(control) {
+        var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        var isValid = !!emailRegex.test(control.value);
+        return isValid ? null : { 'email': 'MESSAGE_EMAIL_NOT_CORRECT' };
+    }
+
+    var TooltipComponent = /** @class */ (function () {
+        function TooltipComponent(_elementRef, _changeDetector) {
+            this._elementRef = _elementRef;
+            this._changeDetector = _changeDetector;
+            this.top = -100;
+            this.left = -100;
+            this.bottom = false;
+            this.animate = true;
+        }
+        Object.defineProperty(TooltipComponent.prototype, "hostElement", {
+            get: function () {
+                return this._hostElement;
+            },
+            set: function (value) {
+                this._hostElement = value;
+                // this._positionTooltip();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TooltipComponent.prototype.showClass = function () {
+            return true;
+        };
+        TooltipComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this._positionTooltip();
+            });
+        };
+        TooltipComponent.prototype._positionTooltip = function () {
             if (this.hostElement && this._elementRef && this._elementRef.nativeElement) {
                 var rect = this.hostElement.getBoundingClientRect();
                 var ownRect = this._elementRef.nativeElement.getBoundingClientRect();
@@ -12552,109 +13114,6 @@
                 },] }
     ];
 
-    var CheckmarkOverlayComponent = /** @class */ (function () {
-        function CheckmarkOverlayComponent(_renderer) {
-            var _this = this;
-            this._renderer = _renderer;
-            this.showOverlay = false;
-            this.showWrapper = false;
-            this._visible = false;
-            this._handleAnimationIteration = function (event) {
-                _this.animateDivs.forEach(function (a) { return _this._renderer.removeClass(a.nativeElement, 'animate'); });
-                event.currentTarget.removeEventListener('animationiteration', _this._handleAnimationIteration);
-            };
-        }
-        Object.defineProperty(CheckmarkOverlayComponent.prototype, "content", {
-            set: function (children) {
-                this.animateDivs = children.toArray();
-                this._checkAnimation();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(CheckmarkOverlayComponent.prototype, "visible", {
-            get: function () {
-                return this._visible;
-            },
-            set: function (value) {
-                var _this = this;
-                if (value) {
-                    this.showOverlay = true;
-                    this.showWrapper = true;
-                }
-                else {
-                    setTimeout(function () { return _this.showOverlay = false; }, 800);
-                    setTimeout(function () { return _this.showWrapper = false; }, 600);
-                }
-                this._visible = value;
-                this._checkAnimation();
-                this._checkAnimationFinished();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        CheckmarkOverlayComponent.prototype.showClass = function () {
-            return true;
-        };
-        CheckmarkOverlayComponent.prototype._checkAnimation = function () {
-            var _this = this;
-            if (this.visible && this.animateDivs) {
-                this.animateDivs.forEach(function (a) { return _this._renderer.addClass(a.nativeElement, 'animate'); });
-            }
-        };
-        CheckmarkOverlayComponent.prototype._checkAnimationFinished = function () {
-            var _this = this;
-            if (!this.visible && this.animateDivs) {
-                this.animateDivs.forEach(function (a) {
-                    a.nativeElement.addEventListener('animationiteration', _this._handleAnimationIteration);
-                });
-            }
-        };
-        return CheckmarkOverlayComponent;
-    }());
-    CheckmarkOverlayComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-checkmark-overlay",
-                    template: "\n    <div *ngIf=\"showOverlay\">\n      <div class=\"checkmark-overlay-wrapper\" *ngIf=\"showWrapper\" @showHideSaveCancel>\n        <div class=\"checkmark-buttons-button save\" [class.finished]=\"!visible\">\n          <div class=\"save-button-spinner\">\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n            <div #animatediv></div>\n          </div>\n          <div class=\"spinner-checkmark\" *ngIf=\"!visible && successful\"></div>\n        </div>\n      </div>\n    </div>\n  ",
-                    animations: [
-                        animations.trigger('showHideSaveCancel', [
-                            animations.state('*', animations.style({ transform: 'scaleY(1)', opacity: 1 })),
-                            animations.state('void', animations.style({ transform: 'scaleY(0)', opacity: 0 })),
-                            animations.transition('void <=> *', animations.animate(200))
-                        ]),
-                    ],
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    CheckmarkOverlayComponent.ctorParameters = function () { return [
-        { type: i0.Renderer2 }
-    ]; };
-    CheckmarkOverlayComponent.propDecorators = {
-        content: [{ type: i0.ViewChildren, args: ['animatediv', { read: i0.ElementRef },] }],
-        visible: [{ type: i0.Input }],
-        successful: [{ type: i0.Input }],
-        showClass: [{ type: i0.HostBinding, args: ["class.co-checkmark-overlay",] }]
-    };
-
-    var CheckmarkOverlayModule = /** @class */ (function () {
-        function CheckmarkOverlayModule() {
-        }
-        return CheckmarkOverlayModule;
-    }());
-    CheckmarkOverlayModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule
-                    ],
-                    declarations: [
-                        CheckmarkOverlayComponent
-                    ],
-                    exports: [
-                        CheckmarkOverlayComponent
-                    ]
-                },] }
-    ];
-
     var BaseModuleScreenConfigService = /** @class */ (function () {
         function BaseModuleScreenConfigService() {
             // emits the params of the loaded config, each time when a new config was loaded
@@ -13104,31 +13563,6 @@
                 },] }
     ];
 
-    var FilterItemViewmodel = /** @class */ (function () {
-        function FilterItemViewmodel(code, description, checked, count, valueName) {
-            this.checked = false;
-            this.code = code;
-            this.description = description === null || description === void 0 ? void 0 : description.toString();
-            this.checked = checked;
-            this.count = count;
-            this.valueName = valueName;
-        }
-        FilterItemViewmodel.prototype.codeAsNumber = function () { return NumberUtils.ParseInt(this.code); };
-        return FilterItemViewmodel;
-    }());
-
-    var FilterViewmodel = /** @class */ (function () {
-        function FilterViewmodel(collection, fields) {
-            var _this = this;
-            this.filterItems = [];
-            collection.forEach(function (item) {
-                var _a, _b, _c;
-                _this.filterItems.push(new FilterItemViewmodel(item[fields.value], item[fields.text], (_a = item.checked) !== null && _a !== void 0 ? _a : false, (_b = item.count) !== null && _b !== void 0 ? _b : null, (_c = item.valueName) !== null && _c !== void 0 ? _c : null));
-            });
-        }
-        return FilterViewmodel;
-    }());
-
     var ColorSequenceService = /** @class */ (function () {
         function ColorSequenceService() {
             this.colors = new Map();
@@ -13189,6 +13623,8 @@
     exports.ColorSequenceService = ColorSequenceService;
     exports.CoreComponentsTranslationModule = CoreComponentsTranslationModule;
     exports.CoreComponentsTranslationService = CoreComponentsTranslationService;
+    exports.CoreDialogModule = CoreDialogModule;
+    exports.CoreDialogService = CoreDialogService;
     exports.DoubleCalendarComponent = DoubleCalendarComponent;
     exports.DoubleCalendarModule = DoubleCalendarModule;
     exports.FilterItemComponent = FilterItemComponent;
@@ -13222,6 +13658,8 @@
     exports.InputNumberPickerModule = InputNumberPickerModule;
     exports.InputRadioButtonComponent = InputRadioButtonComponent;
     exports.InputRadioButtonModule = InputRadioButtonModule;
+    exports.InputScannerComponent = InputScannerComponent;
+    exports.InputScannerModule = InputScannerModule;
     exports.InputSearchComponent = InputSearchComponent;
     exports.InputSearchModule = InputSearchModule;
     exports.InputTextComponent = InputTextComponent;
@@ -13277,12 +13715,16 @@
     exports["ɵbb"] = PaginatePipe;
     exports["ɵbc"] = SimpleGridCellComponent;
     exports["ɵbd"] = ListOfValuesMultiselectPopupComponent;
-    exports["ɵbe"] = PrependPipeModule;
-    exports["ɵbf"] = PrependPipe;
-    exports["ɵbg"] = TooltipModule;
-    exports["ɵbh"] = TooltipComponent;
-    exports["ɵbi"] = TooltipDirective;
+    exports["ɵbe"] = ConfirmationDialogComponent;
+    exports["ɵbf"] = DialogBaseComponent;
+    exports["ɵbg"] = CoreDynamicComponentService;
+    exports["ɵbh"] = PrependPipeModule;
+    exports["ɵbi"] = PrependPipe;
     exports["ɵbj"] = CheckmarkOverlayComponent;
+    exports["ɵbk"] = ScannerService;
+    exports["ɵbl"] = TooltipModule;
+    exports["ɵbm"] = TooltipComponent;
+    exports["ɵbn"] = TooltipDirective;
     exports["ɵc"] = MD_RIPPLE_GLOBAL_OPTIONS;
     exports["ɵd"] = CoRippleDirective;
     exports["ɵe"] = CoViewportRulerService;
@@ -13296,8 +13738,8 @@
     exports["ɵm"] = ValidationErrorModule;
     exports["ɵn"] = OverlayDirective;
     exports["ɵo"] = OverlayParentDirective;
-    exports["ɵp"] = LocalizePipe;
-    exports["ɵq"] = DictionaryService;
+    exports["ɵp"] = CoreLocalizePipe;
+    exports["ɵq"] = CoreDictionaryService;
     exports["ɵr"] = ValidationErrorComponent;
     exports["ɵs"] = CommitButtonsModule;
     exports["ɵt"] = CommitButtonsComponent;