@colijnit/corecomponents_v12 12.0.34 → 12.0.37

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -5959,6 +5959,50 @@
                 },] }
     ];
 
+    var GridToolbarButtonComponent = /** @class */ (function () {
+        function GridToolbarButtonComponent() {
+            this.disabled = false;
+            this.buttonClick = new core.EventEmitter();
+        }
+        GridToolbarButtonComponent.prototype.showClass = function () {
+            return true;
+        };
+        return GridToolbarButtonComponent;
+    }());
+    GridToolbarButtonComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: "co-grid-toolbar-button",
+                    template: "\n    <div class=\"grid-toolbar-button-wrapper\" [class.disabled]=\"disabled\" (click)=\"buttonClick.next()\">\n      <co-icon [iconData]=\"iconData\"></co-icon>\n    </div>\n  ",
+                    encapsulation: core.ViewEncapsulation.None
+                },] }
+    ];
+    GridToolbarButtonComponent.propDecorators = {
+        iconData: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        buttonClick: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-grid-toolbar-button",] }]
+    };
+
+    ej2Base.enableRipple(true);
+    var GridToolbarButtonModule = /** @class */ (function () {
+        function GridToolbarButtonModule() {
+        }
+        return GridToolbarButtonModule;
+    }());
+    GridToolbarButtonModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        IconModule,
+                    ],
+                    declarations: [
+                        GridToolbarButtonComponent
+                    ],
+                    exports: [
+                        GridToolbarButtonComponent
+                    ]
+                },] }
+    ];
+
     var InputCheckboxComponent = /** @class */ (function (_super) {
         __extends(InputCheckboxComponent, _super);
         function InputCheckboxComponent(formComponent, iconCacheService, changeDetector, componentFactoryResolver, formUserChangeListener, ngZoneWrapper, elementRef) {
@@ -6338,21 +6382,25 @@
             _this.placeholder = "";
             _this.startDateChange = new core.EventEmitter();
             _this.endDateChange = new core.EventEmitter();
+            _this.dateRangeChange = new core.EventEmitter();
             return _this;
         }
         InputDateRangePickerComponent.prototype.showClass = function () {
             return true;
         };
-        InputDateRangePickerComponent.prototype.dateRangeChange = function () {
+        InputDateRangePickerComponent.prototype.rangeChange = function () {
             this.startDateChange.emit(this.startDate);
             this.endDateChange.emit(this.endDate);
+            if (this.startDate && this.endDate) {
+                this.dateRangeChange.emit([this.startDate, this.endDate]);
+            }
         };
         return InputDateRangePickerComponent;
     }(BaseInputComponent));
     InputDateRangePickerComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "co-input-date-range",
-                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"dateRangeChange()\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
+                    template: "\n    <ejs-daterangepicker\n      [format]=\"dateFormat\"\n      [placeholder]=\"placeholder\"\n      [ngModel]=\"model\"\n      (ngModelChange)=\"rangeChange()\"\n      [(startDate)]=\"startDate\"\n      [(endDate)]=\"endDate\"\n    ></ejs-daterangepicker>\n    <div class=\"required-indicator\"></div>\n    <ng-template #validationError></ng-template>\n  ",
                     encapsulation: core.ViewEncapsulation.None
                 },] }
     ];
@@ -6363,6 +6411,7 @@
         endDate: [{ type: core.Input }],
         startDateChange: [{ type: core.Output }],
         endDateChange: [{ type: core.Output }],
+        dateRangeChange: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-input-date-range-picker",] }]
     };
 
@@ -9842,33 +9891,30 @@
             this.expanded = false;
             // Set to false to use filter item with a multi selectable collection. Set to true to specify custom content
             this.customContent = false;
-            // Set to true to show filter input field.
-            this.searchable = true;
             // 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.searchPlaceholder = "Search...";
             this.showMoreLabel = 'Show more';
             this.showLessLabel = 'Show less';
             this.noResultsLabel = "No results";
-            this.collectionChanged = new core.EventEmitter();
-            this.filteredCollection = { filterItems: [] };
+            this.collectionChange = new core.EventEmitter();
+            this.filteredCollection = [];
             this.limitTo = 10;
             this.filterText = "";
-            this._collection = { filterItems: [] };
+            this._collection = [];
         }
         Object.defineProperty(FilterItemComponent.prototype, "collection", {
             get: function () {
                 return this._collection;
             },
             set: function (value) {
-                var _a, _b;
+                var _a;
                 this._collection = value;
-                this.filteredCollection.filterItems = (_b = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.filterItems) === null || _b === void 0 ? void 0 : _b.slice();
+                this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
             },
             enumerable: false,
             configurable: true
         });
-        // output bij: filtertext, kan gebruikt worden voor wanneer collectie opgehaald wordt
         FilterItemComponent.prototype.showClass = function () {
             return true;
         };
@@ -9882,32 +9928,31 @@
             this.limitTo += 10;
         };
         FilterItemComponent.prototype.moreToShow = function () {
-            var _a, _b;
+            var _a;
             if (this.showAllResults) {
                 return false;
             }
-            return ((_b = (_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.filterItems) === null || _b === void 0 ? void 0 : _b.length) > this.limitTo;
+            return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
         };
         FilterItemComponent.prototype.lessToShow = function () {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (this.showAllResults) {
                 return false;
             }
-            return ((_b = (_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.filterItems) === null || _b === void 0 ? void 0 : _b.length) <= this.limitTo && ((_d = (_c = this.filteredCollection) === null || _c === void 0 ? void 0 : _c.filterItems) === null || _d === void 0 ? void 0 : _d.length) > this.initialLimit;
+            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;
         };
         // Applies filter to the collection.
         FilterItemComponent.prototype.applyFilter = function (text) {
-            var _this = this;
             var _a, _b;
             if (!this.collection) {
-                return { filterItems: [] };
+                return [];
             }
             var filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
             var filteredItemCount = 0;
-            this.filteredCollection.filterItems = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filterItems.filter(function (item) {
+            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
                 var _a;
-                var labelText = (_a = item[_this.fields.text]) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                var isHiddenByFilter = (labelText.indexOf(filterText) === -1);
+                var labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                var isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
                 if (isHiddenByFilter) {
                     return false;
                 }
@@ -9922,7 +9967,7 @@
     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=\"searchable\"\n                [placeholder]=\"searchPlaceholder\"\n                [(model)]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\n              <div class=\"no-results\" *ngIf=\"filteredCollection?.filterItems?.length === 0\">\n                <span [textContent]=\"noResultsLabel\"></span>\n              </div>\n              <div class=\"co-filter-item-collection-results\">\n                <div class=\"co-filter-item-collection-result-items\"\n                     *ngFor=\"let option of filteredCollection?.filterItems; let index = index\">\n                  <div class=\"co-filter-item-collection-result-item\" *ngIf=\"index < limitTo || showAllResults\">\n                    <co-input-checkbox [label]=\"option[fields.text]\"\n                                       [(model)]=\"option.checked\"\n                                       (modelChange)=\"collectionChanged.emit()\"\n                    ></co-input-checkbox>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"fields.count\"\n                         [textContent]=\"option[fields.count] | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n                </div>\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      >\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\"\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                <div class=\"co-filter-item-collection-result-items\"\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 [label]=\"option.description\"\n                                       [(model)]=\"option.checked\"\n                                       (modelChange)=\"collectionChange.emit(collection)\"\n                    ></co-input-checkbox>\n                    <div class=\"co-filter-item-amount\" *ngIf=\"option.count\"\n                         [textContent]=\"option.count.toString() | append: ')' | prepend: '      ('\"\n                    ></div>\n                  </div>\n\n                </div>\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
                 },] }
     ];
@@ -9931,18 +9976,16 @@
     ]; };
     FilterItemComponent.propDecorators = {
         collection: [{ type: core.Input }],
-        fields: [{ type: core.Input }],
         placeholder: [{ type: core.Input }],
         initialLimit: [{ type: core.Input }],
         expanded: [{ type: core.Input }],
         customContent: [{ type: core.Input }],
-        searchable: [{ type: core.Input }],
         showAllResults: [{ type: core.Input }],
         searchPlaceholder: [{ type: core.Input }],
         showMoreLabel: [{ type: core.Input }],
         showLessLabel: [{ type: core.Input }],
         noResultsLabel: [{ type: core.Input }],
-        collectionChanged: [{ type: core.Output }],
+        collectionChange: [{ type: core.Output }],
         showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
     };
 
@@ -10056,6 +10099,8 @@
     exports.FormComponent = FormComponent;
     exports.FormMasterService = FormMasterService;
     exports.FormModule = FormModule;
+    exports.GridToolbarButtonComponent = GridToolbarButtonComponent;
+    exports.GridToolbarButtonModule = GridToolbarButtonModule;
     exports.GridToolbarComponent = GridToolbarComponent;
     exports.GridToolbarModule = GridToolbarModule;
     exports.IconCacheService = IconCacheService;