@ruc-lib/dual-list-selector 2.0.0

package/fesm2020/ruc-lib-dual-list-selector.mjs

@@ -0,0 +1,305 @@
+import * as i0 from '@angular/core';
+import { Pipe, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i5 from '@angular/cdk/drag-drop';
+import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i4 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+class FilterPipe {
+    transform(items, searchText, key) {
+        if (items?.length == 0)
+            return [];
+        if (!searchText)
+            return items;
+        searchText = searchText.toLowerCase();
+        return items.filter(it => {
+            if (!key) {
+                return it.toLowerCase().includes(searchText);
+            }
+            else {
+                return it[key].toLowerCase().includes(searchText);
+            }
+        });
+    }
+}
+FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, name: "filter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filter'
+                }]
+        }] });
+
+class DualListSelectorComponent {
+    ;
+    constructor(filterPipe) {
+        this.filterPipe = filterPipe;
+        this.dataSource = [];
+        this.rucEvent = new EventEmitter();
+        this.selectedItems = [];
+        this.selectedItemsBeforeSearch = [];
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.direction_unselected = false;
+        this.direction_selected = false;
+    }
+    ngOnInit() {
+        this.height = this.rucInputData.height;
+        this.width = this.rucInputData.width;
+        this.persistOnRefresh = this.rucInputData.persistOnRefresh;
+        const storedUnselectedItems = sessionStorage.getItem('unselectedItems');
+        const storedSelectedItems = sessionStorage.getItem('selectedItems');
+        if (storedUnselectedItems && storedUnselectedItems !== 'undefined' && storedSelectedItems && storedSelectedItems !== 'undefined') {
+            this.unselectedItems = JSON.parse(sessionStorage.getItem('unselectedItems'));
+            this.selectedItems = JSON.parse(sessionStorage.getItem('selectedItems'));
+        }
+        else {
+            this.unselectedItems = this.dataSource.slice().sort(this.sortItemOperator);
+            this.selectedItems = [];
+        }
+        this.unselectedItemsBeforeSearch = this.unselectedItems;
+        this.selectedItemsBeforeSearch = this.selectedItems;
+        this.pendingSelection = Object.create(null);
+    }
+    /**
+     * save lists to storage
+     * @param  selected and unselected list
+     * @return none
+     */
+    saveToStorage(selected, unselected) {
+        if (this.persistOnRefresh) {
+            sessionStorage.setItem('selectedItems', JSON.stringify(selected));
+            sessionStorage.setItem('unselectedItems', JSON.stringify(unselected));
+        }
+    }
+    /**
+     * add the selected item or dataSource to the selected dataSource collection
+     * @param  item to be added
+     * @return none
+     */
+    addToSelectedItems(item) {
+        console.log("item=", item);
+        const changeItems = (item)
+            ? [item]
+            : this.getPendingSelectionFromCollection(this.unselectedItems);
+        this.pendingSelection = Object.create(null);
+        this.unselectedItems = this.removeItemsFromCollection(this.unselectedItems, changeItems);
+        this.selectedItems = changeItems.concat(this.selectedItems);
+        this.selectedItemsBeforeSearch = this.selectedItems;
+        this.unselectedItemsBeforeSearch = this.unselectedItems;
+        this.saveToStorage(this.selectedItemsBeforeSearch, this.unselectedItemsBeforeSearch);
+    }
+    /**
+     * Add all items to selected list
+     * @param  none
+     * @return none
+     */
+    addAllToSelectedItems() {
+        this.selectedItems = this.dataSource;
+        this.unselectedItems = [];
+        this.saveToStorage(this.selectedItems, this.unselectedItems);
+    }
+    /**
+     * remove all items from selected list
+     * @param  none
+     * @return  none
+     */
+    removeAllFromSelectedItems() {
+        this.unselectedItems = this.dataSource;
+        this.selectedItems = [];
+        this.saveToStorage(this.selectedItems, this.unselectedItems);
+    }
+    /**
+     * when drag and drop event occurs
+     * @param  event
+     * @return  none
+     */
+    drop(event) {
+        if (event.previousContainer === event.container) {
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+    }
+    /**
+     * Sort on click of sorting icon
+     * @param  type whether it's increasing or decreasing
+     * @return  none
+     */
+    sortOnClick(type) {
+        if (this.direction_unselected && type == "unselected") {
+            this.unselectedItems = this.unselectedItems.sort((a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase()));
+            this.direction_unselected = !this.direction_unselected;
+        }
+        else if (!this.direction_unselected && type == "unselected") {
+            this.unselectedItems = this.unselectedItems.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+            this.direction_unselected = !this.direction_unselected;
+        }
+        if (this.direction_selected && type == "selected") {
+            this.selectedItems = this.selectedItems.sort((a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase()));
+            this.direction_selected = !this.direction_selected;
+        }
+        else if (!this.direction_selected && type == "selected") {
+            this.selectedItems = this.selectedItems.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+            this.direction_selected = !this.direction_selected;
+        }
+    }
+    /**
+     * remove the selected item or dataSource from the selected dataSource collection
+     * @param  item to be removed
+     * @return
+     */
+    removeFromSelectedItems(item) {
+        const changeItems = (item)
+            ? [item]
+            : this.getPendingSelectionFromCollection(this.selectedItems);
+        this.pendingSelection = Object.create(null);
+        this.selectedItems = this.removeItemsFromCollection(this.selectedItems, changeItems);
+        const changedData = changeItems
+            .concat(this.unselectedItems)
+            .sort(this.sortItemOperator);
+        this.unselectedItems = changedData;
+        this.unselectedItemsBeforeSearch = changedData;
+        this.selectedItemsBeforeSearch = this.selectedItemsBeforeSearch;
+        this.saveToStorage(this.selectedItems, this.unselectedItems);
+    }
+    /**
+     * toggle the pending selection for the given item
+     * @param  item to toggle
+     * @return  none
+     */
+    togglePendingSelection(item) {
+        this.pendingSelection[item.id] = !this.pendingSelection[item.id];
+    }
+    /**
+     * Filter the data based on the provided input
+     * @param  searchvalue input label provided in search box
+     * @return  none
+     */
+    filterData(searchvalue, type) {
+        if (type === 'unselected') {
+            if (searchvalue === "") {
+                this.unselectedItems = this.unselectedItemsBeforeSearch;
+            }
+            this.unselectedItems = this.filterPipe.transform(this.unselectedItemsBeforeSearch, searchvalue, 'name');
+        }
+        else {
+            if (searchvalue === "") {
+                this.selectedItems = this.selectedItemsBeforeSearch;
+            }
+            this.selectedItems = this.filterPipe.transform(this.selectedItemsBeforeSearch, searchvalue, 'name');
+        }
+    }
+    /**
+     * gather the dataSource in the given collection that are part of the current pending selection
+     * @param  collection input label provided in search box
+     * @return  selected items
+     */
+    getPendingSelectionFromCollection(collection) {
+        const selectionFromCollection = collection.filter((item) => {
+            return (item.id in this.pendingSelection);
+        });
+        return (selectionFromCollection);
+    }
+    /**
+     * remove the given dataSource from the given collection
+     * @param  collection and ItemsToRemove
+     * @return  a new collection
+     */
+    removeItemsFromCollection(collection, ItemsToRemove) {
+        const collectionWithoutItems = collection.filter((item) => {
+            return (!ItemsToRemove.includes(item));
+        });
+        return (collectionWithoutItems);
+    }
+    /**
+     * provide the sort operator for the dataSource collection
+     * @param  two values to compare
+     * @return  a value based on the sorting
+     */
+    sortItemOperator(a, b) {
+        return (a.name.localeCompare(b.name));
+    }
+    selectedOutputItems() {
+        this.rucEvent.emit(this.selectedItems);
+    }
+}
+DualListSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DualListSelectorComponent, deps: [{ token: FilterPipe }], target: i0.ɵɵFactoryTarget.Component });
+DualListSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DualListSelectorComponent, selector: "uxp-dual-list-selector", inputs: { dataSource: "dataSource", rucInputData: "rucInputData", customTheme: "customTheme" }, outputs: { rucEvent: "rucEvent" }, providers: [FilterPipe], ngImport: i0, template: "<div class=\"{{customTheme}}\">\r\n  <div class=\"dual-list-container\">\r\n    <div class=\"dual-select\">\r\n      <div class=\"leftContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchText, 'unselected')\" [(ngModel)]=\"searchText\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('unselected')\">{{ !direction_unselected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n        <div class=\"dual-select__left\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n\r\n            <div cdkDropList #todoList=\"cdkDropList\" [cdkDropListData]=\"unselectedItems\"\r\n              [cdkDropListConnectedTo]=\"[doneList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n\r\n\r\n              <mat-list-item role=\"listitem\" *ngFor=\"let item of unselectedItems\" cdkDrag [disabled]=\"!item.disable\"\r\n                (click)=\"togglePendingSelection( item )\" (dblclick)=\"addToSelectedItems( item )\"\r\n                class=\"dual-select__item\" [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"dual-select__controls\">\r\n        <button (click)=\"addToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10236;\r\n        </button>\r\n        <button (click)=\"removeFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10235;\r\n        </button>\r\n        <button (click)=\"addAllToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10503;\r\n        </button>\r\n        <button (click)=\"removeAllFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10502;\r\n        </button>\r\n      </div>\r\n      <div class=\"rightContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchTextSelected, 'selected')\" [(ngModel)]=\"searchTextSelected\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('selected')\">{{ !direction_selected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n\r\n        <div class=\"dual-select__right\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n\r\n\r\n\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n            <div cdkDropList #doneList=\"cdkDropList\" [cdkDropListData]=\"selectedItems\"\r\n              [cdkDropListConnectedTo]=\"[todoList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n              <mat-list-item cdkDrag *ngFor=\"let item of selectedItems\" (click)=\"togglePendingSelection( item )\"\r\n                (dblclick)=\"removeFromSelectedItems( item )\" class=\"dual-select__item dual-select__item--new\"\r\n                [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"text-align-center\">\r\n      <button (click)=\"selectedOutputItems()\" class=\"dual-list-btn\">\r\n        Submit\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".dual-list-container{display:flex;flex-direction:column}.list{border:1px solid #ccc;padding:10px;width:45%}:host{display:block;font-size:18px}.dual-select{display:flex;justify-content:center}.leftContainer,.rightContainer{flex:0 0 auto;margin:2%}.dual-select__left,.dual-select__right{border:1px solid lightgrey;height:400px;overflow-y:auto}.dual-select__controls{justify-content:center;display:flex;flex:0 0 auto;flex-direction:column;padding:0 10px}.dual-select__control{font-size:20px;height:37px;margin:10px 0}.dual-select__items{border:1px solid #cccccc;height:100%;list-style-type:none;margin:0;overflow:auto;overscroll-behavior:contain;padding:0}.dual-select__item{border-bottom:1px solid #cccccc;cursor:pointer;margin:0;padding:0 0 0 1em;user-select:none;-moz-user-select:none;-webkit-user-select:none}.dual-select__item:last-child{border-bottom-width:0px}.dual-select__item--selected{background-color:#bfd5ff}.dual-select__item--new{animation-duration:2s;animation-name:dual-select-item-new-fade-in;animation-timing-function:ease-out}@keyframes dual-select-item-new-fade-in{0%{background-color:#fff}25%{background-color:#bfd5ff}to{background-color:#fff}}.contact{font-family:monospace,sans-serif;padding:8px 10px}.contact__name{font-size:18px;font-weight:700;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact__email{font-size:15px;line-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note{font-family:monospace,sans-serif;font-size:16px}.search_Box{width:90%;height:67px}.list_container{padding:0}.btn_container{position:relative;top:30px;right:8%}.submit_Btn{position:absolute;bottom:0}@media screen and (max-width: 900px){.dual-select{display:inline-flex;height:400px;margin:6% 1% 1%}}.text-align-center{text-align:center}.dual-list-btn{font-size:14px;padding:.4em 1em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DualListSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-dual-list-selector', providers: [FilterPipe], template: "<div class=\"{{customTheme}}\">\r\n  <div class=\"dual-list-container\">\r\n    <div class=\"dual-select\">\r\n      <div class=\"leftContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchText, 'unselected')\" [(ngModel)]=\"searchText\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('unselected')\">{{ !direction_unselected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n        <div class=\"dual-select__left\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n\r\n            <div cdkDropList #todoList=\"cdkDropList\" [cdkDropListData]=\"unselectedItems\"\r\n              [cdkDropListConnectedTo]=\"[doneList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n\r\n\r\n              <mat-list-item role=\"listitem\" *ngFor=\"let item of unselectedItems\" cdkDrag [disabled]=\"!item.disable\"\r\n                (click)=\"togglePendingSelection( item )\" (dblclick)=\"addToSelectedItems( item )\"\r\n                class=\"dual-select__item\" [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"dual-select__controls\">\r\n        <button (click)=\"addToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10236;\r\n        </button>\r\n        <button (click)=\"removeFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10235;\r\n        </button>\r\n        <button (click)=\"addAllToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10503;\r\n        </button>\r\n        <button (click)=\"removeAllFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10502;\r\n        </button>\r\n      </div>\r\n      <div class=\"rightContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchTextSelected, 'selected')\" [(ngModel)]=\"searchTextSelected\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('selected')\">{{ !direction_selected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n\r\n        <div class=\"dual-select__right\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n\r\n\r\n\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n            <div cdkDropList #doneList=\"cdkDropList\" [cdkDropListData]=\"selectedItems\"\r\n              [cdkDropListConnectedTo]=\"[todoList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n              <mat-list-item cdkDrag *ngFor=\"let item of selectedItems\" (click)=\"togglePendingSelection( item )\"\r\n                (dblclick)=\"removeFromSelectedItems( item )\" class=\"dual-select__item dual-select__item--new\"\r\n                [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"text-align-center\">\r\n      <button (click)=\"selectedOutputItems()\" class=\"dual-list-btn\">\r\n        Submit\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".dual-list-container{display:flex;flex-direction:column}.list{border:1px solid #ccc;padding:10px;width:45%}:host{display:block;font-size:18px}.dual-select{display:flex;justify-content:center}.leftContainer,.rightContainer{flex:0 0 auto;margin:2%}.dual-select__left,.dual-select__right{border:1px solid lightgrey;height:400px;overflow-y:auto}.dual-select__controls{justify-content:center;display:flex;flex:0 0 auto;flex-direction:column;padding:0 10px}.dual-select__control{font-size:20px;height:37px;margin:10px 0}.dual-select__items{border:1px solid #cccccc;height:100%;list-style-type:none;margin:0;overflow:auto;overscroll-behavior:contain;padding:0}.dual-select__item{border-bottom:1px solid #cccccc;cursor:pointer;margin:0;padding:0 0 0 1em;user-select:none;-moz-user-select:none;-webkit-user-select:none}.dual-select__item:last-child{border-bottom-width:0px}.dual-select__item--selected{background-color:#bfd5ff}.dual-select__item--new{animation-duration:2s;animation-name:dual-select-item-new-fade-in;animation-timing-function:ease-out}@keyframes dual-select-item-new-fade-in{0%{background-color:#fff}25%{background-color:#bfd5ff}to{background-color:#fff}}.contact{font-family:monospace,sans-serif;padding:8px 10px}.contact__name{font-size:18px;font-weight:700;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact__email{font-size:15px;line-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note{font-family:monospace,sans-serif;font-size:16px}.search_Box{width:90%;height:67px}.list_container{padding:0}.btn_container{position:relative;top:30px;right:8%}.submit_Btn{position:absolute;bottom:0}@media screen and (max-width: 900px){.dual-select{display:inline-flex;height:400px;margin:6% 1% 1%}}.text-align-center{text-align:center}.dual-list-btn{font-size:14px;padding:.4em 1em}\n"] }]
+        }], ctorParameters: function () { return [{ type: FilterPipe }]; }, propDecorators: { dataSource: [{
+                type: Input
+            }], rucInputData: [{
+                type: Input
+            }], rucEvent: [{
+                type: Output
+            }], customTheme: [{
+                type: Input
+            }] } });
+
+class RuclibDualListSelectorModule {
+}
+RuclibDualListSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibDualListSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuclibDualListSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibDualListSelectorModule, declarations: [DualListSelectorComponent, FilterPipe], imports: [CommonModule,
+        FormsModule,
+        MatListModule,
+        DragDropModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatSortModule,
+        MatTableModule], exports: [DualListSelectorComponent] });
+RuclibDualListSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibDualListSelectorModule, imports: [CommonModule,
+        FormsModule,
+        MatListModule,
+        DragDropModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatSortModule,
+        MatTableModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibDualListSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule,
+                        FormsModule,
+                        MatListModule,
+                        DragDropModule,
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatSortModule,
+                        MatTableModule
+                    ],
+                    declarations: [DualListSelectorComponent, FilterPipe],
+                    exports: [DualListSelectorComponent],
+                    entryComponents: [DualListSelectorComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DualListSelectorComponent, RuclibDualListSelectorModule };
+//# sourceMappingURL=ruc-lib-dual-list-selector.mjs.map

package/fesm2020/ruc-lib-dual-list-selector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-dual-list-selector.mjs","sources":["../../../../../libs/ruclib/dual-list-selector/src/pipes/filter.pipe.ts","../../../../../libs/ruclib/dual-list-selector/src/lib/dual-list-selector/dual-list-selector.component.ts","../../../../../libs/ruclib/dual-list-selector/src/lib/dual-list-selector/dual-list-selector.component.html","../../../../../libs/ruclib/dual-list-selector/src/lib/ruclib-dual-list-selector.module.ts","../../../../../libs/ruclib/dual-list-selector/src/ruc-lib-dual-list-selector.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\r\n@Pipe({\r\n  name: 'filter'\r\n})\r\nexport class FilterPipe implements PipeTransform {\r\n  transform(items: any[], searchText: string, key?:string): any[] {\r\n    if (items?.length==0) return [];\r\n    if (!searchText) return items;\r\n    searchText = searchText.toLowerCase();\r\n    return items.filter(it => {\r\n      if(!key){\r\n        return it.toLowerCase().includes(searchText);\r\n      } else {\r\n        return it[key].toLowerCase().includes(searchText);\r\n      }\r\n    });\r\n  }\r\n}\r\n","import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';\r\nimport { PendingSelection } from '../../interfaces/PendingSelectionItems';\r\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\r\nimport { FilterPipe } from '../../pipes/filter.pipe';\r\nimport { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';\r\n\r\n@Component({\r\n  selector: 'uxp-dual-list-selector',\r\n  templateUrl: './dual-list-selector.component.html',\r\n  styleUrls: ['./dual-list-selector.component.scss'],\r\n  providers: [FilterPipe],\r\n})\r\nexport class DualListSelectorComponent implements OnInit{\r\n  @Input() dataSource: any[] = [];\r\n\t@Input() rucInputData: any;\r\n\t@Output() rucEvent = new EventEmitter();\r\n\t@Input() customTheme: string | undefined;\r\n\r\n\tpublic height: any;\r\n\tpublic width: any;\r\n\tpublic persistOnRefresh: boolean | undefined;\r\n\r\n\tpublic pendingSelection!: PendingSelection;\r\n\tpublic selectedItems: any[] = [];\r\n\tpublic unselectedItems!: any[];\r\n\r\n\tpublic selectedItemsBeforeSearch: any[] = [];\r\n\tpublic unselectedItemsBeforeSearch!: any[];;\r\n\r\n\treadonly separatorKeysCodes = [ENTER, COMMA] as const;\r\n\tpublic searchText!: string;\r\n\tpublic searchTextSelected!: string;\r\n\tdirection_unselected = false;\r\n\tdirection_selected = false;\r\n\r\n\tconstructor(public filterPipe: FilterPipe) {\r\n\r\n\r\n\t}\r\n\r\n\tngOnInit(): void {\r\n\t\tthis.height = this.rucInputData.height;\r\n\t\tthis.width = this.rucInputData.width;\r\n\t\tthis.persistOnRefresh = this.rucInputData.persistOnRefresh;\r\n\r\n\t\tconst storedUnselectedItems = sessionStorage.getItem('unselectedItems');\r\n\t\tconst storedSelectedItems = sessionStorage.getItem('selectedItems');\r\n\t\tif(storedUnselectedItems && storedUnselectedItems !== 'undefined' && storedSelectedItems && storedSelectedItems !== 'undefined'){\r\n\t\t\tthis.unselectedItems = JSON.parse(sessionStorage.getItem('unselectedItems') as any);\r\n\t\t\tthis.selectedItems = JSON.parse(sessionStorage.getItem('selectedItems') as any);\r\n\t\t}else{\r\n\t\t\tthis.unselectedItems = this.dataSource.slice().sort( this.sortItemOperator );\r\n\t\t\tthis.selectedItems = [];\r\n\t\t}\r\n\t\t\r\n\t\tthis.unselectedItemsBeforeSearch = this.unselectedItems;\r\n\t\tthis.selectedItemsBeforeSearch = this.selectedItems;\r\n\t\tthis.pendingSelection = Object.create( null );\r\n\t}\r\n\r\n  \t/**\r\n\t * save lists to storage\r\n\t * @param  selected and unselected list\r\n\t * @return none\r\n\t */\r\n\tpublic saveToStorage(selected: any[], unselected: any[]){\r\n\t\tif(this.persistOnRefresh){\r\n\t\t\tsessionStorage.setItem('selectedItems', JSON.stringify(selected));\r\n\t\t\tsessionStorage.setItem('unselectedItems', JSON.stringify(unselected));\r\n\t\t}\r\n\t}\r\n\r\n  \t/**\r\n\t * add the selected item or dataSource to the selected dataSource collection\r\n\t * @param  item to be added\r\n\t * @return none\r\n\t */\r\n\tpublic addToSelectedItems( item?: any ) : void {\r\nconsole.log(\"item=\",item);\r\n\t\tconst changeItems = ( item )\r\n\t\t\t? [ item ]\r\n\t\t\t: this.getPendingSelectionFromCollection( this.unselectedItems );\r\n\r\n\t\tthis.pendingSelection = Object.create( null );\r\n\t\tthis.unselectedItems = this.removeItemsFromCollection( this.unselectedItems, changeItems );\r\n\t\tthis.selectedItems = changeItems.concat( this.selectedItems );\r\n\t\tthis.selectedItemsBeforeSearch = this.selectedItems; \r\n\t\tthis.unselectedItemsBeforeSearch = this.unselectedItems;\r\n\t\tthis.saveToStorage(this.selectedItemsBeforeSearch, this.unselectedItemsBeforeSearch);\r\n\t}\r\n\r\n\t/**\r\n\t * Add all items to selected list\r\n\t * @param  none\r\n\t * @return none\r\n\t */\r\n\tpublic addAllToSelectedItems() : void {\r\n\t\tthis.selectedItems = this.dataSource;\r\n\t\tthis.unselectedItems = [];\r\n\t\tthis.saveToStorage(this.selectedItems, this.unselectedItems);\r\n\r\n\t}\r\n\r\n\t/**\r\n\t * remove all items from selected list\r\n\t * @param  none\r\n\t * @return  none\r\n\t */\r\n\tpublic removeAllFromSelectedItems() : void {\r\n    \tthis.unselectedItems = this.dataSource;\r\n\t\tthis.selectedItems = [];\r\n\t\tthis.saveToStorage(this.selectedItems, this.unselectedItems);\r\n  \t}\r\n\r\n  \t/**\r\n\t * when drag and drop event occurs\r\n\t * @param  event\r\n\t * @return  none\r\n\t */\r\n  drop(event: CdkDragDrop<string[]>) {\r\n    if (event.previousContainer === event.container) {\r\n      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\r\n    } else {\r\n      transferArrayItem(\r\n        event.previousContainer.data,\r\n        event.container.data,\r\n        event.previousIndex,\r\n        event.currentIndex,\r\n      );\r\n    }\r\n  }\r\n\r\n\r\n\t/**\r\n\t * Sort on click of sorting icon\r\n\t * @param  type whether it's increasing or decreasing\r\n\t * @return  none\r\n\t */\r\n  sortOnClick(type:string) {\r\n\r\n\t\tif(this.direction_unselected && type== \"unselected\"){\r\n\t\t\tthis.unselectedItems = this.unselectedItems.sort((a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase()));\r\n\t\t\tthis.direction_unselected = !this.direction_unselected;\r\n\t\t}else if(!this.direction_unselected && type== \"unselected\") {\r\n\t\t\tthis.unselectedItems = this.unselectedItems.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))\r\n\t\t\tthis.direction_unselected = !this.direction_unselected;\r\n\t\t}\r\n\t\tif(this.direction_selected && type== \"selected\"){\r\n\t\t\tthis.selectedItems = this.selectedItems.sort((a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase()));\r\n\t\t\tthis.direction_selected = !this.direction_selected;\r\n\t\t}else if(!this.direction_selected && type== \"selected\") {\r\n\t\t\tthis.selectedItems = this.selectedItems.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))\r\n\t\t\tthis.direction_selected = !this.direction_selected;\r\n\t\t}\r\n\t\r\n  }\r\n\r\n  \t/**\r\n\t * remove the selected item or dataSource from the selected dataSource collection\r\n\t * @param  item to be removed\r\n\t * @return  \r\n\t */\r\n\tpublic removeFromSelectedItems( item?: any ) : void {\r\n\r\n\t\tconst changeItems = ( item )\r\n\t\t\t? [ item ]\r\n\t\t\t: this.getPendingSelectionFromCollection( this.selectedItems );\r\n\r\n\t\tthis.pendingSelection = Object.create( null );\r\n\t\tthis.selectedItems = this.removeItemsFromCollection( this.selectedItems, changeItems );\r\n\t\tconst changedData= changeItems\r\n\t\t\t.concat( this.unselectedItems )\r\n\t\t\t.sort( this.sortItemOperator );\r\n\t\tthis.unselectedItems = changedData;\r\n\t\tthis.unselectedItemsBeforeSearch = changedData;\r\n\t\tthis.selectedItemsBeforeSearch = this.selectedItemsBeforeSearch;\r\n\t\tthis.saveToStorage(this.selectedItems, this.unselectedItems);\r\n\r\n\t}\r\n\r\n\t/**\r\n\t * toggle the pending selection for the given item\r\n\t * @param  item to toggle\r\n\t * @return  none\r\n\t */\r\n\tpublic togglePendingSelection( item:any ) : void {\r\n\t\tthis.pendingSelection[ item.id ] = ! this.pendingSelection[ item.id ];\r\n\t}\r\n\r\n\t/**\r\n\t * Filter the data based on the provided input\r\n\t * @param  searchvalue input label provided in search box\r\n\t * @return  none\r\n\t */\r\n\tfilterData(searchvalue: any, type: string): any {\r\n\t\tif(type === 'unselected'){\r\n\t\t\tif(searchvalue === \"\"){\r\n\t\t\t\tthis.unselectedItems= this.unselectedItemsBeforeSearch;\r\n\t\t\t}\r\n\t\t\tthis.unselectedItems = this.filterPipe.transform(this.unselectedItemsBeforeSearch, searchvalue, 'name');\r\n\t\t}\r\n\t\telse{\r\n\t\t\tif(searchvalue === \"\"){\r\n\t\t\t\tthis.selectedItems= this.selectedItemsBeforeSearch;\r\n\t\t\t}\r\n\t\t\tthis.selectedItems = this.filterPipe.transform(this.selectedItemsBeforeSearch, searchvalue, 'name');\r\n\t\t}\r\n\t}\r\n\t\r\n\t/**\r\n\t * gather the dataSource in the given collection that are part of the current pending selection\r\n\t * @param  collection input label provided in search box\r\n\t * @return  selected items\r\n\t */\r\n\r\n\tpublic getPendingSelectionFromCollection( collection: any[] ) : any[] {\r\n\r\n\t\tconst selectionFromCollection = collection.filter(\r\n\t\t\t( item ) => {\r\n\t\t\t\treturn( item.id in this.pendingSelection );\r\n\t\t\t}\r\n\t\t);\r\n\r\n\t\treturn( selectionFromCollection );\r\n\r\n\t}\r\n\r\n\t/**\r\n\t * remove the given dataSource from the given collection\r\n\t * @param  collection and ItemsToRemove\r\n\t * @return  a new collection\r\n\t */\r\n\tpublic removeItemsFromCollection(\r\n\t\tcollection: any[],\r\n\t\tItemsToRemove: any[]\r\n\t\t) : any[] {\r\n\r\n\t\tconst collectionWithoutItems = collection.filter(\r\n\t\t\t( item ) => {\r\n\t\t\t\treturn( ! ItemsToRemove.includes( item ) );\r\n\t\t\t}\r\n\t\t);\r\n\r\n\t\treturn( collectionWithoutItems );\r\n\r\n\t}\r\n\r\n\t/**\r\n\t * provide the sort operator for the dataSource collection\r\n\t * @param  two values to compare\r\n\t * @return  a value based on the sorting\r\n\t */\r\n\tpublic sortItemOperator( a: any, b: any ) : number {\r\n\t\treturn( a.name.localeCompare( b.name ) );\r\n\t}\r\n\r\n\tselectedOutputItems() {\r\n\t\tthis.rucEvent.emit(this.selectedItems);\r\n\t}\r\n}\r\n ","<div class=\"{{customTheme}}\">\r\n  <div class=\"dual-list-container\">\r\n    <div class=\"dual-select\">\r\n      <div class=\"leftContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchText, 'unselected')\" [(ngModel)]=\"searchText\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('unselected')\">{{ !direction_unselected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n        <div class=\"dual-select__left\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n\r\n            <div cdkDropList #todoList=\"cdkDropList\" [cdkDropListData]=\"unselectedItems\"\r\n              [cdkDropListConnectedTo]=\"[doneList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n\r\n\r\n              <mat-list-item role=\"listitem\" *ngFor=\"let item of unselectedItems\" cdkDrag [disabled]=\"!item.disable\"\r\n                (click)=\"togglePendingSelection( item )\" (dblclick)=\"addToSelectedItems( item )\"\r\n                class=\"dual-select__item\" [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"dual-select__controls\">\r\n        <button (click)=\"addToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10236;\r\n        </button>\r\n        <button (click)=\"removeFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10235;\r\n        </button>\r\n        <button (click)=\"addAllToSelectedItems()\" class=\"dual-select__control\">\r\n          &#10503;\r\n        </button>\r\n        <button (click)=\"removeAllFromSelectedItems()\" class=\"dual-select__control\">\r\n          &#10502;\r\n        </button>\r\n      </div>\r\n      <div class=\"rightContainer\">\r\n        <mat-form-field class=\"example-full-width search_Box\" appearance=\"fill\" *ngIf=\"rucInputData.enableSearch\">\r\n          <mat-label>Search</mat-label>\r\n          <input matInput (keyup)=\"filterData(searchTextSelected, 'selected')\" [(ngModel)]=\"searchTextSelected\">\r\n        </mat-form-field>\r\n        <span class=\"flex\" *ngIf=\"rucInputData.sorting\"><mat-icon (click)=\"sortOnClick('selected')\">{{ !direction_selected ? 'arrow_drop_down' :\r\n            'arrow_drop_up' }}</mat-icon> </span>\r\n\r\n        <div class=\"dual-select__right\" [ngStyle]=\"{'max-height.px': height, 'width.px': width}\">\r\n\r\n\r\n\r\n          <mat-list role=\"list\" class=\"list_container\">\r\n            <div cdkDropList #doneList=\"cdkDropList\" [cdkDropListData]=\"selectedItems\"\r\n              [cdkDropListConnectedTo]=\"[todoList]\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\">\r\n\r\n              <mat-list-item cdkDrag *ngFor=\"let item of selectedItems\" (click)=\"togglePendingSelection( item )\"\r\n                (dblclick)=\"removeFromSelectedItems( item )\" class=\"dual-select__item dual-select__item--new\"\r\n                [class.dual-select__item--selected]=\"pendingSelection[ item.id ]\">\r\n                <span>{{ item.name }}</span>\r\n              </mat-list-item>\r\n            </div>\r\n          </mat-list>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"text-align-center\">\r\n      <button (click)=\"selectedOutputItems()\" class=\"dual-list-btn\">\r\n        Submit\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { DualListSelectorComponent } from './dual-list-selector/dual-list-selector.component';\r\nimport { MatListModule } from '@angular/material/list';\r\nimport { FilterPipe } from '../pipes/filter.pipe';\r\nimport {MatChipsModule} from '@angular/material/chips';\r\n\r\nimport { DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { FormsModule } from '@angular/forms';\r\n\r\n\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatSortModule } from '@angular/material/sort';\r\nimport { MatTableModule } from '@angular/material/table';\r\n\r\n@NgModule({\r\n  imports: [CommonModule,\r\n    FormsModule,\r\n    MatListModule,\r\n    DragDropModule,\r\n    MatChipsModule,\r\n    MatFormFieldModule,\r\n    MatInputModule,\r\n    MatIconModule,\r\n    MatSortModule,\r\n    MatTableModule\r\n  ],\r\n  declarations: [DualListSelectorComponent,FilterPipe],\r\n  exports: [DualListSelectorComponent],\r\n  entryComponents: [DualListSelectorComponent],\r\n})\r\nexport class RuclibDualListSelectorModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FilterPipe"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/ruclib-dual-list-selector.module';
+export * from './lib/dual-list-selector/dual-list-selector.component';

package/interfaces/PendingSelectionItems.d.ts

@@ -0,0 +1,3 @@
+export interface PendingSelection {
+    [key: number]: boolean;
+}

package/lib/dual-list-selector/dual-list-selector.component.d.ts

@@ -0,0 +1,102 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { PendingSelection } from '../../interfaces/PendingSelectionItems';
+import { FilterPipe } from '../../pipes/filter.pipe';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import * as i0 from "@angular/core";
+export declare class DualListSelectorComponent implements OnInit {
+    filterPipe: FilterPipe;
+    dataSource: any[];
+    rucInputData: any;
+    rucEvent: EventEmitter<any>;
+    customTheme: string | undefined;
+    height: any;
+    width: any;
+    persistOnRefresh: boolean | undefined;
+    pendingSelection: PendingSelection;
+    selectedItems: any[];
+    unselectedItems: any[];
+    selectedItemsBeforeSearch: any[];
+    unselectedItemsBeforeSearch: any[];
+    readonly separatorKeysCodes: readonly [13, 188];
+    searchText: string;
+    searchTextSelected: string;
+    direction_unselected: boolean;
+    direction_selected: boolean;
+    constructor(filterPipe: FilterPipe);
+    ngOnInit(): void;
+    /**
+     * save lists to storage
+     * @param  selected and unselected list
+     * @return none
+     */
+    saveToStorage(selected: any[], unselected: any[]): void;
+    /**
+     * add the selected item or dataSource to the selected dataSource collection
+     * @param  item to be added
+     * @return none
+     */
+    addToSelectedItems(item?: any): void;
+    /**
+     * Add all items to selected list
+     * @param  none
+     * @return none
+     */
+    addAllToSelectedItems(): void;
+    /**
+     * remove all items from selected list
+     * @param  none
+     * @return  none
+     */
+    removeAllFromSelectedItems(): void;
+    /**
+     * when drag and drop event occurs
+     * @param  event
+     * @return  none
+     */
+    drop(event: CdkDragDrop<string[]>): void;
+    /**
+     * Sort on click of sorting icon
+     * @param  type whether it's increasing or decreasing
+     * @return  none
+     */
+    sortOnClick(type: string): void;
+    /**
+     * remove the selected item or dataSource from the selected dataSource collection
+     * @param  item to be removed
+     * @return
+     */
+    removeFromSelectedItems(item?: any): void;
+    /**
+     * toggle the pending selection for the given item
+     * @param  item to toggle
+     * @return  none
+     */
+    togglePendingSelection(item: any): void;
+    /**
+     * Filter the data based on the provided input
+     * @param  searchvalue input label provided in search box
+     * @return  none
+     */
+    filterData(searchvalue: any, type: string): any;
+    /**
+     * gather the dataSource in the given collection that are part of the current pending selection
+     * @param  collection input label provided in search box
+     * @return  selected items
+     */
+    getPendingSelectionFromCollection(collection: any[]): any[];
+    /**
+     * remove the given dataSource from the given collection
+     * @param  collection and ItemsToRemove
+     * @return  a new collection
+     */
+    removeItemsFromCollection(collection: any[], ItemsToRemove: any[]): any[];
+    /**
+     * provide the sort operator for the dataSource collection
+     * @param  two values to compare
+     * @return  a value based on the sorting
+     */
+    sortItemOperator(a: any, b: any): number;
+    selectedOutputItems(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DualListSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DualListSelectorComponent, "uxp-dual-list-selector", never, { "dataSource": "dataSource"; "rucInputData": "rucInputData"; "customTheme": "customTheme"; }, { "rucEvent": "rucEvent"; }, never, never, false, never>;
+}

package/lib/ruclib-dual-list-selector.module.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dual-list-selector/dual-list-selector.component";
+import * as i2 from "../pipes/filter.pipe";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@angular/material/list";
+import * as i6 from "@angular/cdk/drag-drop";
+import * as i7 from "@angular/material/chips";
+import * as i8 from "@angular/material/form-field";
+import * as i9 from "@angular/material/input";
+import * as i10 from "@angular/material/icon";
+import * as i11 from "@angular/material/sort";
+import * as i12 from "@angular/material/table";
+export declare class RuclibDualListSelectorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibDualListSelectorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<RuclibDualListSelectorModule, [typeof i1.DualListSelectorComponent, typeof i2.FilterPipe], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.MatListModule, typeof i6.DragDropModule, typeof i7.MatChipsModule, typeof i8.MatFormFieldModule, typeof i9.MatInputModule, typeof i10.MatIconModule, typeof i11.MatSortModule, typeof i12.MatTableModule], [typeof i1.DualListSelectorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<RuclibDualListSelectorModule>;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@ruc-lib/dual-list-selector",
+  "version": "2.0.0",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0",
+    "@angular/core": "^17.0.0 || ^16.0.0 || ^15.0.0",
+    "@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
+    "@angular/cdk": "15.2.9",
+    "@angular/platform-browser": "15.2.10",
+    "@angular/forms": "15.2.10"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "module": "fesm2015/ruc-lib-dual-list-selector.mjs",
+  "es2020": "fesm2020/ruc-lib-dual-list-selector.mjs",
+  "esm2020": "esm2020/ruc-lib-dual-list-selector.mjs",
+  "fesm2020": "fesm2020/ruc-lib-dual-list-selector.mjs",
+  "fesm2015": "fesm2015/ruc-lib-dual-list-selector.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/ruc-lib-dual-list-selector.mjs",
+      "es2020": "./fesm2020/ruc-lib-dual-list-selector.mjs",
+      "es2015": "./fesm2015/ruc-lib-dual-list-selector.mjs",
+      "node": "./fesm2015/ruc-lib-dual-list-selector.mjs",
+      "default": "./fesm2020/ruc-lib-dual-list-selector.mjs"
+    }
+  }
+}

package/pipes/filter.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class FilterPipe implements PipeTransform {
+    transform(items: any[], searchText: string, key?: string): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<FilterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<FilterPipe, "filter", false>;
+}