@colijnit/corecomponents_v12 12.0.69 → 12.0.71

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -3680,12 +3680,12 @@
             this.icons = exports.CoreComponentsIcon;
             this.showCloseIcon = true;
             this.modal = false;
+            this.show = false;
             this.borderless = false;
             this.closeClick = new core.EventEmitter();
             this.overlayClick = new core.EventEmitter();
             this.isTouch = false;
             this.mobile = false;
-            this.show = false;
         }
         CoDialogComponent.prototype.showClass = function () {
             return true;
@@ -3697,6 +3697,7 @@
             }
         };
         CoDialogComponent.prototype.ngOnInit = function () {
+            this.show = false;
             this._checkDevice();
             this.show = true;
         };
@@ -3742,6 +3743,7 @@
         footerTemplate: [{ type: core.Input }],
         showCloseIcon: [{ type: core.Input }],
         modal: [{ type: core.Input }],
+        show: [{ type: core.Input }],
         borderless: [{ type: core.HostBinding, args: ['class.borderless',] }, { type: core.Input }],
         closeClick: [{ type: core.Output }],
         overlayClick: [{ type: core.Output }],
@@ -4217,6 +4219,7 @@
             this.expandButtonLast = false;
             this.expanded = false;
             this.expandedChange = new core.EventEmitter();
+            this.buttonClicked = new core.EventEmitter();
         }
         CollapsibleComponent.prototype.showClass = function () {
             return true;
@@ -4233,12 +4236,15 @@
             this.expanded = !this.expanded;
             this.expandedChange.next(this.expanded);
         };
+        CollapsibleComponent.prototype.onButtonClick = function () {
+            this.buttonClicked.emit();
+        };
         return CollapsibleComponent;
     }());
     CollapsibleComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-collapsible",
-                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n      <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n        <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
+                    template: "\n    <div class=\"collapsible-header\" [class.end]=\"expandButtonLast\" (click)=\"changeExpanded()\">\n      <div class=\"collapsible-header-start\">\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"!expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n        <div class=\"collapsible-title\" [textContent]=\"headerTitle\"></div>\n      </div>\n      <div class=\"collapsible-header-end\">\n        <div class=\"collapsible-button-wrapper\" *ngIf=\"showButton !== undefined\" (click)=\"$event.stopPropagation()\">\n          <button class=\"collapsible-button\" *ngIf=\"showButton\" [textContent]=\"buttonText\"\n                  (click)=\"onButtonClick()\"></button>\n        </div>\n        <div class=\"expand-icon-wrapper\" [class.expanded]=\"expanded\" *ngIf=\"expandButtonLast\">\n          <co-icon class=\"expand-icon\" [iconData]=\"iconData\"></co-icon>\n        </div>\n      </div>\n    </div>\n    <div class=\"collapsible-content\" *ngIf=\"expanded\" @showHideContent>\n      <ng-content></ng-content>\n    </div>\n  ",
                     animations: [
                         animations.trigger('showHideContent', [
                             animations.state('*', animations.style({ height: '*' })),
@@ -4255,10 +4261,13 @@
     ]; };
     CollapsibleComponent.propDecorators = {
         headerTitle: [{ type: core.Input }],
+        buttonText: [{ type: core.Input }],
         iconData: [{ type: core.Input }],
         expandButtonLast: [{ type: core.Input }],
+        showButton: [{ type: core.Input }],
         expanded: [{ type: core.Input }],
         expandedChange: [{ type: core.Output }],
+        buttonClicked: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-collapsible",] }],
         onHostClick: [{ type: core.HostListener, args: ["click", ["$event"],] }]
     };
@@ -4272,7 +4281,8 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        IconModule
+                        IconModule,
+                        ButtonModule
                     ],
                     declarations: [CollapsibleComponent],
                     exports: [CollapsibleComponent]
@@ -6583,7 +6593,6 @@
             _this.shopPopup = true;
             _this.valueChange = new core.EventEmitter();
             _this.isSmall = false;
-            _this.customHeight = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -6630,7 +6639,6 @@
         popupWidth: [{ type: core.Input }],
         valueChange: [{ type: core.Output }],
         isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
-        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-combo-box",] }]
     };
 
@@ -6958,7 +6966,6 @@
             //   this._model = value;
             // }
             _this.collection = [];
-            _this.customHeight = true;
             _this.selectionSettings = { mode: 'Multiple' };
             return _this;
         }
@@ -7024,8 +7031,7 @@
         singleSelect: [{ type: core.Input }],
         showCheckbox: [{ type: core.Input }],
         showSelectAll: [{ type: core.Input }],
-        showClass: [{ type: core.HostBinding, args: ['class.co-input-listbox',] }],
-        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }]
+        showClass: [{ type: core.HostBinding, args: ['class.co-input-listbox',] }]
     };
 
     ej2Base.enableRipple(true);
@@ -7691,7 +7697,6 @@
             _this.hasOwnLabel = true;
             _this.hideArrowButtons = false;
             _this.isSmall = false;
-            _this.customHeight = false;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -7771,8 +7776,7 @@
         hasRightIcon: [{ type: core.HostBinding, args: ['class.has-right-icon',] }],
         hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }],
         hideArrowButtons: [{ type: core.Input }, { type: core.HostBinding, args: ['class.hideArrows',] }],
-        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
-        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }, { type: core.Input }]
+        isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }]
     };
 
     var ValidationErrorModule = /** @class */ (function () {
@@ -7919,7 +7923,6 @@
             _this.search = new core.EventEmitter();
             _this.useLeftIcon = false;
             _this.useRightIcon = false;
-            _this.customHeight = false;
             _this.noIcon = false;
             _this.isSmall = false;
             return _this;
@@ -7951,7 +7954,6 @@
         search: [{ type: core.Output }],
         useLeftIcon: [{ type: core.Input }],
         useRightIcon: [{ type: core.Input }],
-        customHeight: [{ type: core.Input }],
         noIcon: [{ type: core.HostBinding, args: ['class.no-icon',] }, { type: core.Input }],
         isSmall: [{ type: core.HostBinding, args: ['class.is-small',] }, { type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ['class.co-input-search',] }]
@@ -7961,10 +7963,7 @@
     ], InputSearchComponent.prototype, "useLeftIcon", void 0);
     __decorate([
         InputBoolean()
-    ], InputSearchComponent.prototype, "useRightIcon", void 0);
-    __decorate([
-        InputBoolean()
-    ], InputSearchComponent.prototype, "customHeight", void 0);
+    ], InputSearchComponent.prototype, "useRightIcon", void 0);
 
     var InputSearchModule = /** @class */ (function () {
         function InputSearchModule() {
@@ -7996,7 +7995,6 @@
             _this.elementRef = elementRef;
             _this.placeholder = "";
             _this.hasOwnLabel = true;
-            _this.customHeight = true;
             _super.prototype._markAsOnPush.call(_this);
             return _this;
         }
@@ -8030,8 +8028,7 @@
     InputTextareaComponent.propDecorators = {
         placeholder: [{ type: core.Input }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-textarea",] }],
-        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }],
-        customHeight: [{ type: core.HostBinding, args: ['class.custom-height',] }]
+        hasOwnLabel: [{ type: core.HostBinding, args: ["class.has-own-label",] }]
     };
 
     var InputTextareaModule = /** @class */ (function () {
@@ -10976,14 +10973,17 @@
             // Set to true to show all results. Set to false to get 'show more' and 'show less' buttons to expand and contract.
             this.showAllResults = false;
             this.singleSelect = false;
+            this.filterButtonLabel = "Search";
             this.searchPlaceholder = 'Search...';
             this.showMoreLabel = 'Show more';
             this.showLessLabel = 'Show less';
             this.noResultsLabel = "No results";
             this.collectionChange = new core.EventEmitter();
+            this.filterButtonClicked = new core.EventEmitter();
             this.filteredCollection = [];
             this.limitTo = 10;
             this.filterText = "";
+            this.showButton = false;
             this._collection = [];
         }
         Object.defineProperty(FilterItemComponent.prototype, "collection", {
@@ -11003,6 +11003,7 @@
         };
         FilterItemComponent.prototype.ngOnInit = function () {
             this.setToInitialLimit();
+            this.showButton = this.valueSelected();
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
             this.limitTo = this.initialLimit;
@@ -11025,6 +11026,7 @@
             return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) <= this.limitTo && ((_b = this.filteredCollection) === null || _b === void 0 ? void 0 : _b.length) > this.initialLimit;
         };
         FilterItemComponent.prototype.handleModelChange = function (model) {
+            this.showButton = true;
             if (this.singleSelect) {
                 this.collection.forEach(function (m) {
                     if (m.code !== model.code && m.description !== model.description) {
@@ -11035,6 +11037,9 @@
             model.checked = !model.checked;
             this.collectionChange.emit(this.collection);
         };
+        FilterItemComponent.prototype.valueSelected = function () {
+            return !!this.collection.find(function (c) { return c.checked; });
+        };
         // Applies filter to the collection.
         FilterItemComponent.prototype.applyFilter = function (text) {
             var _a, _b;
@@ -11079,12 +11084,15 @@
                 });
             });
         };
+        FilterItemComponent.prototype.onButtonClicked = function () {
+            this.filterButtonClicked.emit();
+        };
         return FilterItemComponent;
     }());
     FilterItemComponent.decorators = [
         { type: core.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      >\n        <div class=\"co-filter-item-collapsable-content\">\n          <div class=\"co-filter-item-custom-content\" *ngIf=\"customContent; else collectionContent\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\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=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [name]=\"'radiogroup'\"\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          </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\" (click)=\"showButton=true\">\n            <ng-content></ng-content>\n          </div>\n          <ng-template #collectionContent>\n            <div class=\"co-filter-item-collection-content\">\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=\"!singleSelect\"\n                                       [label]=\"option.description\"\n                                       [model]=\"option.checked\"\n                                       (modelChange)=\"handleModelChange(option)\"\n                    ></co-input-checkbox>\n                    <co-input-radio-button *ngIf=\"singleSelect\"\n                                           [name]=\"'radiogroup'\"\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          </ng-template>\n        </div>\n      </co-collapsible>\n    </div>\n\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -11101,11 +11109,13 @@
         customContent: [{ type: core.Input }],
         showAllResults: [{ type: core.Input }],
         singleSelect: [{ type: core.Input }],
+        filterButtonLabel: [{ type: core.Input }],
         searchPlaceholder: [{ type: core.Input }],
         showMoreLabel: [{ type: core.Input }],
         showLessLabel: [{ type: core.Input }],
         noResultsLabel: [{ type: core.Input }],
         collectionChange: [{ type: core.Output }],
+        filterButtonClicked: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
     };