@colijnit/corecomponents_v12 12.0.104 → 12.0.106

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4381,6 +4381,7 @@
             this.formUserChangeListener = formUserChangeListener;
             this.ngZoneWrapper = ngZoneWrapper;
             this.elementRef = elementRef;
+            this.icons = exports.CoreComponentsIcon;
             this.showSaveCancel = false;
             this.noValidation = false;
             this.forceRequired = false; // a force outside of [cfgName]'s influence
@@ -7944,12 +7945,15 @@
             event.stopPropagation();
             this.rightIconClick.emit(event);
         };
+        InputTextComponent.prototype.clearInput = function () {
+            this.model = null;
+        };
         return InputTextComponent;
     }(BaseInputComponent));
     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\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n                     (click)=\"handleLeftIconClick($event)\"></co-icon>\n            <div *ngIf=\"leftIcon\" class=\"spacer\"></div>\n            <div class=\"input-wrapper\">\n                <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n                       [textContent]=\"placeholder\"></label>\n                <input #input\n                       [type]=\"digitsOnly ? 'number' : type\"\n                       [ngModel]=\"model\"\n                       [min]=\"type === 'number' && this.min ? this.min : undefined\"\n                       [max]=\"type === 'number' && this.max ? this.max : undefined\"\n                       [readonly]=\"readonly\"\n                       [required]=\"required\"\n                       (ngModelChange)=\"modelChange.emit($event)\"\n                       (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n                >\n            </div>\n            <div *ngIf=\"rightIcon\" class=\"spacer\"></div>\n            <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n                     (click)=\"handleRightIconClick($event)\"></co-icon>\n        </div>\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        <div class=\"required-indicator\"></div>\n    ",
+                    template: "\n        <div class=\"input-text-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n            <co-icon *ngIf=\"leftIcon\" class=\"input-text-left-icon\" [icon]=\"leftIcon\" [iconData]=\"leftIconData\"\n                     (click)=\"handleLeftIconClick($event)\"></co-icon>\n            <div *ngIf=\"leftIcon\" class=\"spacer\"></div>\n            <div class=\"input-wrapper\">\n                <label *ngIf=\"showPlaceholderOnFocus || (!showPlaceholderOnFocus && !hasValue && !focused)\"\n                       [textContent]=\"placeholder\"></label>\n                <input #input\n                       [type]=\"digitsOnly ? 'number' : type\"\n                       [ngModel]=\"model\"\n                       [min]=\"type === 'number' && this.min ? this.min : undefined\"\n                       [max]=\"type === 'number' && this.max ? this.max : undefined\"\n                       [readonly]=\"readonly\"\n                       [required]=\"required\"\n                       (ngModelChange)=\"modelChange.emit($event)\"\n                       (keydown)=\"digitsOnly ? excludeNonDigitChars($event) : true\"\n                >\n              <div *ngIf=\"showClearButton && model\" class=\"input-text-clear-button\" (click)=\"clearInput()\">\n                <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n              </div>\n            </div>\n            <div *ngIf=\"rightIcon\" class=\"spacer\"></div>\n            <co-icon *ngIf=\"rightIcon\" class=\"input-text-right-icon\" [icon]=\"rightIcon\" [iconData]=\"rightIconData\"\n                     (click)=\"handleRightIconClick($event)\"></co-icon>\n        </div>\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        <div class=\"required-indicator\"></div>\n    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME,
@@ -11284,7 +11288,7 @@
     ListOfValuesPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-list-of-values-popup",
-                    template: "\n          <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" (clickOutside)=\"optionClicked()\">\n            <co-input-text *ngIf=\"!searchDisabled\" [(model)]=\"searchTerm\" [placeholder]=\"searchPlaceholder\" (modelChange)=\"filterOptions()\"></co-input-text>\n            <ul>\n              <li *ngFor=\"let option of filteredOptions\" [class.selected]=\"option === model\" (click)=\"onOptionClick(option)\">\n                <span [textContent]=\"option[displayField]\"></span>\n              </li>\n            </ul>\n          </div>\n\n    ",
+                    template: "\n          <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" (clickOutside)=\"optionClicked()\">\n            <co-input-text *ngIf=\"!searchDisabled\" [(model)]=\"searchTerm\" [placeholder]=\"searchPlaceholder\" (modelChange)=\"filterOptions()\"></co-input-text>\n            <ul>\n              <li *ngFor=\"let option of filteredOptions\" [class.selected]=\"option === model\" (click)=\"onOptionClick(option)\">\n                <span class=\"lov-options-text\" [textContent]=\"option[displayField]\"></span>\n              </li>\n            </ul>\n          </div>\n\n    ",
                     providers: [
                         OverlayService
                     ],
@@ -11303,6 +11307,104 @@
         collection: [{ type: i0.Input }]
     };
 
+    var ListOfValuesMultiselectPopupComponent = /** @class */ (function (_super) {
+        __extends(ListOfValuesMultiselectPopupComponent, _super);
+        function ListOfValuesMultiselectPopupComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.icons = exports.CoreComponentsIcon;
+            _this.chosenCollection = new i0.EventEmitter();
+            _this.closePopup = new i0.EventEmitter();
+            _this.displayField = 'description';
+            _this.selectedCollection = [];
+            _this.selectedOptions = [];
+            _this.allOptionsSelected = false;
+            _this.searchTerm = '';
+            _this._collection = [];
+            return _this;
+        }
+        ListOfValuesMultiselectPopupComponent.prototype.showClass = function () {
+            return true;
+        };
+        Object.defineProperty(ListOfValuesMultiselectPopupComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                this._collection = value || [];
+                this.searchCollection();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListOfValuesMultiselectPopupComponent.prototype, "filteredCollection", {
+            get: function () {
+                var _this = this;
+                if (this.searchTerm.trim() === '') {
+                    return this.collection;
+                }
+                return this.collection.filter(function (option) { return option.label.toLowerCase().includes(_this.searchTerm.toLowerCase()); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ListOfValuesMultiselectPopupComponent.prototype.ngOnInit = function () {
+            if (this.returnChosenCollection) {
+                this.selectedCollection = this.returnChosenCollection;
+            }
+        };
+        ListOfValuesMultiselectPopupComponent.prototype.onOptionClick = function (option) {
+            var index = this.selectedCollection.findIndex(function (selectedOption) { return selectedOption.value === option.value; });
+            if (index !== -1) {
+                this.selectedCollection.splice(index, 1);
+            }
+            else {
+                this.selectedCollection.push(option);
+            }
+        };
+        ListOfValuesMultiselectPopupComponent.prototype.okClicked = function () {
+            this.chosenCollection.emit(this.selectedCollection);
+            this.closePopup.emit();
+        };
+        ListOfValuesMultiselectPopupComponent.prototype.onToggleSelectAll = function () {
+            if (this.allOptionsSelected) {
+                this.selectedCollection = [];
+                this.allOptionsSelected = false;
+            }
+            else {
+                this.selectedCollection = __spreadArray([], __read(this.collection));
+                this.allOptionsSelected = true;
+            }
+        };
+        ListOfValuesMultiselectPopupComponent.prototype.searchCollection = function () {
+            var _this = this;
+            this.selectedOptions = this.selectedOptions.filter(function (option) {
+                if (_this.collection) {
+                    return _this.searchTerm.includes(option.label);
+                }
+                else {
+                    return _this.searchTerm.includes(option.value);
+                }
+            });
+        };
+        return ListOfValuesMultiselectPopupComponent;
+    }(BaseInputComponent));
+    ListOfValuesMultiselectPopupComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "co-list-of-values-multiselect-popup",
+                    template: "\n    <div class=\"co-list-of-values-multiselect-popup\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\">\n      <div class=\"list-of-values-multiselect-search-input-text\">\n        <co-input-text [placeholder]=\"'Zoeken...'\" [(model)]=\"searchTerm\" (input)=\"searchCollection()\"></co-input-text>\n      </div>\n      <div class=\"list-of-values-multiselect-options\">\n        <div class=\"list-of-values-multiselect-search-deselect\" (click)=\"onToggleSelectAll()\">\n          <span [textContent]=\"'(De)selecteer alles'\"></span>\n          <co-icon [icon]=\"icons.CheckRound\"></co-icon>\n        </div>\n        <div class=\"list-of-values-multiselect-list\">\n          <ul>\n            <li *ngFor=\"let option of filteredCollection\" (click)=\"onOptionClick(option)\">\n              <co-input-checkbox class=\"lov-options-checkbox\" (modelChange)=\"onOptionClick(option)\" [model]=\"selectedCollection.includes(option)\"></co-input-checkbox>\n              <span>{{ option[displayField] }}</span>\n            </li>\n          </ul>\n        </div>\n        <div class=\"list-of-values-multiselect-ok-button\" (click)=\"okClicked()\">\n          <span [textContent]=\"'Ok'\"></span>\n          <co-icon [icon]=\"icons.Check\"></co-icon>\n        </div>\n      </div>\n    </div>\n  ",
+                    encapsulation: i0.ViewEncapsulation.None
+                },] }
+    ];
+    ListOfValuesMultiselectPopupComponent.propDecorators = {
+        showClass: [{ type: i0.HostBinding, args: ["class.co-list-of-values-multiselect-popup",] }],
+        chosenCollection: [{ type: i0.Output }],
+        closePopup: [{ type: i0.Output }],
+        returnChosenCollection: [{ type: i0.Input }],
+        parentForOverlay: [{ type: i0.Input }],
+        displayField: [{ type: i0.Input }],
+        collection: [{ type: i0.Input }]
+    };
+
     var ListOfValuesComponent = /** @class */ (function (_super) {
         __extends(ListOfValuesComponent, _super);
         function ListOfValuesComponent() {
@@ -11405,10 +11507,29 @@
             this.multiselectTags = tags;
         };
         ListOfValuesComponent.prototype.openMultiselectSearch = function () {
+            var _this = this;
             this.searchClicked = true;
+            if (this.searchClicked) {
+                this.overlayService.createComponent(ListOfValuesMultiselectPopupComponent, {
+                    parentForOverlay: this.parentForOverlay,
+                    customCssClass: this.customCssClass,
+                    searchDisabled: this.searchDisabled,
+                    searchPlaceholder: this.searchPlaceholder,
+                    displayField: this.displayField,
+                    collection: this.collection
+                }, {
+                    chosenCollection: function (value) { return _this.optionChosen(value); },
+                    closePopup: function () { return _this.closePopup(); }
+                });
+            }
+            else {
+                this.overlayService.removeComponent();
+            }
         };
         ListOfValuesComponent.prototype.optionChosen = function (option) {
             this.selectedModel = option[this.displayField];
+            this.model = option;
+            this.modelChange.emit(this.model);
         };
         ListOfValuesComponent.prototype.closePopup = function () {
             this.overlayService.removeComponent();
@@ -11418,7 +11539,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "co-list-of-values",
-                    template: "\n      <div class=\"lov-container\">\n        <div class=\"lov-container-child\" *ngIf=\"!multiselect\">\n          <div class=\"search-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n            <co-input-text class=\"lov-search no-focus-line\"\n                           type=\"text\"\n                           [model]=\"selectedModel\"\n                           [placeholder]=\"label\"\n                           [readonly]=\"readonly\"\n                           [disabled]=\"disabled\"\n                           [required]=\"required\"\n                           [rightIcon]=\"icons.ArrowPointDown\"\n                           (click)=\"toggleSelect()\"\n                           (rightIconClick)=\"toggleSelect()\"\n            ></co-input-text>\n          </div>\n\n\n\n        </div>\n        <div *ngIf=\"multiselect\">\n          <div class=\"search-wrapper-multiselect\" (click)=\"openMultiselectSearch()\" *ngIf=\"!searchClicked\">\n            <div class=\"tag-wrapper\">\n              <ul class=\"tag-ul-wrapper\">\n                <li class=\"tag\" *ngFor=\"let tags of multiselectTags\">\n                  <span [textContent]=\"tags.label\"></span>\n                </li>\n              </ul>\n            </div>\n          </div>\n          <div *ngIf=\"searchClicked\">\n            <co-list-of-values-multiselect-search [collection]=\"filteredOptions\" [returnChosenCollection]=\"multiselectTags\" (okButtonClicked)=\"multiselectOkClick()\" (chosenCollection)=\"createMultiSelectTags($event)\"></co-list-of-values-multiselect-search>\n          </div>\n        </div>\n      </div>\n    ",
+                    template: "\n<!--Single select component-->\n      <div class=\"lov-container\">\n        <div class=\"lov-container-child\" *ngIf=\"!multiselect\">\n          <div class=\"search-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n            <co-input-text class=\"lov-search no-focus-line\"\n                           type=\"text\"\n                           [model]=\"selectedModel\"\n                           [placeholder]=\"label\"\n                           [readonly]=\"readonly\"\n                           [disabled]=\"disabled\"\n                           [required]=\"required\"\n                           [rightIcon]=\"icons.ArrowPointDown\"\n                           (click)=\"toggleSelect()\"\n                           (rightIconClick)=\"toggleSelect()\"\n                           [showClearButton]=\"true\"\n            ></co-input-text>\n          </div>\n        </div>\n\n<!--Multiselect component-->\n        <div *ngIf=\"multiselect\">\n          <div class=\"search-wrapper-multiselect\" (click)=\"openMultiselectSearch()\" overlayParent #parentForOverlay=\"overlayParent\">\n            <div class=\"tag-wrapper\">\n              <ul class=\"tag-ul-wrapper\">\n                <li class=\"tag\" *ngFor=\"let tags of multiselectTags\">\n                  <span [textContent]=\"tags.label\"></span>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    ",
                     providers: [
                         OverlayService
                     ],
@@ -11675,111 +11796,6 @@
                 },] }
     ];
 
-    var ListOfValuesMultiselectSearch = /** @class */ (function (_super) {
-        __extends(ListOfValuesMultiselectSearch, _super);
-        function ListOfValuesMultiselectSearch() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.icons = exports.CoreComponentsIcon;
-            _this.chosenCollection = new i0.EventEmitter();
-            _this.okButtonClicked = new i0.EventEmitter();
-            _this.selectedCollection = [];
-            _this.selectedOptions = [];
-            _this.allOptionsSelected = false;
-            _this.searchTerm = '';
-            return _this;
-        }
-        ListOfValuesMultiselectSearch.prototype.showClass = function () {
-            return true;
-        };
-        Object.defineProperty(ListOfValuesMultiselectSearch.prototype, "filteredCollection", {
-            get: function () {
-                var _this = this;
-                if (this.searchTerm.trim() === '') {
-                    return this.collection;
-                }
-                return this.collection.filter(function (option) { return option.label.toLowerCase().includes(_this.searchTerm.toLowerCase()); });
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ListOfValuesMultiselectSearch.prototype.ngOnInit = function () {
-            if (this.returnChosenCollection) {
-                this.selectedCollection = this.returnChosenCollection;
-            }
-        };
-        ListOfValuesMultiselectSearch.prototype.onOptionClick = function (option) {
-            var index = this.selectedCollection.findIndex(function (selectedOption) { return selectedOption.value === option.value; });
-            if (index !== -1) {
-                this.selectedCollection.splice(index, 1);
-            }
-            else {
-                this.selectedCollection.push(option);
-            }
-        };
-        ListOfValuesMultiselectSearch.prototype.okClicked = function () {
-            this.chosenCollection.emit(this.selectedCollection);
-            this.okButtonClicked.emit();
-        };
-        ListOfValuesMultiselectSearch.prototype.onToggleSelectAll = function () {
-            if (this.allOptionsSelected) {
-                this.selectedCollection = [];
-                this.allOptionsSelected = false;
-            }
-            else {
-                this.selectedCollection = __spreadArray([], __read(this.collection));
-                this.allOptionsSelected = true;
-            }
-        };
-        ListOfValuesMultiselectSearch.prototype.searchCollection = function () {
-            var _this = this;
-            this.selectedOptions = this.selectedOptions.filter(function (option) {
-                if (_this.collection) {
-                    return _this.searchTerm.includes(option.label);
-                }
-                else {
-                    return _this.searchTerm.includes(option.value);
-                }
-            });
-        };
-        return ListOfValuesMultiselectSearch;
-    }(BaseInputComponent));
-    ListOfValuesMultiselectSearch.decorators = [
-        { type: i0.Component, args: [{
-                    selector: "co-list-of-values-multiselect-search",
-                    template: "\n        <div class=\"co-list-of-values-multiselect-search\">\n          <div class=\"list-of-values-multiselect-search-input-text\">\n            <co-input-text [placeholder]=\"'Zoeken...'\" [(model)]=\"searchTerm\" (input)=\"searchCollection()\"></co-input-text>\n          </div>\n          <div class=\"list-of-values-multiselect-options\">\n            <div class=\"list-of-values-multiselect-search-deselect\" (click)=\"onToggleSelectAll()\">\n              <span [textContent]=\"'(De)selecteer alles'\"></span>\n              <co-icon [icon]=\"icons.CheckRound\"></co-icon>\n            </div>\n            <div class=\"list-of-values-multiselect-list\">\n              <ul>\n                <li *ngFor=\"let option of filteredCollection\" (click)=\"onOptionClick(option)\">\n                  <co-input-checkbox class=\"lov-options-checkbox\" (modelChange)=\"onOptionClick(option)\" [model]=\"selectedCollection.includes(option)\"></co-input-checkbox>\n                  <span>{{ option.label }}</span>\n                </li>\n              </ul>\n            </div>\n            <div class=\"list-of-values-multiselect-ok-button\" (click)=\"okClicked()\">\n              <span [textContent]=\"'Ok'\"></span>\n              <co-icon [icon]=\"icons.Check\"></co-icon>\n            </div>\n          </div>\n        </div>\n    ",
-                    encapsulation: i0.ViewEncapsulation.None
-                },] }
-    ];
-    ListOfValuesMultiselectSearch.propDecorators = {
-        showClass: [{ type: i0.HostBinding, args: ["class.co-list-of-values-multiselect-search",] }],
-        collection: [{ type: i0.Input }],
-        returnChosenCollection: [{ type: i0.Input }],
-        chosenCollection: [{ type: i0.Output }],
-        okButtonClicked: [{ type: i0.Output }]
-    };
-
-    var ListOfValuesMultiselectSearchModule = /** @class */ (function () {
-        function ListOfValuesMultiselectSearchModule() {
-        }
-        return ListOfValuesMultiselectSearchModule;
-    }());
-    ListOfValuesMultiselectSearchModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        InputTextModule,
-                        IconModule,
-                        InputCheckboxModule,
-                    ],
-                    declarations: [
-                        ListOfValuesMultiselectSearch
-                    ],
-                    exports: [
-                        ListOfValuesMultiselectSearch
-                    ]
-                },] }
-    ];
-
     var ListOfValuesModule = /** @class */ (function () {
         function ListOfValuesModule() {
         }
@@ -11794,11 +11810,12 @@
                         InputCheckboxModule,
                         OverlayModule,
                         ClickoutsideModule,
-                        ListOfValuesMultiselectSearchModule
+                        IconModule
                     ],
                     declarations: [
                         ListOfValuesComponent,
-                        ListOfValuesPopupComponent
+                        ListOfValuesPopupComponent,
+                        ListOfValuesMultiselectPopupComponent
                     ],
                     exports: [
                         ListOfValuesComponent
@@ -12619,8 +12636,7 @@
     exports.LevelIndicatorModule = LevelIndicatorModule;
     exports.ListOfValuesComponent = ListOfValuesComponent;
     exports.ListOfValuesModule = ListOfValuesModule;
-    exports.ListOfValuesMultiselectSearch = ListOfValuesMultiselectSearch;
-    exports.ListOfValuesMultiselectSearchModule = ListOfValuesMultiselectSearchModule;
+    exports.ListOfValuesPopupComponent = ListOfValuesPopupComponent;
     exports.MultiSelectListComponent = MultiSelectListComponent;
     exports.MultiSelectListModule = MultiSelectListModule;
     exports.ObserveVisibilityModule = ObserveVisibilityModule;
@@ -12659,7 +12675,7 @@
     exports["ɵbe"] = SimpleGridCellComponent;
     exports["ɵbf"] = ClickOutsideDirective;
     exports["ɵbg"] = ClickOutsideMasterService;
-    exports["ɵbh"] = ListOfValuesPopupComponent;
+    exports["ɵbh"] = ListOfValuesMultiselectPopupComponent;
     exports["ɵbi"] = PrependPipeModule;
     exports["ɵbj"] = PrependPipe;
     exports["ɵbk"] = TooltipModule;