mis-crystal-design-system 2.0.1 → 2.2.0

package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js

@@ -0,0 +1,246 @@
+import { EventEmitter, Component, ElementRef, Input, Output, HostListener, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+import { ButtonModule } from 'mis-crystal-design-system/button';
+
+class NestedMultiSelectDropdownComponent {
+    constructor(eRef) {
+        this.eRef = eRef;
+        this.searchInput = '';
+        this.isOpen = false;
+        this.localSelectedItems = [];
+        this.localData = [];
+        this.searchData = [];
+        this.selectedCount = 0;
+        this.label = 'Select';
+        this.height = '';
+        this.width = '';
+        this.dropdownListHeight = '';
+        this.dropdownListWidth = '';
+        this.dropdownListPosition = 'Left';
+        this.searchEnabled = true;
+        this.showSelectedCount = false;
+        this.noDataMessage = 'No Data';
+        this.onChange = new EventEmitter();
+        this.isSearchInputFocused = false;
+    }
+    set data(values) {
+        // tslint:disable-next-line:no-shadowed-variable
+        this.localData = values.map(item => {
+            return Object.assign(Object.assign({}, item), { checked: false, children: item.children.map(a => {
+                    return Object.assign(Object.assign({}, a), { checked: false });
+                }) });
+        });
+    }
+    set selectedItems(values) {
+        this.handlerSetLocalSelectedItems(values);
+    }
+    clickout(event) {
+        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);
+        if (isClickedOutside) {
+            this.onCancel();
+        }
+    }
+    ngOnInit() { }
+    handlerSetLocalSelectedItems(values) {
+        this.localSelectedItems = values;
+    }
+    searchInputFocused(isFocused) {
+        this.isSearchInputFocused = isFocused;
+    }
+    searchInputCanceled(event) {
+        event.stopPropagation();
+        this.searchInput = '';
+        this.isSearchInputFocused = false;
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.handlerSetLocalSelectedItems(this.localSelectedItems);
+            this.localData = this.formatValues(this.localData);
+        }
+    }
+    // tslint:disable-next-line:variable-name
+    filterByValue(array, string) {
+        return array.filter(o => { var _a; return o.label.toLowerCase().includes(string.toLowerCase()) || ((_a = o.children) === null || _a === void 0 ? void 0 : _a.some(g => { var _a; return (_a = g === null || g === void 0 ? void 0 : g.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(string.toLowerCase()); })); }).map(v => {
+            var _a;
+            return Object.assign(Object.assign({}, v), { children: (_a = v === null || v === void 0 ? void 0 : v.children) === null || _a === void 0 ? void 0 : _a.filter(l => { var _a; return (_a = l === null || l === void 0 ? void 0 : l.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(string.toLowerCase()); }) });
+        });
+    }
+    searchInputOnChange(newValue) {
+        this.searchInput = newValue;
+        if (newValue) {
+            this.searchData = this.filterByValue(this.localData, newValue);
+        }
+        else {
+            this.searchData = [];
+            this.searchInput = '';
+        }
+    }
+    formatValues(array) {
+        const checkedValues = array
+            .filter(a => a.checked)
+            .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
+        const unCheckedValues = array
+            .filter(a => !a.checked)
+            .sort((a, b) => a.label > b.label ? 1 : b.label > a.label ? -1 : 0);
+        return [...checkedValues, ...unCheckedValues];
+    }
+    // tslint:disable-next-line:no-shadowed-variable
+    toggleSelectedItems(event, item, cItem) {
+        event.stopPropagation();
+        if (!cItem) {
+            if (item.checked) {
+                this.localData = [
+                    ...this.localData.map(a => {
+                        if (a.value === item.value) {
+                            return Object.assign(Object.assign({}, a), { checked: false, 
+                                // tslint:disable-next-line:no-shadowed-variable
+                                children: item.children.map(a => {
+                                    return Object.assign(Object.assign({}, a), { checked: false });
+                                }) });
+                        }
+                        return a;
+                    })
+                ];
+            }
+            else {
+                this.localData = [
+                    ...this.localData.map(a => {
+                        if (a.value === item.value) {
+                            return Object.assign(Object.assign({}, a), { checked: true, 
+                                // tslint:disable-next-line:no-shadowed-variable
+                                children: item.children.map(a => {
+                                    return Object.assign(Object.assign({}, a), { checked: true });
+                                }) });
+                        }
+                        return a;
+                    })
+                ];
+            }
+        }
+        else {
+            if (cItem.checked) {
+                this.localData = [
+                    ...this.localData.map(a => {
+                        if (a.value === item.value) {
+                            // tslint:disable-next-line:no-shadowed-variable
+                            const children = a === null || a === void 0 ? void 0 : a.children.map(a => {
+                                if ((cItem === null || cItem === void 0 ? void 0 : cItem.value) === (a === null || a === void 0 ? void 0 : a.value)) {
+                                    return Object.assign(Object.assign({}, a), { checked: false });
+                                }
+                                return a;
+                            });
+                            return Object.assign(Object.assign({}, a), { checked: children.every(q => q.checked), 
+                                // tslint:disable-next-line:no-shadowed-variable
+                                children });
+                        }
+                        return a;
+                    })
+                ];
+            }
+            else {
+                this.localData = [
+                    ...this.localData.map(a => {
+                        if (a.value === item.value) {
+                            // tslint:disable-next-line:no-shadowed-variable
+                            const children = a === null || a === void 0 ? void 0 : a.children.map(a => {
+                                if ((cItem === null || cItem === void 0 ? void 0 : cItem.value) === (a === null || a === void 0 ? void 0 : a.value)) {
+                                    return Object.assign(Object.assign({}, a), { checked: true });
+                                }
+                                return a;
+                            });
+                            return Object.assign(Object.assign({}, a), { checked: children.every(q => q.checked), 
+                                // tslint:disable-next-line:no-shadowed-variable
+                                children });
+                        }
+                        return a;
+                    })
+                ];
+            }
+        }
+        if (this.searchEnabled) {
+            this.searchInputOnChange(this.searchInput);
+        }
+    }
+    applyFilters() {
+        let localCount = 0;
+        this.localData.forEach(a => { var _a; return (_a = a === null || a === void 0 ? void 0 : a.children) === null || _a === void 0 ? void 0 : _a.forEach(b => {
+            if (b.checked) {
+                localCount += 1;
+            }
+        }); });
+        this.selectedCount = localCount;
+        const w = this.localData
+            .filter(r => { var _a; return !(!r.checked && !((_a = r === null || r === void 0 ? void 0 : r.children) === null || _a === void 0 ? void 0 : _a.some(f => f === null || f === void 0 ? void 0 : f.checked))); })
+            .map(a => {
+            var _a;
+            return Object.assign(Object.assign({}, a), { children: (_a = a === null || a === void 0 ? void 0 : a.children) === null || _a === void 0 ? void 0 : _a.filter(s => s.checked) });
+        });
+        this.onChange.emit(w);
+        this.onCancel();
+    }
+    onReset() {
+        this.isSearchInputFocused = false;
+        for (let item of this.localData) {
+            for (let child of item.children) {
+                child.checked = false;
+            }
+            item.checked = false;
+        }
+        this.onChange.emit([]);
+        this.isOpen = false;
+        this.searchInput = '';
+    }
+    onCancel() {
+        this.isSearchInputFocused = false;
+        this.isOpen = false;
+        this.searchInput = '';
+    }
+}
+NestedMultiSelectDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-nested-multi-select-dropdown',
+                template: "<div class=\"container\" [ngStyle]=\"{\n        'height': height.length > 0? height: '',\n        'width': width.length > 0? width: ''\n     }\"\n>\n    <div class=\"dropdown\" (click)=\"toggleDropdown()\" [ngStyle]=\"{'background': isOpen ? '#E6EBF7': ''}\">\n        <div class=\"label\">\n            <p class=\"text\">{{ label }}</p>\n            <p *ngIf=\"showSelectedCount && selectedCount > 0\" class=\"count\">\n                {{ selectedCount }}\n            </p>\n        </div>\n        <svg class=\"handle\" [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)': 'rotate(0deg)' }\" width=\"20\" height=\"20\"\n             viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                  d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\" fill=\"#181F33\" />\n        </svg>\n    </div>\n    <div style=\"flex-basis: 0;\"></div>\n    <div style=\"width: 100%; position: relative;\">\n        <div *ngIf=\"isOpen\" class=\"popup-container\"\n             [ngStyle]=\"{\n                'height': dropdownListHeight,\n                'width': dropdownListWidth\n             }\"\n             [ngClass]=\"{\n                'position-left': dropdownListPosition === 'Left',\n                'position-right': dropdownListPosition === 'Right'\n             }\"\n        >\n            <div *ngIf=\"searchEnabled\" class=\"search-container\">\n                <svg *ngIf=\"!isSearchInputFocused\" class=\"search-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n                <input\n                        [ngModel]=\"searchInput\"\n                        [ngStyle]=\"{ paddingLeft: isSearchInputFocused ? '12px' : '45px', border:isSearchInputFocused? '1px solid #0937B2':'1px solid #e0e0e0', paddingRight: isSearchInputFocused ? '45px' : '10px' }\"\n                        (ngModelChange)=\"searchInputOnChange($event)\"\n                        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n                        (focus)=\"searchInputFocused(true)\"\n                        class=\"search-input\"\n                />\n                <svg *ngIf=\"isSearchInputFocused\" class=\"cancel-icon\" (click)=\"searchInputCanceled($event)\" width=\"24\" height=\"24\"\n                     viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z\"\n                          fill=\"#6A737D\" />\n                </svg>\n            </div>\n            <div class=\"items\">\n                <div (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n                    <div class=\"item\">\n                        <div class=\"checkbox-container-wrapper\">\n                            <div class=\"checkbox-container\">\n                                <mis-checkbox\n                                        [checked]=\"item.checked\"\n                                ></mis-checkbox>\n                            </div>\n                            <p class=\"label\">\n                                {{ item.label }}\n                            </p>\n                        </div>\n                        <div class=\"icon-container\" *ngIf=\"item.icon\">\n                            <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\">\n                        </div>\n                    </div>\n                    <div *ngIf=\"item?.children?.length > 0\" class=\"items sub\" style=\"padding-right: 0;\">\n                        <div class=\"item\" (click)=\"toggleSelectedItems($event, item, cItem)\" *ngFor=\"let cItem of item?.children\">\n                            <div class=\"checkbox-container-wrapper\">\n                                <div class=\"checkbox-container\">\n                                    <mis-checkbox\n                                            [checked]=\"cItem.checked\"\n                                    ></mis-checkbox>\n                                </div>\n                                <p class=\"label\">\n                                    {{ cItem.label }}\n                                </p>\n                            </div>\n                            <div class=\"icon-container\" *ngIf=\"cItem.icon\">\n                                <img class=\"icon\" [src]=\"cItem.icon\" alt=\"no img\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n                    {{ searchInput === '' ? noDataMessage : 'No results' }}\n                </div>\n            </div>\n            <div *ngIf=\"localData.length !== 0\" class=\"actions-container\">\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Reset'\"\n                            [type]=\"'Text'\"\n                            [width]=\"'100%'\"\n                            (click)=\"onReset()\"\n                    ></mis-button>\n                </div>\n                <div style=\"width: calc(50% - 4px)\">\n                    <mis-button\n                            [name]=\"'Apply'\"\n                            [type]=\"'Solid'\"\n                            [width]=\"'100%'\"\n                            (click)=\"applyFilters()\"\n                    ></mis-button>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n",
+                styles: ["::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#9aa7b4}.container{position:relative;display:flex;justify-content:center;align-items:center;height:32px;width:256px;flex-wrap:wrap;font-family:Lato,sans-serif}.container .dropdown{height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 12px;overflow:hidden}.container .dropdown:hover{background-color:#f5f7fc}.container .dropdown .label{display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.container .dropdown .label,.container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.container .popup-container::-webkit-scrollbar{width:0;height:0}.container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;padding:8px 12px;border-radius:6px;height:auto}.container .popup-container .items .item:hover{background-color:#f5f7fc}.container .popup-container .items .item .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container{display:block;position:relative;cursor:pointer;font-size:22px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark{position:absolute;top:-8px;left:0;height:15px;width:15px;border-radius:4px;background-color:#0079f1;border:1px solid #6a737d}.container .popup-container .items .item .checkbox-container-wrapper .checkbox-container .checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:3px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.container .popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.container .popup-container .actions-container{display:flex;justify-content:space-between;bottom:0;align-items:center;position:-webkit-sticky;position:sticky;padding:16px;background-color:#fff;border-top:1px solid #e0e0e0}.container .popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.container .popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.container .popup-container .actions-container .apply{cursor:pointer;padding:10px 32px;text-align:center;color:#fff;font-size:16px;line-height:24px;background:#0937b2;border-radius:8px}.position-left{right:0}.position-right{left:0}"]
+            },] }
+];
+NestedMultiSelectDropdownComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+NestedMultiSelectDropdownComponent.propDecorators = {
+    data: [{ type: Input }],
+    label: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
+    dropdownListHeight: [{ type: Input }],
+    dropdownListWidth: [{ type: Input }],
+    dropdownListPosition: [{ type: Input }],
+    searchEnabled: [{ type: Input }],
+    showSelectedCount: [{ type: Input }],
+    noDataMessage: [{ type: Input }],
+    selectedItems: [{ type: Input }],
+    onChange: [{ type: Output }],
+    clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
+};
+
+class NestedMultiSelectDropdownModule {
+    static forRoot() {
+        return { ngModule: NestedMultiSelectDropdownModule, providers: [] };
+    }
+}
+NestedMultiSelectDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [NestedMultiSelectDropdownComponent],
+                imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],
+                exports: [NestedMultiSelectDropdownComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NestedMultiSelectDropdownComponent, NestedMultiSelectDropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-nested-multi-select-dropdown.js.map

package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-nested-multi-select-dropdown.js","sources":["../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.component.ts","../../../projects/mis-components/nested-multi-select-dropdown/nested-multi-select-dropdown.module.ts","../../../projects/mis-components/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.ts"],"sourcesContent":["import {\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    OnInit,\n    Output\n} from '@angular/core';\n\n@Component({\n    selector: 'mis-nested-multi-select-dropdown',\n    templateUrl: './nested-multi-select-dropdown.component.html',\n    styleUrls: ['./nested-multi-select-dropdown.component.scss']\n})\nexport class NestedMultiSelectDropdownComponent implements OnInit {\n\n    searchInput: string = '';\n    isOpen = false;\n    localSelectedItems: NestedMultiSelectDropdownItem[] = [];\n    localData: NestedMultiSelectDropdownItem[] = [];\n    searchData: NestedMultiSelectDropdownItem[] = [];\n    selectedCount: number = 0;\n\n    @Input() set data(values: NestedMultiSelectDropdownItem[]) {\n        // tslint:disable-next-line:no-shadowed-variable\n        this.localData = values.map(item => {\n            return {\n                ...item,\n                checked: false,\n                children: item.children.map(a => {\n                    return {\n                        ...a,\n                        checked: false\n                    };\n                })\n            };\n        });\n    }\n    @Input() label: string = 'Select';\n    @Input() height: string = ''\n    @Input() width: string = ''\n\n    @Input() dropdownListHeight: string = ''\n    @Input() dropdownListWidth: string = ''\n    @Input() dropdownListPosition: 'Left' | 'Right' = 'Left'\n\n    @Input() searchEnabled: boolean = true;\n    @Input() showSelectedCount: boolean = false;\n    @Input() noDataMessage: string = 'No Data';\n    @Input() set selectedItems(values: NestedMultiSelectDropdownItem[]) {\n        this.handlerSetLocalSelectedItems(values);\n    }\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    @HostListener('document:click', ['$event'])\n    clickout(event) {\n        const isClickedOutside = !this.eRef.nativeElement.contains(event.target);\n        if (isClickedOutside) {\n            this.onCancel();\n        }\n    }\n\n    constructor(private eRef: ElementRef) {}\n    ngOnInit() {}\n\n    handlerSetLocalSelectedItems(values) {\n        this.localSelectedItems = values;\n    }\n    isSearchInputFocused: boolean = false;\n    searchInputFocused(isFocused: boolean) {\n        this.isSearchInputFocused = isFocused;\n    }\n    searchInputCanceled(event) {\n        event.stopPropagation();\n        this.searchInput = '';\n        this.isSearchInputFocused = false;\n    }\n    toggleDropdown() {\n        this.isOpen = !this.isOpen;\n        if (this.isOpen) {\n            this.handlerSetLocalSelectedItems(this.localSelectedItems);\n            this.localData = this.formatValues(this.localData);\n        }\n    }\n    // tslint:disable-next-line:variable-name\n    filterByValue(array: NestedMultiSelectDropdownItem[], string: string) {\n        return array.filter(o =>\n            o.label.toLowerCase().includes(string.toLowerCase()) || o.children?.some(g => g?.label?.toLowerCase().includes(string.toLowerCase()))\n        ).map(v => {\n            return {\n                ...v,\n                children: v?.children?.filter(l => l?.label?.toLowerCase().includes(string.toLowerCase()))\n            };\n        });\n    }\n    searchInputOnChange(newValue) {\n        this.searchInput = newValue;\n        if (newValue) {\n            this.searchData = this.filterByValue(this.localData, newValue);\n        } else {\n            this.searchData = [];\n            this.searchInput = '';\n        }\n    }\n    formatValues(array: NestedMultiSelectDropdownItem[]) {\n        const checkedValues = array\n            .filter(a => a.checked)\n            .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) =>\n                a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n            );\n        const unCheckedValues = array\n            .filter(a => !a.checked)\n            .sort((a: NestedMultiSelectDropdownItem, b: NestedMultiSelectDropdownItem) =>\n                a.label > b.label ? 1 : b.label > a.label ? -1 : 0\n            );\n        return [...checkedValues, ...unCheckedValues];\n    }\n    // tslint:disable-next-line:no-shadowed-variable\n    toggleSelectedItems(event, item: NestedMultiSelectDropdownItem, cItem?: any) {\n        event.stopPropagation();\n        if (!cItem){\n            if (item.checked) {\n                this.localData = [\n                    ...this.localData.map(a => {\n                        if (a.value === item.value) {\n                            return {\n                                ...a,\n                                checked: false,\n                                // tslint:disable-next-line:no-shadowed-variable\n                                children: item.children.map(a => {\n                                    return {\n                                        ...a,\n                                        checked: false\n                                    };\n                                })\n                            };\n                        }\n                        return a;\n                    })\n                ];\n            } else {\n                this.localData = [\n                    ...this.localData.map(a => {\n                        if (a.value === item.value) {\n                            return {\n                                ...a,\n                                checked: true,\n                                // tslint:disable-next-line:no-shadowed-variable\n                                children: item.children.map(a => {\n                                    return {\n                                        ...a,\n                                        checked: true\n                                    };\n                                })\n                            };\n                        }\n                        return a;\n                    })\n                ];\n            }\n        } else {\n            if (cItem.checked) {\n                this.localData = [\n                    ...this.localData.map(a => {\n                        if (a.value === item.value) {\n                            // tslint:disable-next-line:no-shadowed-variable\n                            const children = a?.children.map(a => {\n                                if (cItem?.value === a?.value){\n                                    return {\n                                        ...a,\n                                        checked: false\n                                    };\n                                }\n                                return a;\n                            });\n                            return {\n                                ...a,\n                                checked: children.every(q => q.checked),\n                                // tslint:disable-next-line:no-shadowed-variable\n                                children\n                            };\n                        }\n                        return a;\n                    })\n                ];\n            } else {\n                this.localData = [\n                    ...this.localData.map(a => {\n                        if (a.value === item.value) {\n                            // tslint:disable-next-line:no-shadowed-variable\n                            const children = a?.children.map(a => {\n                                if (cItem?.value === a?.value){\n                                    return {\n                                        ...a,\n                                        checked: true\n                                    };\n                                }\n                                return a;\n                            });\n                            return {\n                                ...a,\n                                checked: children.every(q => q.checked),\n                                // tslint:disable-next-line:no-shadowed-variable\n                                children\n                            };\n                        }\n                        return a;\n                    })\n                ];\n            }\n        }\n        if (this.searchEnabled) {\n            this.searchInputOnChange(this.searchInput);\n        }\n    }\n\n    applyFilters() {\n        let localCount = 0;\n        this.localData.forEach(a => a?.children?.forEach(b => {\n            if (b.checked){\n                localCount += 1;\n            }\n        }));\n        this.selectedCount = localCount;\n        const w =  this.localData\n            .filter(r => !(!r.checked && !r?.children?.some(f => f?.checked)))\n            .map(a => {\n                return {\n                    ...a,\n                    children: a?.children?.filter(s => s.checked)\n                };\n            });\n        this.onChange.emit(w);\n        this.onCancel();\n    }\n    onReset(){\n        this.isSearchInputFocused = false;\n        for(let item of this.localData){\n            for(let child of item.children){\n                child.checked = false\n            }\n            item.checked = false\n        }\n        this.onChange.emit([])\n        this.isOpen = false;\n        this.searchInput = '';\n    }\n    onCancel() {\n        this.isSearchInputFocused = false;\n        this.isOpen = false;\n        this.searchInput = '';\n    }\n}\nexport interface NestedMultiSelectDropdownItem {\n    label: string;\n    value: string;\n    checked?: boolean;\n    icon?: string;\n    children: Array<{\n        label: string\n        value: string\n        checked?: boolean;\n        icon?: string;\n    }>;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { NestedMultiSelectDropdownComponent } from './nested-multi-select-dropdown.component';\nimport { CheckboxModule } from 'mis-crystal-design-system/checkbox';\nimport { ButtonModule } from 'mis-crystal-design-system/button';\n\n@NgModule({\n    declarations: [NestedMultiSelectDropdownComponent],\n    imports: [CommonModule, FormsModule, CheckboxModule, ButtonModule],\n    exports: [NestedMultiSelectDropdownComponent]\n})\nexport class NestedMultiSelectDropdownModule {\n    static forRoot(): ModuleWithProviders<NestedMultiSelectDropdownModule> {\n        return { ngModule: NestedMultiSelectDropdownModule, providers: [] };\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-radio-button.js

@@ -0,0 +1,67 @@
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class RadioButtonComponent {
+    constructor() {
+        /** When multiple radio input fields are used
+         * an "id" can be given to keep track of them */
+        this.id = '';
+        /** Name of the attribute for which the radio
+         * selection is provided */
+        this.name = '';
+        /** Value of the attribute which is to be emitted
+         * when selected */
+        this.value = '';
+        /** Controls the state of the radio button */
+        this.disabled = false;
+        /** Can be used to attach the radio input field
+         * to a reactive form by passing in a
+         * “FormControl“ Object. It can also be
+         * used to set the default attribute value */
+        this.formControl = new FormControl(null);
+        /** Emits "value" of the radio button on selection */
+        this.valueChange = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    onChange(event) {
+        this.valueChange.emit(this.formControl.value);
+    }
+}
+RadioButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-radio',
+                template: "<input\n  (change)=\"onChange($event)\"\n  id=\"{{id}}\"\n  type=\"radio\"\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [value]=\"value\"\n  [formControl]=\"formControl\"\n>\n",
+                styles: ["input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin:0;padding:3px;background-clip:content-box;border:2px solid #6a737d;background-color:#fff;border-radius:50%;cursor:pointer}input[type=radio]:checked{background-color:#0937b2;border:2px solid #0937b2}input[type=radio]:hover{border:2px solid #929dab}input[type=radio]:checked:hover{border:2px solid #0937b2}input[type=radio]:disabled{border:2px solid #c8cdd3}input[type=radio]:checked:disabled{border:2px solid #c8cdd3;background-color:#c8cdd3}"]
+            },] }
+];
+RadioButtonComponent.ctorParameters = () => [];
+RadioButtonComponent.propDecorators = {
+    id: [{ type: Input }],
+    name: [{ type: Input }],
+    value: [{ type: Input }],
+    disabled: [{ type: Input }],
+    formControl: [{ type: Input }],
+    valueChange: [{ type: Output }]
+};
+
+class RadioButtonModule {
+    static forRoot() {
+        return { ngModule: RadioButtonModule, providers: [] };
+    }
+}
+RadioButtonModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [RadioButtonComponent],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [RadioButtonComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioButtonComponent, RadioButtonModule };
+//# sourceMappingURL=mis-crystal-design-system-radio-button.js.map

package/fesm2015/mis-crystal-design-system-radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-radio-button.js","sources":["../../../projects/mis-components/radio-button/radio-button.component.ts","../../../projects/mis-components/radio-button/radio-button.module.ts","../../../projects/mis-components/radio-button/mis-crystal-design-system-radio-button.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n  selector: 'mis-radio',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.scss']\n})\nexport class RadioButtonComponent implements OnInit{\n\n  /** When multiple radio input fields are used\n   * an \"id\" can be given to keep track of them */\n  @Input() id: string | number = ''\n  /** Name of the attribute for which the radio\n   * selection is provided */\n  @Input() name: string | number = ''\n  /** Value of the attribute which is to be emitted\n   * when selected */\n  @Input() value: string | number = ''\n  /** Controls the state of the radio button */\n  @Input() disabled: boolean = false\n\n  /** Can be used to attach the radio input field\n   * to a reactive form by passing in a\n   * “FormControl“ Object. It can also be\n   * used to set the default attribute value */\n  @Input() formControl: AbstractControl = new FormControl(null)\n\n  /** Emits \"value\" of the radio button on selection */\n  @Output() valueChange = new EventEmitter<any>()\n\n  constructor() {\n  }\n  ngOnInit(){\n  }\n  onChange(event){\n    this.valueChange.emit(this.formControl.value)\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { RadioButtonComponent } from './radio-button.component';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n  declarations: [RadioButtonComponent],\n    imports: [CommonModule, ReactiveFormsModule],\n  exports: [RadioButtonComponent]\n})\nexport class RadioButtonModule {\n  static forRoot(): ModuleWithProviders<RadioButtonModule> {\n    return { ngModule: RadioButtonModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,oBAAoB;IAuB/B;;;QAnBS,OAAE,GAAoB,EAAE,CAAA;;;QAGxB,SAAI,GAAoB,EAAE,CAAA;;;QAG1B,UAAK,GAAoB,EAAE,CAAA;;QAE3B,aAAQ,GAAY,KAAK,CAAA;;;;;QAMzB,gBAAW,GAAoB,IAAI,WAAW,CAAC,IAAI,CAAC,CAAA;;QAGnD,gBAAW,GAAG,IAAI,YAAY,EAAO,CAAA;KAG9C;IACD,QAAQ;KACP;IACD,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;KAC9C;;;YAlCF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,+LAA4C;;aAE7C;;;;iBAKE,KAAK;mBAGL,KAAK;oBAGL,KAAK;uBAEL,KAAK;0BAML,KAAK;0BAGL,MAAM;;;MClBI,iBAAiB;IAC5B,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACvD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,oBAAoB,CAAC;gBAClC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBAC9C,OAAO,EAAE,CAAC,oBAAoB,CAAC;aAChC;;;ACVD;;;;;;"}

package/fesm2015/mis-crystal-design-system-switch.js

@@ -0,0 +1,61 @@
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+class SwitchComponent {
+    constructor() {
+        this.mobileView = false;
+        this.formControl = new FormControl(false);
+        /** Emits value when toggled */
+        this.valueChanged = new EventEmitter();
+    }
+    set checked(value) {
+        this.formControl.setValue(value);
+    }
+    set disabled(value) {
+        if (value)
+            this.formControl.disable();
+        else
+            this.formControl.enable();
+    }
+    ngOnInit() {
+    }
+    onChange(event) {
+        this.valueChanged.emit(this.formControl.value);
+    }
+}
+SwitchComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-switch',
+                template: "<label class=\"toggle-switch\" [ngClass]=\"{'toggle-switch-mobile': mobileView}\">\n  <input\n    type=\"checkbox\"\n    (change)=\"onChange($event)\"\n    [formControl]=\"formControl\"\n  >\n  <span class=\"slider\"></span>\n</label>\n",
+                styles: [".toggle-switch{height:28px;width:51px;display:inline-block;position:relative;cursor:pointer}.toggle-switch input{display:none}.toggle-switch input:checked+.slider{background-color:#0937b2}.toggle-switch input:checked+.slider:after{transform:translateX(23px)}.toggle-switch .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch .slider:after{position:absolute;content:\"\";height:24px;width:24px;background-color:#fff;border-radius:12px;left:2px;bottom:2px;transition:.25s}.toggle-switch-mobile{height:14px;width:34px;display:inline-block;position:relative}.toggle-switch-mobile input{display:none}.toggle-switch-mobile input:checked+.slider{background-color:#e0e0e0}.toggle-switch-mobile input:disabled+.slider{background-color:#f5f5f5!important}.toggle-switch-mobile input:checked+.slider:after{background-color:#0937b2;transform:translateX(34px)}.toggle-switch-mobile input:checked:disabled+.slider:after{background-color:#929dab}.toggle-switch-mobile .slider{position:absolute;left:0;top:0;right:0;bottom:0;background-color:#e0e0e0;transition:.25s;border-radius:14px}.toggle-switch-mobile .slider:after{position:absolute;content:\"\";height:20px;width:20px;background-color:#fff;box-shadow:0 0 6px -2px #929dab;border-radius:12px;top:-3px;left:-10px;transition:.25s}"]
+            },] }
+];
+SwitchComponent.ctorParameters = () => [];
+SwitchComponent.propDecorators = {
+    mobileView: [{ type: Input }],
+    checked: [{ type: Input }],
+    disabled: [{ type: Input }],
+    formControl: [{ type: Input }],
+    valueChanged: [{ type: Output }]
+};
+
+class SwitchModule {
+    static forRoot() {
+        return { ngModule: SwitchModule, providers: [] };
+    }
+}
+SwitchModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SwitchComponent],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [SwitchComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SwitchComponent, SwitchModule };
+//# sourceMappingURL=mis-crystal-design-system-switch.js.map

package/fesm2015/mis-crystal-design-system-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-switch.js","sources":["../../../projects/mis-components/switch/switch.component.ts","../../../projects/mis-components/switch/switch.module.ts","../../../projects/mis-components/switch/mis-crystal-design-system-switch.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n  selector: 'mis-switch',\n  templateUrl: './switch.component.html',\n  styleUrls: ['./switch.component.scss']\n})\nexport class SwitchComponent implements OnInit{\n\n  @Input() mobileView: boolean = false\n  @Input() set checked(value: boolean){\n    this.formControl.setValue(value)\n  }\n  @Input() set disabled(value: boolean){\n    if(value) this.formControl.disable()\n    else this.formControl.enable()\n  }\n  @Input() formControl: AbstractControl = new FormControl(false)\n\n  /** Emits value when toggled */\n  @Output() valueChanged = new EventEmitter<boolean>()\n\n  constructor() {\n  }\n  ngOnInit() {\n  }\n  onChange(event){\n    this.valueChanged.emit(this.formControl.value)\n  }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SwitchComponent } from './switch.component';\nimport {ReactiveFormsModule} from '@angular/forms';\n\n@NgModule({\n  declarations: [SwitchComponent],\n    imports: [CommonModule, ReactiveFormsModule],\n  exports: [SwitchComponent]\n})\nexport class SwitchModule {\n  static forRoot(): ModuleWithProviders<SwitchModule> {\n    return { ngModule: SwitchModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,eAAe;IAe1B;QAbS,eAAU,GAAY,KAAK,CAAA;QAQ3B,gBAAW,GAAoB,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;;QAGpD,iBAAY,GAAG,IAAI,YAAY,EAAW,CAAA;KAGnD;IAbD,IAAa,OAAO,CAAC,KAAc;QACjC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KACjC;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,IAAG,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAA;;YAC/B,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAA;KAC/B;IAQD,QAAQ;KACP;IACD,QAAQ,CAAC,KAAK;QACZ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;KAC/C;;;YA1BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,wPAAsC;;aAEvC;;;;yBAGE,KAAK;sBACL,KAAK;uBAGL,KAAK;0BAIL,KAAK;2BAGL,MAAM;;;MCVI,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,CAAC;gBAC7B,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBAC9C,OAAO,EAAE,CAAC,eAAe,CAAC;aAC3B;;;ACVD;;;;;;"}