mis-crystal-design-system 2.7.9 → 2.8.1

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

@@ -1,9 +1,9 @@
 import { Overlay } from "@angular/cdk/overlay";
-import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";
 import { AbstractControl, FormControl } from "@angular/forms";
 import { Observable, Subscription } from "rxjs";
 declare type IListData = any;
-export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {
+export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
     private overlay;
     private viewContainerRef;
     constructor(overlay: Overlay, viewContainerRef: ViewContainerRef);
@@ -33,9 +33,11 @@ export declare class AsyncDropdownComponent implements OnInit, OnChanges, OnDest
     controlSubscription: Subscription | undefined;
     searchValue: any;
     clear: EventEmitter<boolean>;
+    elementRef: EventEmitter<ElementRef<any>>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    ngAfterViewInit(): void;
     private handleControlChanges;
     private openDropdown;
     /**

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":24,"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    <span *ngFor=\"let item of selectedItems\" (click)=\"removeItem(item)\">{{ item[displayKey] }} <span class=\"ic-navigation-cancel-24\"></span> </span>\n  </div>\n  <div class=\"search-input\">\n    <span class=\"ic-action-search-24\"></span>\n    <input tabindex=\"0\" type=\"text\" class=\"black-text\" #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    <div *ngIf=\"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=\"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 .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.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{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;width:24;line-height:24px;height:24px;left:10px}.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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":30,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":30,"character":66}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"httpStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"secondaryDisplayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"debounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"minInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"uniqueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["ddBtn",{"static":false}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":["input",{"static":false}]}]}],"dd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["dd",{"static":false}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":46,"character":3},"arguments":["misCustomItem",{"static":false}]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"searchValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":59,"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":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":8,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":8,"character":41},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":62}],"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":25,"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    <span *ngFor=\"let item of selectedItems\" (click)=\"removeItem(item)\">{{ item[displayKey] }} <span class=\"ic-navigation-cancel-24\"></span> </span>\n  </div>\n  <div class=\"search-input\">\n    <span class=\"ic-action-search-24\"></span>\n    <input tabindex=\"0\" type=\"text\" class=\"black-text\" #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    <div *ngIf=\"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=\"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 .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.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{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;width:24;line-height:24px;height:24px;left:10px}.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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":31,"character":31},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":31,"character":66}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"httpStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"secondaryDisplayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"debounceTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"minInputLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"multi":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"uniqueKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":["ddBtn",{"static":false}]}]}],"input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["input",{"static":false}]}]}],"dd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":3},"arguments":["dd",{"static":false}]}]}],"customItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":47,"character":3},"arguments":["misCustomItem",{"static":false}]}]}],"onSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"searchValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"clear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"elementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__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":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"AsyncDropdownComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":8,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":8,"character":41},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":62}],"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

@@ -21,6 +21,7 @@
             // tslint:disable-next-line
             this.selections = new Map();
             this.clear = new core.EventEmitter(false);
+            this.elementRef = new core.EventEmitter();
             this.handleControlChanges = function (values) {
                 values.forEach(function (el) {
                     _this.selectData(el, true);
@@ -77,6 +78,9 @@
             var _a;
             (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
+        AsyncDropdownComponent.prototype.ngAfterViewInit = function () {
+            this.elementRef.emit(this.origin);
+        };
         AsyncDropdownComponent.prototype.openDropdown = function (template, origin) {
             var _this = this;
             var positionStrategy = this.overlay
@@ -203,7 +207,8 @@
         customItem: [{ type: core.ContentChild, args: ["misCustomItem", { static: false },] }],
         onSelect: [{ type: core.Output }],
         searchValue: [{ type: core.Input }],
-        clear: [{ type: core.Output }]
+        clear: [{ type: core.Output }],
+        elementRef: [{ type: core.Output }]
     };
 
     var AsyncDropdownModule = /** @class */ (function () {

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

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-async-search-dropdown.umd.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\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 } 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) { }\n  @Input() height;\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  @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  // 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  // tslint:disable-next-line\n  selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\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        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        if (res?.length < this.minInputLength) {\n          this.closeDropdown();\n          return;\n        } else if (res?.length > this.minInputLength) {\n          this.httpStream(res).subscribe(list => {\n            this.data = list;\n            if (!this.overlayRef?.hasAttached() && list.length > 0) {\n              this.openDropdown(this.dd, this.origin.nativeElement);\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  }\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    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.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}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","FormControl","debounceTime","distinctUntilChanged","ConnectionPositionPair","OverlayConfig","TemplatePortal","Component","Overlay","ViewContainerRef","Input","ViewChild","ContentChild","Output","NgModule","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule"],"mappings":"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"}
+{"version":3,"file":"mis-crystal-design-system-async-search-dropdown.umd.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"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  Input,\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 } 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, AfterViewInit {\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) { }\n  @Input() height;\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  @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  // 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  // tslint:disable-next-line\n  selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n  @Output() elementRef = new EventEmitter<ElementRef>()\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        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        if (res?.length < this.minInputLength) {\n          this.closeDropdown();\n          return;\n        } else if (res?.length > this.minInputLength) {\n          this.httpStream(res).subscribe(list => {\n            this.data = list;\n            if (!this.overlayRef?.hasAttached() && list.length > 0) {\n              this.openDropdown(this.dd, this.origin.nativeElement);\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  }\n  ngAfterViewInit(): void {\n    this.elementRef.emit(this.origin)\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    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.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}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","FormControl","debounceTime","distinctUntilChanged","ConnectionPositionPair","OverlayConfig","TemplatePortal","Component","Overlay","ViewContainerRef","Input","ViewChild","ContentChild","Output","NgModule","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule"],"mappings":"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"}

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")):"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"],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)}(this,(function(e,t,n,i,o,s,a){"use strict";var r=function(){function e(e,t){var n=this;this.overlay=e,this.viewContainerRef=t,this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.selections=new Map,this.clear=new i.EventEmitter(!1),this.handleControlChanges=function(e){e.forEach((function(e){n.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.debounceTime(this.debounceTime),s.distinctUntilChanged()).subscribe((function(e){(null==e?void 0:e.length)<n.minInputLength?n.closeDropdown():(null==e?void 0:e.length)>n.minInputLength&&n.httpStream(e).subscribe((function(e){var t;n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}))})),(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;null===(e=this.searchSubscription)||void 0===e||e.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.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.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}();r.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    <span *ngFor="let item of selectedItems" (click)="removeItem(item)">{{ item[displayKey] }} <span class="ic-navigation-cancel-24"></span> </span>\n  </div>\n  <div class="search-input">\n    <span class="ic-action-search-24"></span>\n    <input tabindex="0" type="text" class="black-text" #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    <div *ngIf="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="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 .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.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{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;width:24;line-height:24px;height:24px;left:10px}.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}"]}]}],r.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef}]},r.propDecorators={height:[{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}],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}]}],onSelect:[{type:i.Output}],searchValue:[{type:i.Input}],clear:[{type:i.Output}]};var l=function(){};l.decorators=[{type:i.NgModule,args:[{declarations:[r],imports:[a.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule],exports:[r]}]}],e.AsyncDropdownComponent=r,e.AsyncDropdownModule=l,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")):"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"],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)}(this,(function(e,t,n,i,o,s,r){"use strict";var a=function(){function e(e,t){var n=this;this.overlay=e,this.viewContainerRef=t,this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.selections=new Map,this.clear=new i.EventEmitter(!1),this.elementRef=new i.EventEmitter,this.handleControlChanges=function(e){e.forEach((function(e){n.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.debounceTime(this.debounceTime),s.distinctUntilChanged()).subscribe((function(e){(null==e?void 0:e.length)<n.minInputLength?n.closeDropdown():(null==e?void 0:e.length)>n.minInputLength&&n.httpStream(e).subscribe((function(e){var t;n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}))})),(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;null===(e=this.searchSubscription)||void 0===e||e.unsubscribe()},e.prototype.ngAfterViewInit=function(){this.elementRef.emit(this.origin)},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),r=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(r),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.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.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}();a.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    <span *ngFor="let item of selectedItems" (click)="removeItem(item)">{{ item[displayKey] }} <span class="ic-navigation-cancel-24"></span> </span>\n  </div>\n  <div class="search-input">\n    <span class="ic-action-search-24"></span>\n    <input tabindex="0" type="text" class="black-text" #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    <div *ngIf="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="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 .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.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{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{font-size:24px;width:24;line-height:24px;height:24px;left:10px}.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}"]}]}],a.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef}]},a.propDecorators={height:[{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}],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}]}],onSelect:[{type:i.Output}],searchValue:[{type:i.Input}],clear:[{type:i.Output}],elementRef:[{type:i.Output}]};var l=function(){};l.decorators=[{type:i.NgModule,args:[{declarations:[a],imports:[r.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule],exports:[a]}]}],e.AsyncDropdownComponent=a,e.AsyncDropdownModule=l,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","_this","this","placeholder","debounceTime","minInputLength","multi","onSelect","EventEmitter","searchInput","FormControl","data","opened","selections","Map","clear","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","distinctUntilChanged","subscribe","res","length","closeDropdown","httpStream","list","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","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","emit","Object","defineProperty","Array","from","removeInputValue","reset","Component","args","selector","Overlay","ViewContainerRef","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","exports"],"mappings":"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","sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\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 } 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) { }\n  @Input() height;\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  @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  // 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  // tslint:disable-next-line\n  selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\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        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        if (res?.length < this.minInputLength) {\n          this.closeDropdown();\n          return;\n        } else if (res?.length > this.minInputLength) {\n          this.httpStream(res).subscribe(list => {\n            this.data = list;\n            if (!this.overlayRef?.hasAttached() && list.length > 0) {\n              this.openDropdown(this.dd, this.origin.nativeElement);\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  }\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    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.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}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\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","_this","this","placeholder","debounceTime","minInputLength","multi","onSelect","EventEmitter","searchInput","FormControl","data","opened","selections","Map","clear","elementRef","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","distinctUntilChanged","subscribe","res","length","closeDropdown","httpStream","list","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","control","value","controlSubscription","_b","ngOnChanges","changes","searchValue","currentValue","patchValue","enable","ngOnDestroy","unsubscribe","ngAfterViewInit","emit","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","Component","args","selector","Overlay","ViewContainerRef","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","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  Input,\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 } 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, AfterViewInit {\n  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) { }\n  @Input() height;\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  @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  // 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  // tslint:disable-next-line\n  selections: Map<string, any> = new Map();\n  private searchSubscription: Subscription;\n  private overlayRef: OverlayRef;\n  controlSubscription: Subscription | undefined;\n  @Input() searchValue;\n  @Output() clear: EventEmitter<boolean> = new EventEmitter(false);\n  @Output() elementRef = new EventEmitter<ElementRef>()\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        debounceTime(this.debounceTime),\n        distinctUntilChanged()\n      )\n      .subscribe(res => {\n        if (res?.length < this.minInputLength) {\n          this.closeDropdown();\n          return;\n        } else if (res?.length > this.minInputLength) {\n          this.httpStream(res).subscribe(list => {\n            this.data = list;\n            if (!this.overlayRef?.hasAttached() && list.length > 0) {\n              this.openDropdown(this.dd, this.origin.nativeElement);\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  }\n  ngAfterViewInit(): void {\n    this.elementRef.emit(this.origin)\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    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.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}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n  declarations: [AsyncDropdownComponent],\n  imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n  exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n"]}

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

@@ -125,8 +125,8 @@
      */
 
     exports.ButtonComponent = ButtonComponent;
+    exports.ButtonDirective = ButtonDirective;
     exports.ButtonModule = ButtonModule;
-    exports.ɵa = ButtonDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

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

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-button.umd.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-button\",\n  templateUrl: \"./button.component.html\",\n  styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n  @Input() name: string = \"Enabled\";\n  @Input() type: \"Solid\" | \"Outline\" | \"Text\" = \"Solid\";\n  @Input() size: \"Small\" | \"Medium\" | \"Large\" | \"Small-M\" | \"Large-M\" = \"Medium\";\n  @Input() width: string = \"\";\n\n  @Input() showIcon: boolean = false;\n  @Input() iconUrl: string = \"\";\n  @Input() iconPosition: \"Left\" | \"Right\" = \"Left\";\n\n  @Input() disabled: boolean = false;\n  @Input() disableLeftBorderRadius: boolean = false;\n  @Input() disableRightBorderRadius: boolean = false;\n\n  /** Emits event when button is clicked */\n  @Output() click = new EventEmitter<any>();\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  onClick(event) {\n    this.click.emit(event);\n  }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n  selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n  @Input() type: \"primary\" | \"outline\" | \"none\" = \"none\";\n  @Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngAfterViewInit(): void {\n    this.bindTypeClass();\n    this.bindSizeClass();\n  }\n\n  private bindTypeClass(): void {\n    let className = \"\";\n    switch (this.type) {\n      case \"primary\":\n        className = \"mis-primary\";\n        break;\n      case \"outline\":\n        className = \"mis-outline\";\n        break;\n      default:\n        className = \"mis-none\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n\n  private bindSizeClass(): void {\n    let className = \"\";\n    switch (this.size) {\n      case \"lg\":\n        className = \"mis-btn-lg\";\n        break;\n      case \"sm\":\n        className = \"mis-btn-sm\";\n        break;\n      default:\n        className = \"mis-btn-md\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n  declarations: [ButtonComponent, ButtonDirective],\n  imports: [CommonModule],\n  exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n  static forRoot(): ModuleWithProviders<ButtonModule> {\n    return { ngModule: ButtonModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ButtonDirective as ɵa} from './button.directive';"],"names":["EventEmitter","Component","Input","Output","Directive","ElementRef","Renderer2","HostBinding","NgModule","CommonModule"],"mappings":";;;;;;;QAwBE;YAhBS,SAAI,GAAW,SAAS,CAAC;YACzB,SAAI,GAAiC,OAAO,CAAC;YAC7C,SAAI,GAAyD,QAAQ,CAAC;YACtE,UAAK,GAAW,EAAE,CAAC;YAEnB,aAAQ,GAAY,KAAK,CAAC;YAC1B,YAAO,GAAW,EAAE,CAAC;YACrB,iBAAY,GAAqB,MAAM,CAAC;YAExC,aAAQ,GAAY,KAAK,CAAC;YAC1B,4BAAuB,GAAY,KAAK,CAAC;YACzC,6BAAwB,GAAY,KAAK,CAAC;;YAGzC,UAAK,GAAG,IAAIA,iBAAY,EAAO,CAAC;SAE1B;QAEhB,kCAAQ,GAAR,eAAa;QAEb,iCAAO,GAAP,UAAQ,KAAK;YACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxB;;;;gBA5BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,88BAAsC;;iBAEvC;;;;uBAEEC,UAAK;uBACLA,UAAK;uBACLA,UAAK;wBACLA,UAAK;2BAELA,UAAK;0BACLA,UAAK;+BACLA,UAAK;2BAELA,UAAK;0CACLA,UAAK;2CACLA,UAAK;wBAGLC,WAAM;;;;QCZP,yBAAoB,EAAc,EAAU,QAAmB;YAA3C,OAAE,GAAF,EAAE,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YAJtD,SAAI,GAAmC,MAAM,CAAC;YAC9C,SAAI,GAAuB,IAAI,CAAC;YACnB,iBAAY,GAAG,SAAS,CAAC;SAEoB;QAEnE,yCAAe,GAAf;YACE,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR;oBACE,SAAS,GAAG,UAAU,CAAC;aAC1B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR;oBACE,SAAS,GAAG,YAAY,CAAC;aAC5B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;;;;gBA3CFC,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;iBACzB;;;gBAJkCC,eAAU;gBAAsBC,cAAS;;;uBAMzEJ,UAAK;uBACLA,UAAK;+BACLK,gBAAW,SAAC,OAAO;;;;QCEtB;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;oBAChD,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;iBAC5C;;;ICTD;;;;;;;;;;;;;;"}
+{"version":3,"file":"mis-crystal-design-system-button.umd.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n  selector: \"mis-button\",\n  templateUrl: \"./button.component.html\",\n  styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n  @Input() name: string = \"Enabled\";\n  @Input() type: \"Solid\" | \"Outline\" | \"Text\" = \"Solid\";\n  @Input() size: \"Small\" | \"Medium\" | \"Large\" | \"Small-M\" | \"Large-M\" = \"Medium\";\n  @Input() width: string = \"\";\n\n  @Input() showIcon: boolean = false;\n  @Input() iconUrl: string = \"\";\n  @Input() iconPosition: \"Left\" | \"Right\" = \"Left\";\n\n  @Input() disabled: boolean = false;\n  @Input() disableLeftBorderRadius: boolean = false;\n  @Input() disableRightBorderRadius: boolean = false;\n\n  /** Emits event when button is clicked */\n  @Output() click = new EventEmitter<any>();\n\n  constructor() {}\n\n  ngOnInit() {}\n\n  onClick(event) {\n    this.click.emit(event);\n  }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n  selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n  @Input() type: \"primary\" | \"outline\" | \"none\" = \"none\";\n  @Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n  @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngAfterViewInit(): void {\n    this.bindTypeClass();\n    this.bindSizeClass();\n  }\n\n  private bindTypeClass(): void {\n    let className = \"\";\n    switch (this.type) {\n      case \"primary\":\n        className = \"mis-primary\";\n        break;\n      case \"outline\":\n        className = \"mis-outline\";\n        break;\n      default:\n        className = \"mis-none\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n\n  private bindSizeClass(): void {\n    let className = \"\";\n    switch (this.size) {\n      case \"lg\":\n        className = \"mis-btn-lg\";\n        break;\n      case \"sm\":\n        className = \"mis-btn-sm\";\n        break;\n      default:\n        className = \"mis-btn-md\";\n    }\n    this.renderer.addClass(this.el.nativeElement, className);\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n  declarations: [ButtonComponent, ButtonDirective],\n  imports: [CommonModule],\n  exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n  static forRoot(): ModuleWithProviders<ButtonModule> {\n    return { ngModule: ButtonModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["EventEmitter","Component","Input","Output","Directive","ElementRef","Renderer2","HostBinding","NgModule","CommonModule"],"mappings":";;;;;;;QAwBE;YAhBS,SAAI,GAAW,SAAS,CAAC;YACzB,SAAI,GAAiC,OAAO,CAAC;YAC7C,SAAI,GAAyD,QAAQ,CAAC;YACtE,UAAK,GAAW,EAAE,CAAC;YAEnB,aAAQ,GAAY,KAAK,CAAC;YAC1B,YAAO,GAAW,EAAE,CAAC;YACrB,iBAAY,GAAqB,MAAM,CAAC;YAExC,aAAQ,GAAY,KAAK,CAAC;YAC1B,4BAAuB,GAAY,KAAK,CAAC;YACzC,6BAAwB,GAAY,KAAK,CAAC;;YAGzC,UAAK,GAAG,IAAIA,iBAAY,EAAO,CAAC;SAE1B;QAEhB,kCAAQ,GAAR,eAAa;QAEb,iCAAO,GAAP,UAAQ,KAAK;YACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxB;;;;gBA5BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,88BAAsC;;iBAEvC;;;;uBAEEC,UAAK;uBACLA,UAAK;uBACLA,UAAK;wBACLA,UAAK;2BAELA,UAAK;0BACLA,UAAK;+BACLA,UAAK;2BAELA,UAAK;0CACLA,UAAK;2CACLA,UAAK;wBAGLC,WAAM;;;;QCZP,yBAAoB,EAAc,EAAU,QAAmB;YAA3C,OAAE,GAAF,EAAE,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YAJtD,SAAI,GAAmC,MAAM,CAAC;YAC9C,SAAI,GAAuB,IAAI,CAAC;YACnB,iBAAY,GAAG,SAAS,CAAC;SAEoB;QAEnE,yCAAe,GAAf;YACE,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR;oBACE,SAAS,GAAG,UAAU,CAAC;aAC1B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR;oBACE,SAAS,GAAG,YAAY,CAAC;aAC5B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;;;;gBA3CFC,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;iBACzB;;;gBAJkCC,eAAU;gBAAsBC,cAAS;;;uBAMzEJ,UAAK;uBACLA,UAAK;+BACLK,gBAAW,SAAC,OAAO;;;;QCEtB;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;oBAChD,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;iBAC5C;;;ICTD;;;;;;;;;;;;;;"}

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

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/button",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].button={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var i=function(){function e(){this.name="Enabled",this.type="Solid",this.size="Medium",this.width="",this.showIcon=!1,this.iconUrl="",this.iconPosition="Left",this.disabled=!1,this.disableLeftBorderRadius=!1,this.disableRightBorderRadius=!1,this.click=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.onClick=function(e){this.click.emit(e)},e}();i.decorators=[{type:t.Component,args:[{selector:"mis-button",template:"<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  {{ name }}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n",styles:["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={name:[{type:t.Input}],type:[{type:t.Input}],size:[{type:t.Input}],width:[{type:t.Input}],showIcon:[{type:t.Input}],iconUrl:[{type:t.Input}],iconPosition:[{type:t.Input}],disabled:[{type:t.Input}],disableLeftBorderRadius:[{type:t.Input}],disableRightBorderRadius:[{type:t.Input}],click:[{type:t.Output}]};var o=function(){function e(e,t){this.el=e,this.renderer=t,this.type="none",this.size="md",this.elementClass="mis-btn"}return e.prototype.ngAfterViewInit=function(){this.bindTypeClass(),this.bindSizeClass()},e.prototype.bindTypeClass=function(){var e="";switch(this.type){case"primary":e="mis-primary";break;case"outline":e="mis-outline";break;default:e="mis-none"}this.renderer.addClass(this.el.nativeElement,e)},e.prototype.bindSizeClass=function(){var e="";switch(this.size){case"lg":e="mis-btn-lg";break;case"sm":e="mis-btn-sm";break;default:e="mis-btn-md"}this.renderer.addClass(this.el.nativeElement,e)},e}();o.decorators=[{type:t.Directive,args:[{selector:"[mis-button]"}]}],o.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},o.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],elementClass:[{type:t.HostBinding,args:["class"]}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[i,o],imports:[n.CommonModule],exports:[i,o]}]}],e.ButtonComponent=i,e.ButtonModule=r,e.ɵa=o,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/button",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].button={}),e.ng.core,e.ng.common)}(this,(function(e,t,i){"use strict";var n=function(){function e(){this.name="Enabled",this.type="Solid",this.size="Medium",this.width="",this.showIcon=!1,this.iconUrl="",this.iconPosition="Left",this.disabled=!1,this.disableLeftBorderRadius=!1,this.disableRightBorderRadius=!1,this.click=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.onClick=function(e){this.click.emit(e)},e}();n.decorators=[{type:t.Component,args:[{selector:"mis-button",template:"<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  {{ name }}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n",styles:["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]}]}],n.ctorParameters=function(){return[]},n.propDecorators={name:[{type:t.Input}],type:[{type:t.Input}],size:[{type:t.Input}],width:[{type:t.Input}],showIcon:[{type:t.Input}],iconUrl:[{type:t.Input}],iconPosition:[{type:t.Input}],disabled:[{type:t.Input}],disableLeftBorderRadius:[{type:t.Input}],disableRightBorderRadius:[{type:t.Input}],click:[{type:t.Output}]};var o=function(){function e(e,t){this.el=e,this.renderer=t,this.type="none",this.size="md",this.elementClass="mis-btn"}return e.prototype.ngAfterViewInit=function(){this.bindTypeClass(),this.bindSizeClass()},e.prototype.bindTypeClass=function(){var e="";switch(this.type){case"primary":e="mis-primary";break;case"outline":e="mis-outline";break;default:e="mis-none"}this.renderer.addClass(this.el.nativeElement,e)},e.prototype.bindSizeClass=function(){var e="";switch(this.size){case"lg":e="mis-btn-lg";break;case"sm":e="mis-btn-sm";break;default:e="mis-btn-md"}this.renderer.addClass(this.el.nativeElement,e)},e}();o.decorators=[{type:t.Directive,args:[{selector:"[mis-button]"}]}],o.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},o.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],elementClass:[{type:t.HostBinding,args:["class"]}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[n,o],imports:[i.CommonModule],exports:[n,o]}]}],e.ButtonComponent=n,e.ButtonDirective=o,e.ButtonModule=r,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-button.umd.min.js.map