@ruc-lib/multi-select 2.0.8 → 3.1.0

package/fesm2020/ruc-lib-multi-select.mjs

@@ -1,558 +0,0 @@
-import * as i0 from '@angular/core';
-import { Pipe, Injectable, EventEmitter, Directive, Output, HostListener, Component, Input, ViewChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { MatPaginator } from '@angular/material/paginator';
-import '@angular/material/table';
-import { MatSort } from '@angular/material/sort';
-import { trigger, transition, style, query, sequence, animate, stagger } from '@angular/animations';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i7 from '@angular/material/core';
-import * as i8 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i9 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i10 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i11 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-
-class ListItem {
-    constructor(data) {
-        this.id = data.id;
-        this.text = data.text;
-        this.isDisabled = data.isDisabled;
-        this.icon = data.icon;
-        this.childItem = data.childItem;
-        this.grouped = data.grouped;
-    }
-}
-
-class FilterPipe {
-    transform(items, searchText, key) {
-        if (!items)
-            return [];
-        if (!searchText)
-            return items;
-        searchText = searchText.toLowerCase();
-        return items.filter(it => {
-            if (!key) {
-                return it.toLowerCase().includes(searchText);
-            }
-            else {
-                return it[key].toLowerCase().includes(searchText);
-            }
-        });
-    }
-}
-FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, name: "filter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filter'
-                }]
-        }] });
-
-class SortPipe {
-    transform(value, sortOrder = 'asc', sortKey = 'text') {
-        sortOrder = sortOrder && sortOrder.toLowerCase();
-        if (!value || (sortOrder !== 'asc' && sortOrder !== 'desc'))
-            return value;
-        let numberArray = [];
-        let stringArray = [];
-        numberArray = value
-            .filter((item) => typeof item[sortKey] === 'number')
-            .sort((a, b) => a[sortKey] - b[sortKey]);
-        stringArray = value
-            .filter((item) => typeof item[sortKey] === 'string')
-            .sort((a, b) => {
-            if (a[sortKey] < b[sortKey])
-                return -1;
-            else if (a[sortKey] > b[sortKey])
-                return 1;
-            else
-                return 0;
-        });
-        const sorted = numberArray.concat(stringArray);
-        return sortOrder === 'asc' ? sorted : sorted.reverse();
-    }
-}
-SortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SortPipe, name: "sort" });
-SortPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortPipe });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortPipe, decorators: [{
-            type: Injectable
-        }, {
-            type: Pipe,
-            args: [{
-                    name: 'sort',
-                }]
-        }] });
-
-const DropDownAnimation = trigger("dropDownMenu", [
-    transition(":enter", [
-        style({ height: 0, overflow: "hidden" }),
-        query(".option", [
-            style({ opacity: 0, transform: "translateY(-50px)" })
-        ]),
-        sequence([
-            animate("400ms", style({ height: "*" })),
-            query(".option", [
-                stagger(50, [
-                    animate("200ms ease", style({ opacity: 1, transform: "none" }))
-                ])
-            ])
-        ])
-    ]),
-    transition(":leave", [
-        style({ height: "*", overflow: "hidden" }),
-        query(".option", [style({ opacity: 1, transform: "none" })]),
-        sequence([
-            query(".option", [
-                stagger(-10, [
-                    animate("400ms ease", style({ opacity: 0, transform: "translateY(-50px)" }))
-                ])
-            ]),
-            animate("400ms", style({ height: 0 }))
-        ])
-    ])
-]);
-
-class ClickOutsideDirective {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
-        this.clickOutside = new EventEmitter();
-    }
-    onClick(event, targetElement) {
-        if (!targetElement) {
-            return;
-        }
-        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            this.clickOutside.emit(event);
-        }
-    }
-}
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ClickOutsideDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[clickOutside]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event', '$event.target']]
-            }] } });
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-class RuclibMultiSelectComponent {
-    constructor(filterPipe, sortPipe) {
-        this.filterPipe = filterPipe;
-        this.sortPipe = sortPipe;
-        this.separatorKeysCodes = [ENTER, COMMA];
-        this.rucEvent = new EventEmitter();
-        this.dataSource = []; /** dropdwon data source */
-    }
-    /** getApperrance method to define appearance */
-    getApperance() {
-        if (this.appearance === 'fill') {
-            return 'fill';
-        }
-        return 'outline';
-    }
-    ngOnInit() {
-        this.filteredItem = [];
-        this.selectedItems = [];
-        this.sortToggle = false;
-        this.addOnBlur = true;
-        this.showdropdown = false;
-        this.theme = 'primary';
-        this.isAllCheckboxSelected = false;
-        this.isShowSelectedFilter = false;
-        this.limitSelection = null;
-        this.scroll = false;
-        this.disabled = false;
-        this.limitSelection = null;
-        this.dataSource = this.dataSource.map((item) => new ListItem({
-            text: item.text,
-            id: item.id,
-            isDisabled: item.isDisable ? item.isDisable : false,
-            childItem: item.childItem && item.childItem.length ? item.childItem : [],
-            grouped: item.grouped ? true : false,
-            icon: item.icon ? item.icon : '',
-        }));
-        this.filteredItem = this.dataSource;
-        // this.width = this.rucInputData.width === "" || this.rucInputData.width === undefined ? 100: this.rucInputData.width; /** width in % */
-        this.height =
-            this.rucInputData.maxHeight === undefined
-                ? 150
-                : this.rucInputData.maxHeight; /** width in px */
-        this.singleSelection =
-            this.rucInputData.singleSelection === undefined
-                ? false
-                : this.rucInputData.singleSelection;
-        this.label =
-            this.rucInputData.label === '' || this.rucInputData.label === undefined
-                ? 'Cities'
-                : this.rucInputData.label;
-        this.appearance =
-            this.rucInputData.appearance === '' ||
-                this.rucInputData.appearance === undefined
-                ? 'outline'
-                : this.rucInputData.appearance;
-        this.limitSelection =
-            this.rucInputData.limit === undefined ? null : this.rucInputData.limit;
-        this.multiSelectList = new FormControl({
-            value: '',
-            disabled: !!this.rucInputData.disabled,
-        });
-        this.scroll =
-            this.rucInputData.scroll === undefined ? true : this.rucInputData.scroll;
-        this.placeholder =
-            this.rucInputData.placeholder === '' ||
-                this.rucInputData.placeholder === undefined
-                ? ''
-                : this.rucInputData.placeholder;
-        this.maxDropdownHeight =
-            this.rucInputData.maxDropdownHeight === undefined
-                ? ''
-                : this.rucInputData.maxDropdownHeight;
-        this.sortObj = {
-            sortBy: this.rucInputData.sortBy === undefined ? '' : this.rucInputData.sortBy,
-            sortOrder: this.rucInputData.sortOrder === undefined
-                ? ''
-                : this.rucInputData.sortOrder,
-        };
-        this.showSelectAll =
-            this.rucInputData.showSelectAll === undefined
-                ? true
-                : this.rucInputData.showSelectAll;
-        this.showSelected =
-            this.rucInputData.showSelected === undefined
-                ? true
-                : this.rucInputData.showSelected;
-    }
-    /**
-     * Dynamic data change
-     * @param  changes input provide change detection
-     * @return  none
-     */
-    ngOnChanges(changes) {
-        if (changes['dataSource'] && changes['dataSource'].currentValue) {
-            this.dataSource = changes['dataSource'].currentValue.map((item) => new ListItem({
-                id: item.id,
-                text: item.text,
-                isDisabled: item.isDisable,
-                childItem: item.childItem && item.childItem.length ? item.childItem : [],
-                grouped: item.grouped ? true : false,
-                icon: item.icon ? item.icon : '',
-            }));
-        }
-        this.filteredItem = this.dataSource;
-    }
-    /**
-     * Select options checkbox
-     * @param  ListItem input provide whole list of data
-     * @return  none
-     */
-    onSelection(item) {
-        this.searchText = '';
-        if (this.singleSelection === true) {
-            if (this.selectedItems.length >= 0) {
-                this.selectedItems = [];
-                this.selectedItems.push(item);
-            }
-        }
-        else {
-            if (this.selectedItems.indexOf(item) > -1) {
-                this.selectedItems = this.selectedItems.filter((data) => data.id != item.id);
-            }
-            else {
-                this.selectedItems.push(item);
-            }
-            this.rucEvent.emit({ eventName: 'onSelection', eventOutput: item });
-            this.isAllSelected();
-            if (this.selectedItems.length === 0) {
-                this.isShowSelectedFilter = false;
-                this.filteredItem = this.dataSource;
-            }
-        }
-    }
-    // disable other items as limit selection is there
-    checkSelectedStatus(obj) {
-        const index = this.selectedItems.findIndex((res) => res.id === obj.id);
-        if (index === -1) {
-            return true;
-        }
-        return false;
-    }
-    /**
-     * clear selected Menu
-     * @return  none
-     */
-    clearSelectedMenu() {
-        this.selectedItems = [];
-    }
-    /**
-     * select all Checkbox options at once
-     * @param  ListItem input provide whole list of data
-     * @return  none
-     */
-    onAllSelection() {
-        this.searchText = '';
-        if (!this.isAllCheckboxSelected) {
-            this.selectedItems = this.dataSource.filter((res) => {
-                if (res.childItem && res.childItem.length > 0) {
-                    return res.childItem.filter((res1) => {
-                        return res1.isDisable != true;
-                    });
-                }
-                else {
-                    return res.isDisabled != true;
-                }
-            });
-        }
-        else {
-            this.selectedItems = [];
-        }
-        this.rucEvent.emit({
-            eventName: 'onAllSelection',
-            eventOutput: this.selectedItems,
-        });
-        this.isAllCheckboxSelected = !this.isAllCheckboxSelected;
-        if (this.isAllCheckboxSelected === false &&
-            this.isShowSelectedFilter === true) {
-            this.filteredItem = this.dataSource;
-            this.isShowSelectedFilter = false;
-        }
-        if (this.isAllCheckboxSelected === true &&
-            this.isShowSelectedFilter === true) {
-            this.filteredItem = this.dataSource;
-        }
-    }
-    /**
-     * toggle dropdown
-     */
-    toggleDropdown() {
-        this.showdropdown = !this.showdropdown;
-        if (this.showdropdown) {
-            this.rucEvent.emit({ eventName: 'onInputClick', eventOutput: null });
-        }
-    }
-    /**
-     * Remove the data based on the select input
-     * @param  ListItem input provide whole list of data
-     * @return  none
-     */
-    removeItem(item) {
-        if (this.selectedItems.indexOf(item) > -1) {
-            this.selectedItems = this.selectedItems.filter((data) => data.id != item.id);
-        }
-        this.rucEvent.emit({ eventName: 'onDeSelection', eventOutput: item });
-    }
-    /**
-     * Filter the data based on the provided input
-     * @param  searchvalue input label provided in search box
-     * @return  none
-     */
-    filterData(searchvalue) {
-        /*Filter the data using filter pipe*/
-        if (!this.showdropdown) {
-            this.showdropdown = true;
-        }
-        this.filteredItem = this.filterPipe.transform(this.dataSource, searchvalue, 'text');
-    }
-    /**
-     * add and remove checked item
-     * @param  ListItem input provide whole list of data
-     * @return  boolean
-     */
-    isSelected(checkedItem) {
-        let found = false;
-        this.selectedItems.forEach((item) => {
-            if (item.childItem && item.childItem.length > 0) {
-                item.childItem.forEach((item1) => {
-                    if (checkedItem.id === item1.id) {
-                        found = true;
-                    }
-                });
-            }
-            else {
-                if (checkedItem.id === item.id) {
-                    found = true;
-                }
-            }
-        });
-        return found;
-    }
-    /**
-     * check if all checkbox selected or not
-     * @return  boolean
-     */
-    isAllSelected() {
-        const totalLength = this.dataSource.filter((data) => data.isDisabled != true);
-        if (this.selectedItems.length === totalLength.length) {
-            this.isAllCheckboxSelected = true;
-        }
-        else {
-            this.isAllCheckboxSelected = false;
-        }
-        return this.isAllCheckboxSelected;
-    }
-    /**
-     * check if show checkbox selected or not
-     * @return  boolean
-     */
-    isShowSelected() {
-        return this.isShowSelectedFilter;
-    }
-    /**
-     * check if show checkbox selected or not
-     * @return  boolean
-     */
-    onShowSelection() {
-        this.isShowSelectedFilter = !this.isShowSelectedFilter;
-        if (this.isShowSelectedFilter) {
-            if (this.sortToggle) {
-                const sortedArr = this.sortPipe.transform(this.selectedItems, this.rucInputData.sortOrder, this.rucInputData.sortBy);
-                this.filteredItem = sortedArr;
-            }
-            else {
-                this.filteredItem = this.selectedItems;
-            }
-        }
-        else {
-            this.isShowSelectedFilter = false;
-            if (this.sortToggle) {
-                const sortedArr = this.sortPipe.transform(this.dataSource, this.rucInputData.sortOrder, this.rucInputData.sortBy);
-                this.filteredItem = sortedArr;
-            }
-            else {
-                this.filteredItem = this.dataSource;
-            }
-        }
-    }
-    // pipe to toggle sort
-    onSortToggle() {
-        this.sortToggle = !this.sortToggle;
-        if (this.sortToggle) {
-            const sortedArr = this.sortPipe.transform(this.filteredItem, this.rucInputData.sortOrder, this.rucInputData.sortBy);
-            this.filteredItem = sortedArr;
-        }
-        else {
-            if (this.isShowSelectedFilter) {
-                this.filteredItem = this.selectedItems;
-            }
-            else {
-                this.filteredItem = this.dataSource;
-            }
-        }
-    }
-    /**
-     * close popup when click outside of container
-     */
-    close() {
-        this.showdropdown = false;
-    }
-}
-RuclibMultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectComponent, deps: [{ token: FilterPipe }, { token: SortPipe }], target: i0.ɵɵFactoryTarget.Component });
-RuclibMultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RuclibMultiSelectComponent, selector: "uxp-ruclib-multi-select", inputs: { rucInputData: "rucInputData", customTheme: "customTheme", dataSource: "dataSource" }, outputs: { rucEvent: "rucEvent" }, providers: [FilterPipe, SortPipe], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matTable", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "matTableElementRef", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"{{ customTheme }}\" (clickOutside)=\"close()\">\r\n  <mat-form-field\r\n    class=\"chip-list\"\r\n    [ngStyle]=\"{ 'max-height.px': height, 'width.%': 100 }\"\r\n    [appearance]=\"getApperance()\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <mat-chip-grid\r\n      matInput\r\n      [formControl]=\"multiSelectList\"\r\n      #chipGrid\r\n      aria-label=\"Cities\"\r\n    >\r\n      <mat-chip-row *ngFor=\"let item of selectedItems\" (removed)=\"removeItem(item)\">\r\n        {{ item.text }}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n      <input\r\n        (click)=\"toggleDropdown()\"\r\n        [placeholder]=\"placeholder\"\r\n        [matChipInputFor]=\"chipGrid\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        (keyup)=\"filterData(searchText)\"\r\n        [(ngModel)]=\"searchText\"\r\n      />\r\n    </mat-chip-grid>\r\n    <mat-icon\r\n      *ngIf=\"selectedItems.length\"\r\n      (click)=\"clearSelectedMenu()\"\r\n      matSuffix\r\n      >clear</mat-icon\r\n    >\r\n    <mat-icon *ngIf=\"!selectedItems.length && !showdropdown\" matSuffix\r\n      >expand_more</mat-icon\r\n    >\r\n    <mat-icon *ngIf=\"!selectedItems.length && showdropdown\" matSuffix\r\n      >expand_less</mat-icon\r\n    >\r\n  </mat-form-field>\r\n\r\n  <div\r\n    *ngIf=\"searchText && filteredItem.length < 1\"\r\n    class=\"margin-2-top-bottom\"\r\n  >\r\n    <div>No option found</div>\r\n  </div>\r\n\r\n  <div class=\"box-border-option\">\r\n    <div\r\n      *ngIf=\"showdropdown\"\r\n      class=\"option-header\"\r\n      role=\"options\"\r\n      tabindex=\"-1\"\r\n      [@dropDownMenu]\r\n    >\r\n      <ng-container *ngIf=\"!singleSelection\">\r\n        <div *ngIf=\"showSelectAll\">\r\n          <div *ngIf=\"limitSelection === null\">\r\n            <mat-checkbox\r\n              class=\"option mat-primary\"\r\n              role=\"option\"\r\n              color=\"{{ theme }}\"\r\n              [checked]=\"isAllSelected()\"\r\n              (change)=\"onAllSelection()\"\r\n              value=\"select-all\"\r\n              >Select All\r\n            </mat-checkbox>\r\n          </div>\r\n        </div>\r\n        <mat-checkbox\r\n          *ngIf=\"showSelected\"\r\n          class=\"option mat-primary\"\r\n          role=\"option\"\r\n          color=\"{{ theme }}\"\r\n          [checked]=\"isShowSelected()\"\r\n          (change)=\"onShowSelection()\"\r\n          value=\"select-all\"\r\n          >Show Selected\r\n        </mat-checkbox>\r\n        <mat-slide-toggle\r\n          *ngIf=\"sortObj['sortBy']\"\r\n          class=\"option mat-primary\"\r\n          (click)=\"onSortToggle()\"\r\n          >Sort\r\n        </mat-slide-toggle>\r\n        <mat-divider></mat-divider>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"showdropdown\"\r\n      [ngClass]=\"{\r\n        'scroll-option-container': scroll,\r\n        'option-container': '!scroll'\r\n      }\"\r\n      role=\"options\"\r\n      [ngStyle]=\"{ 'max-height.px': maxDropdownHeight, 'width.%': 100 }\"\r\n      tabindex=\"-1\"\r\n    >\r\n      <ng-container>\r\n        <div *ngIf=\"!singleSelection\" [@dropDownMenu]>\r\n          <!-- for grouped -->\r\n          <div *ngFor=\"let item of filteredItem\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"\r\n                (item.childItem && item.childItem.length > 0) || item.grouped\r\n                  ? multipleGroupedCase\r\n                  : multipleNonGroupedCase\r\n              \"\r\n              [ngTemplateOutletContext]=\"{ item: item }\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <!-- for single selection case -->\r\n        <div *ngIf=\"singleSelection\">\r\n          <div *ngFor=\"let item of filteredItem\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"\r\n                item.childItem && item.childItem.length > 0\r\n                  ? singleGroupedCase\r\n                  : singleNonGroupedCase\r\n              \"\r\n              [ngTemplateOutletContext]=\"{ item: item }\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- for multiple selected group case -->\r\n    <ng-template #multipleGroupedCase let-item=\"item\">\r\n      <mat-optgroup [label]=\"item.text\" [disabled]=\"item.isDisabled\">\r\n        <mat-option\r\n          *ngFor=\"let itemObj of item.childItem\"\r\n          [value]=\"itemObj.id\"\r\n          disabled=\"{{\r\n            itemObj.isDisable ||\r\n              (limitSelection != null &&\r\n                selectedItems.length >= limitSelection &&\r\n                checkSelectedStatus(itemObj))\r\n          }}\"\r\n        >\r\n          <mat-checkbox\r\n            class=\"mat-primary\"\r\n            role=\"option\"\r\n            color=\"{{ theme }}\"\r\n            [checked]=\"isSelected(itemObj)\"\r\n            (change)=\"onSelection(itemObj)\"\r\n            value=\"{{ itemObj.id }}\"\r\n            disabled=\"{{\r\n              itemObj.isDisable ||\r\n                (limitSelection != null &&\r\n                  selectedItems.length >= limitSelection &&\r\n                  checkSelectedStatus(itemObj))\r\n            }}\"\r\n          >\r\n          </mat-checkbox>\r\n          <mat-icon *ngIf=\"itemObj.icon\">{{ itemObj.icon }}</mat-icon>\r\n          {{ itemObj.text }}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </ng-template>\r\n\r\n    <!-- for multiple selected non grouped case -->\r\n    <ng-template #multipleNonGroupedCase let-item=\"item\">\r\n      <mat-checkbox\r\n        class=\"option mat-primary\"\r\n        role=\"option\"\r\n        color=\"{{ theme }}\"\r\n        [checked]=\"isSelected(item)\"\r\n        (change)=\"onSelection(item)\"\r\n        value=\"{{ item.id }}\"\r\n        disabled=\"{{\r\n          item.isDisabled ||\r\n            (limitSelection != null &&\r\n              selectedItems.length >= limitSelection &&\r\n              checkSelectedStatus(item))\r\n        }}\"\r\n      >\r\n        <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\r\n        {{ item.text }}\r\n      </mat-checkbox>\r\n    </ng-template>\r\n\r\n    <!-- for single selection group case -->\r\n    <ng-template #singleGroupedCase let-item=\"item\">\r\n      <mat-optgroup\r\n        *ngFor=\"let item of filteredItem\"\r\n        [label]=\"item.text\"\r\n        [disabled]=\"item.isDisabled\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let itemObj of item.childItem\"\r\n          [value]=\"itemObj.id\"\r\n          disabled=\"{{ itemObj.isDisable }}\"\r\n          (click)=\"onSelection(itemObj)\"\r\n        >\r\n          <mat-icon *ngIf=\"itemObj.icon\">{{ itemObj.icon }}</mat-icon>\r\n          {{ itemObj.text }}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </ng-template>\r\n\r\n    <!-- for single selection non group case -->\r\n    <ng-template #singleNonGroupedCase let-item=\"item\">\r\n      <span\r\n        class=\"option mat-primary\"\r\n        (click)=\"onSelection(item)\"\r\n        *ngFor=\"let item of filteredItem; let index = index\"\r\n      >\r\n        <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\r\n        {{ item.text }}\r\n      </span>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-option-container{overflow-x:auto;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}.option-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}.option{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:52px;height:52px;padding:0 16px;text-align:left;text-decoration:none;position:relative;cursor:pointer;outline:0;display:flex;flex-direction:row;max-width:100%;box-sizing:border-box;align-items:center;-webkit-tap-highlight-color:transparent}.option:focus:not(.mat-option-disabled),.option:hover:not(.mat-option-disabled){background:rgba(0,0,0,.04)}::ng-deep .mat-checkbox-layout{display:inline-block!important;flex-grow:1;text-overflow:ellipsis}.selected-item:hover{box-shadow:1px 1px #959595}.chip-list{overflow:auto}.option-header{display:flex!important}.box-border-option{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}mat-icon{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i9.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i9.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }], animations: [DropDownAnimation] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uxp-ruclib-multi-select', animations: [DropDownAnimation], providers: [FilterPipe, SortPipe], template: "<div class=\"{{ customTheme }}\" (clickOutside)=\"close()\">\r\n  <mat-form-field\r\n    class=\"chip-list\"\r\n    [ngStyle]=\"{ 'max-height.px': height, 'width.%': 100 }\"\r\n    [appearance]=\"getApperance()\"\r\n  >\r\n    <mat-label>{{ label }}</mat-label>\r\n    <mat-chip-grid\r\n      matInput\r\n      [formControl]=\"multiSelectList\"\r\n      #chipGrid\r\n      aria-label=\"Cities\"\r\n    >\r\n      <mat-chip-row *ngFor=\"let item of selectedItems\" (removed)=\"removeItem(item)\">\r\n        {{ item.text }}\r\n        <button matChipRemove>\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip-row>\r\n      <input\r\n        (click)=\"toggleDropdown()\"\r\n        [placeholder]=\"placeholder\"\r\n        [matChipInputFor]=\"chipGrid\"\r\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n        (keyup)=\"filterData(searchText)\"\r\n        [(ngModel)]=\"searchText\"\r\n      />\r\n    </mat-chip-grid>\r\n    <mat-icon\r\n      *ngIf=\"selectedItems.length\"\r\n      (click)=\"clearSelectedMenu()\"\r\n      matSuffix\r\n      >clear</mat-icon\r\n    >\r\n    <mat-icon *ngIf=\"!selectedItems.length && !showdropdown\" matSuffix\r\n      >expand_more</mat-icon\r\n    >\r\n    <mat-icon *ngIf=\"!selectedItems.length && showdropdown\" matSuffix\r\n      >expand_less</mat-icon\r\n    >\r\n  </mat-form-field>\r\n\r\n  <div\r\n    *ngIf=\"searchText && filteredItem.length < 1\"\r\n    class=\"margin-2-top-bottom\"\r\n  >\r\n    <div>No option found</div>\r\n  </div>\r\n\r\n  <div class=\"box-border-option\">\r\n    <div\r\n      *ngIf=\"showdropdown\"\r\n      class=\"option-header\"\r\n      role=\"options\"\r\n      tabindex=\"-1\"\r\n      [@dropDownMenu]\r\n    >\r\n      <ng-container *ngIf=\"!singleSelection\">\r\n        <div *ngIf=\"showSelectAll\">\r\n          <div *ngIf=\"limitSelection === null\">\r\n            <mat-checkbox\r\n              class=\"option mat-primary\"\r\n              role=\"option\"\r\n              color=\"{{ theme }}\"\r\n              [checked]=\"isAllSelected()\"\r\n              (change)=\"onAllSelection()\"\r\n              value=\"select-all\"\r\n              >Select All\r\n            </mat-checkbox>\r\n          </div>\r\n        </div>\r\n        <mat-checkbox\r\n          *ngIf=\"showSelected\"\r\n          class=\"option mat-primary\"\r\n          role=\"option\"\r\n          color=\"{{ theme }}\"\r\n          [checked]=\"isShowSelected()\"\r\n          (change)=\"onShowSelection()\"\r\n          value=\"select-all\"\r\n          >Show Selected\r\n        </mat-checkbox>\r\n        <mat-slide-toggle\r\n          *ngIf=\"sortObj['sortBy']\"\r\n          class=\"option mat-primary\"\r\n          (click)=\"onSortToggle()\"\r\n          >Sort\r\n        </mat-slide-toggle>\r\n        <mat-divider></mat-divider>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div\r\n      *ngIf=\"showdropdown\"\r\n      [ngClass]=\"{\r\n        'scroll-option-container': scroll,\r\n        'option-container': '!scroll'\r\n      }\"\r\n      role=\"options\"\r\n      [ngStyle]=\"{ 'max-height.px': maxDropdownHeight, 'width.%': 100 }\"\r\n      tabindex=\"-1\"\r\n    >\r\n      <ng-container>\r\n        <div *ngIf=\"!singleSelection\" [@dropDownMenu]>\r\n          <!-- for grouped -->\r\n          <div *ngFor=\"let item of filteredItem\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"\r\n                (item.childItem && item.childItem.length > 0) || item.grouped\r\n                  ? multipleGroupedCase\r\n                  : multipleNonGroupedCase\r\n              \"\r\n              [ngTemplateOutletContext]=\"{ item: item }\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <!-- for single selection case -->\r\n        <div *ngIf=\"singleSelection\">\r\n          <div *ngFor=\"let item of filteredItem\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"\r\n                item.childItem && item.childItem.length > 0\r\n                  ? singleGroupedCase\r\n                  : singleNonGroupedCase\r\n              \"\r\n              [ngTemplateOutletContext]=\"{ item: item }\"\r\n            >\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- for multiple selected group case -->\r\n    <ng-template #multipleGroupedCase let-item=\"item\">\r\n      <mat-optgroup [label]=\"item.text\" [disabled]=\"item.isDisabled\">\r\n        <mat-option\r\n          *ngFor=\"let itemObj of item.childItem\"\r\n          [value]=\"itemObj.id\"\r\n          disabled=\"{{\r\n            itemObj.isDisable ||\r\n              (limitSelection != null &&\r\n                selectedItems.length >= limitSelection &&\r\n                checkSelectedStatus(itemObj))\r\n          }}\"\r\n        >\r\n          <mat-checkbox\r\n            class=\"mat-primary\"\r\n            role=\"option\"\r\n            color=\"{{ theme }}\"\r\n            [checked]=\"isSelected(itemObj)\"\r\n            (change)=\"onSelection(itemObj)\"\r\n            value=\"{{ itemObj.id }}\"\r\n            disabled=\"{{\r\n              itemObj.isDisable ||\r\n                (limitSelection != null &&\r\n                  selectedItems.length >= limitSelection &&\r\n                  checkSelectedStatus(itemObj))\r\n            }}\"\r\n          >\r\n          </mat-checkbox>\r\n          <mat-icon *ngIf=\"itemObj.icon\">{{ itemObj.icon }}</mat-icon>\r\n          {{ itemObj.text }}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </ng-template>\r\n\r\n    <!-- for multiple selected non grouped case -->\r\n    <ng-template #multipleNonGroupedCase let-item=\"item\">\r\n      <mat-checkbox\r\n        class=\"option mat-primary\"\r\n        role=\"option\"\r\n        color=\"{{ theme }}\"\r\n        [checked]=\"isSelected(item)\"\r\n        (change)=\"onSelection(item)\"\r\n        value=\"{{ item.id }}\"\r\n        disabled=\"{{\r\n          item.isDisabled ||\r\n            (limitSelection != null &&\r\n              selectedItems.length >= limitSelection &&\r\n              checkSelectedStatus(item))\r\n        }}\"\r\n      >\r\n        <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\r\n        {{ item.text }}\r\n      </mat-checkbox>\r\n    </ng-template>\r\n\r\n    <!-- for single selection group case -->\r\n    <ng-template #singleGroupedCase let-item=\"item\">\r\n      <mat-optgroup\r\n        *ngFor=\"let item of filteredItem\"\r\n        [label]=\"item.text\"\r\n        [disabled]=\"item.isDisabled\"\r\n      >\r\n        <mat-option\r\n          *ngFor=\"let itemObj of item.childItem\"\r\n          [value]=\"itemObj.id\"\r\n          disabled=\"{{ itemObj.isDisable }}\"\r\n          (click)=\"onSelection(itemObj)\"\r\n        >\r\n          <mat-icon *ngIf=\"itemObj.icon\">{{ itemObj.icon }}</mat-icon>\r\n          {{ itemObj.text }}\r\n        </mat-option>\r\n      </mat-optgroup>\r\n    </ng-template>\r\n\r\n    <!-- for single selection non group case -->\r\n    <ng-template #singleNonGroupedCase let-item=\"item\">\r\n      <span\r\n        class=\"option mat-primary\"\r\n        (click)=\"onSelection(item)\"\r\n        *ngFor=\"let item of filteredItem; let index = index\"\r\n      >\r\n        <mat-icon *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\r\n        {{ item.text }}\r\n      </span>\r\n    </ng-template>\r\n  </div>\r\n</div>\r\n", styles: [".scroll-option-container{overflow-x:auto;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}.option-container{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}.option{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:52px;height:52px;padding:0 16px;text-align:left;text-decoration:none;position:relative;cursor:pointer;outline:0;display:flex;flex-direction:row;max-width:100%;box-sizing:border-box;align-items:center;-webkit-tap-highlight-color:transparent}.option:focus:not(.mat-option-disabled),.option:hover:not(.mat-option-disabled){background:rgba(0,0,0,.04)}::ng-deep .mat-checkbox-layout{display:inline-block!important;flex-grow:1;text-overflow:ellipsis}.selected-item:hover{box-shadow:1px 1px #959595}.chip-list{overflow:auto}.option-header{display:flex!important}.box-border-option{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px #0000001f}mat-icon{cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: FilterPipe }, { type: SortPipe }]; }, propDecorators: { rucEvent: [{
-                type: Output
-            }], rucInputData: [{
-                type: Input
-            }], customTheme: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }], matTable: [{
-                type: ViewChild,
-                args: ['matTable']
-            }], matTableElementRef: [{
-                type: ViewChild,
-                args: ['matTable']
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
-            }] } });
-
-class RuclibMultiSelectModule {
-}
-RuclibMultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibMultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectModule, declarations: [RuclibMultiSelectComponent,
-        FilterPipe,
-        SortPipe,
-        ClickOutsideDirective], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDividerModule,
-        MatSlideToggleModule], exports: [RuclibMultiSelectComponent] });
-RuclibMultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatCheckboxModule,
-        MatChipsModule,
-        MatDividerModule,
-        MatSlideToggleModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibMultiSelectModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatCheckboxModule,
-                        MatChipsModule,
-                        MatDividerModule,
-                        MatSlideToggleModule
-                    ],
-                    declarations: [
-                        RuclibMultiSelectComponent,
-                        FilterPipe,
-                        SortPipe,
-                        ClickOutsideDirective
-                    ],
-                    exports: [
-                        RuclibMultiSelectComponent
-                    ]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ListItem, RuclibMultiSelectComponent, RuclibMultiSelectModule };
-//# sourceMappingURL=ruc-lib-multi-select.mjs.map