@ruc-lib/multi-select 3.1.0 → 3.1.1

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

@@ -1,519 +0,0 @@
-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