@colijnit/corecomponents_v12 12.0.103 → 12.0.105

package/fesm2015/colijnit-corecomponents_v12.js

@@ -4008,7 +4008,7 @@ class OverlayService {
         this._appRef = _appRef;
         this._injector = _injector;
     }
-    createComponent(compClass, inputs) {
+    createComponent(compClass, inputs, events) {
         if (this._componentRef) {
             this.removeComponent();
         }
@@ -4022,6 +4022,13 @@ class OverlayService {
                 }
             }
         }
+        if (events) {
+            for (let event in events) {
+                if (events.hasOwnProperty(event)) {
+                    this._componentRef.instance[event].subscribe((value) => events[event](value));
+                }
+            }
+        }
         this._appRef.attachView(this._componentRef.hostView);
         const domElem = this._componentRef.hostView
             .rootNodes[0];
@@ -6387,6 +6394,7 @@ CommitButtonsModule.decorators = [
 class OverlayDirective {
     constructor(elementRef) {
         this.keepInView = false;
+        this.inheritWidth = false;
         this.handleScroll = (event) => {
             this._checkAndPlaceElement();
         };
@@ -6449,6 +6457,9 @@ class OverlayDirective {
             this._elementRef.nativeElement.classList.remove('top');
             this._elementRef.nativeElement.style.top = parentRect.bottom + "px";
         }
+        if (this.inheritWidth) {
+            this._elementRef.nativeElement.style.width = parentRect.width + "px";
+        }
         this._elementRef.nativeElement.style.left = parentRect.left + "px";
         if (this.keepInView) {
             if (elementRect.right > window.innerWidth) {
@@ -6474,7 +6485,8 @@ OverlayDirective.ctorParameters = () => [
 ];
 OverlayDirective.propDecorators = {
     parent: [{ type: Input, args: ["overlay",] }],
-    keepInView: [{ type: Input }]
+    keepInView: [{ type: Input }],
+    inheritWidth: [{ type: Input }]
 };
 
 class OverlayParentDirective {
@@ -10697,306 +10709,250 @@ ViewModeButtonsModule.decorators = [
             },] }
 ];
 
-class FilterPipe {
-    transform(items, field, value) {
-        if (!items || !field) {
-            return items;
+class ListOfValuesPopupComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.chosenOption = new EventEmitter();
+        this.closePopup = new EventEmitter();
+        this.displayField = 'description';
+        this.searchDisabled = false;
+        this.filteredOptions = this.collection;
+        this.searchTerm = '';
+        this._collection = [];
+    }
+    showClass() {
+        return true;
+    }
+    set collection(value) {
+        this._collection = value || [];
+        this.filterOptions();
+    }
+    get collection() {
+        return this._collection;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.model) {
+            this.selectedModel = this.model[this.displayField];
         }
-        return items.filter(item => item[field] === value);
+    }
+    filterOptions() {
+        this.filteredOptions = this.collection.filter(option => option[this.displayField].toLowerCase().includes(this.searchTerm.toLowerCase()));
+    }
+    onOptionClick(option) {
+        this.model = option;
+        this.selectedModel = this.model[this.displayField];
+        this.modelChange.emit(this.model);
+        this.searchTerm = option.label;
+        this.searchTerm = "";
+        this.filterOptions();
+        this.chosenOption.emit(option);
+    }
+    optionClicked() {
+        this.overlayService.removeComponent();
+        this.closePopup.emit();
     }
 }
-FilterPipe.decorators = [
-    { type: Pipe, args: [{
-                name: "filter",
-                pure: false
-            },] }
-];
-
-class FilterPipeModule {
-}
-FilterPipeModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    FilterPipe
+ListOfValuesPopupComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-list-of-values-popup",
+                template: `
+          <div class="lov-options" [overlay]="parentForOverlay" [inheritWidth]="true" [ngClass]="customCssClass" (clickOutside)="optionClicked()">
+            <co-input-text *ngIf="!searchDisabled" [(model)]="searchTerm" [placeholder]="searchPlaceholder" (modelChange)="filterOptions()"></co-input-text>
+            <ul>
+              <li *ngFor="let option of filteredOptions" [class.selected]="option === model" (click)="onOptionClick(option)">
+                <span [textContent]="option[displayField]"></span>
+              </li>
+            </ul>
+          </div>
+
+    `,
+                providers: [
+                    OverlayService
                 ],
-                exports: [
-                    FilterPipe
-                ]
+                encapsulation: ViewEncapsulation.None
             },] }
-];
+];
+ListOfValuesPopupComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-list-of-values-popup",] }],
+    chosenOption: [{ type: Output }],
+    closePopup: [{ type: Output }],
+    displayField: [{ type: Input }],
+    searchPlaceholder: [{ type: Input }],
+    customCssClass: [{ type: Input }],
+    searchDisabled: [{ type: Input }],
+    parentForOverlay: [{ type: Input }],
+    collection: [{ type: Input }]
+};
 
-class FilterItemComponent {
-    constructor(iconService) {
-        this.iconService = iconService;
+class ListOfValuesComponent extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
         this.icons = 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 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 EventEmitter();
-        this.filterButtonClicked = new EventEmitter();
-        this.filteredCollection = [];
-        this.limitTo = 10;
-        this.filterText = "";
-        this.showButton = false;
+        this.multiselect = false;
+        this.displayField = 'description';
+        this.searchDisabled = false;
+        this.selectedOptions = [];
+        this.filteredOptions = this.collection;
+        this.searchTerm = '';
+        this.isSelectOpen = false;
+        this.state = 'default';
+        this.searchClicked = false;
+        this.multiselectTags = [];
         this._collection = [];
     }
+    showClass() {
+        return true;
+    }
     set collection(value) {
-        var _a;
-        this._collection = value;
-        this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+        this._collection = value || [];
+        this.filterOptions();
     }
     get collection() {
         return this._collection;
     }
-    showClass() {
-        return true;
-    }
     ngOnInit() {
-        this.setToInitialLimit();
-        this.showButton = this.valueSelected();
-    }
-    setToInitialLimit() {
-        this.limitTo = this.initialLimit;
-    }
-    increaseLimit() {
-        this.limitTo += 10;
-    }
-    moreToShow() {
-        var _a;
-        if (this.showAllResults) {
-            return false;
+        super.ngOnInit();
+        if (this.model) {
+            this.selectedModel = this.model[this.displayField];
         }
-        return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
     }
-    lessToShow() {
-        var _a, _b;
-        if (this.showAllResults) {
-            return false;
+    filterOptions() {
+        if (!this.multiselect) {
+            this.filteredOptions = this.collection.filter(option => option[this.displayField].toLowerCase().includes(this.searchTerm.toLowerCase()));
         }
-        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;
-    }
-    handleModelChange(model) {
-        this.showButton = true;
-        if (this.singleSelect) {
-            this.collection.forEach(m => {
-                if (m.code !== model.code && m.description !== model.description) {
-                    m.checked = false;
+        else {
+            this.selectedOptions = this.selectedOptions.filter((option) => {
+                if (this.collection) {
+                    return this.searchTerm.includes(option.label);
+                }
+                else {
+                    return this.searchTerm.includes(option.value);
                 }
             });
         }
-        model.checked = !model.checked;
-        this.collectionChange.emit(this.collection);
     }
-    valueSelected() {
-        if (this.collection) {
-            return !!this.collection.find(c => c.checked);
+    onOptionClick(option) {
+        if (!this.multiselect) {
+            this.model = option;
+            this.selectedModel = this.model[this.displayField];
+            this.modelChange.emit(this.model);
+            this.searchTerm = option.label;
+            this.isSelectOpen = false;
+            this.searchTerm = "";
+            this.filterOptions();
         }
-        return false;
-    }
-    // Applies filter to the collection.
-    applyFilter(text) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
-                if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
-                    this.collection = yield this.collectionLoadFn(text);
-                }
-                else if (text.length < this.minSearchCharsToLoadCollection) {
-                    this.collection = undefined;
-                }
-            }
-            this.filterText = text;
-            if (!this.collection) {
-                return [];
+        if (this.multiselect) {
+            if (this.selectedOptions.includes(option)) {
+                this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
             }
-            const filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-            let filteredItemCount = 0;
-            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter((item) => {
-                var _a;
-                const labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
-                const isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
-                if (isHiddenByFilter) {
-                    return false;
-                }
-                else {
-                    filteredItemCount++;
-                    return true;
-                }
+            else {
+                this.selectedOptions.push(option);
+            }
+            this.modelChange.emit(this.selectedOptions);
+        }
+    }
+    toggleSelect() {
+        this.isSelectOpen = !this.isSelectOpen;
+        if (this.isSelectOpen) {
+            this.overlayService.createComponent(ListOfValuesPopupComponent, {
+                parentForOverlay: this.parentForOverlay,
+                customCssClass: this.customCssClass,
+                searchDisabled: this.searchDisabled,
+                searchPlaceholder: this.searchPlaceholder,
+                displayField: this.displayField,
+                collection: this.collection
+            }, {
+                chosenOption: (value) => this.optionChosen(value),
+                closePopup: () => this.closePopup()
             });
-        });
+        }
+        else {
+            this.overlayService.removeComponent();
+        }
+        this.state = (this.state === 'default' ? 'rotated' : 'default');
     }
-    onButtonClicked() {
-        this.filterButtonClicked.emit();
+    multiselectOkClick() {
+        this.searchClicked = false;
+    }
+    createMultiSelectTags(tags) {
+        this.multiselectTags = tags;
+    }
+    openMultiselectSearch() {
+        this.searchClicked = true;
+    }
+    optionChosen(option) {
+        this.selectedModel = option[this.displayField];
+    }
+    closePopup() {
+        this.overlayService.removeComponent();
     }
 }
-FilterItemComponent.decorators = [
+ListOfValuesComponent.decorators = [
     { type: Component, args: [{
-                selector: "co-filter-item",
+                selector: "co-list-of-values",
                 template: `
-    <div class="co-filter-item-header">
-      <co-collapsible
-        [headerTitle]="placeholder"
-        [expandButtonLast]="true"
-        [iconData]="iconService.getIcon(icons.ArrowPointDown)"
-        [expanded]="expanded"
-        [showButton]="showButton"
-        [buttonText]="filterButtonLabel"
-        (buttonClicked)="onButtonClicked()"
-      >
-        <div class="co-filter-item-collapsable-content">
-          <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
-               (keydown)="showButton=true" (mousedown)="showButton=true">
-            <ng-content></ng-content>
+      <div class="lov-container">
+        <div class="lov-container-child" *ngIf="!multiselect">
+          <div class="search-wrapper" overlayParent #parentForOverlay="overlayParent">
+            <co-input-text class="lov-search no-focus-line"
+                           type="text"
+                           [model]="selectedModel"
+                           [placeholder]="label"
+                           [readonly]="readonly"
+                           [disabled]="disabled"
+                           [required]="required"
+                           [rightIcon]="icons.ArrowPointDown"
+                           (click)="toggleSelect()"
+                           (rightIconClick)="toggleSelect()"
+            ></co-input-text>
           </div>
-          <ng-template #collectionContent>
-            <div class="co-filter-item-collection-content">
-              <co-input-text
-                *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
-                [placeholder]="searchPlaceholder"
-                [model]="filterText"
-                (modelChange)="applyFilter($event)"
-              >
-              </co-input-text>
-              <div class="no-results" *ngIf="filteredCollection?.length === 0">
-                <span [textContent]="noResultsLabel"></span>
-              </div>
-              <div class="co-filter-item-collection-results">
-                <ng-container
-                  *ngFor="let option of filteredCollection; let index = index">
-                  <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
-                    <co-input-checkbox *ngIf="!singleSelect"
-                                       [label]="option.description"
-                                       [model]="option.checked"
-                                       [clickableLabel]="false"
-                                       (modelChange)="handleModelChange(option)"
-                    ></co-input-checkbox>
-                    <co-input-radio-button *ngIf="singleSelect"
-                                           [label]="option.description"
-                                           [model]="option.checked"
-                                           (modelChange)="handleModelChange(option)"
-                    ></co-input-radio-button>
-                    <div class="co-filter-item-amount" *ngIf="option.count"
-                         [textContent]="option.count.toString() | append: ')' | prepend: '      ('"
-                    ></div>
-                  </div>
 
-                </ng-container>
-              </div>
-              <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
-                <div class="co-filter-show-more clickable"
-                     *ngIf="moreToShow()">
-                  <a (click)="increaseLimit()">
-                    <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
-                    <span [textContent]="showMoreLabel"></span>
-                  </a>
-                </div>
-                <div class="co-filter-show-less clickable"
-                     *ngIf="lessToShow()">
-                  <a (click)="setToInitialLimit()">
-                    <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
-                    <span [textContent]="showLessLabel"></span>
-                  </a>
-                </div>
-              </div>
+
+
+        </div>
+        <div *ngIf="multiselect">
+          <div class="search-wrapper-multiselect" (click)="openMultiselectSearch()" *ngIf="!searchClicked">
+            <div class="tag-wrapper">
+              <ul class="tag-ul-wrapper">
+                <li class="tag" *ngFor="let tags of multiselectTags">
+                  <span [textContent]="tags.label"></span>
+                </li>
+              </ul>
             </div>
-          </ng-template>
+          </div>
+          <div *ngIf="searchClicked">
+            <co-list-of-values-multiselect-search [collection]="filteredOptions" [returnChosenCollection]="multiselectTags" (okButtonClicked)="multiselectOkClick()" (chosenCollection)="createMultiSelectTags($event)"></co-list-of-values-multiselect-search>
+          </div>
         </div>
-      </co-collapsible>
-    </div>
-
-  `,
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush
+      </div>
+    `,
+                providers: [
+                    OverlayService
+                ],
+                animations: [
+                    trigger('rotatedState', [
+                        state('default', style({ transform: 'rotate(0)' })),
+                        state('rotated', style({ transform: 'rotate(-180deg)' })),
+                        transition('rotated => default', animate('300ms ease-out')),
+                        transition('default => rotated', animate('300ms ease-out'))
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
             },] }
 ];
-FilterItemComponent.ctorParameters = () => [
-    { type: IconCacheService }
-];
-FilterItemComponent.propDecorators = {
+ListOfValuesComponent.propDecorators = {
+    parentForOverlay: [{ type: ViewChild, args: ["parentForOverlay", { read: ElementRef },] }],
+    multiselect: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-list-of-values",] }],
+    displayField: [{ type: Input }],
     collection: [{ type: Input }],
-    placeholder: [{ type: Input }],
-    initialLimit: [{ type: Input }],
-    expanded: [{ type: Input }],
-    minSearchCharsToLoadCollection: [{ type: Input }],
-    collectionLoadFn: [{ type: Input }],
-    customContent: [{ type: Input }],
-    showAllResults: [{ type: Input }],
-    singleSelect: [{ type: Input }],
-    filterButtonLabel: [{ type: Input }],
     searchPlaceholder: [{ type: Input }],
-    showMoreLabel: [{ type: Input }],
-    showLessLabel: [{ type: Input }],
-    noResultsLabel: [{ type: Input }],
-    collectionChange: [{ type: Output }],
-    filterButtonClicked: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.co-filter-item",] }]
+    label: [{ type: Input }],
+    customCssClass: [{ type: Input }],
+    searchDisabled: [{ type: Input }]
 };
 
-// A pipe for prepending strings to other strings in view templates.
-class PrependPipe {
-    transform(value, prepend) {
-        if (!value) {
-            return "";
-        }
-        if (!prepend) {
-            return value;
-        }
-        return prepend + value;
-    }
-}
-PrependPipe.decorators = [
-    { type: Pipe, args: [{ name: "prepend" },] }
-];
-
-class PrependPipeModule {
-}
-PrependPipeModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    PrependPipe
-                ],
-                exports: [
-                    PrependPipe
-                ]
-            },] }
-];
-
-class FilterItemModule {
-}
-FilterItemModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    CollapsibleModule,
-                    InputTextModule,
-                    InputCheckboxMultiSelectModule,
-                    InputCheckboxModule,
-                    IconModule,
-                    ScrollingModule,
-                    AppendPipeModule,
-                    PrependPipeModule,
-                    InputTextModule,
-                    InputRadioButtonModule,
-                    InputTextModule
-                ],
-                declarations: [
-                    FilterItemComponent
-                ],
-                exports: [
-                    FilterItemComponent
-                ]
-            },] }
-];
-
 // Human-readable JS keyboard codes, as in KeyboardEvent.key string values.
 var KeyboardKey;
 (function (KeyboardKey) {
@@ -11207,6 +11163,446 @@ ClickoutsideModule.decorators = [
             },] }
 ];
 
+class ListOfValuesMultiselectSearch extends BaseInputComponent {
+    constructor() {
+        super(...arguments);
+        this.icons = CoreComponentsIcon;
+        this.chosenCollection = new EventEmitter();
+        this.okButtonClicked = new EventEmitter();
+        this.selectedCollection = [];
+        this.selectedOptions = [];
+        this.allOptionsSelected = false;
+        this.searchTerm = '';
+    }
+    showClass() {
+        return true;
+    }
+    get filteredCollection() {
+        if (this.searchTerm.trim() === '') {
+            return this.collection;
+        }
+        return this.collection.filter((option) => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()));
+    }
+    ngOnInit() {
+        if (this.returnChosenCollection) {
+            this.selectedCollection = this.returnChosenCollection;
+        }
+    }
+    onOptionClick(option) {
+        const index = this.selectedCollection.findIndex((selectedOption) => selectedOption.value === option.value);
+        if (index !== -1) {
+            this.selectedCollection.splice(index, 1);
+        }
+        else {
+            this.selectedCollection.push(option);
+        }
+    }
+    okClicked() {
+        this.chosenCollection.emit(this.selectedCollection);
+        this.okButtonClicked.emit();
+    }
+    onToggleSelectAll() {
+        if (this.allOptionsSelected) {
+            this.selectedCollection = [];
+            this.allOptionsSelected = false;
+        }
+        else {
+            this.selectedCollection = [...this.collection];
+            this.allOptionsSelected = true;
+        }
+    }
+    searchCollection() {
+        this.selectedOptions = this.selectedOptions.filter((option) => {
+            if (this.collection) {
+                return this.searchTerm.includes(option.label);
+            }
+            else {
+                return this.searchTerm.includes(option.value);
+            }
+        });
+    }
+}
+ListOfValuesMultiselectSearch.decorators = [
+    { type: Component, args: [{
+                selector: "co-list-of-values-multiselect-search",
+                template: `
+        <div class="co-list-of-values-multiselect-search">
+          <div class="list-of-values-multiselect-search-input-text">
+            <co-input-text [placeholder]="'Zoeken...'" [(model)]="searchTerm" (input)="searchCollection()"></co-input-text>
+          </div>
+          <div class="list-of-values-multiselect-options">
+            <div class="list-of-values-multiselect-search-deselect" (click)="onToggleSelectAll()">
+              <span [textContent]="'(De)selecteer alles'"></span>
+              <co-icon [icon]="icons.CheckRound"></co-icon>
+            </div>
+            <div class="list-of-values-multiselect-list">
+              <ul>
+                <li *ngFor="let option of filteredCollection" (click)="onOptionClick(option)">
+                  <co-input-checkbox class="lov-options-checkbox" (modelChange)="onOptionClick(option)" [model]="selectedCollection.includes(option)"></co-input-checkbox>
+                  <span>{{ option.label }}</span>
+                </li>
+              </ul>
+            </div>
+            <div class="list-of-values-multiselect-ok-button" (click)="okClicked()">
+              <span [textContent]="'Ok'"></span>
+              <co-icon [icon]="icons.Check"></co-icon>
+            </div>
+          </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ListOfValuesMultiselectSearch.propDecorators = {
+    showClass: [{ type: HostBinding, args: ["class.co-list-of-values-multiselect-search",] }],
+    collection: [{ type: Input }],
+    returnChosenCollection: [{ type: Input }],
+    chosenCollection: [{ type: Output }],
+    okButtonClicked: [{ type: Output }]
+};
+
+class ListOfValuesMultiselectSearchModule {
+}
+ListOfValuesMultiselectSearchModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    InputTextModule,
+                    IconModule,
+                    InputCheckboxModule,
+                ],
+                declarations: [
+                    ListOfValuesMultiselectSearch
+                ],
+                exports: [
+                    ListOfValuesMultiselectSearch
+                ]
+            },] }
+];
+
+class ListOfValuesModule {
+}
+ListOfValuesModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    InputTextModule,
+                    InputCheckboxModule,
+                    OverlayModule,
+                    ClickoutsideModule,
+                    ListOfValuesMultiselectSearchModule
+                ],
+                declarations: [
+                    ListOfValuesComponent,
+                    ListOfValuesPopupComponent
+                ],
+                exports: [
+                    ListOfValuesComponent
+                ]
+            },] }
+];
+
+class FilterPipe {
+    transform(items, field, value) {
+        if (!items || !field) {
+            return items;
+        }
+        return items.filter(item => item[field] === value);
+    }
+}
+FilterPipe.decorators = [
+    { type: Pipe, args: [{
+                name: "filter",
+                pure: false
+            },] }
+];
+
+class FilterPipeModule {
+}
+FilterPipeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    FilterPipe
+                ],
+                exports: [
+                    FilterPipe
+                ]
+            },] }
+];
+
+class FilterItemComponent {
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.icons = 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 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 EventEmitter();
+        this.filterButtonClicked = new EventEmitter();
+        this.filteredCollection = [];
+        this.limitTo = 10;
+        this.filterText = "";
+        this.showButton = false;
+        this._collection = [];
+    }
+    set collection(value) {
+        var _a;
+        this._collection = value;
+        this.filteredCollection = (_a = this._collection) === null || _a === void 0 ? void 0 : _a.slice();
+    }
+    get collection() {
+        return this._collection;
+    }
+    showClass() {
+        return true;
+    }
+    ngOnInit() {
+        this.setToInitialLimit();
+        this.showButton = this.valueSelected();
+    }
+    setToInitialLimit() {
+        this.limitTo = this.initialLimit;
+    }
+    increaseLimit() {
+        this.limitTo += 10;
+    }
+    moreToShow() {
+        var _a;
+        if (this.showAllResults) {
+            return false;
+        }
+        return ((_a = this.filteredCollection) === null || _a === void 0 ? void 0 : _a.length) > this.limitTo;
+    }
+    lessToShow() {
+        var _a, _b;
+        if (this.showAllResults) {
+            return false;
+        }
+        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;
+    }
+    handleModelChange(model) {
+        this.showButton = true;
+        if (this.singleSelect) {
+            this.collection.forEach(m => {
+                if (m.code !== model.code && m.description !== model.description) {
+                    m.checked = false;
+                }
+            });
+        }
+        model.checked = !model.checked;
+        this.collectionChange.emit(this.collection);
+    }
+    valueSelected() {
+        if (this.collection) {
+            return !!this.collection.find(c => c.checked);
+        }
+        return false;
+    }
+    // Applies filter to the collection.
+    applyFilter(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(this.minSearchCharsToLoadCollection) && this.collectionLoadFn) {
+                if (text.length === this.minSearchCharsToLoadCollection && text.length > this.filterText.length) {
+                    this.collection = yield this.collectionLoadFn(text);
+                }
+                else if (text.length < this.minSearchCharsToLoadCollection) {
+                    this.collection = undefined;
+                }
+            }
+            this.filterText = text;
+            if (!this.collection) {
+                return [];
+            }
+            const filterText = (_a = this.filterText) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+            let filteredItemCount = 0;
+            this.filteredCollection = (_b = this.collection) === null || _b === void 0 ? void 0 : _b.filter((item) => {
+                var _a;
+                const labelText = (_a = item.description) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase();
+                const isHiddenByFilter = ((labelText === null || labelText === void 0 ? void 0 : labelText.indexOf(filterText)) === -1);
+                if (isHiddenByFilter) {
+                    return false;
+                }
+                else {
+                    filteredItemCount++;
+                    return true;
+                }
+            });
+        });
+    }
+    onButtonClicked() {
+        this.filterButtonClicked.emit();
+    }
+}
+FilterItemComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-filter-item",
+                template: `
+    <div class="co-filter-item-header">
+      <co-collapsible
+        [headerTitle]="placeholder"
+        [expandButtonLast]="true"
+        [iconData]="iconService.getIcon(icons.ArrowPointDown)"
+        [expanded]="expanded"
+        [showButton]="showButton"
+        [buttonText]="filterButtonLabel"
+        (buttonClicked)="onButtonClicked()"
+      >
+        <div class="co-filter-item-collapsable-content">
+          <div class="co-filter-item-custom-content" *ngIf="customContent; else collectionContent"
+               (keydown)="showButton=true" (mousedown)="showButton=true">
+            <ng-content></ng-content>
+          </div>
+          <ng-template #collectionContent>
+            <div class="co-filter-item-collection-content">
+              <co-input-text
+                *ngIf="collection?.length > 10 || minSearchCharsToLoadCollection"
+                [placeholder]="searchPlaceholder"
+                [model]="filterText"
+                (modelChange)="applyFilter($event)"
+              >
+              </co-input-text>
+              <div class="no-results" *ngIf="filteredCollection?.length === 0">
+                <span [textContent]="noResultsLabel"></span>
+              </div>
+              <div class="co-filter-item-collection-results">
+                <ng-container
+                  *ngFor="let option of filteredCollection; let index = index">
+                  <div class="co-filter-item-collection-result-item" *ngIf="index < limitTo || showAllResults">
+                    <co-input-checkbox *ngIf="!singleSelect"
+                                       [label]="option.description"
+                                       [model]="option.checked"
+                                       [clickableLabel]="false"
+                                       (modelChange)="handleModelChange(option)"
+                    ></co-input-checkbox>
+                    <co-input-radio-button *ngIf="singleSelect"
+                                           [label]="option.description"
+                                           [model]="option.checked"
+                                           (modelChange)="handleModelChange(option)"
+                    ></co-input-radio-button>
+                    <div class="co-filter-item-amount" *ngIf="option.count"
+                         [textContent]="option.count.toString() | append: ')' | prepend: '      ('"
+                    ></div>
+                  </div>
+
+                </ng-container>
+              </div>
+              <div class="co-filter-show-more-or-less" *ngIf="!showAllResults">
+                <div class="co-filter-show-more clickable"
+                     *ngIf="moreToShow()">
+                  <a (click)="increaseLimit()">
+                    <co-icon [iconData]="iconService.getIcon(icons.ArrowPointDown)"></co-icon>
+                    <span [textContent]="showMoreLabel"></span>
+                  </a>
+                </div>
+                <div class="co-filter-show-less clickable"
+                     *ngIf="lessToShow()">
+                  <a (click)="setToInitialLimit()">
+                    <co-icon [iconData]="iconService.getIcon(icons.ArrowPointUp)"></co-icon>
+                    <span [textContent]="showLessLabel"></span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </ng-template>
+        </div>
+      </co-collapsible>
+    </div>
+
+  `,
+                encapsulation: ViewEncapsulation.None,
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+FilterItemComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+FilterItemComponent.propDecorators = {
+    collection: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    initialLimit: [{ type: Input }],
+    expanded: [{ type: Input }],
+    minSearchCharsToLoadCollection: [{ type: Input }],
+    collectionLoadFn: [{ type: Input }],
+    customContent: [{ type: Input }],
+    showAllResults: [{ type: Input }],
+    singleSelect: [{ type: Input }],
+    filterButtonLabel: [{ type: Input }],
+    searchPlaceholder: [{ type: Input }],
+    showMoreLabel: [{ type: Input }],
+    showLessLabel: [{ type: Input }],
+    noResultsLabel: [{ type: Input }],
+    collectionChange: [{ type: Output }],
+    filterButtonClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-filter-item",] }]
+};
+
+// A pipe for prepending strings to other strings in view templates.
+class PrependPipe {
+    transform(value, prepend) {
+        if (!value) {
+            return "";
+        }
+        if (!prepend) {
+            return value;
+        }
+        return prepend + value;
+    }
+}
+PrependPipe.decorators = [
+    { type: Pipe, args: [{ name: "prepend" },] }
+];
+
+class PrependPipeModule {
+}
+PrependPipeModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    PrependPipe
+                ],
+                exports: [
+                    PrependPipe
+                ]
+            },] }
+];
+
+class FilterItemModule {
+}
+FilterItemModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CollapsibleModule,
+                    InputTextModule,
+                    InputCheckboxMultiSelectModule,
+                    InputCheckboxModule,
+                    IconModule,
+                    ScrollingModule,
+                    AppendPipeModule,
+                    PrependPipeModule,
+                    InputTextModule,
+                    InputRadioButtonModule,
+                    InputTextModule
+                ],
+                declarations: [
+                    FilterItemComponent
+                ],
+                exports: [
+                    FilterItemComponent
+                ]
+            },] }
+];
+
 class TooltipComponent {
     constructor(_elementRef, _changeDetector) {
         this._elementRef = _elementRef;
@@ -11644,5 +12040,5 @@ ColorSequenceService.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, ObserveVisibilityDirective as ɵbb, PaginationService as ɵbc, PaginatePipe as ɵbd, SimpleGridCellComponent as ɵbe, PrependPipeModule as ɵbf, PrependPipe as ɵbg, ClickOutsideDirective as ɵbh, ClickOutsideMasterService as ɵbi, TooltipModule as ɵbj, TooltipComponent as ɵbk, TooltipDirective as ɵbl, CheckmarkOverlayComponent as ɵbm, ScreenConfigurationDirective as ɵbn, ScreenConfigComponentWrapper as ɵbo, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, OverlayDirective as ɵw, OverlayParentDirective as ɵx, ValidationErrorComponent as ɵy, PopupShowerService as ɵz };
+export { ArticleTileComponent, ArticleTileModule, ButtonComponent, ButtonDropDownComponent, ButtonDropDownModule, ButtonModule, CardComponent, CardModule, Carousel3dComponent, Carousel3dModule, CarouselComponent, CarouselHammerConfig, CarouselModule, CheckmarkOverlayModule, ClickoutsideModule, CoDialogComponent, CoDialogModule, CoDialogWizardComponent, CoDialogWizardModule, CoDirection, CoGridComponent, CoGridModule, CoKanbanComponent, CoKanbanModule, CoOrientation, CoPivotComponent, CoPivotModule, CoScheduleComponent, CoScheduleModule, CoSidebarComponent, CoSidebarModule, CoToggleComponent, CoToggleModule, CollapsibleComponent, CollapsibleModule, ColorSequenceService, ColumnAlign, ContentViewMode, CoreComponentsIcon, DropDownListComponent, DropDownModule, FilterItemComponent, FilterItemModule, FilterItemViewmodel, FilterPipe, FilterPipeModule, FilterViewmodel, FormComponent, FormMasterService, FormModule, GridToolbarButtonComponent, GridToolbarButtonModule, GridToolbarComponent, GridToolbarModule, IconCacheService, IconCollapseHandleComponent, IconCollapseHandleModule, IconComponent, IconModule, ImageComponent, ImageModule, InputCheckboxComponent, InputCheckboxModule, InputCheckboxMultiSelectComponent, InputCheckboxMultiSelectModule, InputComboBoxComponent, InputComboBoxModule, InputDatePickerComponent, InputDatePickerModule, InputDateRangePickerComponent, InputDateRangePickerModule, InputListboxComponent, InputListboxModule, InputNumberPickerComponent, InputNumberPickerModule, InputRadioButtonComponent, InputRadioButtonModule, InputSearchComponent, InputSearchModule, InputTextComponent, InputTextModule, InputTextareaComponent, InputTextareaModule, LevelIndicatorComponent, LevelIndicatorModule, ListOfValuesComponent, ListOfValuesModule, ListOfValuesMultiselectSearch, ListOfValuesMultiselectSearchModule, MultiSelectListComponent, MultiSelectListModule, ObserveVisibilityModule, OrientationOfDirection, OverlayModule, OverlayService, PaginationBarComponent, PaginationBarModule, PaginationComponent, PaginationModule, PopupButtonsComponent, PopupMessageDisplayComponent, PopupModule, PopupWindowShellComponent, PriceDisplayPipe, PriceDisplayPipeModule, PromptService, SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, ScreenConfigurationModule, SimpleGridColumnDirective, SimpleGridComponent, SimpleGridModule, TextInputPopupComponent, TileComponent, TileModule, TooltipDirectiveModule, ViewModeButtonsComponent, ViewModeButtonsModule, showHideDialogAnimation, RippleModule as ɵa, MD_RIPPLE_GLOBAL_OPTIONS as ɵb, BaseSimpleGridComponent as ɵba, ObserveVisibilityDirective as ɵbb, PaginationService as ɵbc, PaginatePipe as ɵbd, SimpleGridCellComponent as ɵbe, ClickOutsideDirective as ɵbf, ClickOutsideMasterService as ɵbg, ListOfValuesPopupComponent as ɵbh, PrependPipeModule as ɵbi, PrependPipe as ɵbj, TooltipModule as ɵbk, TooltipComponent as ɵbl, TooltipDirective as ɵbm, CheckmarkOverlayComponent as ɵbn, ScreenConfigurationDirective as ɵbo, ScreenConfigComponentWrapper as ɵbp, CoRippleDirective as ɵc, CoViewportRulerService as ɵd, CoScrollDispatcherService as ɵe, CoScrollableDirective as ɵf, StopClickModule as ɵg, StopClickDirective as ɵh, InputBoolean as ɵi, BaseModule as ɵj, FormInputUserModelChangeListenerService as ɵk, NgZoneWrapperService as ɵl, BaseInputComponent as ɵm, BaseSelectionGridComponent as ɵn, BaseInlineEditGridComponent as ɵo, BaseToolbarGridComponent as ɵp, BaseGridComponent as ɵq, AppendPipeModule as ɵr, AppendPipe as ɵs, CommitButtonsModule as ɵt, CommitButtonsComponent as ɵu, ValidationErrorModule as ɵv, OverlayDirective as ɵw, OverlayParentDirective as ɵx, ValidationErrorComponent as ɵy, PopupShowerService as ɵz };
 //# sourceMappingURL=colijnit-corecomponents_v12.js.map