@ruc-lib/multi-select 2.0.7 → 3.1.0

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

@@ -0,0 +1,519 @@
+import * as i0 from '@angular/core';
+import { Pipe, Injectable, EventEmitter, HostListener, Output, Directive, ViewChild, Input, Component } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatPaginator } from '@angular/material/paginator';
+import '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import * as i4 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+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 { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+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 { trigger, transition, style, query, sequence, animate, stagger } from '@angular/animations';
+
+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);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: FilterPipe, isStandalone: true, name: "filter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filter',
+                    standalone: true
+                }]
+        }] });
+
+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();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SortPipe }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SortPipe, decorators: [{
+            type: Injectable
+        }, {
+            type: Pipe,
+            args: [{
+                    name: 'sort',
+                    standalone: true
+                }]
+        }] });
+
+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);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event,$event.target)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event', '$event.target']]
+            }] } });
+
+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 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiSelectComponent, deps: [{ token: FilterPipe }, { token: SortPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibMultiSelectComponent, isStandalone: true, 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      @for (item of selectedItems; track item) {\r\n        <mat-chip-row\r\n          (removed)=\"removeItem(item)\"\r\n          >\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      }\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      @if (selectedItems.length) {\r\n        <mat-icon\r\n          (click)=\"clearSelectedMenu()\"\r\n          matSuffix\r\n          >clear</mat-icon\r\n          >\r\n      }\r\n      @if (!selectedItems.length && !showdropdown) {\r\n        <mat-icon matSuffix\r\n          >expand_more</mat-icon\r\n          >\r\n        }\r\n        @if (!selectedItems.length && showdropdown) {\r\n          <mat-icon matSuffix\r\n            >expand_less</mat-icon\r\n            >\r\n          }\r\n        </mat-form-field>\r\n\r\n        @if (searchText && filteredItem.length < 1) {\r\n          <div\r\n            class=\"margin-2-top-bottom\"\r\n            >\r\n            <div>No option found</div>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"box-border-option\">\r\n          @if (showdropdown) {\r\n            <div\r\n              class=\"option-header\"\r\n              role=\"options\"\r\n              tabindex=\"-1\"\r\n              [@dropDownMenu]\r\n              >\r\n              @if (!singleSelection) {\r\n                @if (showSelectAll) {\r\n                  <div>\r\n                    @if (limitSelection === null) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n                @if (showSelected) {\r\n                  <mat-checkbox\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                }\r\n                @if (sortObj['sortBy']) {\r\n                  <mat-slide-toggle\r\n                    class=\"option mat-primary\"\r\n                    (click)=\"onSortToggle()\"\r\n                    >Sort\r\n                  </mat-slide-toggle>\r\n                }\r\n                <mat-divider></mat-divider>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (showdropdown) {\r\n            <div\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                @if (!singleSelection) {\r\n                  <div [@dropDownMenu]>\r\n                    <!-- for grouped -->\r\n                    @for (item of filteredItem; track item) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n                <!-- for single selection case -->\r\n                @if (singleSelection) {\r\n                  <div>\r\n                    @for (item of filteredItem; track item) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n              </ng-container>\r\n            </div>\r\n          }\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              @for (itemObj of item.childItem; track itemObj) {\r\n                <mat-option\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                  @if (itemObj.icon) {\r\n                    <mat-icon>{{ itemObj.icon }}</mat-icon>\r\n                  }\r\n                  {{ itemObj.text }}\r\n                </mat-option>\r\n              }\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              @if (item.icon) {\r\n                <mat-icon>{{ item.icon }}</mat-icon>\r\n              }\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            @for (item of filteredItem; track item) {\r\n              <mat-optgroup\r\n                [label]=\"item.text\"\r\n                [disabled]=\"item.isDisabled\"\r\n                >\r\n                @for (itemObj of item.childItem; track itemObj) {\r\n                  <mat-option\r\n                    [value]=\"itemObj.id\"\r\n                    disabled=\"{{ itemObj.isDisable }}\"\r\n                    (click)=\"onSelection(itemObj)\"\r\n                    >\r\n                    @if (itemObj.icon) {\r\n                      <mat-icon>{{ itemObj.icon }}</mat-icon>\r\n                    }\r\n                    {{ itemObj.text }}\r\n                  </mat-option>\r\n                }\r\n              </mat-optgroup>\r\n            }\r\n          </ng-template>\r\n\r\n          <!-- for single selection non group case -->\r\n          <ng-template #singleNonGroupedCase let-item=\"item\">\r\n            @for (item of filteredItem; track item; let index = $index) {\r\n              <span\r\n                class=\"option mat-primary\"\r\n                (click)=\"onSelection(item)\"\r\n                >\r\n                @if (item.icon) {\r\n                  <mat-icon>{{ item.icon }}</mat-icon>\r\n                }\r\n                {{ item.text }}\r\n              </span>\r\n            }\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:#0000000a}::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: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i9.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i9.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], 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: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }], animations: [DropDownAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-multi-select', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatCheckboxModule,
+                        MatChipsModule,
+                        MatDividerModule,
+                        MatSlideToggleModule,
+                        FilterPipe,
+                        SortPipe,
+                        ClickOutsideDirective,
+                    ], 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      @for (item of selectedItems; track item) {\r\n        <mat-chip-row\r\n          (removed)=\"removeItem(item)\"\r\n          >\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      }\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      @if (selectedItems.length) {\r\n        <mat-icon\r\n          (click)=\"clearSelectedMenu()\"\r\n          matSuffix\r\n          >clear</mat-icon\r\n          >\r\n      }\r\n      @if (!selectedItems.length && !showdropdown) {\r\n        <mat-icon matSuffix\r\n          >expand_more</mat-icon\r\n          >\r\n        }\r\n        @if (!selectedItems.length && showdropdown) {\r\n          <mat-icon matSuffix\r\n            >expand_less</mat-icon\r\n            >\r\n          }\r\n        </mat-form-field>\r\n\r\n        @if (searchText && filteredItem.length < 1) {\r\n          <div\r\n            class=\"margin-2-top-bottom\"\r\n            >\r\n            <div>No option found</div>\r\n          </div>\r\n        }\r\n\r\n        <div class=\"box-border-option\">\r\n          @if (showdropdown) {\r\n            <div\r\n              class=\"option-header\"\r\n              role=\"options\"\r\n              tabindex=\"-1\"\r\n              [@dropDownMenu]\r\n              >\r\n              @if (!singleSelection) {\r\n                @if (showSelectAll) {\r\n                  <div>\r\n                    @if (limitSelection === null) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n                @if (showSelected) {\r\n                  <mat-checkbox\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                }\r\n                @if (sortObj['sortBy']) {\r\n                  <mat-slide-toggle\r\n                    class=\"option mat-primary\"\r\n                    (click)=\"onSortToggle()\"\r\n                    >Sort\r\n                  </mat-slide-toggle>\r\n                }\r\n                <mat-divider></mat-divider>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (showdropdown) {\r\n            <div\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                @if (!singleSelection) {\r\n                  <div [@dropDownMenu]>\r\n                    <!-- for grouped -->\r\n                    @for (item of filteredItem; track item) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n                <!-- for single selection case -->\r\n                @if (singleSelection) {\r\n                  <div>\r\n                    @for (item of filteredItem; track item) {\r\n                      <div>\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                    }\r\n                  </div>\r\n                }\r\n              </ng-container>\r\n            </div>\r\n          }\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              @for (itemObj of item.childItem; track itemObj) {\r\n                <mat-option\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                  @if (itemObj.icon) {\r\n                    <mat-icon>{{ itemObj.icon }}</mat-icon>\r\n                  }\r\n                  {{ itemObj.text }}\r\n                </mat-option>\r\n              }\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              @if (item.icon) {\r\n                <mat-icon>{{ item.icon }}</mat-icon>\r\n              }\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            @for (item of filteredItem; track item) {\r\n              <mat-optgroup\r\n                [label]=\"item.text\"\r\n                [disabled]=\"item.isDisabled\"\r\n                >\r\n                @for (itemObj of item.childItem; track itemObj) {\r\n                  <mat-option\r\n                    [value]=\"itemObj.id\"\r\n                    disabled=\"{{ itemObj.isDisable }}\"\r\n                    (click)=\"onSelection(itemObj)\"\r\n                    >\r\n                    @if (itemObj.icon) {\r\n                      <mat-icon>{{ itemObj.icon }}</mat-icon>\r\n                    }\r\n                    {{ itemObj.text }}\r\n                  </mat-option>\r\n                }\r\n              </mat-optgroup>\r\n            }\r\n          </ng-template>\r\n\r\n          <!-- for single selection non group case -->\r\n          <ng-template #singleNonGroupedCase let-item=\"item\">\r\n            @for (item of filteredItem; track item; let index = $index) {\r\n              <span\r\n                class=\"option mat-primary\"\r\n                (click)=\"onSelection(item)\"\r\n                >\r\n                @if (item.icon) {\r\n                  <mat-icon>{{ item.icon }}</mat-icon>\r\n                }\r\n                {{ item.text }}\r\n              </span>\r\n            }\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:#0000000a}::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: () => [{ 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]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListItem, RuclibMultiSelectComponent };
+//# sourceMappingURL=ruc-lib-multi-select.mjs.map