mis-crystal-design-system 2.9.7-v14-1 → 2.9.8

package/fab/fab.component.d.ts

@@ -1,6 +1,5 @@
 /** @format */
 import { ElementRef, OnDestroy, OnInit } from "@angular/core";
-import * as i0 from "@angular/core";
 export declare type FabOptions = {
     backgroundColorClosed?: string;
     backgroundColorOpened?: string;
@@ -27,6 +26,4 @@ export declare class FabComponent implements OnInit, OnDestroy {
     clickItem(item: FabItem): void;
     closeFab(): void;
     toogleFab(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FabComponent, "mis-fab", never, { "show": "show"; "options": "options"; "items": "items"; }, {}, never, never, false>;
 }

package/fab/fab.module.d.ts

@@ -1,10 +1,4 @@
 import { ModuleWithProviders } from "@angular/core";
-import * as i0 from "@angular/core";
-import * as i1 from "./fab.component";
-import * as i2 from "@angular/common";
 export declare class FabModule {
     static forRoot(): ModuleWithProviders<FabModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FabModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FabModule, [typeof i1.FabComponent], [typeof i2.CommonModule], [typeof i1.FabComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<FabModule>;
 }

package/fab/mis-crystal-design-system-fab.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';

package/fab/mis-crystal-design-system-fab.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"FabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"mis-fab","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":26,"character":4},"arguments":["slideUpFab",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":27,"character":6},"arguments":[":enter",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":28,"character":8},"arguments":[{"transform":"translateY(50px)","opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":29,"character":8},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":29,"character":34},"arguments":[{"transform":"translateY(0px)","opacity":1}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":31,"character":6},"arguments":[":leave",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":31,"character":28},"arguments":["200ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":54},"arguments":[{"transform":"translateY(70px)","opacity":0}]}]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":33,"character":4},"arguments":["rotateButton",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":34,"character":6},"arguments":["default",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":34,"character":23},"arguments":[{"transform":"rotate(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":35,"character":6},"arguments":["rotated",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":35,"character":23},"arguments":[{"transform":"rotate(45deg)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":36,"character":6},"arguments":["rotated => default",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":39},"arguments":["300ms ease-out"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":37,"character":6},"arguments":["default => rotated",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":37,"character":39},"arguments":["200ms ease-in"]}]}]]}],"template":"<div class=\"fab-wrapper\" *ngIf=\"show\">\n  <div class=\"fab-items\" *ngIf=\"isOpen\" @slideUpFab>\n    <div class=\"fab-item\" *ngFor=\"let item of items.reverse(); let i = index\" (click)=\"clickItem(item)\">\n      <div *ngIf=\"item.label\" class=\"fab-tooltip\">\n        {{ item.label }}\n      </div>\n      <div\n        class=\"fab-button\"\n        [ngStyle]=\"{\n          backgroundColor: item.backgroundColor || '#0937B2'\n        }\"\n      >\n        <img [src]=\"item.icon\" class=\"add-img\" />\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"fab-container\"\n    [ngStyle]=\"{\n      backgroundColor: isOpen ? options.backgroundColorOpened : options.backgroundColorClosed\n    }\"\n    (click)=\"toogleFab()\"\n  >\n    <svg\n      [@rotateButton]=\"isOpen ? 'rotated' : 'default'\"\n      class=\"add-img\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.1424 5.15607C13.1424 4.51759 12.6313 4 12.0009 4C11.3704 4 10.8594 4.51759 10.8594 5.15607V10.8421H5.14149C4.51106 10.8421 4 11.3597 4 11.9982C4 12.6367 4.51106 13.1543 5.14149 13.1543H10.8594V18.8439C10.8594 19.4824 11.3704 20 12.0009 20C12.6313 20 13.1424 19.4824 13.1424 18.8439V13.1543H18.8585C19.4889 13.1543 20 12.6367 20 11.9982C20 11.3597 19.4889 10.8421 18.8585 10.8421H13.1424V5.15607Z\"\n        fill=\"white\"\n      />\n    </svg>\n  </div>\n</div>\n","styles":[".fab-wrapper{position:fixed;right:24px;bottom:24px;z-index:1000}.fab-wrapper .fab-item{position:relative;padding:0 0 16px 8px}.fab-wrapper .fab-item .fab-tooltip{position:absolute;background-color:#181f33;border-radius:4px;color:#fff;padding:8px;display:flex;justify-content:center;align-items:center;white-space:nowrap;right:100%;top:calc(50% - 8px);transform:translateY(-50%)}.fab-wrapper .fab-item .fab-button{width:40px;height:40px}.fab-wrapper .fab-container,.fab-wrapper .fab-item .fab-button{cursor:pointer;border-radius:50%;display:flex;justify-content:center;align-items:center}.fab-wrapper .fab-container{width:56px;height:56px}.add-img{height:24px;width:24px}"]}]}],"members":{"show":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":48,"character":28}]}],"clickout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":50,"character":3},"arguments":["document:click",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"clickItem":[{"__symbolic":"method"}],"closeFab":[{"__symbolic":"method"}],"toogleFab":[{"__symbolic":"method"}]}},"FabItem":{"__symbolic":"interface"},"FabItems":{"__symbolic":"interface"},"FabOptions":{"__symbolic":"interface"},"FabModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"FabComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"FabComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"FabModule"},"providers":[]}}}}},"origins":{"FabComponent":"./fab.component","FabItem":"./fab.component","FabItems":"./fab.component","FabOptions":"./fab.component","FabModule":"./fab.module"},"importAs":"mis-crystal-design-system/fab"}

package/fab/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mis-crystal-design-system-fab.umd.js",
+  "module": "../fesm2015/mis-crystal-design-system-fab.js",
+  "es2015": "../fesm2015/mis-crystal-design-system-fab.js",
+  "esm2015": "../esm2015/fab/mis-crystal-design-system-fab.js",
+  "fesm2015": "../fesm2015/mis-crystal-design-system-fab.js",
+  "typings": "mis-crystal-design-system-fab.d.ts",
+  "metadata": "mis-crystal-design-system-fab.metadata.json",
+  "sideEffects": false,
+  "name": "mis-crystal-design-system/fab"
+}

package/fesm2015/mis-crystal-design-system-action-list.js

@@ -0,0 +1,183 @@
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { EventEmitter, Component, ElementRef, ViewContainerRef, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CheckboxModule } from 'mis-crystal-design-system/checkbox';
+
+class ActionListComponent {
+    constructor(eRef, overlay, viewContainerRef) {
+        this.eRef = eRef;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.isOpen = false;
+        this.subItems = [];
+        this.data = [];
+        this.height = "";
+        this.width = "";
+        this.label = "Select";
+        this.dropdownListHeight = "";
+        this.dropdownListWidth = "";
+        this.dropdownListPosition = "Left";
+        this.searchEnabled = true;
+        this.noDataMessage = "No Data";
+        this.selectedItems = [];
+        this.onChange = new EventEmitter();
+    }
+    ngOnInit() {
+        var _a;
+        this.selectedItems = [];
+        this.data.forEach(q => q.children.forEach(w => {
+            if (w.checked)
+                this.selectedItems.push(w);
+        }));
+        this.label = ((_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label) || this.label;
+    }
+    filterByValue(array, string) {
+        return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.openDropdown(this.popupContainer, this.selectElement.nativeElement, false);
+        else
+            this.onCancel();
+    }
+    openDropdown(template, origin, openRight) {
+        const positionsBottom = [
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+            new ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+        ];
+        const positionsTop = [
+            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
+            new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+        ];
+        const positions = [
+            ...(this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom),
+            ...(this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions(openRight ? [new ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "start", overlayY: "top" }, 8)] : positions)
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: !openRight,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth || 140
+        });
+        if (openRight) {
+            this.subOverlayRef = this.overlay.create(configs);
+            if (this.dropdownListWidth)
+                this.subOverlayRef.updateSize({ width: this.dropdownListWidth });
+            if (this.dropdownListHeight)
+                this.subOverlayRef.updateSize({ height: this.dropdownListHeight });
+            this.subOverlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+            this.subOverlayRef.backdropClick().subscribe(() => {
+                this.onCancel();
+            });
+            return;
+        }
+        this.overlayRef = this.overlay.create(configs);
+        if (this.dropdownListWidth)
+            this.overlayRef.updateSize({ width: this.dropdownListWidth });
+        if (this.dropdownListHeight)
+            this.overlayRef.updateSize({ height: this.dropdownListHeight });
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.onCancel();
+        });
+    }
+    selectItem(item) {
+        var _a, _b;
+        if (this.data.some(q => q.children.some(w => w.value === item.value && w.checked))) {
+            if (item.type === "MULTIPLE")
+                this.selectedItems = this.selectedItems.filter(q => q.value !== item.value);
+            this.data = this.data.map(q => {
+                var _a;
+                return (Object.assign(Object.assign({}, q), { children: (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.map(e => (Object.assign(Object.assign({}, e), { checked: e.checked && e.value !== item.value }))) }));
+            });
+        }
+        else {
+            this.data = this.data.map(q => {
+                var _a;
+                return (Object.assign(Object.assign({}, q), { children: (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.map(e => (Object.assign(Object.assign({}, e), { checked: (e.type === "MULTIPLE" && (e.checked || e.value === item.value)) || (e.type === "SINGLE" && e.value === item.value) }))) }));
+            });
+            if (item.type === "MULTIPLE")
+                this.selectedItems.push(Object.assign(Object.assign({}, item), { checked: true }));
+        }
+        this.label =
+            item.type === "MULTIPLE" ? (this.selectedItems.length > 0 ? (_a = this.selectedItems[0]) === null || _a === void 0 ? void 0 : _a.label : "Select") : item.checked ? "Select" : item.label;
+        this.subItems = ((_b = this.data.find(q => { var _a; return (_a = q.children) === null || _a === void 0 ? void 0 : _a.some(w => w.value === item.value); })) === null || _b === void 0 ? void 0 : _b.children) || [];
+        this.onChange.emit(this.data);
+        if (item.type === "SINGLE")
+            this.toggleDropdown();
+    }
+    onHover(item, isHovered, element) {
+        var _a, _b, _c;
+        if (isHovered) {
+            this.subItems.length > 0 && ((_a = this.subOverlayRef) === null || _a === void 0 ? void 0 : _a.detach());
+            this.subItems = ((_b = this.data.find(q => { var _a; return (_a = q === null || q === void 0 ? void 0 : q.children) === null || _a === void 0 ? void 0 : _a.some(w => (w === null || w === void 0 ? void 0 : w.parentValue) === (item === null || item === void 0 ? void 0 : item.value)); })) === null || _b === void 0 ? void 0 : _b.children) || [];
+            this.subItems.length > 0 && this.openDropdown(this.subPopupContainer, (element === null || element === void 0 ? void 0 : element.nativeElement) || element, true);
+        }
+        else {
+            this.subItems = [];
+            (_c = this.subOverlayRef) === null || _c === void 0 ? void 0 : _c.detach();
+        }
+    }
+    onCancel() {
+        var _a, _b;
+        this.isOpen = false;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        (_b = this.subOverlayRef) === null || _b === void 0 ? void 0 : _b.detach();
+    }
+}
+ActionListComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-action-list",
+                template: "<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ label }}\n      </p>\n      <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        #singleItem\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n        (mouseenter)=\"onHover(item, true, singleItem)\"\n        *ngFor=\"let item of data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n          <span>{{ item?.label }}</span>\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 class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"!item.disabled && selectItem(item)\"\n        *ngFor=\"let item of subItems\"\n      >\n        <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n          <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n        </div>\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n          <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n            <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #tickIcon>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n      fill=\"#181F33\"\n    />\n  </svg>\n</ng-template>\n",
+                styles: [".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;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%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:focus-visible,.main-container .dropdown:hover{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{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);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.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}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{justify-content:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]
+            },] }
+];
+ActionListComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Overlay },
+    { type: ViewContainerRef }
+];
+ActionListComponent.propDecorators = {
+    data: [{ type: Input }],
+    height: [{ type: Input }],
+    width: [{ type: Input }],
+    label: [{ type: Input }],
+    dropdownListHeight: [{ type: Input }],
+    dropdownListWidth: [{ type: Input }],
+    dropdownListPosition: [{ type: Input }],
+    searchEnabled: [{ type: Input }],
+    noDataMessage: [{ type: Input }],
+    onChange: [{ type: Output }],
+    selectElement: [{ type: ViewChild, args: ["select", { static: false },] }],
+    popupContainer: [{ type: ViewChild, args: ["popupContainer", { static: false },] }],
+    subPopupContainer: [{ type: ViewChild, args: ["subPopupContainer", { static: false },] }]
+};
+
+class ActionListModule {
+    static forRoot() {
+        return { ngModule: ActionListModule, providers: [] };
+    }
+}
+ActionListModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ActionListComponent],
+                imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule],
+                exports: [ActionListComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionListComponent, ActionListModule };
+//# sourceMappingURL=mis-crystal-design-system-action-list.js.map

package/fesm2015/mis-crystal-design-system-action-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-action-list.js","sources":["../../../projects/mis-components/action-list/action-list.component.ts","../../../projects/mis-components/action-list/action-list.module.ts","../../../projects/mis-components/action-list/mis-crystal-design-system-action-list.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-action-list\",\n  templateUrl: \"./action-list.component.html\",\n  styleUrls: [\"./action-list.component.scss\"]\n})\nexport class ActionListComponent implements OnInit {\n  isOpen = false;\n\n  subItems: ActionItem[] = [];\n\n  @Input() data: ActionItems[] = [];\n  @Input() height: string = \"\";\n  @Input() width: string = \"\";\n  @Input() label: string = \"Select\";\n\n  @Input() dropdownListHeight: string = \"\";\n  @Input() dropdownListWidth: string = \"\";\n  @Input() dropdownListPosition: \"Left\" | \"Right\" = \"Left\";\n\n  @Input() searchEnabled: boolean = true;\n  @Input() noDataMessage: string = \"No Data\";\n  selectedItems: ActionItem[] = [];\n\n  @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n  @ViewChild(\"select\", { static: false }) selectElement: ElementRef;\n  @ViewChild(\"popupContainer\", { static: false }) popupContainer: TemplateRef<Element>;\n  @ViewChild(\"subPopupContainer\", { static: false }) subPopupContainer: TemplateRef<Element>;\n  private overlayRef: OverlayRef;\n  private subOverlayRef: OverlayRef;\n\n  constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n  ngOnInit() {\n    this.selectedItems = [];\n    this.data.forEach(q =>\n      q.children.forEach(w => {\n        if (w.checked) this.selectedItems.push(w);\n      })\n    );\n    this.label = this.selectedItems[0]?.label || this.label;\n  }\n\n  filterByValue(array: ActionItem[], string: string) {\n    return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n  }\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) this.openDropdown(this.popupContainer, this.selectElement.nativeElement, false);\n    else this.onCancel();\n  }\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement, openRight: boolean): void {\n    const positionsBottom = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }, 0, 4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"bottom\" }, { overlayX: \"end\", overlayY: \"top\" }, 0, 4)\n    ];\n    const positionsTop = [\n      new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" }, 0, -4),\n      new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"end\", overlayY: \"bottom\" }, 0, -4)\n    ];\n    const positions = [\n      ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n      ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n    ];\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions(\n        openRight ? [new ConnectionPositionPair({ originX: \"end\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"top\" }, 8)] : positions\n      )\n      .withPush(true);\n    const configs = new OverlayConfig({\n      hasBackdrop: !openRight,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth || 140\n    });\n    if (openRight) {\n      this.subOverlayRef = this.overlay.create(configs);\n      if (this.dropdownListWidth) this.subOverlayRef.updateSize({ width: this.dropdownListWidth });\n      if (this.dropdownListHeight) this.subOverlayRef.updateSize({ height: this.dropdownListHeight });\n      this.subOverlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n      this.subOverlayRef.backdropClick().subscribe(() => {\n        this.onCancel();\n      });\n      return;\n    }\n    this.overlayRef = this.overlay.create(configs);\n    if (this.dropdownListWidth) this.overlayRef.updateSize({ width: this.dropdownListWidth });\n    if (this.dropdownListHeight) this.overlayRef.updateSize({ height: this.dropdownListHeight });\n    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(() => {\n      this.onCancel();\n    });\n  }\n  selectItem(item: ActionItem) {\n    if (this.data.some(q => q.children.some(w => w.value === item.value && w.checked))) {\n      if (item.type === \"MULTIPLE\") this.selectedItems = this.selectedItems.filter(q => q.value !== item.value);\n      this.data = this.data.map(q => ({\n        ...q,\n        children: q?.children?.map(e => ({\n          ...e,\n          checked: e.checked && e.value !== item.value\n        }))\n      }));\n    } else {\n      this.data = this.data.map(q => ({\n        ...q,\n        children: q?.children?.map(e => ({\n          ...e,\n          checked: (e.type === \"MULTIPLE\" && (e.checked || e.value === item.value)) || (e.type === \"SINGLE\" && e.value === item.value)\n        }))\n      }));\n      if (item.type === \"MULTIPLE\") this.selectedItems.push({ ...item, checked: true });\n    }\n    this.label =\n      item.type === \"MULTIPLE\" ? (this.selectedItems.length > 0 ? this.selectedItems[0]?.label : \"Select\") : item.checked ? \"Select\" : item.label;\n    this.subItems = this.data.find(q => q.children?.some(w => w.value === item.value))?.children || [];\n    this.onChange.emit(this.data);\n    if (item.type === \"SINGLE\") this.toggleDropdown();\n  }\n  onHover(item: ActionItem, isHovered, element?: any) {\n    if (isHovered) {\n      this.subItems.length > 0 && this.subOverlayRef?.detach();\n      this.subItems = this.data.find(q => q?.children?.some(w => w?.parentValue === item?.value))?.children || [];\n      this.subItems.length > 0 && this.openDropdown(this.subPopupContainer, element?.nativeElement || element, true);\n    } else {\n      this.subItems = [];\n      this.subOverlayRef?.detach();\n    }\n  }\n  onCancel() {\n    this.isOpen = false;\n    this.overlayRef?.detach();\n    this.subOverlayRef?.detach();\n  }\n}\n\nexport interface ActionItems {\n  label: ActionItemLabel | string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n  children?: ActionItem[];\n}\n\nexport interface ActionItemLabel {\n  primaryText ?: string;\n  secondaryText ?: string;\n}\n\nexport interface ActionItem {\n  type: \"SINGLE\" | \"MULTIPLE\";\n  label: string;\n  value: string;\n  parentValue: string;\n  icon?: string;\n  checked: boolean;\n  disabled?: boolean;\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { ActionListComponent } from \"./action-list.component\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\n\n@NgModule({\n  declarations: [ActionListComponent],\n  imports: [CommonModule, FormsModule, OverlayModule, CheckboxModule],\n  exports: [ActionListComponent]\n})\nexport class ActionListModule {\n  static forRoot(): ModuleWithProviders<ActionListModule> {\n    return { ngModule: ActionListModule, 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-analytics.mjs → mis-crystal-design-system-analytics.js}

@@ -1,6 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, Inject, NgModule } from '@angular/core';
+import { ɵɵdefineInjectable, ɵɵinject, Injectable, Inject, NgModule } from '@angular/core';
 
 class AnalyticsService {
     constructor(document) {
@@ -50,19 +49,15 @@ class AnalyticsService {
         gtag === null || gtag === void 0 ? void 0 : gtag("set", { user_id: identifier });
     }
 }
-AnalyticsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-AnalyticsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: "root"
-                }]
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [DOCUMENT]
-                    }] }];
-    } });
+AnalyticsService.ɵprov = ɵɵdefineInjectable({ factory: function AnalyticsService_Factory() { return new AnalyticsService(ɵɵinject(DOCUMENT)); }, token: AnalyticsService, providedIn: "root" });
+AnalyticsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+AnalyticsService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
 
 class AnalyticsModule {
     static forRoot() {
@@ -72,16 +67,13 @@ class AnalyticsModule {
         };
     }
 }
-AnalyticsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AnalyticsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsModule });
-AnalyticsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AnalyticsModule, decorators: [{
-            type: NgModule
-        }] });
+AnalyticsModule.decorators = [
+    { type: NgModule }
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
 export { AnalyticsModule, AnalyticsService };
-//# sourceMappingURL=mis-crystal-design-system-analytics.mjs.map
+//# sourceMappingURL=mis-crystal-design-system-analytics.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-analytics.js","sources":["../../../projects/mis-components/analytics/analytics.service.ts","../../../projects/mis-components/analytics/analytics.module.ts","../../../projects/mis-components/analytics/mis-crystal-design-system-analytics.ts"],"sourcesContent":["import { DOCUMENT } from \"@angular/common\";\nimport { Inject, Injectable, Renderer2 } from \"@angular/core\";\ndeclare const gtag: Function;\n\n@Injectable({\n  providedIn: \"root\"\n})\nexport class AnalyticsService {\n  private scriptLoaded = false;\n  private pendingEvents: Array<Array<string>> = [];\n\n  constructor(@Inject(DOCUMENT) private document: any) {}\n\n  insertScript(measurementId: string, renderer: Renderer2): void {\n    const loadScript = renderer.createElement(\"script\");\n    loadScript.setAttribute(\"async\", true);\n    loadScript.setAttribute(\"src\", `https://www.googletagmanager.com/gtag/js?id=${measurementId}`);\n\n    const initScript = renderer.createElement(\"script\");\n    initScript.innerText = `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\\'js\\', new Date());gtag(\\'config\\', \\'${measurementId}\\');`;\n    renderer.appendChild(this.document.head, loadScript);\n    renderer.appendChild(this.document.head, initScript);\n    this.handlePendingEvents(loadScript);\n  }\n\n  private handlePendingEvents(script: HTMLScriptElement): void {\n    script.addEventListener(\"load\", () => {\n      this.scriptLoaded = true;\n      for (const eventDetails of this.pendingEvents) {\n        if (eventDetails[0] === \"event\") {\n          this.send(eventDetails[1], eventDetails[2], eventDetails[3], eventDetails[4]);\n        } else if (eventDetails[0] === \"set\") {\n          this.setIdentity(eventDetails[1]);\n        }\n      }\n    });\n  }\n\n  send(eventAction: string, event_category: string, event_label?: string, event_value?: string, force = false): void {\n    if (!this.scriptLoaded && !force) {\n      this.pendingEvents.push([\"event\", eventAction, event_category, event_label, event_value]);\n      return;\n    }\n    gtag?.(\"event\", eventAction, {\n      event_category,\n      event_label,\n      event_value\n    });\n  }\n\n  setIdentity(identifier: string): void {\n    if (!this.scriptLoaded) {\n      this.pendingEvents.push([\"set\", identifier]);\n      return;\n    }\n    gtag?.(\"set\", { user_id: identifier });\n  }\n}\n","import { ModuleWithProviders, NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { AnalyticsService } from \"./analytics.service\";\n\n@NgModule()\nexport class AnalyticsModule {\n  static forRoot(): ModuleWithProviders<AnalyticsModule> {\n    return {\n      ngModule: AnalyticsModule,\n      providers: [AnalyticsService]\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,gBAAgB;IAI3B,YAAsC,QAAa;QAAb,aAAQ,GAAR,QAAQ,CAAK;QAH3C,iBAAY,GAAG,KAAK,CAAC;QACrB,kBAAa,GAAyB,EAAE,CAAC;KAEM;IAEvD,YAAY,CAAC,aAAqB,EAAE,QAAmB;QACrD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACpD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACvC,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,+CAA+C,aAAa,EAAE,CAAC,CAAC;QAE/F,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACpD,UAAU,CAAC,SAAS,GAAG,oIAAoI,aAAa,MAAM,CAAC;QAC/K,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QACrD,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;KACtC;IAEO,mBAAmB,CAAC,MAAyB;QACnD,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE;YAC9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,KAAK,MAAM,YAAY,IAAI,IAAI,CAAC,aAAa,EAAE;gBAC7C,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,OAAO,EAAE;oBAC/B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC/E;qBAAM,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE;oBACpC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;iBACnC;aACF;SACF,CAAC,CAAC;KACJ;IAED,IAAI,CAAC,WAAmB,EAAE,cAAsB,EAAE,WAAoB,EAAE,WAAoB,EAAE,KAAK,GAAG,KAAK;QACzG,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE;YAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;YAC1F,OAAO;SACR;QACD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,OAAO,EAAE,WAAW,EAAE;YAC3B,cAAc;YACd,WAAW;YACX,WAAW;SACZ,EAAE;KACJ;IAED,WAAW,CAAC,UAAkB;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;YAC7C,OAAO;SACR;QACD,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE;KACxC;;;;YApDF,UAAU,SAAC;gBACV,UAAU,EAAE,MAAM;aACnB;;;4CAKc,MAAM,SAAC,QAAQ;;;MCNjB,eAAe;IAC1B,OAAO,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,eAAe;YACzB,SAAS,EAAE,CAAC,gBAAgB,CAAC;SAC9B,CAAC;KACH;;;YAPF,QAAQ;;;ACJT;;;;;;"}

package/fesm2015/mis-crystal-design-system-async-search-dropdown.js

@@ -0,0 +1,242 @@
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { EventEmitter, Component, ViewContainerRef, NgZone, Input, ViewChild, ContentChild, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { tap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { LoaderModule } from 'mis-crystal-design-system/loader';
+
+class AsyncDropdownComponent {
+    constructor(overlay, viewContainerRef, _ngZone) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this._ngZone = _ngZone;
+        this.size = 'md';
+        this.placeholder = "Select"; // placeholder for input
+        this.debounceTime = 400; // wait time till which API call is paused
+        this.minInputLength = 2; // min length after which API call is made
+        this.multi = false; // maintain a list or emit value
+        // tslint:disable-next-line
+        this.onSelect = new EventEmitter(true); // emit selected values
+        this.searchInput = new FormControl();
+        this.data = [];
+        this.opened = false;
+        this.loading = false;
+        this.error = false;
+        // tslint:disable-next-line
+        this.selections = new Map();
+        this.searchQueryChange = new EventEmitter();
+        this.clear = new EventEmitter(false);
+        this.itemSelected = new EventEmitter();
+        this.itemRemoved = new EventEmitter();
+        this.handleControlChanges = (values) => {
+            values.forEach(el => {
+                this.selectData(el, true);
+            });
+            // tslint:disable-next-line
+        };
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (this.multi && !this.uniqueKey) {
+            throw new Error("[uniqueKey] required in multi mode.");
+        }
+        if (this.disabled) {
+            this.searchInput.disable();
+        }
+        this.searchSubscription = this.searchInput.valueChanges
+            .pipe(
+        // filter(val => val && val.length >= this.minInputLength),
+        tap((val) => this.searchQueryChange.emit(val)), debounceTime(this.debounceTime), distinctUntilChanged())
+            .subscribe(res => {
+            this._ngZone.run(() => {
+                var _a;
+                if ((res === null || res === void 0 ? void 0 : res.length) < this.minInputLength || !(res === null || res === void 0 ? void 0 : res.length)) {
+                    this.closeDropdown();
+                    return;
+                }
+                else if ((res === null || res === void 0 ? void 0 : res.length) > this.minInputLength && this.httpStream) {
+                    this.loading = true;
+                    this.error = false;
+                    if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()))
+                        this.openDropdown(this.dd, this.origin.nativeElement);
+                    this.httpStream(res).subscribe(list => {
+                        var _a;
+                        this.loading = false;
+                        this.data = list;
+                        if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && list.length > 0) {
+                            this.openDropdown(this.dd, this.origin.nativeElement);
+                        }
+                    }, error => {
+                        this.loading = false;
+                        this.error = true;
+                    });
+                }
+            });
+        });
+        if ((_a = this.control) === null || _a === void 0 ? void 0 : _a.value) {
+            this.handleControlChanges(this.control.value);
+        }
+        this.controlSubscription = (_b = this.control) === null || _b === void 0 ? void 0 : _b.valueChanges.subscribe(this.handleControlChanges);
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (changes && ((_a = changes === null || changes === void 0 ? void 0 : changes.searchValue) === null || _a === void 0 ? void 0 : _a.currentValue)) {
+            this.searchInput.patchValue(changes.searchValue.currentValue);
+        }
+        if (changes && changes.disabled) {
+            this.searchInput.enable();
+            if (this.disabled) {
+                this.searchInput.disable();
+            }
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    openDropdown(template, origin) {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }),
+            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" })
+        ])
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: "cdk-overlay-transparent-backdrop",
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth
+        });
+        this.overlayRef = this.overlay.create(configs);
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe(res => {
+            this.closeDropdown();
+        });
+    }
+    /**
+     * closes the dropdown
+     */
+    closeDropdown() {
+        var _a;
+        this.opened = false;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        this.data = [];
+    }
+    /**
+     *
+     * @param item item to select
+     * if item property disabled is set to true, selection will be disabled
+     * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input
+     */
+    selectData(item, effectedFromOutside = true) {
+        if (item.disabled) {
+            return;
+        }
+        this.itemSelected.emit(item);
+        if (!this.multi) {
+            this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });
+            this.setControlValue(item);
+        }
+        else {
+            if (!this.selections.has(item[this.uniqueKey])) {
+                this.selections.set(item[this.uniqueKey], item);
+            }
+            this.setControlValue(this.selectedItems);
+            if (!effectedFromOutside) {
+                setTimeout(() => {
+                    this.input.nativeElement.focus();
+                    this.input.nativeElement.scrollIntoView();
+                }, 10);
+            }
+            this.searchInput.patchValue("");
+            this.data = [];
+        }
+        this.closeDropdown();
+    }
+    /**
+     *
+     * @param item remove item from selected list
+     */
+    removeItem(item) {
+        this.itemRemoved.emit(item);
+        this.selections.delete(item[this.uniqueKey]);
+        this.setControlValue(this.selectedItems);
+        // tslint:disable-next-line
+        this.input["nativeElement"].focus();
+    }
+    setControlValue(value) {
+        var _a;
+        this.onSelect.emit(value);
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.patchValue(value, { emitEvent: false });
+    }
+    /**
+     * @returns list of selected items
+     */
+    get selectedItems() {
+        return Array.from(this.selections.values());
+    }
+    removeInputValue() {
+        this.searchInput.reset();
+        this.data = [];
+        this.clear.emit(true);
+    }
+}
+AsyncDropdownComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-async-search-dropdown",
+                template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" #ddBtn>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <div class=\"chip\" [ngClass]=\"{'chip-md': size === 'md', 'chip-sm': size === 'sm'}\" *ngFor=\"let item of selectedItems\">\n      <span [ngClass]=\"{'h6': size === 'md', 'h8-b': size === 'sm'}\" style=\"margin-right: 4px;\">{{item[displayKey]}}</span>\n      <span style=\"cursor: pointer;\" (click)=\"removeItem(item)\" [ngStyle]=\"{'font-size': size === 'sm' ? '12px': '14px'}\" class=\"ic-navigation-cancel-24\"></span>\n    </div>\n  </div>\n  <div class=\"search-input\">\n    <span class=\"ic-action-search-24\"></span>\n    <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" />\n    <div class=\"ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" (click)=\"removeInputValue()\"></div>\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" [ngStyle]=\"{'max-height':height}\"  [ngClass]=\"{'dd-list-pd':data.length === 0}\" >\n    <ng-container *ngIf=\"loading\">\n      <ng-container\n        *ngIf=\"customLoader; else defaultLoader\"\n        [ngTemplateOutlet]=\"customLoader\"\n      ></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"error\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br> Please try again later.</p>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!loading && !error && data.length > 0\">\n      <ng-container *ngFor=\"let item of data\">\n        <div (click)=\"selectData(item, false)\">\n          <ng-container\n            *ngIf=\"customItem; else standardItem\"\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-container>\n          <ng-template #standardItem>\n            <div class=\"item\">\n              <div class=\"value\">\n                <div class=\"primary\">\n                  {{ item[displayKey] }}\n                </div>\n                <div class=\"secondary\">\n                  {{ item[secondaryDisplayKey] }}\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n  </div>\n  </div>\n</ng-template>\n",
+                styles: [".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;line-height:24px;height:24px;left:8px;padding-top:2px}.search-input .croos-icon,.search-input span{position:absolute;top:50%;transform:translateY(-50%)}.search-input .croos-icon{font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:#e0e0e0;cursor:default}.chip span{color:#181f33}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}"]
+            },] }
+];
+AsyncDropdownComponent.ctorParameters = () => [
+    { type: Overlay },
+    { type: ViewContainerRef },
+    { type: NgZone }
+];
+AsyncDropdownComponent.propDecorators = {
+    height: [{ type: Input }],
+    size: [{ type: Input }],
+    httpStream: [{ type: Input }],
+    displayKey: [{ type: Input }],
+    secondaryDisplayKey: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    debounceTime: [{ type: Input }],
+    minInputLength: [{ type: Input }],
+    multi: [{ type: Input }],
+    uniqueKey: [{ type: Input }],
+    control: [{ type: Input }],
+    disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
+    origin: [{ type: ViewChild, args: ["ddBtn", { static: false },] }],
+    input: [{ type: ViewChild, args: ["input", { static: false },] }],
+    dd: [{ type: ViewChild, args: ["dd", { static: false },] }],
+    customItem: [{ type: ContentChild, args: ["misCustomItem", { static: false },] }],
+    customLoader: [{ type: ContentChild, args: ["asyncCustomLoader", { static: false },] }],
+    onSelect: [{ type: Output }],
+    searchValue: [{ type: Input }],
+    searchQueryChange: [{ type: Output }],
+    clear: [{ type: Output }],
+    itemSelected: [{ type: Output }],
+    itemRemoved: [{ type: Output }]
+};
+
+class AsyncDropdownModule {
+}
+AsyncDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [AsyncDropdownComponent],
+                imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],
+                exports: [AsyncDropdownComponent]
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsyncDropdownComponent, AsyncDropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-async-search-dropdown.js.map