mis-crystal-design-system 4.0.35 → 4.0.37

package/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"AsyncDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"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 *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" />\n    </ng-template>\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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":33,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":33,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":33,"character":101}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"httpStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"secondaryDisplayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"debounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"minInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"uniqueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"disableCopyPaste":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["ddBtn",{"static":false}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["input",{"static":false}]}]}],"dd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":["dd",{"static":false}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":51,"character":3},"arguments":["misCustomItem",{"static":false}]}]}],"customLoader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":3},"arguments":["asyncCustomLoader",{"static":false}]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"searchValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"searchQueryChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":3}}]}],"itemRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"selectData":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"setControlValue":[{"__symbolic":"method"}],"removeInputValue":[{"__symbolic":"method"}],"defaultCall":[{"__symbolic":"method"}]}},"AsyncDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":9,"character":41},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":62},{"__symbolic":"reference","module":"mis-crystal-design-system/loader","name":"LoaderModule","line":9,"character":75}],"exports":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}]}]}],"members":{}}},"origins":{"AsyncDropdownComponent":"./async-dropdown.component","AsyncDropdownModule":"./async-dropdown.module"},"importAs":"mis-crystal-design-system/async-search-dropdown"}
+{"__symbolic":"module","version":4,"metadata":{"AsyncDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"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 *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" />\n    </ng-template>\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;z-index:1001}.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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":33,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":33,"character":66},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":33,"character":101}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"httpStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"secondaryDisplayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"debounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"minInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"uniqueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"disableCopyPaste":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["ddBtn",{"static":false}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["input",{"static":false}]}]}],"dd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":3},"arguments":["dd",{"static":false}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":51,"character":3},"arguments":["misCustomItem",{"static":false}]}]}],"customLoader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":3},"arguments":["asyncCustomLoader",{"static":false}]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":56,"character":3}}]}],"selections":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}}]}],"searchValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"searchQueryChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":3}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":71,"character":3}}]}],"itemRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"closeDropdown":[{"__symbolic":"method"}],"selectData":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"setControlValue":[{"__symbolic":"method"}],"removeInputValue":[{"__symbolic":"method"}],"defaultCall":[{"__symbolic":"method"}]}},"AsyncDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":9,"character":41},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":62},{"__symbolic":"reference","module":"mis-crystal-design-system/loader","name":"LoaderModule","line":9,"character":75}],"exports":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}]}]}],"members":{}}},"origins":{"AsyncDropdownComponent":"./async-dropdown.component","AsyncDropdownModule":"./async-dropdown.module"},"importAs":"mis-crystal-design-system/async-search-dropdown"}

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

@@ -220,7 +220,7 @@
         { type: core.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 *ngIf=\"disableCopyPaste; else enableCopyPaste\" [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" oncopy=\"return false;\" onpaste=\"return false\" oncut=\"return false\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" (focus)=\"defaultCall()\" />\n    </ng-template>\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}"]
+                    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;z-index:1001}.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 = function () { return [

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("@angular/common"),require("mis-crystal-design-system/loader")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/async-search-dropdown",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","@angular/forms","rxjs/operators","@angular/common","mis-crystal-design-system/loader"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["async-search-dropdown"]={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.ng.forms,e.rxjs.operators,e.ng.common,e["mis-crystal-design-system"].loader)}(this,(function(e,t,n,i,o,s,a,r){"use strict";var l=function(){function e(e,t,n){var s=this;this.overlay=e,this.viewContainerRef=t,this._ngZone=n,this.size="md",this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.disableCopyPaste=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.loading=!1,this.error=!1,this.selections=new Map,this.searchQueryChange=new i.EventEmitter,this.clear=new i.EventEmitter(!1),this.itemSelected=new i.EventEmitter,this.itemRemoved=new i.EventEmitter,this.handleControlChanges=function(e){e.forEach((function(e){s.selectData(e,!0)}))}}return e.prototype.ngOnInit=function(){var e,t,n=this;if(this.multi&&!this.uniqueKey)throw new Error("[uniqueKey] required in multi mode.");this.disabled&&this.searchInput.disable(),this.searchSubscription=this.searchInput.valueChanges.pipe(s.tap((function(e){return n.searchQueryChange.emit(e)})),s.debounceTime(this.debounceTime),s.distinctUntilChanged()).subscribe((function(e){n._ngZone.run((function(){var t;(null==e?void 0:e.length)<n.minInputLength||!(null==e?void 0:e.length)?n.closeDropdown():(null==e?void 0:e.length)>n.minInputLength&&n.httpStream&&(n.loading=!0,n.error=!1,(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())||n.openDropdown(n.dd,n.origin.nativeElement),n.httpStream(e).subscribe((function(e){var t;n.loading=!1,n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}),(function(e){n.loading=!1,n.error=!0})))}))})),(null===(e=this.control)||void 0===e?void 0:e.value)&&this.handleControlChanges(this.control.value),this.controlSubscription=null===(t=this.control)||void 0===t?void 0:t.valueChanges.subscribe(this.handleControlChanges)},e.prototype.ngOnChanges=function(e){var t;e&&(null===(t=null==e?void 0:e.searchValue)||void 0===t?void 0:t.currentValue)&&this.searchInput.patchValue(e.searchValue.currentValue),e&&e.disabled&&(this.searchInput.enable(),this.disabled&&this.searchInput.disable())},e.prototype.ngOnDestroy=function(){var e,t;null===(e=this.searchSubscription)||void 0===e||e.unsubscribe(),null===(t=this.defaultCallSubscription)||void 0===t||t.unsubscribe()},e.prototype.openDropdown=function(e,i){var o=this,s=this.overlay.position().flexibleConnectedTo(i).withPositions([new t.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new t.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"})]).withPush(!0),a=new t.OverlayConfig({hasBackdrop:!0,backdropClass:"cdk-overlay-transparent-backdrop",scrollStrategy:this.overlay.scrollStrategies.reposition(),positionStrategy:s,width:i.clientWidth});this.overlayRef=this.overlay.create(a),this.overlayRef.attach(new n.TemplatePortal(e,this.viewContainerRef)),this.overlayRef.backdropClick().subscribe((function(e){o.closeDropdown()}))},e.prototype.closeDropdown=function(){var e;this.opened=!1,null===(e=this.overlayRef)||void 0===e||e.detach(),this.data=[]},e.prototype.selectData=function(e,t){var n=this;void 0===t&&(t=!0),e.disabled||(this.itemSelected.emit(e),this.multi?(this.selections.has(e[this.uniqueKey])||this.selections.set(e[this.uniqueKey],e),this.setControlValue(this.selectedItems),t||setTimeout((function(){n.input.nativeElement.focus(),n.input.nativeElement.scrollIntoView()}),10),this.searchInput.patchValue(""),this.data=[]):(this.searchInput.patchValue(e[this.displayKey],{emitEvent:!1}),this.setControlValue(e)),this.closeDropdown())},e.prototype.removeItem=function(e){this.itemRemoved.emit(e),this.selections.delete(e[this.uniqueKey]),this.setControlValue(this.selectedItems),this.input.nativeElement.focus()},e.prototype.setControlValue=function(e){var t;this.onSelect.emit(e),null===(t=this.control)||void 0===t||t.patchValue(e,{emitEvent:!1})},Object.defineProperty(e.prototype,"selectedItems",{get:function(){return Array.from(this.selections.values())},enumerable:!1,configurable:!0}),e.prototype.removeInputValue=function(){this.searchInput.reset(),this.data=[],this.clear.emit(!0)},e.prototype.defaultCall=function(){var e,t=this;-1===this.minInputLength&&this.httpStream&&(this.loading=!0,this.error=!1,(null===(e=this.overlayRef)||void 0===e?void 0:e.hasAttached())||this.openDropdown(this.dd,this.origin.nativeElement),this.defaultCallSubscription=this.httpStream(this.searchInput.value||"").subscribe((function(e){var n,i;t.loading=!1,t.data=e,!(null===(n=t.overlayRef)||void 0===n?void 0:n.hasAttached())&&(null===(i=t.data)||void 0===i?void 0:i.length)>0&&t.openDropdown(t.dd,t.origin.nativeElement)}),(function(e){t.loading=!1,t.error=!0})))},e}();l.decorators=[{type:i.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 *ngIf="disableCopyPaste; else enableCopyPaste" [ngClass]="{\'ip-md\': size === \'md\', \'ip-sm\': size === \'sm\'}" oncopy="return false;" onpaste="return false" oncut="return false" tabindex="0" type="text" class="black-text h6" #input [placeholder]="placeholder" [formControl]="searchInput" (focus)="defaultCall()"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]="{\'ip-md\': size === \'md\', \'ip-sm\': size === \'sm\'}" tabindex="0" type="text" class="black-text h6" #input [placeholder]="placeholder" [formControl]="searchInput" (focus)="defaultCall()" />\n    </ng-template>\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}"]}]}],l.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef},{type:i.NgZone}]},l.propDecorators={height:[{type:i.Input}],size:[{type:i.Input}],httpStream:[{type:i.Input}],displayKey:[{type:i.Input}],secondaryDisplayKey:[{type:i.Input}],placeholder:[{type:i.Input}],debounceTime:[{type:i.Input}],minInputLength:[{type:i.Input}],multi:[{type:i.Input}],uniqueKey:[{type:i.Input}],control:[{type:i.Input}],disabled:[{type:i.Input}],readonly:[{type:i.Input}],disableCopyPaste:[{type:i.Input}],origin:[{type:i.ViewChild,args:["ddBtn",{static:!1}]}],input:[{type:i.ViewChild,args:["input",{static:!1}]}],dd:[{type:i.ViewChild,args:["dd",{static:!1}]}],customItem:[{type:i.ContentChild,args:["misCustomItem",{static:!1}]}],customLoader:[{type:i.ContentChild,args:["asyncCustomLoader",{static:!1}]}],onSelect:[{type:i.Output}],selections:[{type:i.Input}],searchValue:[{type:i.Input}],searchQueryChange:[{type:i.Output}],clear:[{type:i.Output}],itemSelected:[{type:i.Output}],itemRemoved:[{type:i.Output}]};var d=function(){};d.decorators=[{type:i.NgModule,args:[{declarations:[l],imports:[a.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule,r.LoaderModule],exports:[l]}]}],e.AsyncDropdownComponent=l,e.AsyncDropdownModule=d,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("@angular/common"),require("mis-crystal-design-system/loader")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/async-search-dropdown",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","@angular/forms","rxjs/operators","@angular/common","mis-crystal-design-system/loader"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["async-search-dropdown"]={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.ng.forms,e.rxjs.operators,e.ng.common,e["mis-crystal-design-system"].loader)}(this,(function(e,t,n,i,o,s,a,r){"use strict";var l=function(){function e(e,t,n){var s=this;this.overlay=e,this.viewContainerRef=t,this._ngZone=n,this.size="md",this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.disableCopyPaste=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.loading=!1,this.error=!1,this.selections=new Map,this.searchQueryChange=new i.EventEmitter,this.clear=new i.EventEmitter(!1),this.itemSelected=new i.EventEmitter,this.itemRemoved=new i.EventEmitter,this.handleControlChanges=function(e){e.forEach((function(e){s.selectData(e,!0)}))}}return e.prototype.ngOnInit=function(){var e,t,n=this;if(this.multi&&!this.uniqueKey)throw new Error("[uniqueKey] required in multi mode.");this.disabled&&this.searchInput.disable(),this.searchSubscription=this.searchInput.valueChanges.pipe(s.tap((function(e){return n.searchQueryChange.emit(e)})),s.debounceTime(this.debounceTime),s.distinctUntilChanged()).subscribe((function(e){n._ngZone.run((function(){var t;(null==e?void 0:e.length)<n.minInputLength||!(null==e?void 0:e.length)?n.closeDropdown():(null==e?void 0:e.length)>n.minInputLength&&n.httpStream&&(n.loading=!0,n.error=!1,(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())||n.openDropdown(n.dd,n.origin.nativeElement),n.httpStream(e).subscribe((function(e){var t;n.loading=!1,n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}),(function(e){n.loading=!1,n.error=!0})))}))})),(null===(e=this.control)||void 0===e?void 0:e.value)&&this.handleControlChanges(this.control.value),this.controlSubscription=null===(t=this.control)||void 0===t?void 0:t.valueChanges.subscribe(this.handleControlChanges)},e.prototype.ngOnChanges=function(e){var t;e&&(null===(t=null==e?void 0:e.searchValue)||void 0===t?void 0:t.currentValue)&&this.searchInput.patchValue(e.searchValue.currentValue),e&&e.disabled&&(this.searchInput.enable(),this.disabled&&this.searchInput.disable())},e.prototype.ngOnDestroy=function(){var e,t;null===(e=this.searchSubscription)||void 0===e||e.unsubscribe(),null===(t=this.defaultCallSubscription)||void 0===t||t.unsubscribe()},e.prototype.openDropdown=function(e,i){var o=this,s=this.overlay.position().flexibleConnectedTo(i).withPositions([new t.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new t.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"})]).withPush(!0),a=new t.OverlayConfig({hasBackdrop:!0,backdropClass:"cdk-overlay-transparent-backdrop",scrollStrategy:this.overlay.scrollStrategies.reposition(),positionStrategy:s,width:i.clientWidth});this.overlayRef=this.overlay.create(a),this.overlayRef.attach(new n.TemplatePortal(e,this.viewContainerRef)),this.overlayRef.backdropClick().subscribe((function(e){o.closeDropdown()}))},e.prototype.closeDropdown=function(){var e;this.opened=!1,null===(e=this.overlayRef)||void 0===e||e.detach(),this.data=[]},e.prototype.selectData=function(e,t){var n=this;void 0===t&&(t=!0),e.disabled||(this.itemSelected.emit(e),this.multi?(this.selections.has(e[this.uniqueKey])||this.selections.set(e[this.uniqueKey],e),this.setControlValue(this.selectedItems),t||setTimeout((function(){n.input.nativeElement.focus(),n.input.nativeElement.scrollIntoView()}),10),this.searchInput.patchValue(""),this.data=[]):(this.searchInput.patchValue(e[this.displayKey],{emitEvent:!1}),this.setControlValue(e)),this.closeDropdown())},e.prototype.removeItem=function(e){this.itemRemoved.emit(e),this.selections.delete(e[this.uniqueKey]),this.setControlValue(this.selectedItems),this.input.nativeElement.focus()},e.prototype.setControlValue=function(e){var t;this.onSelect.emit(e),null===(t=this.control)||void 0===t||t.patchValue(e,{emitEvent:!1})},Object.defineProperty(e.prototype,"selectedItems",{get:function(){return Array.from(this.selections.values())},enumerable:!1,configurable:!0}),e.prototype.removeInputValue=function(){this.searchInput.reset(),this.data=[],this.clear.emit(!0)},e.prototype.defaultCall=function(){var e,t=this;-1===this.minInputLength&&this.httpStream&&(this.loading=!0,this.error=!1,(null===(e=this.overlayRef)||void 0===e?void 0:e.hasAttached())||this.openDropdown(this.dd,this.origin.nativeElement),this.defaultCallSubscription=this.httpStream(this.searchInput.value||"").subscribe((function(e){var n,i;t.loading=!1,t.data=e,!(null===(n=t.overlayRef)||void 0===n?void 0:n.hasAttached())&&(null===(i=t.data)||void 0===i?void 0:i.length)>0&&t.openDropdown(t.dd,t.origin.nativeElement)}),(function(e){t.loading=!1,t.error=!0})))},e}();l.decorators=[{type:i.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 *ngIf="disableCopyPaste; else enableCopyPaste" [ngClass]="{\'ip-md\': size === \'md\', \'ip-sm\': size === \'sm\'}" oncopy="return false;" onpaste="return false" oncut="return false" tabindex="0" type="text" class="black-text h6" #input [placeholder]="placeholder" [formControl]="searchInput" (focus)="defaultCall()"/>\n    <ng-template #enableCopyPaste>\n      <input [ngClass]="{\'ip-md\': size === \'md\', \'ip-sm\': size === \'sm\'}" tabindex="0" type="text" class="black-text h6" #input [placeholder]="placeholder" [formControl]="searchInput" (focus)="defaultCall()" />\n    </ng-template>\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;z-index:1001}.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}"]}]}],l.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef},{type:i.NgZone}]},l.propDecorators={height:[{type:i.Input}],size:[{type:i.Input}],httpStream:[{type:i.Input}],displayKey:[{type:i.Input}],secondaryDisplayKey:[{type:i.Input}],placeholder:[{type:i.Input}],debounceTime:[{type:i.Input}],minInputLength:[{type:i.Input}],multi:[{type:i.Input}],uniqueKey:[{type:i.Input}],control:[{type:i.Input}],disabled:[{type:i.Input}],readonly:[{type:i.Input}],disableCopyPaste:[{type:i.Input}],origin:[{type:i.ViewChild,args:["ddBtn",{static:!1}]}],input:[{type:i.ViewChild,args:["input",{static:!1}]}],dd:[{type:i.ViewChild,args:["dd",{static:!1}]}],customItem:[{type:i.ContentChild,args:["misCustomItem",{static:!1}]}],customLoader:[{type:i.ContentChild,args:["asyncCustomLoader",{static:!1}]}],onSelect:[{type:i.Output}],selections:[{type:i.Input}],searchValue:[{type:i.Input}],searchQueryChange:[{type:i.Output}],clear:[{type:i.Output}],itemSelected:[{type:i.Output}],itemRemoved:[{type:i.Output}]};var d=function(){};d.decorators=[{type:i.NgModule,args:[{declarations:[l],imports:[a.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule,r.LoaderModule],exports:[l]}]}],e.AsyncDropdownComponent=l,e.AsyncDropdownModule=d,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-async-search-dropdown.umd.min.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_ngZone","_this","this","size","placeholder","debounceTime","minInputLength","multi","disableCopyPaste","onSelect","EventEmitter","searchInput","FormControl","data","opened","loading","error","selections","Map","searchQueryChange","clear","itemSelected","itemRemoved","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","tap","val","emit","distinctUntilChanged","subscribe","res","run","length","closeDropdown","httpStream","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","list","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","defaultCallSubscription","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","displayKey","emitEvent","removeItem","delete","Object","defineProperty","Array","from","removeInputValue","reset","defaultCall","Component","args","selector","Overlay","ViewContainerRef","NgZone","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","LoaderModule","exports"],"mappings":"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","sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n  AfterViewInit,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter, tap } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n  selector: \"mis-async-search-dropdown\",\n  templateUrl: \"./async-dropdown.component.html\",\n  styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private _ngZone: NgZone) { }\n  @Input() height;\n  @Input() size: 'md' | 'sm' = 'md'\n  @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n  @Input() displayKey!: string; // string to show value in list\n  @Input() secondaryDisplayKey!: string; // string to display secondary value\n  @Input() placeholder = \"Select\"; // placeholder for input\n  @Input() debounceTime = 400; // wait time till which API call is paused\n  @Input() minInputLength = 2; // min length after which API call is made\n  @Input() multi = false; // maintain a list or emit value\n  @Input() uniqueKey: string; // for identifying unique values\n  @Input() control: AbstractControl | null; // form control for reactive forms\n  @Input() disabled: boolean; // disable actions on component\n  @Input() readonly: boolean; // make component readonly\n  @Input() disableCopyPaste: boolean = false;\n  @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n  @ViewChild(\"input\", { static: false }) input: ElementRef;\n  @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n  @ContentChild(\"misCustomItem\", { static: false })\n  customItem: TemplateRef<Element>;\n  @ContentChild(\"asyncCustomLoader\", { static: false})\n  customLoader: TemplateRef<Element>;\n  // tslint:disable-next-line\n  @Output() onSelect: EventEmitter<IListData | IListData[]> = new EventEmitter(true); // emit selected values\n  searchInput: FormControl = new FormControl();\n  data: IListData[] = [];\n  opened = false;\n  loading: boolean = false;\n  error: boolean = false;\n  // tslint:disable-next-line\n  @Input() selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private defaultCallSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() searchQueryChange = new EventEmitter<string>()\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n  @Output() itemSelected = new EventEmitter<IListData>()\n  @Output() itemRemoved = new EventEmitter<IListData>()\n  ngOnInit(): void {\n    if (this.multi && !this.uniqueKey) {\n      throw new Error(\"[uniqueKey] required in multi mode.\");\n    }\n    if (this.disabled) {\n      this.searchInput.disable();\n    }\n    this.searchSubscription = this.searchInput.valueChanges\n      .pipe(\n        // filter(val => val && val.length >= this.minInputLength),\n        tap((val) => this.searchQueryChange.emit(val)),\n        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        this._ngZone.run(() => {\n          if (res?.length < this.minInputLength || !res?.length) {\n            this.closeDropdown();\n            return;\n          } else if (res?.length > this.minInputLength && this.httpStream) {\n            this.loading = true;\n            this.error = false;\n            if(!this.overlayRef?.hasAttached())\n              this.openDropdown(this.dd, this.origin.nativeElement);\n            this.httpStream(res).subscribe(list => {\n              this.loading = false;\n              this.data = list;\n              if (!this.overlayRef?.hasAttached() && list.length > 0) {\n                this.openDropdown(this.dd, this.origin.nativeElement);\n              }\n            }, error => {\n              this.loading = false;\n              this.error = true;\n            });\n          }\n        })\n      });\n    if (this.control?.value) {\n      this.handleControlChanges(this.control.value);\n    }\n    this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes && changes?.searchValue?.currentValue) {\n      this.searchInput.patchValue(changes.searchValue.currentValue);\n    }\n    if (changes && changes.disabled) {\n      this.searchInput.enable();\n      if (this.disabled) {\n        this.searchInput.disable();\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.searchSubscription?.unsubscribe();\n    this.defaultCallSubscription?.unsubscribe();\n  }\n\n  private handleControlChanges = (values: IListData[]) => {\n    values.forEach(el => {\n      this.selectData(el, true);\n    });\n    // tslint:disable-next-line\n  };\n\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n        new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n      ])\n      .withPush(true);\n\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    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(res => {\n      this.closeDropdown();\n    });\n  }\n\n  /**\n   * closes the dropdown\n   */\n  closeDropdown(): void {\n    this.opened = false;\n    this.overlayRef?.detach();\n    this.data = [];\n  }\n\n  /**\n   *\n   * @param item item to select\n   * if item property disabled is set to true, selection will be disabled\n   * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n   */\n  selectData(item: IListData, effectedFromOutside = true): void {\n    if (item.disabled) {\n      return;\n    }\n    this.itemSelected.emit(item)\n    if (!this.multi) {\n      this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n      this.setControlValue(item);\n    } else {\n      if (!this.selections.has(item[this.uniqueKey])) {\n        this.selections.set(item[this.uniqueKey], item);\n      }\n      this.setControlValue(this.selectedItems);\n      if (!effectedFromOutside) {\n        setTimeout(() => {\n          this.input.nativeElement.focus();\n          this.input.nativeElement.scrollIntoView();\n        }, 10);\n      }\n      this.searchInput.patchValue(\"\");\n      this.data = [];\n    }\n    this.closeDropdown();\n  }\n\n  /**\n   *\n   * @param item remove item from selected list\n   */\n  removeItem(item: IListData): void {\n    this.itemRemoved.emit(item)\n    this.selections.delete(item[this.uniqueKey]);\n    this.setControlValue(this.selectedItems);\n    // tslint:disable-next-line\n    this.input[\"nativeElement\"].focus();\n  }\n\n  private setControlValue(value: IListData): void {\n    this.onSelect.emit(value);\n    this.control?.patchValue(value, { emitEvent: false });\n  }\n\n  /**\n   * @returns list of selected items\n   */\n  get selectedItems(): Array<IListData> {\n    return Array.from(this.selections.values());\n  }\n\n  removeInputValue() {\n    this.searchInput.reset();\n    this.data = [];\n    this.clear.emit(true);\n  }\n  defaultCall(): void {\n    if (this.minInputLength === -1 && this.httpStream) {\n      this.loading = true;\n      this.error = false;\n      if(!this.overlayRef?.hasAttached())\n        this.openDropdown(this.dd, this.origin.nativeElement);\n      this.defaultCallSubscription = this.httpStream(this.searchInput.value || '').subscribe(list => {\n        this.loading = false;\n        this.data = list;\n        if (!this.overlayRef?.hasAttached() && this.data?.length > 0) {\n          this.openDropdown(this.dd, this.origin.nativeElement);\n        }\n      }, error => {\n        this.loading = false;\n        this.error = true;\n      });\n    }\n  }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_ngZone","_this","this","size","placeholder","debounceTime","minInputLength","multi","disableCopyPaste","onSelect","EventEmitter","searchInput","FormControl","data","opened","loading","error","selections","Map","searchQueryChange","clear","itemSelected","itemRemoved","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","tap","val","emit","distinctUntilChanged","subscribe","res","run","length","closeDropdown","httpStream","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","list","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","defaultCallSubscription","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","displayKey","emitEvent","removeItem","delete","Object","defineProperty","Array","from","removeInputValue","reset","defaultCall","Component","args","selector","Overlay","ViewContainerRef","NgZone","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","LoaderModule","exports"],"mappings":"k5BAiCE,SAAAA,EAAoBC,EAA0BC,EAA4CC,GAA1F,IAAAC,EAAAC,KAAoBA,KAAAJ,QAAAA,EAA0BI,KAAAH,iBAAAA,EAA4CG,KAAAF,QAAAA,EAEjFE,KAAAC,KAAoB,KAIpBD,KAAAE,YAAc,SACdF,KAAAG,aAAe,IACfH,KAAAI,eAAiB,EACjBJ,KAAAK,OAAQ,EAKRL,KAAAM,kBAA4B,EAS3BN,KAAAO,SAAkD,IAAIC,EAAAA,cAAa,GAC7ER,KAAAS,YAA2B,IAAIC,EAAAA,YAC/BV,KAAAW,KAAoB,GACpBX,KAAAY,QAAS,EACTZ,KAAAa,SAAmB,EACnBb,KAAAc,OAAiB,EAERd,KAAAe,WAA+B,IAAIC,IAMlChB,KAAAiB,kBAAoB,IAAIT,EAAAA,aACxBR,KAAAkB,MAA+B,IAAIV,EAAAA,cAAa,GAChDR,KAAAmB,aAAe,IAAIX,EAAAA,aACnBR,KAAAoB,YAAc,IAAIZ,EAAAA,aA6DpBR,KAAAqB,qBAAuB,SAACC,GAC9BA,EAAOC,SAAQ,SAAAC,GACbzB,EAAK0B,WAAWD,GAAI,cA9DxB7B,EAAA+B,UAAAC,SAAA,WAAA,QAAA5B,EAAAC,KACE,GAAIA,KAAKK,QAAUL,KAAK4B,UACtB,MAAM,IAAIC,MAAM,uCAEd7B,KAAK8B,UACP9B,KAAKS,YAAYsB,UAEnB/B,KAAKgC,mBAAqBhC,KAAKS,YAAYwB,aACxCC,KAECC,EAAAA,KAAI,SAACC,GAAQ,OAAArC,EAAKkB,kBAAkBoB,KAAKD,MACzCjC,EAAAA,aAAaH,KAAKG,cAClBmC,EAAAA,wBAEDC,WAAU,SAAAC,GACTzC,EAAKD,QAAQ2C,KAAI,kBACXD,MAAAA,OAAG,EAAHA,EAAKE,QAAS3C,EAAKK,kBAAmBoC,MAAAA,OAAG,EAAHA,EAAKE,QAC7C3C,EAAK4C,iBAEIH,MAAAA,OAAG,EAAHA,EAAKE,QAAS3C,EAAKK,gBAAkBL,EAAK6C,aACnD7C,EAAKc,SAAU,EACfd,EAAKe,OAAQ,GACM,QAAhB+B,EAAC9C,EAAK+C,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,gBACnBhD,EAAKiD,aAAajD,EAAKkD,GAAIlD,EAAKmD,OAAOC,eACzCpD,EAAK6C,WAAWJ,GAAKD,WAAU,SAAAa,SAC7BrD,EAAKc,SAAU,EACfd,EAAKY,KAAOyC,IACQ,QAAhBP,EAAC9C,EAAK+C,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,gBAAiBK,EAAKV,OAAS,GACnD3C,EAAKiD,aAAajD,EAAKkD,GAAIlD,EAAKmD,OAAOC,kBAExC,SAAArC,GACDf,EAAKc,SAAU,EACfd,EAAKe,OAAQ,aAKP,QAAhB+B,EAAI7C,KAAKqD,eAAO,IAAAR,OAAA,EAAAA,EAAES,QAChBtD,KAAKqB,qBAAqBrB,KAAKqD,QAAQC,OAEzCtD,KAAKuD,oBAAkC,QAAfC,EAAGxD,KAAKqD,eAAO,IAAAG,OAAA,EAAAA,EAAEvB,aAAaM,UAAUvC,KAAKqB,uBAGvE1B,EAAA+B,UAAA+B,YAAA,SAAYC,SACNA,IAA+B,QAAxBb,EAAIa,MAAAA,OAAO,EAAPA,EAASC,mBAAW,IAAAd,OAAA,EAAAA,EAAEe,eACnC5D,KAAKS,YAAYoD,WAAWH,EAAQC,YAAYC,cAE9CF,GAAWA,EAAQ5B,WACrB9B,KAAKS,YAAYqD,SACb9D,KAAK8B,UACP9B,KAAKS,YAAYsB,YAKvBpC,EAAA+B,UAAAqC,YAAA,mBACyB,QAAvBlB,EAAA7C,KAAKgC,0BAAkB,IAAAa,GAAAA,EAAEmB,cACG,QAA5BR,EAAAxD,KAAKiE,+BAAuB,IAAAT,GAAAA,EAAEQ,eAUxBrE,EAAA+B,UAAAsB,aAAA,SAAakB,EAAgChB,GAA7C,IAAAnD,EAAAC,KACAmE,EAAmBnE,KAAKJ,QAC3BwE,WACAC,oBAAoBnB,GACpBoB,cAAc,CACb,IAAIC,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,UAAY,CAAEC,SAAU,QAASC,SAAU,QACnG,IAAIJ,EAAAA,uBAAuB,CAAEC,QAAS,QAASC,QAAS,OAAS,CAAEC,SAAU,QAASC,SAAU,aAEjGC,UAAS,GAENC,EAAU,IAAIC,EAAAA,cAAc,CAChCC,aAAa,EACbC,cAAe,mCACfC,eAAgBjF,KAAKJ,QAAQsF,iBAAiBC,aAC9ChB,iBAAgBA,EAChBiB,MAAOlC,EAAOmC,cAEhBrF,KAAK8C,WAAa9C,KAAKJ,QAAQ0F,OAAOT,GACtC7E,KAAK8C,WAAWyC,OAAO,IAAIC,EAAAA,eAAetB,EAAUlE,KAAKH,mBACzDG,KAAK8C,WAAW2C,gBAAgBlD,WAAU,SAAAC,GACxCzC,EAAK4C,oBAOThD,EAAA+B,UAAAiB,cAAA,iBACE3C,KAAKY,QAAS,EACC,QAAfiC,EAAA7C,KAAK8C,kBAAU,IAAAD,GAAAA,EAAE6C,SACjB1F,KAAKW,KAAO,IASdhB,EAAA+B,UAAAD,WAAA,SAAWkE,EAAiBC,GAA5B,IAAA7F,EAAAC,UAA4B,IAAA4F,IAAAA,GAAA,GACtBD,EAAK7D,WAGT9B,KAAKmB,aAAakB,KAAKsD,GAClB3F,KAAKK,OAIHL,KAAKe,WAAW8E,IAAIF,EAAK3F,KAAK4B,aACjC5B,KAAKe,WAAW+E,IAAIH,EAAK3F,KAAK4B,WAAY+D,GAE5C3F,KAAK+F,gBAAgB/F,KAAKgG,eACrBJ,GACHK,YAAW,WACTlG,EAAKmG,MAAM/C,cAAcgD,QACzBpG,EAAKmG,MAAM/C,cAAciD,mBACxB,IAELpG,KAAKS,YAAYoD,WAAW,IAC5B7D,KAAKW,KAAO,KAdZX,KAAKS,YAAYoD,WAAW8B,EAAK3F,KAAKqG,YAAa,CAAEC,WAAW,IAChEtG,KAAK+F,gBAAgBJ,IAevB3F,KAAK2C,kBAOPhD,EAAA+B,UAAA6E,WAAA,SAAWZ,GACT3F,KAAKoB,YAAYiB,KAAKsD,GACtB3F,KAAKe,WAAWyF,OAAOb,EAAK3F,KAAK4B,YACjC5B,KAAK+F,gBAAgB/F,KAAKgG,eAE1BhG,KAAKkG,MAAqB,cAAEC,SAGtBxG,EAAA+B,UAAAqE,gBAAA,SAAgBzC,SACtBtD,KAAKO,SAAS8B,KAAKiB,GACP,QAAZT,EAAA7C,KAAKqD,eAAO,IAAAR,GAAAA,EAAEgB,WAAWP,EAAO,CAAEgD,WAAW,KAM/CG,OAAAC,eAAI/G,EAAA+B,UAAA,gBAAa,KAAjB,WACE,OAAOiF,MAAMC,KAAK5G,KAAKe,WAAWO,2CAGpC3B,EAAA+B,UAAAmF,iBAAA,WACE7G,KAAKS,YAAYqG,QACjB9G,KAAKW,KAAO,GACZX,KAAKkB,MAAMmB,MAAK,IAElB1C,EAAA+B,UAAAqF,YAAA,WAAA,MAAAhH,EAAAC,MAC+B,IAAzBA,KAAKI,gBAAyBJ,KAAK4C,aACrC5C,KAAKa,SAAU,EACfb,KAAKc,OAAQ,GACM,QAAhB+B,EAAC7C,KAAK8C,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,gBACnB/C,KAAKgD,aAAahD,KAAKiD,GAAIjD,KAAKkD,OAAOC,eACzCnD,KAAKiE,wBAA0BjE,KAAK4C,WAAW5C,KAAKS,YAAY6C,OAAS,IAAIf,WAAU,SAAAa,WACrFrD,EAAKc,SAAU,EACfd,EAAKY,KAAOyC,IACQ,QAAhBP,EAAC9C,EAAK+C,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,iBAA0B,QAATS,EAAAzD,EAAKY,YAAI,IAAA6C,OAAA,EAAAA,EAAEd,QAAS,GACzD3C,EAAKiD,aAAajD,EAAKkD,GAAIlD,EAAKmD,OAAOC,kBAExC,SAAArC,GACDf,EAAKc,SAAU,EACfd,EAAKe,OAAQ,gCA5NpBkG,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,4BACVhD,SAAA,4lLA7B+BiD,EAAAA,eAkB/BC,EAAAA,wBARAC,EAAAA,0CAwBCC,EAAAA,oBACAA,EAAAA,0BACAA,EAAAA,0BACAA,EAAAA,mCACAA,EAAAA,2BACAA,EAAAA,4BACAA,EAAAA,8BACAA,EAAAA,qBACAA,EAAAA,yBACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,wBACAA,EAAAA,gCACAA,EAAAA,sBACAC,EAAAA,UAASN,KAAA,CAAC,QAAS,CAAEO,QAAQ,mBAC7BD,EAAAA,UAASN,KAAA,CAAC,QAAS,CAAEO,QAAQ,gBAC7BD,EAAAA,UAASN,KAAA,CAAC,KAAM,CAAEO,QAAQ,wBAC1BC,EAAAA,aAAYR,KAAA,CAAC,gBAAiB,CAAEO,QAAQ,0BAExCC,EAAAA,aAAYR,KAAA,CAAC,oBAAqB,CAAEO,QAAQ,sBAG5CE,EAAAA,2BAOAJ,EAAAA,2BAKAA,EAAAA,iCACAI,EAAAA,sBACAA,EAAAA,6BACAA,EAAAA,4BACAA,EAAAA,gBC5DH,iCALCC,EAAAA,SAAQV,KAAA,CAAC,CACRW,aAAc,CAACjI,GACfkI,QAAS,CAACC,EAAAA,aAAcC,EAAAA,cAAeC,EAAAA,oBAAqBC,EAAAA,YAAaC,EAAAA,cACzEC,QAAS,CAACxI","sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n  AfterViewInit,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter, tap } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n  selector: \"mis-async-search-dropdown\",\n  templateUrl: \"./async-dropdown.component.html\",\n  styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef, private _ngZone: NgZone) { }\n  @Input() height;\n  @Input() size: 'md' | 'sm' = 'md'\n  @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n  @Input() displayKey!: string; // string to show value in list\n  @Input() secondaryDisplayKey!: string; // string to display secondary value\n  @Input() placeholder = \"Select\"; // placeholder for input\n  @Input() debounceTime = 400; // wait time till which API call is paused\n  @Input() minInputLength = 2; // min length after which API call is made\n  @Input() multi = false; // maintain a list or emit value\n  @Input() uniqueKey: string; // for identifying unique values\n  @Input() control: AbstractControl | null; // form control for reactive forms\n  @Input() disabled: boolean; // disable actions on component\n  @Input() readonly: boolean; // make component readonly\n  @Input() disableCopyPaste: boolean = false;\n  @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n  @ViewChild(\"input\", { static: false }) input: ElementRef;\n  @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n  @ContentChild(\"misCustomItem\", { static: false })\n  customItem: TemplateRef<Element>;\n  @ContentChild(\"asyncCustomLoader\", { static: false})\n  customLoader: TemplateRef<Element>;\n  // tslint:disable-next-line\n  @Output() onSelect: EventEmitter<IListData | IListData[]> = new EventEmitter(true); // emit selected values\n  searchInput: FormControl = new FormControl();\n  data: IListData[] = [];\n  opened = false;\n  loading: boolean = false;\n  error: boolean = false;\n  // tslint:disable-next-line\n  @Input() selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private defaultCallSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() searchQueryChange = new EventEmitter<string>()\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n  @Output() itemSelected = new EventEmitter<IListData>()\n  @Output() itemRemoved = new EventEmitter<IListData>()\n  ngOnInit(): void {\n    if (this.multi && !this.uniqueKey) {\n      throw new Error(\"[uniqueKey] required in multi mode.\");\n    }\n    if (this.disabled) {\n      this.searchInput.disable();\n    }\n    this.searchSubscription = this.searchInput.valueChanges\n      .pipe(\n        // filter(val => val && val.length >= this.minInputLength),\n        tap((val) => this.searchQueryChange.emit(val)),\n        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        this._ngZone.run(() => {\n          if (res?.length < this.minInputLength || !res?.length) {\n            this.closeDropdown();\n            return;\n          } else if (res?.length > this.minInputLength && this.httpStream) {\n            this.loading = true;\n            this.error = false;\n            if(!this.overlayRef?.hasAttached())\n              this.openDropdown(this.dd, this.origin.nativeElement);\n            this.httpStream(res).subscribe(list => {\n              this.loading = false;\n              this.data = list;\n              if (!this.overlayRef?.hasAttached() && list.length > 0) {\n                this.openDropdown(this.dd, this.origin.nativeElement);\n              }\n            }, error => {\n              this.loading = false;\n              this.error = true;\n            });\n          }\n        })\n      });\n    if (this.control?.value) {\n      this.handleControlChanges(this.control.value);\n    }\n    this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes && changes?.searchValue?.currentValue) {\n      this.searchInput.patchValue(changes.searchValue.currentValue);\n    }\n    if (changes && changes.disabled) {\n      this.searchInput.enable();\n      if (this.disabled) {\n        this.searchInput.disable();\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.searchSubscription?.unsubscribe();\n    this.defaultCallSubscription?.unsubscribe();\n  }\n\n  private handleControlChanges = (values: IListData[]) => {\n    values.forEach(el => {\n      this.selectData(el, true);\n    });\n    // tslint:disable-next-line\n  };\n\n  private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(origin)\n      .withPositions([\n        new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n        new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n      ])\n      .withPush(true);\n\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    this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n    this.overlayRef.backdropClick().subscribe(res => {\n      this.closeDropdown();\n    });\n  }\n\n  /**\n   * closes the dropdown\n   */\n  closeDropdown(): void {\n    this.opened = false;\n    this.overlayRef?.detach();\n    this.data = [];\n  }\n\n  /**\n   *\n   * @param item item to select\n   * if item property disabled is set to true, selection will be disabled\n   * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n   */\n  selectData(item: IListData, effectedFromOutside = true): void {\n    if (item.disabled) {\n      return;\n    }\n    this.itemSelected.emit(item)\n    if (!this.multi) {\n      this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n      this.setControlValue(item);\n    } else {\n      if (!this.selections.has(item[this.uniqueKey])) {\n        this.selections.set(item[this.uniqueKey], item);\n      }\n      this.setControlValue(this.selectedItems);\n      if (!effectedFromOutside) {\n        setTimeout(() => {\n          this.input.nativeElement.focus();\n          this.input.nativeElement.scrollIntoView();\n        }, 10);\n      }\n      this.searchInput.patchValue(\"\");\n      this.data = [];\n    }\n    this.closeDropdown();\n  }\n\n  /**\n   *\n   * @param item remove item from selected list\n   */\n  removeItem(item: IListData): void {\n    this.itemRemoved.emit(item)\n    this.selections.delete(item[this.uniqueKey]);\n    this.setControlValue(this.selectedItems);\n    // tslint:disable-next-line\n    this.input[\"nativeElement\"].focus();\n  }\n\n  private setControlValue(value: IListData): void {\n    this.onSelect.emit(value);\n    this.control?.patchValue(value, { emitEvent: false });\n  }\n\n  /**\n   * @returns list of selected items\n   */\n  get selectedItems(): Array<IListData> {\n    return Array.from(this.selections.values());\n  }\n\n  removeInputValue() {\n    this.searchInput.reset();\n    this.data = [];\n    this.clear.emit(true);\n  }\n  defaultCall(): void {\n    if (this.minInputLength === -1 && this.httpStream) {\n      this.loading = true;\n      this.error = false;\n      if(!this.overlayRef?.hasAttached())\n        this.openDropdown(this.dd, this.origin.nativeElement);\n      this.defaultCallSubscription = this.httpStream(this.searchInput.value || '').subscribe(list => {\n        this.loading = false;\n        this.data = list;\n        if (!this.overlayRef?.hasAttached() && this.data?.length > 0) {\n          this.openDropdown(this.dd, this.origin.nativeElement);\n        }\n      }, error => {\n        this.loading = false;\n        this.error = true;\n      });\n    }\n  }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { LoaderModule } from \"mis-crystal-design-system/loader\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule, LoaderModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n"]}

package/bundles/mis-crystal-design-system-timepicker.umd.js

@@ -571,6 +571,7 @@
           this.dateAsEpoch = moment__namespace().valueOf();
           this.rangeValidity = true;
           this.showTooltip = true;
+          this.dispayToolTip = this.showTooltip;
           this.triggerChange = true;
           this.timeEmitter = new core.EventEmitter();
       }
@@ -636,6 +637,7 @@
           return moment__namespace(moment__namespace(this.dateAsEpoch).format("DD-MM-YYYY") + " " + time, "'DD-MM-YYYY' " + this.timeFormat);
       };
       TimePickerComponent.prototype.closeDropdown = function () {
+          this.dispayToolTip = false;
           this.userInputFlag = false;
           this.openStatus = false;
           if (this.timepickerDirective)
@@ -643,6 +645,7 @@
       };
       // toggle timepicker dropdown
       TimePickerComponent.prototype.openDropdown = function () {
+          this.dispayToolTip = true;
           this.openStatus = true;
       };
       TimePickerComponent.prototype.checkTimeValidity = function (time) {
@@ -775,7 +778,7 @@
   TimePickerComponent.decorators = [
       { type: core.Component, args: [{
                   selector: "mis-timepicker",
-                  template: "<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\">\n  <input\n    type=\"text\"\n    [(ngModel)]=\"chosenTime\"\n    (ngModelChange)=\"onTimeChange(chosenTime)\"\n    [ngClass]=\"{ invalid: isInvalid || !rangeValidity }\"\n    [ngStyle]=\"{ width: inputWidth }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip && (isInvalid || !rangeValidity)\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth || inputWidth }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n",
+                  template: "<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\">\n  <input\n    type=\"text\"\n    [(ngModel)]=\"chosenTime\"\n    (ngModelChange)=\"onTimeChange(chosenTime)\"\n    [ngClass]=\"{ invalid: isInvalid || !rangeValidity }\"\n    [ngStyle]=\"{ width: inputWidth }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip && (isInvalid || !rangeValidity) && dispayToolTip\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth || inputWidth }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n",
                   styles: [".h1{font-size:40px;line-height:48px}.h1,.h2{font-weight:400;letter-spacing:0}.h2{font-size:32px;line-height:40px}.h3{font-size:28px;line-height:36px}.h3,.h4{font-weight:400;letter-spacing:0}.h4{font-size:24px;line-height:32px}.h5-b{font-weight:700;letter-spacing:.25px}.h5,.h5-b{font-size:20px;line-height:28px}.h5{font-weight:400;letter-spacing:.15px}.h6-b{font-weight:700}.h6,.h6-b{font-size:16px;letter-spacing:0;line-height:24px}.h6,.p{font-weight:400}.p{font-size:16px;letter-spacing:0;line-height:180%}.h7-b{font-weight:700;letter-spacing:.25px}.h7,.h7-b{font-size:14px;line-height:20px}.h7{font-weight:400;letter-spacing:.2px}.h8-b{font-weight:700;letter-spacing:.25px}.h8,.h8-b{font-size:12px;line-height:18px}.h8{letter-spacing:.2px}.h8,.h9{font-weight:400}.h9{font-size:10px;letter-spacing:0;line-height:15px}.btn-lg-b{font-weight:700;letter-spacing:.5px}.btn-lg,.btn-lg-b{font-size:16px;line-height:24px}.btn-lg{font-weight:400;letter-spacing:.2px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;line-height:24px}.btn-link,.display-1{font-weight:400;letter-spacing:0}.display-1{font-size:48px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:active,input:focus{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}"]
               },] }
   ];