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

package/action-list/action-list.component.d.ts

@@ -1,6 +1,5 @@
 import { Overlay } from "@angular/cdk/overlay";
 import { ElementRef, EventEmitter, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
-import * as i0 from "@angular/core";
 export declare class ActionListComponent implements OnInit {
     private eRef;
     private overlay;
@@ -31,8 +30,6 @@ export declare class ActionListComponent implements OnInit {
     selectItem(item: ActionItem): void;
     onHover(item: ActionItem, isHovered: any, element?: any): void;
     onCancel(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActionListComponent, "mis-action-list", never, { "data": "data"; "height": "height"; "width": "width"; "label": "label"; "dropdownListHeight": "dropdownListHeight"; "dropdownListWidth": "dropdownListWidth"; "dropdownListPosition": "dropdownListPosition"; "searchEnabled": "searchEnabled"; "noDataMessage": "noDataMessage"; }, { "onChange": "onChange"; }, never, never, false>;
 }
 export interface ActionItems {
     label: ActionItemLabel | string;

package/action-list/action-list.module.d.ts

@@ -1,13 +1,4 @@
 import { ModuleWithProviders } from "@angular/core";
-import * as i0 from "@angular/core";
-import * as i1 from "./action-list.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@angular/cdk/overlay";
-import * as i5 from "mis-crystal-design-system/checkbox";
 export declare class ActionListModule {
     static forRoot(): ModuleWithProviders<ActionListModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActionListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ActionListModule, [typeof i1.ActionListComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.OverlayModule, typeof i5.CheckboxModule], [typeof i1.ActionListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ActionListModule>;
 }

package/action-list/mis-crystal-design-system-action-list.d.ts

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

package/action-list/mis-crystal-design-system-action-list.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"ActionListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mis-action-list","template":"<div\n  class=\"main-container\"\n  [ngStyle]=\"{\n    height: height.length > 0 ? height : '',\n    width: width.length > 0 ? width : ''\n  }\"\n>\n  <div\n    class=\"dropdown\"\n    #select\n    tabindex=\"0\"\n    (keyup.enter)=\"toggleDropdown()\"\n    (click)=\"toggleDropdown()\"\n    [ngStyle]=\"{ background: isOpen ? '#E6EBF7' : '' }\"\n  >\n    <div class=\"label\">\n      <p class=\"text\">\n        {{ label }}\n      </p>\n      <p *ngIf=\"selectedItems?.length > 1\" class=\"count\">+{{ selectedItems?.length - 1 }}</p>\n    </div>\n    <svg\n      class=\"handle\"\n      [ngStyle]=\"{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z\"\n        fill=\"#181F33\"\n      />\n    </svg>\n  </div>\n</div>\n\n<ng-template #popupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        #singleItem\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item?.disabled }\"\n        (mouseenter)=\"onHover(item, true, singleItem)\"\n        *ngFor=\"let item of data\"\n      >\n        <div class=\"label\" [ngStyle]=\"{ width: item?.icon ? '90%' : '100%' }\">\n          <span>{{ item?.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item?.icon\">\n          <img class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #subPopupContainer>\n  <div\n    class=\"popup-container\"\n    [ngStyle]=\"{\n      height: dropdownListHeight,\n      width: dropdownListWidth\n    }\"\n  >\n    <div class=\"items\">\n      <div\n        class=\"item\"\n        tabindex=\"0\"\n        [ngClass]=\"{ 'item-disabled': item.disabled }\"\n        (click)=\"!item.disabled && selectItem(item)\"\n        *ngFor=\"let item of subItems\"\n      >\n        <div class=\"checkbox-container\" *ngIf=\"item.type === 'MULTIPLE'\">\n          <mis-checkbox [disabled]=\"item.disabled\" [checked]=\"item.checked\"></mis-checkbox>\n        </div>\n        <div class=\"label\" [ngStyle]=\"{ width: item.icon ? '90%' : '100%' }\">\n          <span>{{ item.label }}</span>\n        </div>\n        <div class=\"icon-container\" *ngIf=\"item.icon || item.checked\">\n          <img *ngIf=\"!item.checked\" class=\"icon\" [src]=\"item.icon\" alt=\"no img\" />\n          <ng-container *ngIf=\"item.type === 'SINGLE' && item.checked\">\n            <ng-container *ngTemplateOutlet=\"tickIcon\"></ng-container>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"noData\" *ngIf=\"data.length === 0\">\n        {{ noDataMessage || \"No results\" }}\n      </div>\n    </div>\n  </div>\n</ng-template>\n<ng-template #tickIcon>\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.47697 14.8237L3.49922 10.5519C3.2776 10.3169 3.2776 9.93437 3.49922 9.69684L4.30273 8.84298C4.52434 8.60795 4.88462 8.60795 5.10623 8.84298L7.87929 11.8334L14.0607 5.17627C14.2823 4.94124 14.6426 4.94124 14.8642 5.17627L15.6677 6.03138C15.8894 6.26641 15.8894 6.65021 15.6677 6.88399L8.28048 14.8237C8.05886 15.0588 7.69859 15.0588 7.47697 14.8237Z\"\n      fill=\"#181F33\"\n    />\n  </svg>\n</ng-template>\n","styles":[".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:4px 12px}.main-container .dropdown:focus-visible,.main-container .dropdown:hover{background-color:#f5f7fc;outline:none}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:16px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{width:24px;height:24px;background-color:#e0e0e0;border-radius:50%;padding:2px 4px;margin:0 0 0 8px;font-style:normal;font-weight:400;box-sizing:border-box;font-size:14px;line-height:20px;text-align:center;letter-spacing:.2px;color:#181f33}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.popup-container{width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;justify-content:space-between}.popup-container::-webkit-scrollbar{width:0;height:0}.popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll}.popup-container .items::-webkit-scrollbar{width:5px;height:0}.popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.popup-container .items .noData{justify-content:center;font-style:normal;font-weight:400;font-size:16px;line-height:20px}.popup-container .items .item,.popup-container .items .noData{display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.popup-container .items .item{cursor:pointer;justify-content:flex-start;gap:10px;padding:8px 12px;border-radius:6px;height:auto}.popup-container .items .item:focus-visible,.popup-container .items .item:hover{background-color:#f5f7fc;outline:none}.popup-container .items .item .label{width:100%;line-height:20px;font-size:16px;font-style:normal;font-weight:400;text-overflow:ellipsis;overflow:hidden}.popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.popup-container .items .item .icon-container .icon{width:20px;height:20px}.popup-container .items .item-disabled{cursor:not-allowed}.popup-container .items .item-disabled:focus-visible,.popup-container .items .item-disabled:hover{background-color:transparent;outline:none}.popup-container .items .item-disabled .label{color:#929dab;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"dropdownListPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"noDataMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":3}}]}],"selectElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":3},"arguments":["select",{"static":false}]}]}],"popupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":3},"arguments":["popupContainer",{"static":false}]}]}],"subPopupContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":31,"character":3},"arguments":["subPopupContainer",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":28},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":35,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":35,"character":92}]}],"ngOnInit":[{"__symbolic":"method"}],"filterByValue":[{"__symbolic":"method"}],"toggleDropdown":[{"__symbolic":"method"}],"openDropdown":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"onHover":[{"__symbolic":"method"}],"onCancel":[{"__symbolic":"method"}]}},"ActionItem":{"__symbolic":"interface"},"ActionListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ActionListComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":26},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":9,"character":39},{"__symbolic":"reference","module":"mis-crystal-design-system/checkbox","name":"CheckboxModule","line":9,"character":54}],"exports":[{"__symbolic":"reference","name":"ActionListComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"ActionListModule"},"providers":[]}}}}},"origins":{"ActionListComponent":"./action-list.component","ActionItem":"./action-list.component","ActionListModule":"./action-list.module"},"importAs":"mis-crystal-design-system/action-list"}

package/action-list/package.json

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

package/analytics/analytics.module.d.ts

@@ -1,8 +1,4 @@
 import { ModuleWithProviders } from "@angular/core";
-import * as i0 from "@angular/core";
 export declare class AnalyticsModule {
     static forRoot(): ModuleWithProviders<AnalyticsModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AnalyticsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AnalyticsModule, never, never, never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AnalyticsModule>;
 }

package/analytics/analytics.service.d.ts

@@ -1,5 +1,4 @@
 import { Renderer2 } from "@angular/core";
-import * as i0 from "@angular/core";
 export declare class AnalyticsService {
     private document;
     private scriptLoaded;
@@ -9,6 +8,4 @@ export declare class AnalyticsService {
     private handlePendingEvents;
     send(eventAction: string, event_category: string, event_label?: string, event_value?: string, force?: boolean): void;
     setIdentity(identifier: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AnalyticsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<AnalyticsService>;
 }

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

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

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

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"AnalyticsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":11,"character":15},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":11,"character":22}]}]],"parameters":[{"__symbolic":"reference","name":"any"}]}],"insertScript":[{"__symbolic":"method"}],"handlePendingEvents":[{"__symbolic":"method"}],"send":[{"__symbolic":"method"}],"setIdentity":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"AnalyticsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1}}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AnalyticsModule"},"providers":[{"__symbolic":"reference","name":"AnalyticsService"}]}}}}},"origins":{"AnalyticsService":"./analytics.service","AnalyticsModule":"./analytics.module"},"importAs":"mis-crystal-design-system/analytics"}

package/analytics/package.json

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

package/async-search-dropdown/async-dropdown.component.d.ts

@@ -1,8 +1,7 @@
 import { Overlay } from "@angular/cdk/overlay";
 import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";
-import { AbstractControl, UntypedFormControl } from "@angular/forms";
+import { AbstractControl, FormControl } from "@angular/forms";
 import { Observable, Subscription } from "rxjs";
-import * as i0 from "@angular/core";
 declare type IListData = any;
 export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {
     private overlay;
@@ -28,7 +27,7 @@ export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDest
     customItem: TemplateRef<Element>;
     customLoader: TemplateRef<Element>;
     onSelect: EventEmitter<IListData | IListData[]>;
-    searchInput: UntypedFormControl;
+    searchInput: FormControl;
     data: IListData[];
     opened: boolean;
     loading: boolean;
@@ -69,7 +68,5 @@ export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDest
      */
     get selectedItems(): Array<IListData>;
     removeInputValue(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AsyncDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AsyncDropdownComponent, "mis-async-search-dropdown", never, { "height": "height"; "size": "size"; "httpStream": "httpStream"; "displayKey": "displayKey"; "secondaryDisplayKey": "secondaryDisplayKey"; "placeholder": "placeholder"; "debounceTime": "debounceTime"; "minInputLength": "minInputLength"; "multi": "multi"; "uniqueKey": "uniqueKey"; "control": "control"; "disabled": "disabled"; "readonly": "readonly"; "searchValue": "searchValue"; }, { "onSelect": "onSelect"; "searchQueryChange": "searchQueryChange"; "clear": "clear"; "itemSelected": "itemSelected"; "itemRemoved": "itemRemoved"; }, ["customItem", "customLoader"], never, false>;
 }
 export {};

package/async-search-dropdown/async-dropdown.module.d.ts

@@ -1,11 +1,2 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./async-dropdown.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/overlay";
-import * as i4 from "@angular/forms";
-import * as i5 from "mis-crystal-design-system/loader";
 export declare class AsyncDropdownModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AsyncDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AsyncDropdownModule, [typeof i1.AsyncDropdownComponent], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.ReactiveFormsModule, typeof i4.FormsModule, typeof i5.LoaderModule], [typeof i1.AsyncDropdownComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AsyncDropdownModule>;
 }

package/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.d.ts

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

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

@@ -0,0 +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 [ngClass]=\"{'ip-md': size === 'md', 'ip-sm': size === 'sm'}\" tabindex=\"0\" type=\"text\" class=\"black-text h6\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" />\n    <div class=\"ic-navigation-cancel-24 croos-icon\" *ngIf=\"searchInput?.value?.length\" (click)=\"removeInputValue()\"></div>\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" [ngStyle]=\"{'max-height':height}\"  [ngClass]=\"{'dd-list-pd':data.length === 0}\" >\n    <ng-container *ngIf=\"loading\">\n      <ng-container\n        *ngIf=\"customLoader; else defaultLoader\"\n        [ngTemplateOutlet]=\"customLoader\"\n      ></ng-container>\n      <ng-template #defaultLoader>\n        <div class=\"status-container\" *ngIf=\"loading && !customLoader\">\n          <mis-loader [mobileView]=\"true\"></mis-loader>\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"error\">\n      <div class=\"status-container\">\n        <p>Unknown error has occurred, <br> Please try again later.</p>\n      </div>\n    </ng-container>\n    <div *ngIf=\"!loading && !error && data.length > 0\">\n      <ng-container *ngFor=\"let item of data\">\n        <div (click)=\"selectData(item, false)\">\n          <ng-container\n            *ngIf=\"customItem; else standardItem\"\n            [ngTemplateOutlet]=\"customItem\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          ></ng-container>\n          <ng-template #standardItem>\n            <div class=\"item\">\n              <div class=\"value\">\n                <div class=\"primary\">\n                  {{ item[displayKey] }}\n                </div>\n                <div class=\"secondary\">\n                  {{ item[secondaryDisplayKey] }}\n                </div>\n              </div>\n            </div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"!loading && !error && data.length === 0 && searchInput.value\">\n      <div class=\"data-not-found\">No Data Available</div>\n  </div>\n  </div>\n</ng-template>\n","styles":[".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{box-sizing:border-box;outline:none;padding-left:40px;padding-right:24px;background-color:transparent;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;line-height:24px;height:24px;left:8px;padding-top:2px}.search-input .croos-icon,.search-input span{position:absolute;top:50%;transform:translateY(-50%)}.search-input .croos-icon{font-size:16px;width:24px;line-height:16px;height:16px;right:0}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}.dd-list .data-not-found{display:flex;justify-content:center;align-items:center;font-size:16px;padding:8px}.dd-list-pd{padding:unset}.chip{display:inline-flex;align-items:center;background:#e0e0e0;cursor:default}.chip span{color:#181f33}.chip-md{border-radius:16px;padding:4px 12px}.chip-sm{border-radius:6px;padding:4px 8px;text-transform:uppercase}.ip-md{padding-top:8px;padding-bottom:8px}.ip-sm{padding-top:3px;padding-bottom:3px}.status-container{display:flex;justify-content:center;align-items:center;height:128px}.status-container p{text-align:center}::ng-deep #spinner{position:relative!important}"]}]}],"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}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":3},"arguments":["ddBtn",{"static":false}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":3},"arguments":["input",{"static":false}]}]}],"dd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":49,"character":3},"arguments":["dd",{"static":false}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":50,"character":3},"arguments":["misCustomItem",{"static":false}]}]}],"customLoader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":52,"character":3},"arguments":["asyncCustomLoader",{"static":false}]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"searchValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}}]}],"searchQueryChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":3}}]}],"itemSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"itemRemoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"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"}]}},"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/async-search-dropdown/package.json

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