@colijnit/corecomponents_v12 12.0.31 → 12.0.32

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -9786,6 +9786,140 @@
                 },] }
     ];
 
+    var FilterItemComponent = /** @class */ (function () {
+        function FilterItemComponent(iconService) {
+            this.iconService = iconService;
+            this.icons = exports.CoreComponentsIcon;
+            this.initialLimit = 10;
+            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 false to never show the 'show more' and 'show less' links to expand and contract.
+            this.showMore = false;
+            this.showMoreLabel = 'Show more';
+            this.showLessLabel = 'Show less';
+            this.selectionChange = new core.EventEmitter();
+            this.selectedCollection = [];
+            this.filteredCollection = [];
+            this.limitTo = 10;
+            this.filterText = "";
+            this._collection = [];
+        }
+        Object.defineProperty(FilterItemComponent.prototype, "collection", {
+            get: function () {
+                return this._collection;
+            },
+            set: function (value) {
+                this._collection = value;
+                this.filteredCollection = this._collection.slice();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FilterItemComponent.prototype.showClass = function () {
+            return true;
+        };
+        FilterItemComponent.prototype.ngOnInit = function () {
+            this.setToInitialLimit();
+        };
+        FilterItemComponent.prototype.setToInitialLimit = function () {
+            this.limitTo = this.initialLimit;
+        };
+        FilterItemComponent.prototype.increaseLimit = function () {
+            this.limitTo += 10;
+        };
+        FilterItemComponent.prototype.updateSelection = function () {
+            this.selectedCollection = this.collection.filter(function (item) { return item.checked === true; });
+            this.selectionChange.emit(this.selectedCollection);
+        };
+        FilterItemComponent.prototype.moreToShow = function () {
+            if (!this.showMore) {
+                return false;
+            }
+            return this.filteredCollection.length > this.limitTo;
+        };
+        FilterItemComponent.prototype.lessToShow = function () {
+            if (!this.showMore) {
+                return false;
+            }
+            return this.filteredCollection.length <= this.limitTo && this.filteredCollection.length > this.initialLimit;
+        };
+        // Applies filter to the collection.
+        FilterItemComponent.prototype.applyFilter = function (text) {
+            var _this = this;
+            var _a;
+            if (!this.collection) {
+                return [];
+            }
+            console.log('filteren');
+            var filterText = this.filterText.toLowerCase();
+            var filteredItemCount = 0;
+            this.filteredCollection = (_a = this.collection) === null || _a === void 0 ? void 0 : _a.filter(function (item) {
+                var labelText = item[_this.fields.text].toLowerCase();
+                var isHiddenByFilter = (labelText.indexOf(filterText) === -1);
+                if (isHiddenByFilter) {
+                    return false;
+                }
+                else {
+                    filteredItemCount++;
+                    return true;
+                }
+            });
+        };
+        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=\"searchable\"\n                [placeholder]=\"searchPlaceholder\"\n                [(model)]=\"filterText\"\n                (modelChange)=\"applyFilter($event)\"\n              >\n              </co-input-text>\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 || !showMore\">\n                    <co-input-checkbox [label]=\"option[fields.text]\"\n                                       [(model)]=\"option['checked']\"\n                                       (modelChange)=\"updateSelection()\"\n                    ></co-input-checkbox>\n                  </div>\n                </div>\n              </div>\n              <div class=\"co-filter-show-more-or-less\" *ngIf=\"showMore\">\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
+                },] }
+    ];
+    FilterItemComponent.ctorParameters = function () { return [
+        { type: IconCacheService }
+    ]; };
+    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 }],
+        showMore: [{ type: core.Input }],
+        searchPlaceholder: [{ type: core.Input }],
+        showMoreLabel: [{ type: core.Input }],
+        showLessLabel: [{ type: core.Input }],
+        selectionChange: [{ type: core.Output }],
+        showClass: [{ type: core.HostBinding, args: ["class.co-filter-item",] }]
+    };
+
+    var FilterItemModule = /** @class */ (function () {
+        function FilterItemModule() {
+        }
+        return FilterItemModule;
+    }());
+    FilterItemModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        CollapsibleModule,
+                        InputTextModule,
+                        InputCheckboxMultiSelectModule,
+                        InputCheckboxModule,
+                        IconModule,
+                    ],
+                    declarations: [
+                        FilterItemComponent
+                    ],
+                    exports: [
+                        FilterItemComponent
+                    ]
+                },] }
+    ];
+
     /*
      * Public API Surface of corecomponents
      */
@@ -9829,6 +9963,8 @@
     exports.CollapsibleModule = CollapsibleModule;
     exports.DropDownListComponent = DropDownListComponent;
     exports.DropDownModule = DropDownModule;
+    exports.FilterItemComponent = FilterItemComponent;
+    exports.FilterItemModule = FilterItemModule;
     exports.FormComponent = FormComponent;
     exports.FormMasterService = FormMasterService;
     exports.FormModule = FormModule;