mis-crystal-design-system 1.1.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/bundles/mis-crystal-design-system.umd.js +2 -2
  2. package/bundles/mis-crystal-design-system.umd.js.map +1 -1
  3. package/bundles/mis-crystal-design-system.umd.min.js +1 -1
  4. package/bundles/mis-crystal-design-system.umd.min.js.map +1 -1
  5. package/esm2015/dropdown/dropdown.component.js +3 -3
  6. package/fesm2015/mis-crystal-design-system.js +2 -2
  7. package/fesm2015/mis-crystal-design-system.js.map +1 -1
  8. package/mis-crystal-design-system.metadata.json +1 -1
  9. package/package.json +1 -1
package/bundles/mis-crystal-design-system.umd.min.js CHANGED
@@ -1,4 +1,4 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs/operators"),require("rxjs"),require("@angular/animations")):"function"==typeof define&&define.amd?define("mis-crystal-design-system",["exports","@angular/core","@angular/common","@angular/forms","rxjs/operators","rxjs","@angular/animations"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]={},e.ng.core,e.ng.common,e.ng.forms,e.rxjs.operators,e.rxjs,e.ng.animations)}(this,(function(e,t,n,i,o,r,a){"use strict";var s=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}();s.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}"]}]}],s.ctorParameters=function(){return[]},s.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 l=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();l.decorators=[{type:t.NgModule,args:[{declarations:[s],imports:[n.CommonModule],exports:[s]}]}];var c=function(){function e(){this.isError=!1,this.isIndeterminate=!1,this.name="",this.formControl=new i.FormControl,this.valueChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"type",{set:function(e){this.isError="Error"===e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"indeterminate",{set:function(e){e?(this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:!0})):(this.formControl.setValue(!1),this.valueChange.emit({name:this.name,value:!1})),this.isIndeterminate=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"checked",{set:function(e){e?this.formControl.setValue(!0):this.formControl.setValue(!1)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.toggleState=function(){this.isIndeterminate?(this.isIndeterminate=!1,this.formControl.setValue(!0)):this.formControl.value?this.formControl.setValue(!1):this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:this.formControl.value})},e}();c.decorators=[{type:t.Component,args:[{selector:"mis-checkbox",template:'<div\n class="checkbox-container"\n (click)="!formControl.disabled && toggleState()"\n>\n <input\n hidden\n type="checkbox"\n [formControl]="formControl"\n (click)="$event.stopPropagation()"\n >\n <span\n class="checkmark"\n tabindex="0"\n *ngIf="!isIndeterminate"\n [ngClass]="{\n \'disabled-checkbox\': formControl.disabled,\n \'error\': isError && !formControl.disabled\n }"\n ></span>\n <span\n class="checkmark indeterminate"\n tabindex="0"\n *ngIf="isIndeterminate"\n [ngClass]="{\n \'disabled-checkbox\': formControl.disabled,\n \'error\': isError && !formControl.disabled\n }"\n ></span>\n</div>\n',styles:['.checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}']}]}],c.ctorParameters=function(){return[]},c.propDecorators={inputBox:[{type:t.ViewChild,args:["input"]}],type:[{type:t.Input}],indeterminate:[{type:t.Input}],checked:[{type:t.Input}],disabled:[{type:t.Input}],name:[{type:t.Input}],formControl:[{type:t.Input}],valueChange:[{type:t.Output}]};var d=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();d.decorators=[{type:t.NgModule,args:[{declarations:[c],imports:[n.CommonModule,i.ReactiveFormsModule],exports:[c]}]}];var p=function(){function e(){this.label="",this.value="",this.size="Medium",this.iconUrl=null,this.count=null,this.dismissible=!1,this.cancel=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e}();p.decorators=[{type:t.Component,args:[{selector:"mis-chip",template:'<div\n id="chip-container"\n [ngClass]="{\n \'small\': size === \'Small\',\n \'medium\': size === \'Medium\',\n \'small-m\': size === \'Small-M\',\n \'medium-m\': size === \'Medium-M\'\n }"\n>\n <img *ngIf="iconUrl && iconUrl.length > 0" [src]="iconUrl" alt="">\n <span>{{label}}</span>\n <div *ngIf="count != null || count != undefined" id="count-container">\n <div id="separator"></div>\n <span id="count-text">{{count}}</span>\n </div>\n <span *ngIf="dismissible" id="close-icon" (click)="cancel.emit(value)">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z" fill="#181F33"/>\n </svg>\n </span>\n</div>\n',styles:["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container:hover{background:#d7d9de}img{margin-right:4px}#close-icon{margin-left:4px;cursor:pointer}#close-icon,#count-container{display:flex;justify-content:center;align-items:center}#count-container,#separator{height:100%}#separator{width:1px;background-color:#c8cdd3;margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px}.medium,.small{font-style:normal;color:#181f33}.medium{height:32px;padding:6px 12px;border-radius:16px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-size:11px;line-height:12px;letter-spacing:.1px}.medium-m,.small-m{font-style:normal;font-weight:400;color:#181f33}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-size:12px;line-height:16px;letter-spacing:.25px}"]}]}],p.ctorParameters=function(){return[]},p.propDecorators={label:[{type:t.Input}],value:[{type:t.Input}],size:[{type:t.Input}],iconUrl:[{type:t.Input}],count:[{type:t.Input}],dismissible:[{type:t.Input}],cancel:[{type:t.Output}]};var u=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();u.decorators=[{type:t.NgModule,args:[{declarations:[p],imports:[n.CommonModule],exports:[p]}]}];var h=function(){function e(e){this.eRef=e,this.isOpen=!1,this.isSearchInputFocused=!1,this.searchInput="",this.searchData=[],this.data=[],this.height="",this.width="",this.label="Select",this.dropdownListHeight="",this.dropdownListWidth="",this.dropdownListPosition="Left",this.searchEnabled=!0,this.selectedItem={value:"",label:""},this.noDataMessage="No Data",this.onChange=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.clickout=function(e){!this.eRef.nativeElement.contains(e.target)&&this.onCancel()},e.prototype.filterByValue=function(e,t){return e.filter((function(e){return e.label.toLowerCase().includes(t.toLowerCase())}))},e.prototype.searchInputOnChange=function(e){this.searchInput=e,e?this.searchData=this.filterByValue(this.data,e):(this.searchData=[],this.searchInput="")},e.prototype.searchInputFocused=function(e){this.isSearchInputFocused=e},e.prototype.searchInputCanceled=function(e){e.stopPropagation(),this.searchInput="",this.isSearchInputFocused=!1},e.prototype.toggleDropdown=function(){this.isOpen=!this.isOpen},e.prototype.selectItem=function(e){this.onChange.emit(e),this.toggleDropdown()},e.prototype.onCancel=function(){this.isSearchInputFocused=!1,this.isOpen=!1,this.searchInput=""},e}();h.decorators=[{type:t.Component,args:[{selector:"mis-dropdown",template:'<div class="main-container"\n [ngStyle]="{\n \'height\': height.length > 0? height: \'\',\n \'width\': width.length > 0? width: \'\'\n }"\n>\n <div class="dropdown" (click)="toggleDropdown()" [ngStyle]="{\'background\': isOpen ? \'#E6EBF7\': \'\'}">\n <div class="label">\n <p class="text">\n {{ selectedItem.label || label }}\n </p>\n </div>\n <svg class="handle" [ngStyle]="{ transform: isOpen ? \'rotate(180deg)\': \'rotate(0deg)\' }" width="20" height="20"\n viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z" fill="#181F33" />\n </svg>\n </div>\n <div style="flex-basis: 0;"></div>\n <div style="width: 100%; position: relative;">\n <div *ngIf="isOpen" class="popup-container"\n [ngStyle]="{\n \'height\': dropdownListHeight,\n \'width\': dropdownListWidth\n }"\n [ngClass]="{\n \'position-left\': dropdownListPosition === \'Left\',\n \'position-right\': dropdownListPosition === \'Right\'\n }"\n >\n <div *ngIf="searchEnabled" class="search-container">\n <svg *ngIf="!isSearchInputFocused" class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"\n xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z"\n fill="#6A737D" />\n </svg>\n <input\n [ngModel]="searchInput"\n [ngStyle]="{ paddingLeft: isSearchInputFocused ? \'12px\' : \'45px\', border:isSearchInputFocused? \'1px solid #0937B2\':\'1px solid #e0e0e0\', paddingRight: isSearchInputFocused ? \'45px\' : \'10px\' }"\n (ngModelChange)="searchInputOnChange($event)"\n [placeholder]="isSearchInputFocused ? \'\' : \'Search Keyword\'"\n (focus)="searchInputFocused(true)"\n class="search-input"\n />\n <svg *ngIf="isSearchInputFocused" class="cancel-icon" (click)="searchInputCanceled($event)" width="24" height="24"\n viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z"\n fill="#6A737D" />\n </svg>\n </div>\n <div class="items">\n <div class="item" (click)="selectItem(item)" *ngFor="let item of searchInput ? searchData : data">\n <div class="label">\n {{ item.label }}\n </div>\n <div class="icon-container" *ngIf="item.icon">\n <img class="icon" [src]="item.icon" alt="no img">\n </div>\n </div>\n <div class="noData" *ngIf="(searchInput ? searchData : data).length === 0">\n {{ searchInput === \'\' ? noDataMessage : \'No results\' }}\n </div>\n </div>\n </div>\n </div>\n</div>\n',styles:[".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover{background-color:#f5f7fc}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.main-container .popup-container::-webkit-scrollbar{width:0;height:0}.main-container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.main-container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.main-container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.main-container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.main-container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.main-container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.main-container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.main-container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.main-container .popup-container .items .item:hover{background-color:#f5f7fc}.main-container .popup-container .items .item .label{width:90%;line-height:20px;font-size:14px;font-style:normal;font-weight:400}.main-container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.main-container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.position-left{right:0}.position-right{left:0}"]}]}],h.ctorParameters=function(){return[{type:t.ElementRef}]},h.propDecorators={data:[{type:t.Input}],height:[{type:t.Input}],width:[{type:t.Input}],label:[{type:t.Input}],dropdownListHeight:[{type:t.Input}],dropdownListWidth:[{type:t.Input}],dropdownListPosition:[{type:t.Input}],searchEnabled:[{type:t.Input}],selectedItem:[{type:t.Input}],noDataMessage:[{type:t.Input}],onChange:[{type:t.Output}],clickout:[{type:t.HostListener,args:["document:click",["$event"]]}]};var f=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();f.decorators=[{type:t.NgModule,args:[{declarations:[h],imports:[n.CommonModule,i.FormsModule],exports:[h]}]}];var _=function(){function e(){this.mobileView=!1}return e.prototype.ngOnInit=function(){},e}();_.decorators=[{type:t.Component,args:[{selector:"mis-loader",template:'<div id="spinner" [ngClass]="{\n \'mobile\': mobileView\n}"></div>\n',styles:["#spinner{-webkit-animation:frames 1s linear infinite;animation:frames 1s linear infinite;background:transparent;border-radius:100%;border:4px solid #e0e0e0;border-top-color:#6200ee;width:40px;height:40px;padding:0;position:absolute}@-webkit-keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.mobile{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#6200ee!important}"]}]}],_.ctorParameters=function(){return[]},_.propDecorators={mobileView:[{type:t.Input}]};var g=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();g.decorators=[{type:t.NgModule,args:[{declarations:[_],imports:[n.CommonModule],exports:[_]}]}];
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs/operators"),require("rxjs"),require("@angular/animations")):"function"==typeof define&&define.amd?define("mis-crystal-design-system",["exports","@angular/core","@angular/common","@angular/forms","rxjs/operators","rxjs","@angular/animations"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]={},e.ng.core,e.ng.common,e.ng.forms,e.rxjs.operators,e.rxjs,e.ng.animations)}(this,(function(e,t,n,i,o,r,a){"use strict";var s=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}();s.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}"]}]}],s.ctorParameters=function(){return[]},s.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 l=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();l.decorators=[{type:t.NgModule,args:[{declarations:[s],imports:[n.CommonModule],exports:[s]}]}];var c=function(){function e(){this.isError=!1,this.isIndeterminate=!1,this.name="",this.formControl=new i.FormControl,this.valueChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"type",{set:function(e){this.isError="Error"===e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"indeterminate",{set:function(e){e?(this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:!0})):(this.formControl.setValue(!1),this.valueChange.emit({name:this.name,value:!1})),this.isIndeterminate=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"checked",{set:function(e){e?this.formControl.setValue(!0):this.formControl.setValue(!1)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){e?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.toggleState=function(){this.isIndeterminate?(this.isIndeterminate=!1,this.formControl.setValue(!0)):this.formControl.value?this.formControl.setValue(!1):this.formControl.setValue(!0),this.valueChange.emit({name:this.name,value:this.formControl.value})},e}();c.decorators=[{type:t.Component,args:[{selector:"mis-checkbox",template:'<div\n class="checkbox-container"\n (click)="!formControl.disabled && toggleState()"\n>\n <input\n hidden\n type="checkbox"\n [formControl]="formControl"\n (click)="$event.stopPropagation()"\n >\n <span\n class="checkmark"\n tabindex="0"\n *ngIf="!isIndeterminate"\n [ngClass]="{\n \'disabled-checkbox\': formControl.disabled,\n \'error\': isError && !formControl.disabled\n }"\n ></span>\n <span\n class="checkmark indeterminate"\n tabindex="0"\n *ngIf="isIndeterminate"\n [ngClass]="{\n \'disabled-checkbox\': formControl.disabled,\n \'error\': isError && !formControl.disabled\n }"\n ></span>\n</div>\n',styles:['.checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}']}]}],c.ctorParameters=function(){return[]},c.propDecorators={inputBox:[{type:t.ViewChild,args:["input"]}],type:[{type:t.Input}],indeterminate:[{type:t.Input}],checked:[{type:t.Input}],disabled:[{type:t.Input}],name:[{type:t.Input}],formControl:[{type:t.Input}],valueChange:[{type:t.Output}]};var d=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();d.decorators=[{type:t.NgModule,args:[{declarations:[c],imports:[n.CommonModule,i.ReactiveFormsModule],exports:[c]}]}];var p=function(){function e(){this.label="",this.value="",this.size="Medium",this.iconUrl=null,this.count=null,this.dismissible=!1,this.cancel=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e}();p.decorators=[{type:t.Component,args:[{selector:"mis-chip",template:'<div\n id="chip-container"\n [ngClass]="{\n \'small\': size === \'Small\',\n \'medium\': size === \'Medium\',\n \'small-m\': size === \'Small-M\',\n \'medium-m\': size === \'Medium-M\'\n }"\n>\n <img *ngIf="iconUrl && iconUrl.length > 0" [src]="iconUrl" alt="">\n <span>{{label}}</span>\n <div *ngIf="count != null || count != undefined" id="count-container">\n <div id="separator"></div>\n <span id="count-text">{{count}}</span>\n </div>\n <span *ngIf="dismissible" id="close-icon" (click)="cancel.emit(value)">\n <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd" d="M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z" fill="#181F33"/>\n </svg>\n </span>\n</div>\n',styles:["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container:hover{background:#d7d9de}img{margin-right:4px}#close-icon{margin-left:4px;cursor:pointer}#close-icon,#count-container{display:flex;justify-content:center;align-items:center}#count-container,#separator{height:100%}#separator{width:1px;background-color:#c8cdd3;margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px}.medium,.small{font-style:normal;color:#181f33}.medium{height:32px;padding:6px 12px;border-radius:16px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-size:11px;line-height:12px;letter-spacing:.1px}.medium-m,.small-m{font-style:normal;font-weight:400;color:#181f33}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-size:12px;line-height:16px;letter-spacing:.25px}"]}]}],p.ctorParameters=function(){return[]},p.propDecorators={label:[{type:t.Input}],value:[{type:t.Input}],size:[{type:t.Input}],iconUrl:[{type:t.Input}],count:[{type:t.Input}],dismissible:[{type:t.Input}],cancel:[{type:t.Output}]};var u=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();u.decorators=[{type:t.NgModule,args:[{declarations:[p],imports:[n.CommonModule],exports:[p]}]}];var h=function(){function e(e){this.eRef=e,this.isOpen=!1,this.isSearchInputFocused=!1,this.searchInput="",this.searchData=[],this.data=[],this.height="",this.width="",this.label="Select",this.dropdownListHeight="",this.dropdownListWidth="",this.dropdownListPosition="Left",this.searchEnabled=!0,this.selectedItem={value:"",label:""},this.noDataMessage="No Data",this.onChange=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.clickout=function(e){!this.eRef.nativeElement.contains(e.target)&&this.onCancel()},e.prototype.filterByValue=function(e,t){return e.filter((function(e){return e.label.toLowerCase().includes(t.toLowerCase())}))},e.prototype.searchInputOnChange=function(e){this.searchInput=e,e?this.searchData=this.filterByValue(this.data,e):(this.searchData=[],this.searchInput="")},e.prototype.searchInputFocused=function(e){this.isSearchInputFocused=e},e.prototype.searchInputCanceled=function(e){e.stopPropagation(),this.searchInput="",this.isSearchInputFocused=!1},e.prototype.toggleDropdown=function(){this.isOpen=!this.isOpen},e.prototype.selectItem=function(e){this.onChange.emit(e),this.toggleDropdown()},e.prototype.onCancel=function(){this.isSearchInputFocused=!1,this.isOpen=!1,this.searchInput=""},e}();h.decorators=[{type:t.Component,args:[{selector:"mis-dropdown",template:'<div class="main-container"\n [ngStyle]="{\n \'height\': height.length > 0? height: \'\',\n \'width\': width.length > 0? width: \'\'\n }"\n>\n <div class="dropdown" (click)="toggleDropdown()" [ngStyle]="{\'background\': isOpen ? \'#E6EBF7\': \'\'}">\n <div class="label">\n <p class="text">\n {{ selectedItem.label || label }}\n </p>\n </div>\n <svg class="handle" [ngStyle]="{ transform: isOpen ? \'rotate(180deg)\': \'rotate(0deg)\' }" width="20" height="20"\n viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M13.825 7.15845L10 10.9751L6.175 7.15845L5 8.33345L10 13.3334L15 8.33345L13.825 7.15845Z" fill="#181F33" />\n </svg>\n </div>\n <div style="flex-basis: 0;"></div>\n <div style="width: 100%; position: relative;">\n <div *ngIf="isOpen" class="popup-container"\n [ngStyle]="{\n \'height\': dropdownListHeight,\n \'width\': dropdownListWidth\n }"\n [ngClass]="{\n \'position-left\': dropdownListPosition === \'Left\',\n \'position-right\': dropdownListPosition === \'Right\'\n }"\n >\n <div *ngIf="searchEnabled" class="search-container">\n <svg *ngIf="!isSearchInputFocused" class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"\n xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M4.21508 11.1456C4.21508 7.3179 7.33722 4.21165 11.1926 4.21165C15.048 4.21165 18.1702 7.3179 18.1702 11.1456C18.1702 12.6931 17.6599 14.1226 16.7972 15.2767L15.3685 16.7013C14.2044 17.5668 12.759 18.0796 11.1926 18.0796C7.33722 18.0796 4.21508 14.9734 4.21508 11.1456ZM15.9421 17.7835C14.6021 18.7329 12.9627 19.2913 11.1926 19.2913C6.66977 19.2913 3 15.6461 3 11.1456C3 6.64512 6.66977 3 11.1926 3C15.7155 3 19.3852 6.64512 19.3852 11.1456C19.3852 12.9371 18.8037 14.5931 17.8184 15.9375L19.8361 17.4048C20.6705 17.912 21.7554 18.6543 20.2454 20.215C18.7353 21.7756 18.0099 20.6663 17.4991 19.8364L15.9421 17.7835Z"\n fill="#6A737D" />\n </svg>\n <input\n [ngModel]="searchInput"\n [ngStyle]="{ paddingLeft: isSearchInputFocused ? \'12px\' : \'45px\', border:isSearchInputFocused? \'1px solid #0937B2\':\'1px solid #e0e0e0\', paddingRight: isSearchInputFocused ? \'45px\' : \'10px\' }"\n (ngModelChange)="searchInputOnChange($event)"\n [placeholder]="isSearchInputFocused ? \'\' : \'Search Keyword\'"\n (focus)="searchInputFocused(true)"\n class="search-input"\n />\n <svg *ngIf="isSearchInputFocused" class="cancel-icon" (click)="searchInputCanceled($event)" width="24" height="24"\n viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path fill-rule="evenodd" clip-rule="evenodd"\n d="M8.87446 7.32144C8.44588 6.89285 7.751 6.89285 7.32242 7.32144C6.89383 7.75002 6.89383 8.4449 7.32242 8.87349L10.4488 11.9999L7.32357 15.1252C6.89498 15.5538 6.89498 16.2486 7.32357 16.6772C7.75215 17.1058 8.44703 17.1058 8.87561 16.6772L12.0009 13.552L15.1261 16.6772C15.5547 17.1058 16.2496 17.1058 16.6781 16.6772C17.1067 16.2486 17.1067 15.5537 16.6781 15.1251L13.5529 11.9999L16.6793 8.87354C17.1079 8.44496 17.1079 7.75008 16.6793 7.3215C16.2507 6.89291 15.5558 6.89291 15.1273 7.3215L12.0009 10.4479L8.87446 7.32144Z"\n fill="#6A737D" />\n </svg>\n </div>\n <div class="items">\n <div class="item" (click)="selectItem(item)" *ngFor="let item of searchInput ? searchData : data">\n <div class="label" [ngStyle]="{\'width\': item.icon? \'90%\': \'100%\'}">\n {{ item.label }}\n </div>\n <div class="icon-container" *ngIf="item.icon">\n <img class="icon" [src]="item.icon" alt="no img">\n </div>\n </div>\n <div class="noData" *ngIf="(searchInput ? searchData : data).length === 0">\n {{ searchInput === \'\' ? noDataMessage : \'No results\' }}\n </div>\n </div>\n </div>\n </div>\n</div>\n',styles:[".main-container{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;height:32px;width:256px;font-family:Lato,sans-serif!important}.main-container .dropdown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit;border:1px solid #e0e0e0;border-radius:6px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:0 12px}.main-container .dropdown:hover{background-color:#f5f7fc}.main-container .dropdown .label{box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;width:calc(100% - 32px)}.main-container .dropdown .label,.main-container .dropdown .label .text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .dropdown .label .text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.main-container .dropdown .label .count{background-color:#e0e0e0;border-radius:50%;padding:2px 7px;margin:0}.main-container .dropdown .handle{width:24px;height:24px;transition:.3s;position:absolute;right:12px;border-radius:50%;overflow:hidden}.main-container .popup-container{position:absolute;top:4px;width:100%;max-height:340px;padding-bottom:0;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 12px 24px 0 rgba(0,0,0,.12);overflow:scroll;overflow-x:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:100}.main-container .popup-container::-webkit-scrollbar{width:0;height:0}.main-container .popup-container .search-container{position:relative;box-sizing:border-box;padding:8px}.main-container .popup-container .search-container .search-icon{position:absolute;width:24px;height:24px;top:50%;transform:translateY(-50%);left:18px;z-index:1}.main-container .popup-container .search-container .search-input{height:40px;width:100%;padding:12px;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:8px;outline:none;caret-color:#0937b2;font-style:normal;font-weight:400;font-size:12px;line-height:18px;display:flex;align-items:center;letter-spacing:.2px;color:#181f33}.main-container .popup-container .search-container .cancel-icon{position:absolute;cursor:pointer;width:24px;height:24px;top:50%;transform:translateY(-50%);right:18px;z-index:1}.main-container .popup-container .items{padding:8px 0 8px 8px;overflow-y:scroll;height:100%}.main-container .popup-container .items::-webkit-scrollbar{width:5px;height:0}.main-container .popup-container .items::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:10px}.main-container .popup-container .items .noData{display:flex;justify-content:center;align-items:center;font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.main-container .popup-container .items .item{cursor:pointer;display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;height:auto;letter-spacing:.2px;color:#181f33}.main-container .popup-container .items .item:hover{background-color:#f5f7fc}.main-container .popup-container .items .item .label{width:100%;line-height:20px;font-size:14px;font-style:normal;font-weight:400}.main-container .popup-container .items .item .icon-container{width:10%;display:flex;justify-content:flex-end}.main-container .popup-container .items .item .icon-container .icon{width:20px;height:20px}.position-left{right:0}.position-right{left:0}"]}]}],h.ctorParameters=function(){return[{type:t.ElementRef}]},h.propDecorators={data:[{type:t.Input}],height:[{type:t.Input}],width:[{type:t.Input}],label:[{type:t.Input}],dropdownListHeight:[{type:t.Input}],dropdownListWidth:[{type:t.Input}],dropdownListPosition:[{type:t.Input}],searchEnabled:[{type:t.Input}],selectedItem:[{type:t.Input}],noDataMessage:[{type:t.Input}],onChange:[{type:t.Output}],clickout:[{type:t.HostListener,args:["document:click",["$event"]]}]};var f=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();f.decorators=[{type:t.NgModule,args:[{declarations:[h],imports:[n.CommonModule,i.FormsModule],exports:[h]}]}];var _=function(){function e(){this.mobileView=!1}return e.prototype.ngOnInit=function(){},e}();_.decorators=[{type:t.Component,args:[{selector:"mis-loader",template:'<div id="spinner" [ngClass]="{\n \'mobile\': mobileView\n}"></div>\n',styles:["#spinner{-webkit-animation:frames 1s linear infinite;animation:frames 1s linear infinite;background:transparent;border-radius:100%;border:4px solid #e0e0e0;border-top-color:#6200ee;width:40px;height:40px;padding:0;position:absolute}@-webkit-keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes frames{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.mobile{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#6200ee!important}"]}]}],_.ctorParameters=function(){return[]},_.propDecorators={mobileView:[{type:t.Input}]};var g=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();g.decorators=[{type:t.NgModule,args:[{declarations:[_],imports:[n.CommonModule],exports:[_]}]}];
2
2
  /*! *****************************************************************************
3
3
  Copyright (c) Microsoft Corporation.
4
4