mis-crystal-design-system 2.4.9 → 2.5.0

package/bundles/mis-crystal-design-system-dropdown.umd.min.js

@@ -1,2 +1,16 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/dropdown",["exports","@angular/core","@angular/common","@angular/forms"],e):e(((n="undefined"!=typeof globalThis?globalThis:n||self)["mis-crystal-design-system"]=n["mis-crystal-design-system"]||{},n["mis-crystal-design-system"].dropdown={}),n.ng.core,n.ng.common,n.ng.forms)}(this,(function(n,e,t,i){"use strict";var o=function(){function n(n){this.eRef=n,this.isOpen=!1,this.isSearchInputFocused=!1,this.searchInput="",this.searchData=[],this.data=[],this.height="",this.width="",this.label="Select",this.dropdownListHeight="",this.dropdownListWidth="",this.dropdownListPosition="Left",this.searchEnabled=!0,this.selectedItem={value:"",label:""},this.noDataMessage="No Data",this.onChange=new e.EventEmitter}return n.prototype.ngOnInit=function(){},n.prototype.clickout=function(n){!this.eRef.nativeElement.contains(n.target)&&this.onCancel()},n.prototype.filterByValue=function(n,e){return n.filter((function(n){return n.label.toLowerCase().includes(e.toLowerCase())}))},n.prototype.searchInputOnChange=function(n){this.searchInput=n,n?this.searchData=this.filterByValue(this.data,n):(this.searchData=[],this.searchInput="")},n.prototype.searchInputFocused=function(n){this.isSearchInputFocused=n},n.prototype.searchInputCanceled=function(n){n.stopPropagation(),this.searchInput="",this.isSearchInputFocused=!1},n.prototype.toggleDropdown=function(){this.isOpen=!this.isOpen},n.prototype.selectItem=function(n){this.onChange.emit(n),this.toggleDropdown()},n.prototype.onCancel=function(){this.isSearchInputFocused=!1,this.isOpen=!1,this.searchInput=""},n}();o.decorators=[{type:e.Component,args:[{selector:"mis-dropdown",template:'<div\n  class="main-container"\n  [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">\n        {{ selectedItem.label || label }}\n      </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 style="flex-basis: 0"></div>\n  <div style="width: 100%; position: relative">\n    <div\n      *ngIf="isOpen"\n      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\n          *ngIf="!isSearchInputFocused"\n          class="search-icon"\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="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          />\n        </svg>\n        <input\n          [ngModel]="searchInput"\n          [ngStyle]="{\n            paddingLeft: isSearchInputFocused ? \'12px\' : \'45px\',\n            border: isSearchInputFocused ? \'1px solid #0937B2\' : \'1px solid #e0e0e0\',\n            paddingRight: isSearchInputFocused ? \'45px\' : \'10px\'\n          }"\n          (ngModelChange)="searchInputOnChange($event)"\n          [placeholder]="isSearchInputFocused ? \'\' : \'Search Keyword\'"\n          (focus)="searchInputFocused(true)"\n          class="search-input"\n        />\n        <svg\n          *ngIf="isSearchInputFocused"\n          class="cancel-icon"\n          (click)="searchInputCanceled($event)"\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="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          />\n        </svg>\n      </div>\n      <div class="items">\n        <div\n          class="item"\n          [ngClass]="{ \'item-disabled\': item.disabled }"\n          (click)="item.disabled ? null : selectItem(item)"\n          *ngFor="let item of searchInput ? searchData : data"\n        >\n          <div class="label" [ngStyle]="{ width: item.icon ? \'90%\' : \'100%\' }">\n            {{ item.label }}\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="(searchInput ? searchData : data).length === 0">\n          {{ searchInput === "" ? noDataMessage : "No results" }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\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:0 12px}.main-container .dropdown:hover{background-color:#f5f7fc}.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:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-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}.main-container .popup-container::-webkit-scrollbar{width:0;height:0}.main-container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.main-container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.main-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}.main-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}.main-container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.main-container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.main-container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.main-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}.main-container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.main-container .popup-container .items .item:hover{background-color:#f5f7fc}.main-container .popup-container .items .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400}.main-container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.main-container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.main-container .popup-container .items .item-disabled{cursor:not-allowed}.main-container .popup-container .items .item-disabled:hover{background-color:transparent}.main-container .popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.position-left{right:0}.position-right{left:0}"]}]}],o.ctorParameters=function(){return[{type:e.ElementRef}]},o.propDecorators={data:[{type:e.Input}],height:[{type:e.Input}],width:[{type:e.Input}],label:[{type:e.Input}],dropdownListHeight:[{type:e.Input}],dropdownListWidth:[{type:e.Input}],dropdownListPosition:[{type:e.Input}],searchEnabled:[{type:e.Input}],selectedItem:[{type:e.Input}],noDataMessage:[{type:e.Input}],onChange:[{type:e.Output}],clickout:[{type:e.HostListener,args:["document:click",["$event"]]}]};var r=function(){function n(){}return n.forRoot=function(){return{ngModule:n,providers:[]}},n}();r.decorators=[{type:e.NgModule,args:[{declarations:[o],imports:[t.CommonModule,i.FormsModule],exports:[o]}]}],n.DropdownComponent=o,n.DropdownModule=r,Object.defineProperty(n,"__esModule",{value:!0})}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/dropdown",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","@angular/common","@angular/forms"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].dropdown={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.ng.common,e.ng.forms)}(this,(function(e,n,t,o,i,r){"use strict";
+/*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */Object.create;function a(e,n){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var o,i,r=t.call(e),a=[];try{for(;(void 0===n||n-- >0)&&!(o=r.next()).done;)a.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(t=r.return)&&t.call(r)}finally{if(i)throw i.error}}return a}Object.create;var s=function(){function e(e,n,t){this.eRef=e,this.overlay=n,this.viewContainerRef=t,this.isOpen=!1,this.isSearchInputFocused=!1,this.searchInput="",this.searchData=[],this.data=[],this.height="",this.width="",this.label="Select",this.dropdownListHeight="",this.dropdownListWidth="",this.dropdownListPosition="Left",this.searchEnabled=!0,this.selectedItem={value:"",label:""},this.noDataMessage="No Data",this.onChange=new o.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.clickout=function(e){!this.eRef.nativeElement.contains(e.target)&&this.onCancel()},e.prototype.filterByValue=function(e,n){return e.filter((function(e){return e.label.toLowerCase().includes(n.toLowerCase())}))},e.prototype.searchInputOnChange=function(e){this.searchInput=e,e?this.searchData=this.filterByValue(this.data,e):(this.searchData=[],this.searchInput="")},e.prototype.searchInputFocused=function(e){this.isSearchInputFocused=e},e.prototype.searchInputCanceled=function(e){e.stopPropagation(),this.searchInput="",this.isSearchInputFocused=!1},e.prototype.toggleDropdown=function(){this.isOpen=!this.isOpen,this.isOpen?this.openDropdown(this.popupContainer,this.selectElement.nativeElement):this.onCancel()},e.prototype.openDropdown=function(e,o){var i=this,r=[new n.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"},0,4),new n.ConnectionPositionPair({originX:"end",originY:"bottom"},{overlayX:"end",overlayY:"top"},0,4)],s=[new n.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"},0,-4),new n.ConnectionPositionPair({originX:"end",originY:"top"},{overlayX:"end",overlayY:"bottom"},0,-4)],p=this.overlay.position().flexibleConnectedTo(o).withPositions(function(){for(var e=[],n=0;n<arguments.length;n++)e=e.concat(a(arguments[n]));return e}("Right"===this.dropdownListPosition?r.reverse():r,"Right"===this.dropdownListPosition?s.reverse():s)).withPush(!0),l=new n.OverlayConfig({hasBackdrop:!0,backdropClass:"cdk-overlay-transparent-backdrop",scrollStrategy:this.overlay.scrollStrategies.reposition(),positionStrategy:p,width:o.clientWidth});this.overlayRef=this.overlay.create(l),this.dropdownListWidth&&this.overlayRef.updateSize({width:this.dropdownListWidth}),this.dropdownListHeight&&this.overlayRef.updateSize({height:this.dropdownListHeight}),this.overlayRef.attach(new t.TemplatePortal(e,this.viewContainerRef)),this.overlayRef.backdropClick().subscribe((function(e){i.onCancel()}))},e.prototype.selectItem=function(e){this.onChange.emit(e),this.toggleDropdown()},e.prototype.onCancel=function(){var e;this.isSearchInputFocused=!1,this.isOpen=!1,null===(e=this.overlayRef)||void 0===e||e.detach(),this.searchInput=""},e}();s.decorators=[{type:o.Component,args:[{selector:"mis-dropdown",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        {{ selectedItem.label || label }}\n      </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<ng-template #popupContainer>\n  <div\n    class="popup-container"\n    [ngStyle]="{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }"\n  >\n    <div *ngIf="searchEnabled" class="search-container">\n      <svg\n        *ngIf="!isSearchInputFocused"\n        class="search-icon"\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="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        />\n      </svg>\n      <input\n        [ngModel]="searchInput"\n        [ngStyle]="{\n          paddingLeft: isSearchInputFocused ? \'12px\' : \'45px\',\n          border: isSearchInputFocused ? \'1px solid #0937B2\' : \'1px solid #e0e0e0\',\n          paddingRight: isSearchInputFocused ? \'45px\' : \'10px\'\n        }"\n        (ngModelChange)="searchInputOnChange($event)"\n        [placeholder]="isSearchInputFocused ? \'\' : \'Search Keyword\'"\n        (focus)="searchInputFocused(true)"\n        class="search-input"\n      />\n      <svg\n        *ngIf="isSearchInputFocused"\n        class="cancel-icon"\n        (click)="searchInputCanceled($event)"\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="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        />\n      </svg>\n    </div>\n    <div class="items">\n      <div\n        class="item"\n        tabindex="0"\n        [ngClass]="{ \'item-disabled\': item.disabled }"\n        (click)="item.disabled ? null : selectItem(item)"\n        (keyup.enter)="item.disabled ? null : selectItem(item)"\n        *ngFor="let item of searchInput ? searchData : 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="(searchInput ? searchData : data).length === 0">\n        {{ searchInput === "" ? noDataMessage : "No results" }}\n      </div>\n    </div>\n  </div>\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:0 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:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0!important;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.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:14px;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:14px;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}"]}]}],s.ctorParameters=function(){return[{type:o.ElementRef},{type:n.Overlay},{type:o.ViewContainerRef}]},s.propDecorators={data:[{type:o.Input}],height:[{type:o.Input}],width:[{type:o.Input}],label:[{type:o.Input}],dropdownListHeight:[{type:o.Input}],dropdownListWidth:[{type:o.Input}],dropdownListPosition:[{type:o.Input}],searchEnabled:[{type:o.Input}],selectedItem:[{type:o.Input}],noDataMessage:[{type:o.Input}],onChange:[{type:o.Output}],selectElement:[{type:o.ViewChild,args:["select",{static:!1}]}],popupContainer:[{type:o.ViewChild,args:["popupContainer",{static:!1}]}],clickout:[{type:o.HostListener,args:["document:click",["$event"]]}]};var p=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();p.decorators=[{type:o.NgModule,args:[{declarations:[s],imports:[i.CommonModule,r.FormsModule],exports:[s]}]}],e.DropdownComponent=s,e.DropdownModule=p,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-dropdown.umd.min.js.map

package/bundles/mis-crystal-design-system-dropdown.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts"],"names":["DropdownComponent","eRef","this","isOpen","isSearchInputFocused","searchInput","searchData","data","height","width","label","dropdownListHeight","dropdownListWidth","dropdownListPosition","searchEnabled","selectedItem","value","noDataMessage","onChange","EventEmitter","prototype","ngOnInit","clickout","event","nativeElement","contains","target","onCancel","filterByValue","array","string","filter","o","toLowerCase","includes","searchInputOnChange","newValue","searchInputFocused","isFocused","searchInputCanceled","stopPropagation","toggleDropdown","selectItem","item","emit","Component","args","selector","template","ElementRef","Input","Output","HostListener","DropdownModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"+iBAoCI,SAAAA,EAAoBC,GAAAC,KAAAD,KAAAA,EApBpBC,KAAAC,QAAS,EACTD,KAAAE,sBAAgC,EAChCF,KAAAG,YAAsB,GACtBH,KAAAI,WAA6B,GAEpBJ,KAAAK,KAAuB,GACvBL,KAAAM,OAAiB,GACjBN,KAAAO,MAAgB,GAChBP,KAAAQ,MAAgB,SAEhBR,KAAAS,mBAA6B,GAC7BT,KAAAU,kBAA4B,GAC5BV,KAAAW,qBAAyC,OAEzCX,KAAAY,eAAyB,EACzBZ,KAAAa,aAA6B,CAAEC,MAAO,GAAIN,MAAO,IACjDR,KAAAe,cAAwB,UAEvBf,KAAAgB,SAA8B,IAAIC,EAAAA,oBAG5CnB,EAAAoB,UAAAC,SAAA,aAGArB,EAAAoB,UAAAE,SAAA,SAASC,IACqBrB,KAAKD,KAAKuB,cAAcC,SAASF,EAAMG,SAE7DxB,KAAKyB,YAGb3B,EAAAoB,UAAAQ,cAAA,SAAcC,EAAuBC,GACjC,OAAOD,EAAME,QAAO,SAAAC,GAChB,OAAAA,EAAEtB,MAAMuB,cAAcC,SAASJ,EAAOG,mBAG9CjC,EAAAoB,UAAAe,oBAAA,SAAoBC,GAChBlC,KAAKG,YAAc+B,EACfA,EACAlC,KAAKI,WAAaJ,KAAK0B,cAAc1B,KAAKK,KAAM6B,IAEhDlC,KAAKI,WAAa,GAClBJ,KAAKG,YAAc,KAG3BL,EAAAoB,UAAAiB,mBAAA,SAAmBC,GACfpC,KAAKE,qBAAuBkC,GAEhCtC,EAAAoB,UAAAmB,oBAAA,SAAoBhB,GAChBA,EAAMiB,kBACNtC,KAAKG,YAAc,GACnBH,KAAKE,sBAAuB,GAEhCJ,EAAAoB,UAAAqB,eAAA,WACIvC,KAAKC,QAAUD,KAAKC,QAExBH,EAAAoB,UAAAsB,WAAA,SAAWC,GACPzC,KAAKgB,SAAS0B,KAAKD,GACnBzC,KAAKuC,kBAETzC,EAAAoB,UAAAO,SAAA,WACIzB,KAAKE,sBAAuB,EAC5BF,KAAKC,QAAS,EACdD,KAAKG,YAAc,6BApE1BwC,EAAAA,UAASC,KAAA,CAAC,CACPC,SAAU,eACVC,SAAA,izQAVAC,EAAAA,4CAmBCC,EAAAA,sBACAA,EAAAA,qBACAA,EAAAA,qBACAA,EAAAA,kCAEAA,EAAAA,iCACAA,EAAAA,oCACAA,EAAAA,6BAEAA,EAAAA,4BACAA,EAAAA,6BACAA,EAAAA,wBAEAC,EAAAA,yBAKAC,EAAAA,aAAYN,KAAA,CAAC,iBAAkB,CAAC,+BC7BrC,SAAAO,YACWA,EAAAC,QAAP,WACI,MAAO,CAAEC,SAAUF,EAAgBG,UAAW,8BAPrDC,EAAAA,SAAQX,KAAA,CAAC,CACNY,aAAc,CAAC1D,GACf2D,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAAC9D","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-dropdown',\n    templateUrl: './dropdown.component.html',\n    styleUrls: ['./dropdown.component.scss']\n})\nexport class DropdownComponent implements OnInit {\n    isOpen = false;\n    isSearchInputFocused: boolean = false;\n    searchInput: string = '';\n    searchData: DropdownItem[] = [];\n\n    @Input() data: DropdownItem[] = [];\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() selectedItem: DropdownItem = { value: '', label: '' };\n    @Input() noDataMessage: string = 'No Data';\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    constructor(private eRef: ElementRef) { }\n    ngOnInit() { }\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    filterByValue(array: DropdownItem[], string: string) {\n        return array.filter(o =>\n            o.label.toLowerCase().includes(string.toLowerCase())\n        );\n    }\n    searchInputOnChange(newValue) {\n        this.searchInput = newValue;\n        if (newValue) {\n            this.searchData = this.filterByValue(this.data, newValue);\n        } else {\n            this.searchData = [];\n            this.searchInput = '';\n        }\n    }\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    }\n    selectItem(item) {\n        this.onChange.emit(item);\n        this.toggleDropdown();\n    }\n    onCancel() {\n        this.isSearchInputFocused = false;\n        this.isOpen = false;\n        this.searchInput = '';\n    }\n}\nexport interface DropdownItem {\n    label: string;\n    value: string;\n    icon?: string;\n    disabled?: boolean;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n    declarations: [DropdownComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [DropdownComponent]\n})\nexport class DropdownModule {\n    static forRoot(): ModuleWithProviders<DropdownModule> {\n        return { ngModule: DropdownModule, providers: [] };\n    }\n}\n"]}
+{"version":3,"sources":["../../../node_modules/tslib/tslib.es6.js","../../../projects/mis-components/dropdown/dropdown.component.ts","../../../projects/mis-components/dropdown/dropdown.module.ts"],"names":["Object","create","__read","o","n","m","Symbol","iterator","r","e","i","call","ar","next","done","push","value","error","DropdownComponent","eRef","overlay","viewContainerRef","this","isOpen","isSearchInputFocused","searchInput","searchData","data","height","width","label","dropdownListHeight","dropdownListWidth","dropdownListPosition","searchEnabled","selectedItem","noDataMessage","onChange","EventEmitter","prototype","ngOnInit","clickout","event","nativeElement","contains","target","onCancel","filterByValue","array","string","filter","toLowerCase","includes","searchInputOnChange","newValue","searchInputFocused","isFocused","searchInputCanceled","stopPropagation","toggleDropdown","openDropdown","popupContainer","selectElement","template","origin","_this","positionsBottom","ConnectionPositionPair","originX","originY","overlayX","overlayY","positionsTop","positionStrategy","position","flexibleConnectedTo","withPositions","arguments","length","concat","__spread","reverse","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","clientWidth","overlayRef","updateSize","attach","TemplatePortal","backdropClick","subscribe","res","selectItem","item","emit","_a","detach","Component","args","selector","ElementRef","Overlay","ViewContainerRef","Input","Output","ViewChild","static","HostListener","DropdownModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":";;;;;;;;;;;;;;oFA2G6BA,OAAOC,gBAwBpBC,EAAOC,EAAGC,GACtB,IAAIC,EAAsB,mBAAXC,QAAyBH,EAAEG,OAAOC,UACjD,IAAKF,EAAG,OAAOF,EACf,IAAmBK,EAAYC,EAA3BC,EAAIL,EAAEM,KAAKR,GAAOS,EAAK,GAC3B,IACI,WAAc,IAANR,GAAgBA,KAAM,MAAQI,EAAIE,EAAEG,QAAQC,MAAMF,EAAGG,KAAKP,EAAEQ,OAExE,MAAOC,GAASR,EAAI,CAAEQ,MAAOA,WAEzB,IACQT,IAAMA,EAAEM,OAAST,EAAIK,EAAU,SAAIL,EAAEM,KAAKD,WAExC,GAAID,EAAG,MAAMA,EAAEQ,OAE7B,OAAOL,EAgEcZ,OAAOC,wBC/K9B,SAAAiB,EAAoBC,EAA0BC,EAA0BC,GAApDC,KAAAH,KAAAA,EAA0BG,KAAAF,QAAAA,EAA0BE,KAAAD,iBAAAA,EAxBxEC,KAAAC,QAAS,EACTD,KAAAE,sBAAgC,EAChCF,KAAAG,YAAsB,GACtBH,KAAAI,WAA6B,GAEpBJ,KAAAK,KAAuB,GACvBL,KAAAM,OAAiB,GACjBN,KAAAO,MAAgB,GAChBP,KAAAQ,MAAgB,SAEhBR,KAAAS,mBAA6B,GAC7BT,KAAAU,kBAA4B,GAC5BV,KAAAW,qBAAyC,OAEzCX,KAAAY,eAAyB,EACzBZ,KAAAa,aAA6B,CAAEnB,MAAO,GAAIc,MAAO,IACjDR,KAAAc,cAAwB,UAEvBd,KAAAe,SAA8B,IAAIC,EAAAA,oBAO5CpB,EAAAqB,UAAAC,SAAA,aAGAtB,EAAAqB,UAAAE,SAAA,SAASC,IACmBpB,KAAKH,KAAKwB,cAAcC,SAASF,EAAMG,SAE/DvB,KAAKwB,YAGT5B,EAAAqB,UAAAQ,cAAA,SAAcC,EAAuBC,GACnC,OAAOD,EAAME,QAAO,SAAA/C,GAAK,OAAAA,EAAE2B,MAAMqB,cAAcC,SAASH,EAAOE,mBAEjEjC,EAAAqB,UAAAc,oBAAA,SAAoBC,GAClBhC,KAAKG,YAAc6B,EACfA,EACFhC,KAAKI,WAAaJ,KAAKyB,cAAczB,KAAKK,KAAM2B,IAEhDhC,KAAKI,WAAa,GAClBJ,KAAKG,YAAc,KAGvBP,EAAAqB,UAAAgB,mBAAA,SAAmBC,GACjBlC,KAAKE,qBAAuBgC,GAE9BtC,EAAAqB,UAAAkB,oBAAA,SAAoBf,GAClBA,EAAMgB,kBACNpC,KAAKG,YAAc,GACnBH,KAAKE,sBAAuB,GAE9BN,EAAAqB,UAAAoB,eAAA,WACErC,KAAKC,QAAUD,KAAKC,OAChBD,KAAKC,OAAQD,KAAKsC,aAAatC,KAAKuC,eAAgBvC,KAAKwC,cAAcnB,eACtErB,KAAKwB,YAEJ5B,EAAAqB,UAAAqB,aAAA,SAAaG,EAAgCC,GAA7C,IAAAC,EAAA3C,KACA4C,EAAkB,CACtB,IAAIC,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,UAAY,CAAEC,SAAU,QAASC,SAAU,OAAS,EAAG,GAC/G,IAAIJ,EAAAA,uBAAuB,CAAEC,QAAS,MAAOC,QAAS,UAAY,CAAEC,SAAU,MAAOC,SAAU,OAAS,EAAG,IAEvGC,EAAe,CACnB,IAAIL,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,OAAS,CAAEC,SAAU,QAASC,SAAU,UAAY,GAAI,GAChH,IAAIJ,EAAAA,uBAAuB,CAAEC,QAAS,MAAOC,QAAS,OAAS,CAAEC,SAAU,MAAOC,SAAU,UAAY,GAAI,IAExGE,EAAmBnD,KAAKF,QAC3BsD,WACAC,oBAAoBX,GACpBY,yBDqEH,IAAK,IAAIhE,EAAK,GAAIF,EAAI,EAAGA,EAAImE,UAAUC,OAAQpE,IAC3CE,EAAKA,EAAGmE,OAAO7E,EAAO2E,UAAUnE,KACpC,OAAOE,ECvESoE,CACsB,UAA9B1D,KAAKW,qBAAmCiC,EAAgBe,UAAYf,EACtC,UAA9B5C,KAAKW,qBAAmCuC,EAAaS,UAAYT,IAEtEU,UAAS,GACNC,EAAU,IAAIC,EAAAA,cAAc,CAChCC,aAAa,EACbC,cAAe,mCACfC,eAAgBjE,KAAKF,QAAQoE,iBAAiBC,aAC9ChB,iBAAgBA,EAChB5C,MAAOmC,EAAO0B,cAEhBpE,KAAKqE,WAAarE,KAAKF,QAAQnB,OAAOkF,GAClC7D,KAAKU,mBAAmBV,KAAKqE,WAAWC,WAAW,CAAE/D,MAAOP,KAAKU,oBACjEV,KAAKS,oBAAoBT,KAAKqE,WAAWC,WAAW,CAAEhE,OAAQN,KAAKS,qBACvET,KAAKqE,WAAWE,OAAO,IAAIC,EAAAA,eAAe/B,EAAUzC,KAAKD,mBACzDC,KAAKqE,WAAWI,gBAAgBC,WAAU,SAAAC,GACxChC,EAAKnB,eAGT5B,EAAAqB,UAAA2D,WAAA,SAAWC,GACT7E,KAAKe,SAAS+D,KAAKD,GACnB7E,KAAKqC,kBAEPzC,EAAAqB,UAAAO,SAAA,iBACExB,KAAKE,sBAAuB,EAC5BF,KAAKC,QAAS,EACC,QAAf8E,EAAA/E,KAAKqE,kBAAU,IAAAU,GAAAA,EAAEC,SACjBhF,KAAKG,YAAc,6BAzGtB8E,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,eACV1C,SAAA,w7PAJkB2C,EAAAA,kBAFaC,EAAAA,eAE0EC,EAAAA,kDAaxGC,EAAAA,sBACAA,EAAAA,qBACAA,EAAAA,qBACAA,EAAAA,kCAEAA,EAAAA,iCACAA,EAAAA,oCACAA,EAAAA,6BAEAA,EAAAA,4BACAA,EAAAA,6BACAA,EAAAA,wBAEAC,EAAAA,8BAEAC,EAAAA,UAASP,KAAA,CAAC,SAAU,CAAEQ,QAAQ,4BAC9BD,EAAAA,UAASP,KAAA,CAAC,iBAAkB,CAAEQ,QAAQ,sBAMtCC,EAAAA,aAAYT,KAAA,CAAC,iBAAkB,CAAC,+BC3BnC,SAAAU,YACWA,EAAAC,QAAP,WACI,MAAO,CAAEC,SAAUF,EAAgBG,UAAW,8BAPrDC,EAAAA,SAAQd,KAAA,CAAC,CACNe,aAAc,CAACrG,GACfsG,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAACzG","sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n    return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (_) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, TemplateRef, ViewChild, ViewContainerRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-dropdown\",\n  templateUrl: \"./dropdown.component.html\",\n  styleUrls: [\"./dropdown.component.scss\"]\n})\nexport class DropdownComponent implements OnInit {\n  isOpen = false;\n  isSearchInputFocused: boolean = false;\n  searchInput: string = \"\";\n  searchData: DropdownItem[] = [];\n\n  @Input() data: DropdownItem[] = [];\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() selectedItem: DropdownItem = { value: \"\", label: \"\" };\n  @Input() noDataMessage: string = \"No Data\";\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  private overlayRef: OverlayRef;\n\n  constructor(private eRef: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n  ngOnInit() {}\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  filterByValue(array: DropdownItem[], string: string) {\n    return array.filter(o => o.label.toLowerCase().includes(string.toLowerCase()));\n  }\n  searchInputOnChange(newValue) {\n    this.searchInput = newValue;\n    if (newValue) {\n      this.searchData = this.filterByValue(this.data, newValue);\n    } else {\n      this.searchData = [];\n      this.searchInput = \"\";\n    }\n  }\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) this.openDropdown(this.popupContainer, this.selectElement.nativeElement);\n    else this.onCancel();\n  }\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): 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 positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        ...(this.dropdownListPosition === \"Right\" ? positionsBottom.reverse() : positionsBottom),\n        ...(this.dropdownListPosition === \"Right\" ? positionsTop.reverse() : positionsTop)\n      ])\n      .withPush(true);\n    const configs = new OverlayConfig({\n      hasBackdrop: true,\n      backdropClass: \"cdk-overlay-transparent-backdrop\",\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      positionStrategy,\n      width: origin.clientWidth\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(res => {\n      this.onCancel();\n    });\n  }\n  selectItem(item) {\n    this.onChange.emit(item);\n    this.toggleDropdown();\n  }\n  onCancel() {\n    this.isSearchInputFocused = false;\n    this.isOpen = false;\n    this.overlayRef?.detach();\n    this.searchInput = \"\";\n  }\n}\nexport interface DropdownItem {\n  label: string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n}\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule, ModuleWithProviders } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\n\n@NgModule({\n    declarations: [DropdownComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [DropdownComponent]\n})\nexport class DropdownModule {\n    static forRoot(): ModuleWithProviders<DropdownModule> {\n        return { ngModule: DropdownModule, providers: [] };\n    }\n}\n"]}

package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('mis-crystal-design-system/checkbox'), require('mis-crystal-design-system/button')) :
-    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/multi-select-dropdown', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'mis-crystal-design-system/checkbox', 'mis-crystal-design-system/button'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['multi-select-dropdown'] = {}), global.ng.core, global.ng.common, global.ng.forms, global['mis-crystal-design-system'].checkbox, global['mis-crystal-design-system'].button));
-}(this, (function (exports, core, common, forms, checkbox, button) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/forms'), require('mis-crystal-design-system/checkbox'), require('mis-crystal-design-system/button')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/multi-select-dropdown', ['exports', '@angular/core', '@angular/cdk/portal', '@angular/cdk/overlay', '@angular/common', '@angular/forms', 'mis-crystal-design-system/checkbox', 'mis-crystal-design-system/button'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['multi-select-dropdown'] = {}), global.ng.core, global.ng.cdk.portal, global.ng.cdk.overlay, global.ng.common, global.ng.forms, global['mis-crystal-design-system'].checkbox, global['mis-crystal-design-system'].button));
+}(this, (function (exports, core, portal, overlay, common, forms, checkbox, button) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -323,8 +323,10 @@
     }
 
     var MultiSelectDropdownComponent = /** @class */ (function () {
-        function MultiSelectDropdownComponent(eRef) {
+        function MultiSelectDropdownComponent(eRef, overlay, viewContainerRef) {
             this.eRef = eRef;
+            this.overlay = overlay;
+            this.viewContainerRef = viewContainerRef;
             this.searchInput = "";
             this.isOpen = false;
             this.localSelectedItems = [];
@@ -343,7 +345,7 @@
             this.showSelectedCount = false;
             this.noDataMessage = "No Data";
             this.options = {
-                sortLabels: true,
+                sortLabels: true
             };
             this.hideApplyButton = false;
             this.onChange = new core.EventEmitter();
@@ -364,19 +366,18 @@
             enumerable: false,
             configurable: true
         });
+        MultiSelectDropdownComponent.prototype.ngOnInit = function () { };
         MultiSelectDropdownComponent.prototype.clickout = function (event) {
             var isClickedOutside = !this.eRef.nativeElement.contains(event.target);
             if (isClickedOutside) {
                 this.onCancel();
             }
         };
-        MultiSelectDropdownComponent.prototype.ngOnInit = function () { };
         MultiSelectDropdownComponent.prototype.handlerSetLocalSelectedItems = function (values) {
             var _this = this;
             this.localSelectedItems = values;
             this.localData = this.localData.map(function (item) {
-                if (item.value === _this.SELECT_ALL_ENUM &&
-                    _this.localData.every(function (a) { return a.checked; })) {
+                if (item.value === _this.SELECT_ALL_ENUM && _this.localData.every(function (a) { return a.checked; })) {
                     return Object.assign(Object.assign({}, item), { checked: true });
                 }
                 if (values.some(function (base) { return base.value === item.value; })) {
@@ -402,6 +403,42 @@
                 this.handlerSetLocalSelectedItems(this.localSelectedItems);
                 this.localData = this.formatValues(this.localData);
             }
+            if (this.isOpen)
+                this.openDropdown(this.popupContainer, this.selectElement.nativeElement);
+            else
+                this.onCancel();
+        };
+        MultiSelectDropdownComponent.prototype.openDropdown = function (template, origin) {
+            var _this = this;
+            var positionsBottom = [
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, 0, 4),
+                new overlay.ConnectionPositionPair({ originX: "end", originY: "bottom" }, { overlayX: "end", overlayY: "top" }, 0, 4)
+            ];
+            var positionsTop = [
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, 0, -4),
+                new overlay.ConnectionPositionPair({ originX: "end", originY: "top" }, { overlayX: "end", overlayY: "bottom" }, 0, -4)
+            ];
+            var positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(origin)
+                .withPositions(__spread((this.dropdownListPosition === "Right" ? positionsBottom.reverse() : positionsBottom), (this.dropdownListPosition === "Right" ? positionsTop.reverse() : positionsTop)))
+                .withPush(true);
+            var configs = new overlay.OverlayConfig({
+                hasBackdrop: true,
+                backdropClass: "cdk-overlay-transparent-backdrop",
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                positionStrategy: positionStrategy,
+                width: origin.clientWidth
+            });
+            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 portal.TemplatePortal(template, this.viewContainerRef));
+            this.overlayRef.backdropClick().subscribe(function (res) {
+                _this.onCancel();
+            });
         };
         MultiSelectDropdownComponent.prototype.filterByValue = function (array, string) {
             return array.filter(function (o) { return o.label.toLowerCase().includes(string.toLowerCase()); });
@@ -422,19 +459,17 @@
             if (this.options.sortLabels) {
                 var checkedValues = array
                     .filter(function (a) { return a.checked; })
-                    .sort(function (a, b) { return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; });
+                    .sort(function (a, b) { return (a.label > b.label ? 1 : b.label > a.label ? -1 : 0); });
                 var unCheckedValues = array
                     .filter(function (a) { return !a.checked; })
-                    .sort(function (a, b) { return a.label > b.label ? 1 : b.label > a.label ? -1 : 0; });
+                    .sort(function (a, b) { return (a.label > b.label ? 1 : b.label > a.label ? -1 : 0); });
                 sortedArray = __spread(checkedValues, unCheckedValues).filter(function (t) { return t.value !== _this.SELECT_ALL_ENUM; });
             }
-            if (!sortedArray.some(function (option) { return option.value === _this.SELECT_ALL_ENUM; }) &&
-                this.enableSelectAll &&
-                sortedArray.length > 0) {
+            if (!sortedArray.some(function (option) { return option.value === _this.SELECT_ALL_ENUM; }) && this.enableSelectAll && sortedArray.length > 0) {
                 sortedArray.unshift({
                     label: "Select all",
                     value: this.SELECT_ALL_ENUM,
-                    checked: sortedArray.every(function (y) { return y.checked; }),
+                    checked: sortedArray.every(function (y) { return y.checked; })
                 });
             }
             return sortedArray;
@@ -464,10 +499,7 @@
                     }
                     return a;
                 }));
-                if (this.enableSelectAll &&
-                    this.localData
-                        .filter(function (r) { return r.value !== _this.SELECT_ALL_ENUM; })
-                        .every(function (t) { return t.checked; })) {
+                if (this.enableSelectAll && this.localData.filter(function (r) { return r.value !== _this.SELECT_ALL_ENUM; }).every(function (t) { return t.checked; })) {
                     this.localData = __spread(this.localData.map(function (a) {
                         if (a.value === _this.SELECT_ALL_ENUM) {
                             return Object.assign(Object.assign({}, a), { checked: true });
@@ -505,6 +537,7 @@
         };
         MultiSelectDropdownComponent.prototype.onCancel = function () {
             var _this = this;
+            var _a;
             this.isSearchInputFocused = false;
             this.localData = this.localData.map(function (a) {
                 if (_this.localSelectedItems.some(function (b) { return b.value === a.value && String(b.checked) !== String(a.checked); })) {
@@ -516,18 +549,22 @@
             });
             this.isOpen = false;
             this.searchInput = "";
+            (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+            this.searchInput = "";
         };
         return MultiSelectDropdownComponent;
     }());
     MultiSelectDropdownComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "mis-multi-select-dropdown",
-                    template: "<div\n  class=\"container\"\n  [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 && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </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 style=\"flex-basis: 0\"></div>\n  <div style=\"width: 100%; position: relative\">\n    <div\n      *ngIf=\"isOpen\"\n      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\n          *ngIf=\"!isSearchInputFocused\"\n          class=\"search-icon\"\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=\"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          />\n        </svg>\n        <input\n          [ngModel]=\"searchInput\"\n          [ngStyle]=\"{\n            paddingLeft: isSearchInputFocused ? '12px' : '45px',\n            border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n            paddingRight: isSearchInputFocused ? '45px' : '10px'\n          }\"\n          (ngModelChange)=\"searchInputOnChange($event)\"\n          [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n          (focus)=\"searchInputFocused(true)\"\n          class=\"search-input\"\n        />\n        <svg\n          *ngIf=\"isSearchInputFocused\"\n          class=\"cancel-icon\"\n          (click)=\"searchInputCanceled($event)\"\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=\"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          />\n        </svg>\n      </div>\n      <div class=\"items\">\n        <div class=\"item\" (click)=\"toggleSelectedItems($event, item)\" *ngFor=\"let item of searchInput ? searchData : localData\">\n          <div class=\"checkbox-container-wrapper\">\n            <div class=\"checkbox-container\">\n              <mis-checkbox [checked]=\"item.checked\"></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 class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n          {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n        </div>\n      </div>\n      <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n        <div style=\"width: calc(50% - 4px)\">\n          <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n        </div>\n        <div style=\"width: calc(50% - 4px)\">\n          <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                    styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.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;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.200000003px}.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}"]
+                    template: "<div\n  class=\"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\">{{ label }}</p>\n      <p *ngIf=\"showSelectedCount && localSelectedItems?.length > 0\" class=\"count\">\n        {{ localSelectedItems?.length }}\n      </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<ng-template #popupContainer>\n  <div\n    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\n        *ngIf=\"!isSearchInputFocused\"\n        class=\"search-icon\"\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=\"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        />\n      </svg>\n      <input\n        [ngModel]=\"searchInput\"\n        [ngStyle]=\"{\n          paddingLeft: isSearchInputFocused ? '12px' : '45px',\n          border: isSearchInputFocused ? '1px solid #0937B2' : '1px solid #e0e0e0',\n          paddingRight: isSearchInputFocused ? '45px' : '10px'\n        }\"\n        (ngModelChange)=\"searchInputOnChange($event)\"\n        [placeholder]=\"isSearchInputFocused ? '' : 'Search Keyword'\"\n        (focus)=\"searchInputFocused(true)\"\n        class=\"search-input\"\n      />\n      <svg\n        *ngIf=\"isSearchInputFocused\"\n        class=\"cancel-icon\"\n        (click)=\"searchInputCanceled($event)\"\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=\"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        />\n      </svg>\n    </div>\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        (keyup.enter)=\"toggleSelectedItems($event, item)\"\n        (click)=\"toggleSelectedItems($event, item)\"\n        *ngFor=\"let item of searchInput ? searchData : localData\"\n      >\n        <div class=\"checkbox-container-wrapper\">\n          <div class=\"checkbox-container\">\n            <mis-checkbox [checked]=\"item.checked\" tabindex=\"-1\"></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 class=\"noData\" *ngIf=\"(searchInput ? searchData : localData).length === 0\">\n        {{ searchInput === \"\" ? noDataMessage : \"No results\" }}\n      </div>\n    </div>\n    <div *ngIf=\"localData.length !== 0 && !hideApplyButton\" class=\"actions-container\">\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Reset'\" [type]=\"'Text'\" [width]=\"'100%'\" (click)=\"onReset()\"></mis-button>\n      </div>\n      <div style=\"width: calc(50% - 4px)\">\n        <mis-button [name]=\"'Apply'\" [type]=\"'Solid'\" [width]=\"'100%'\" (click)=\"applyFilters()\"></mis-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n",
+                    styles: [".container{position:relative;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;height:32px;width:256px;font-family:Lato,sans-serif!important}.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:focus-visible,.container .dropdown:hover{background-color:#f5f7fc;outline:none}.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}.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{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}.popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;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 .checkbox-container-wrapper{display:flex;justify-content:flex-start;align-items:center;width:90%}.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}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.popup-container .items .item .checkbox-container-wrapper .checkbox-container input:checked~.checkmark:after{display:block}.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}.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)}.popup-container .items .item .checkbox-container-wrapper .label{margin:0 0 0 8px;line-height:20px;font-size:14px;font-style:normal;font-weight:400;letter-spacing:.2;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 .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}.popup-container .actions-container .cancel{cursor:pointer;padding:10px 32px;text-align:center;font-size:16px;line-height:24px;border-radius:8px}.popup-container .actions-container .cancel:hover{background:rgba(9,55,178,.04)}.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}"]
                 },] }
     ];
     MultiSelectDropdownComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: overlay.Overlay },
+        { type: core.ViewContainerRef }
     ]; };
     MultiSelectDropdownComponent.propDecorators = {
         data: [{ type: core.Input }],
@@ -545,6 +582,8 @@
         selectedItems: [{ type: core.Input }],
         hideApplyButton: [{ type: core.Input }],
         onChange: [{ type: core.Output }],
+        selectElement: [{ type: core.ViewChild, args: ["select", { static: false },] }],
+        popupContainer: [{ type: core.ViewChild, args: ["popupContainer", { static: false },] }],
         clickout: [{ type: core.HostListener, args: ["document:click", ["$event"],] }]
     };