@colijnit/corecomponents_v12 12.0.70 → 12.0.72

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4219,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;
@@ -4235,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: '*' })),
@@ -4257,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"],] }]
     };
@@ -4274,7 +4281,8 @@
         { type: core.NgModule, args: [{
                     imports: [
                         common.CommonModule,
-                        IconModule
+                        IconModule,
+                        ButtonModule
                     ],
                     declarations: [CollapsibleComponent],
                     exports: [CollapsibleComponent]
@@ -10965,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", {
@@ -10992,6 +11003,7 @@
         };
         FilterItemComponent.prototype.ngOnInit = function () {
             this.setToInitialLimit();
+            this.showButton = this.valueSelected();
         };
         FilterItemComponent.prototype.setToInitialLimit = function () {
             this.limitTo = this.initialLimit;
@@ -11014,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) {
@@ -11024,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;
@@ -11068,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
                 },] }
     ];
@@ -11090,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",] }]
     };