mis-crystal-design-system 4.0.45 → 4.0.46-sukhad-test1

package/bundles/mis-crystal-design-system-phone-input.umd.js

@@ -1,31 +1,95 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/cdk-experimental/scrolling'), require('mis-crystal-design-system/dropdown')) :
-    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/phone-input', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/cdk/overlay', '@angular/cdk-experimental/scrolling', 'mis-crystal-design-system/dropdown'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['phone-input'] = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.cdk.overlay, global.ng.cdkExperimental.scrolling, global['mis-crystal-design-system'].dropdown));
-}(this, (function (exports, core, forms, common, overlay, scrolling, dropdown) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('google-libphonenumber'), require('libphonenumber-js'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/cdk-experimental/scrolling'), require('mis-crystal-design-system/dropdown')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/phone-input', ['exports', '@angular/core', '@angular/forms', 'google-libphonenumber', 'libphonenumber-js', '@angular/common', '@angular/cdk/overlay', '@angular/cdk-experimental/scrolling', 'mis-crystal-design-system/dropdown'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system']['phone-input'] = {}), global.ng.core, global.ng.forms, global.googleLibphonenumber, global.libphonenumberJs, global.ng.common, global.ng.cdk.overlay, global.ng.cdkExperimental.scrolling, global['mis-crystal-design-system'].dropdown));
+}(this, (function (exports, core, forms, googleLibphonenumber, libphonenumberJs, common, overlay, scrolling, dropdown) { 'use strict';
 
     var PhoneInputComponent = /** @class */ (function () {
         function PhoneInputComponent() {
+            this.dropdownHeight = '';
+            this.dropdownWidth = '';
             this.dropdownData = [];
-            this.dropdownSelectedItem = { value: "", label: "" };
+            this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
             this.inputPlaceholder = 'Enter';
             this.inputFormControl = new forms.FormControl();
             this.onDropdownSelection = new core.EventEmitter();
-            this.searchEnabled = false;
-            this.inputType = "number";
-            this.searchLabel = "Search Keyword";
+            this.onInvalidPhoneNumber = new core.EventEmitter();
+            this.dropdownListWidth = '';
+            this.dropdownListHeight = '';
+            this.searchEnabled = true;
+            this.inputType = 'number';
+            this.searchLabel = 'Search Keyword';
+            this.defaultCountry = 'IN';
+            this.phoneValidator = true;
+            this.countryCodes = [{ label: '', value: '', countryCode: '' }];
+            this.selectedCountryName = '';
+            this.validationMessage = '';
+            this.inputTouched = false;
+            this.phoneUtil = googleLibphonenumber.PhoneNumberUtil.getInstance();
         }
         PhoneInputComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this.phoneValidator) {
+                this.loadCountryCodes();
+                this.dropdownData = this.countryCodes;
+                var countryCodeToSelect_1 = this.defaultCountry;
+                var def = this.countryCodes.find(function (item) { return item.countryCode === countryCodeToSelect_1; });
+                if (def) {
+                    this.dropdownSelectedItem = def;
+                    this.selectedCountryName = def.label;
+                }
+                this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
+            }
+            this.inputFormControl.valueChanges.subscribe(function (value) {
+                _this.validatePhoneNumber(value, _this.dropdownSelectedItem.countryCode);
+            });
         };
         PhoneInputComponent.prototype.handleDropdownSelection = function (item) {
-            this.onDropdownSelection.emit(item);
+            this.dropdownSelectedItem = item;
+            this.onDropdownSelection.emit(item.countryCode);
+            this.selectedCountryName = item.label;
+            this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
+            this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
+        };
+        PhoneInputComponent.prototype.loadCountryCodes = function () {
+            var countries = libphonenumberJs.getCountries();
+            this.countryCodes = countries.map(function (countryCode) { return ({
+                value: libphonenumberJs.getCountryCallingCode(countryCode).toString(),
+                label: countryCode + " (+" + libphonenumberJs.getCountryCallingCode(countryCode) + ")",
+                countryCode: countryCode,
+            }); });
+        };
+        PhoneInputComponent.prototype.validatePhoneNumber = function (value, countryCode) {
+            var phoneNumber = (value === null || value === void 0 ? void 0 : value.phoneNumber) || value;
+            if (phoneNumber && countryCode) {
+                try {
+                    var number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
+                    var isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
+                    if (isValid) {
+                        this.validationMessage = null;
+                        this.onInvalidPhoneNumber.emit('');
+                    }
+                    else {
+                        this.validationMessage = "Phone number invalid for country code: +" + this.dropdownSelectedItem.value + "(" + this.dropdownSelectedItem.countryCode + ")";
+                        this.onInvalidPhoneNumber.emit(this.validationMessage);
+                    }
+                }
+                catch (error) {
+                    this.validationMessage = 'Invalid input';
+                    this.onInvalidPhoneNumber.emit(this.validationMessage);
+                }
+            }
+        };
+        PhoneInputComponent.prototype.onBlur = function () {
+            this.inputTouched = true;
+            this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
         };
         return PhoneInputComponent;
     }());
     PhoneInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "mis-phone-input",
-                    template: "<div class=\"main-container-phone\">\n  <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"searchEnabled\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\" [searchLabel]=\"searchLabel\"></mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n      [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"\n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        [type]=\"inputType\"\n      />\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"main-container-phone\">\n  <mis-dropdown \n    [height]=\"dropdownHeight\" \n    [dropdownListWidth]=\"dropdownListWidth\"\n    [dropdownListHeight]=\"dropdownListHeight\" \n    [width]=\"dropdownWidth\" \n    [data]=\"dropdownData\"\n    [selectedItem]=\"dropdownSelectedItem\" \n    [label]=\"label\" \n    [searchEnabled]=\"searchEnabled\" \n    [multiLine]=\"false\"\n    (onChange)=\"handleDropdownSelection($event)\" \n    [searchLabel]=\"searchLabel\">\n  </mis-dropdown>\n  <div class=\"details-field\">\n    <div class=\"input-box\">\n      <input\n        [ngStyle]=\"{'height': inputHeight }\"\n        class=\"black-text\"  \n        [placeholder]=\"inputPlaceholder\"\n        [formControl]=\"inputFormControl\" \n        [type]=\"inputType\"\n        (blur)=\"onBlur()\"\n      />\n    </div>\n  </div>\n</div>\n",
                     styles: [".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]
                 },] }
     ];
@@ -40,11 +104,14 @@
         inputPlaceholder: [{ type: core.Input }],
         inputFormControl: [{ type: core.Input }],
         onDropdownSelection: [{ type: core.Output }],
+        onInvalidPhoneNumber: [{ type: core.Output }],
         dropdownListWidth: [{ type: core.Input }],
         dropdownListHeight: [{ type: core.Input }],
         searchEnabled: [{ type: core.Input }],
         inputType: [{ type: core.Input }],
-        searchLabel: [{ type: core.Input }]
+        searchLabel: [{ type: core.Input }],
+        defaultCountry: [{ type: core.Input }],
+        phoneValidator: [{ type: core.Input }]
     };
 
     var PhoneInputModule = /** @class */ (function () {

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

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-phone-input.umd.js","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component,  EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl } from \"@angular/forms\";\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n  selector: \"mis-phone-input\",\n  templateUrl: \"./phone-input.component.html\",\n  styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n  @Input() dropdownHeight?: string;\n  @Input() dropdownWidth?: string;\n  @Input() inputHeight?: string;\n  @Input() dropdownData: DropdownItem[] = [];\n  @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n  @Input() label: string;\n\n  @Input() inputPlaceholder: string = 'Enter';\n  @Input() inputFormControl: FormControl = new FormControl();\n\n  @Output() onDropdownSelection = new EventEmitter<any>();\n  @Input() dropdownListWidth;\n  @Input() dropdownListHeight;\n  @Input() searchEnabled:boolean=false;\n  @Input() inputType: string = \"number\";\n  @Input() searchLabel:string = \"Search Keyword\"\n  \n  constructor() {}\n  ngOnInit() {\n  }\n\n  handleDropdownSelection(item: DropdownItem){\n    this.onDropdownSelection.emit(item);\n  }\n\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n  declarations: [PhoneInputComponent],\n  imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n  exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n  static forRoot(): ModuleWithProviders<PhoneInputModule> {\n    return { ngModule: PhoneInputModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","EventEmitter","Component","Input","Output","NgModule","CommonModule","ReactiveFormsModule","FormsModule","OverlayModule","ScrollingModule","DropdownModule"],"mappings":";;;;;;;QA2BE;YAdS,iBAAY,GAAmB,EAAE,CAAC;YAClC,yBAAoB,GAAgB,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;YAG5D,qBAAgB,GAAW,OAAO,CAAC;YACnC,qBAAgB,GAAgB,IAAIA,iBAAW,EAAE,CAAC;YAEjD,wBAAmB,GAAG,IAAIC,iBAAY,EAAO,CAAC;YAG/C,kBAAa,GAAS,KAAK,CAAC;YAC5B,cAAS,GAAW,QAAQ,CAAC;YAC7B,gBAAW,GAAU,gBAAgB,CAAA;SAE9B;QAChB,sCAAQ,GAAR;SACC;QAED,qDAAuB,GAAvB,UAAwB,IAAkB;YACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACrC;;;;gBA7BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,iBAAiB;oBAC3B,8uBAA2C;;iBAE5C;;;;iCAEEC,UAAK;gCACLA,UAAK;8BACLA,UAAK;+BACLA,UAAK;uCACLA,UAAK;wBACLA,UAAK;mCAELA,UAAK;mCACLA,UAAK;sCAELC,WAAM;oCACND,UAAK;qCACLA,UAAK;gCACLA,UAAK;4BACLA,UAAK;8BACLA,UAAK;;;;QCVR;;QACS,wBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SACtD;;;;gBARFE,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,mBAAmB,CAAC;oBACnC,OAAO,EAAE,CAACC,mBAAY,EAACC,yBAAmB,EAAEC,iBAAW,EAAEC,qBAAa,EAAEC,yBAAe,EAAEC,uBAAc,CAAC;oBACxG,OAAO,EAAE,CAAC,mBAAmB,CAAC;iBAC/B;;;ICdD;;;;;;;;;;;;;"}
+{"version":3,"file":"mis-crystal-design-system-phone-input.umd.js","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport { getCountries, getCountryCallingCode, CountryCode } from 'libphonenumber-js';\nimport { DropdownItem } from 'mis-crystal-design-system/dropdown';\n\ninterface CustomDropdownItem extends DropdownItem {\n  countryCode: string;\n}\n\n@Component({\n  selector: \"mis-phone-input\",\n  templateUrl: \"./phone-input.component.html\",\n  styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n  @Input() dropdownHeight?: string = '';\n  @Input() dropdownWidth?: string = '';\n  @Input() inputHeight?;\n  @Input() dropdownData: CustomDropdownItem[] = [];\n  @Input() dropdownSelectedItem: CustomDropdownItem = { value: '', label: '', countryCode: '' };\n  @Input() label: string;\n  @Input() inputPlaceholder: string = 'Enter';\n  @Input() inputFormControl: FormControl = new FormControl();\n  @Output() onDropdownSelection = new EventEmitter<string>();\n  @Output() onInvalidPhoneNumber = new EventEmitter<string>();\n  @Input() dropdownListWidth = '';\n  @Input() dropdownListHeight = '';\n  @Input() searchEnabled: boolean = true;\n  @Input() inputType: string = 'number';\n  @Input() searchLabel: string = 'Search Keyword';\n  @Input() defaultCountry: string = 'IN';\n  @Input() phoneValidator? = true;\n\n  countryCodes: CustomDropdownItem[] = [{ label: '', value: '', countryCode: '' }];\n  selectedCountryName: string = '';\n  validationMessage: string = '';\n  private phoneUtil: PhoneNumberUtil;\n  private inputTouched: boolean = false;\n\n  constructor() {\n    this.phoneUtil = PhoneNumberUtil.getInstance();\n  }\n\n  ngOnInit() {\n    if (this.phoneValidator) {\n      this.loadCountryCodes();\n      this.dropdownData = this.countryCodes;\n      const countryCodeToSelect = this.defaultCountry;\n      const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);\n      if (def) {\n        this.dropdownSelectedItem = def;\n        this.selectedCountryName = def.label;\n      }\n      this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n    }\n\n    this.inputFormControl.valueChanges.subscribe((value) => {\n      this.validatePhoneNumber(value, this.dropdownSelectedItem.countryCode);\n    });\n  }\n\n  handleDropdownSelection(item: CustomDropdownItem) {\n    this.dropdownSelectedItem = item;\n    this.onDropdownSelection.emit(item.countryCode);\n    this.selectedCountryName = item.label;\n    this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n    this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });\n  }\n\n  loadCountryCodes() {\n    const countries = getCountries();\n    this.countryCodes = countries.map((countryCode) => ({\n      value: getCountryCallingCode(countryCode).toString(),\n      label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,\n      countryCode: countryCode,\n    }));\n  }\n\n  public validatePhoneNumber(value: any, countryCode: string) {\n    const phoneNumber = value?.phoneNumber || value;\n    if (phoneNumber && countryCode) {\n      try {\n        const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);\n        const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);\n        if (isValid) {\n          this.validationMessage = null;\n          this.onInvalidPhoneNumber.emit('');\n        } else {\n          this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem.value}(${this.dropdownSelectedItem.countryCode})`;\n          this.onInvalidPhoneNumber.emit(this.validationMessage);\n        }\n      } catch (error) {\n        this.validationMessage = 'Invalid input';\n        this.onInvalidPhoneNumber.emit(this.validationMessage);\n      }\n    }\n  }\n\n  onBlur() {\n    this.inputTouched = true;\n    this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n  }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n  declarations: [PhoneInputComponent],\n  imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n  exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n  static forRoot(): ModuleWithProviders<PhoneInputModule> {\n    return { ngModule: PhoneInputModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["FormControl","EventEmitter","PhoneNumberUtil","getCountries","getCountryCallingCode","Component","Input","Output","NgModule","CommonModule","ReactiveFormsModule","FormsModule","OverlayModule","ScrollingModule","DropdownModule"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk-experimental/scrolling"),require("mis-crystal-design-system/dropdown")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/phone-input",["exports","@angular/core","@angular/forms","@angular/common","@angular/cdk/overlay","@angular/cdk-experimental/scrolling","mis-crystal-design-system/dropdown"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["phone-input"]={}),e.ng.core,e.ng.forms,e.ng.common,e.ng.cdk.overlay,e.ng.cdkExperimental.scrolling,e["mis-crystal-design-system"].dropdown)}(this,(function(e,n,t,o,i,r,d){"use strict";var p=function(){function e(){this.dropdownData=[],this.dropdownSelectedItem={value:"",label:""},this.inputPlaceholder="Enter",this.inputFormControl=new t.FormControl,this.onDropdownSelection=new n.EventEmitter,this.searchEnabled=!1,this.inputType="number",this.searchLabel="Search Keyword"}return e.prototype.ngOnInit=function(){},e.prototype.handleDropdownSelection=function(e){this.onDropdownSelection.emit(e)},e}();p.decorators=[{type:n.Component,args:[{selector:"mis-phone-input",template:'<div class="main-container-phone">\n  <mis-dropdown [height]="dropdownHeight" [dropdownListWidth]="dropdownListWidth"[dropdownListHeight]="dropdownListHeight" [width]="dropdownWidth" [data]="dropdownData" [selectedItem]="dropdownSelectedItem" [label]="label" [searchEnabled]="searchEnabled" [multiLine]="false" (onChange)="handleDropdownSelection($event)" [searchLabel]="searchLabel"></mis-dropdown>\n  <div class="details-field">\n    <div class="input-box">\n      <input\n      [ngStyle]="{\'height\': inputHeight }"\n        class="black-text"\n        [placeholder]="inputPlaceholder"\n        [formControl]="inputFormControl" \n        [type]="inputType"\n      />\n    </div>\n  </div>\n</div>\n',styles:[".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]}]}],p.ctorParameters=function(){return[]},p.propDecorators={dropdownHeight:[{type:n.Input}],dropdownWidth:[{type:n.Input}],inputHeight:[{type:n.Input}],dropdownData:[{type:n.Input}],dropdownSelectedItem:[{type:n.Input}],label:[{type:n.Input}],inputPlaceholder:[{type:n.Input}],inputFormControl:[{type:n.Input}],onDropdownSelection:[{type:n.Output}],dropdownListWidth:[{type:n.Input}],dropdownListHeight:[{type:n.Input}],searchEnabled:[{type:n.Input}],inputType:[{type:n.Input}],searchLabel:[{type:n.Input}]};var a=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();a.decorators=[{type:n.NgModule,args:[{declarations:[p],imports:[o.CommonModule,t.ReactiveFormsModule,t.FormsModule,i.OverlayModule,r.ScrollingModule,d.DropdownModule],exports:[p]}]}],e.PhoneInputComponent=p,e.PhoneInputModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("google-libphonenumber"),require("libphonenumber-js"),require("@angular/common"),require("@angular/cdk/overlay"),require("@angular/cdk-experimental/scrolling"),require("mis-crystal-design-system/dropdown")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/phone-input",["exports","@angular/core","@angular/forms","google-libphonenumber","libphonenumber-js","@angular/common","@angular/cdk/overlay","@angular/cdk-experimental/scrolling","mis-crystal-design-system/dropdown"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["phone-input"]={}),e.ng.core,e.ng.forms,e.googleLibphonenumber,e.libphonenumberJs,e.ng.common,e.ng.cdk.overlay,e.ng.cdkExperimental.scrolling,e["mis-crystal-design-system"].dropdown)}(this,(function(e,t,n,o,i,r,d,l,a){"use strict";var s=function(){function e(){this.dropdownHeight="",this.dropdownWidth="",this.dropdownData=[],this.dropdownSelectedItem={value:"",label:"",countryCode:""},this.inputPlaceholder="Enter",this.inputFormControl=new n.FormControl,this.onDropdownSelection=new t.EventEmitter,this.onInvalidPhoneNumber=new t.EventEmitter,this.dropdownListWidth="",this.dropdownListHeight="",this.searchEnabled=!0,this.inputType="number",this.searchLabel="Search Keyword",this.defaultCountry="IN",this.phoneValidator=!0,this.countryCodes=[{label:"",value:"",countryCode:""}],this.selectedCountryName="",this.validationMessage="",this.inputTouched=!1,this.phoneUtil=o.PhoneNumberUtil.getInstance()}return e.prototype.ngOnInit=function(){var e=this;if(this.phoneValidator){this.loadCountryCodes(),this.dropdownData=this.countryCodes;var t=this.defaultCountry,n=this.countryCodes.find((function(e){return e.countryCode===t}));n&&(this.dropdownSelectedItem=n,this.selectedCountryName=n.label),this.validatePhoneNumber(this.inputFormControl.value,this.dropdownSelectedItem.countryCode)}this.inputFormControl.valueChanges.subscribe((function(t){e.validatePhoneNumber(t,e.dropdownSelectedItem.countryCode)}))},e.prototype.handleDropdownSelection=function(e){this.dropdownSelectedItem=e,this.onDropdownSelection.emit(e.countryCode),this.selectedCountryName=e.label,this.validatePhoneNumber(this.inputFormControl.value,this.dropdownSelectedItem.countryCode),this.inputFormControl.patchValue({countryCode:e.countryCode},{emitEvent:!1})},e.prototype.loadCountryCodes=function(){var e=i.getCountries();this.countryCodes=e.map((function(e){return{value:i.getCountryCallingCode(e).toString(),label:e+" (+"+i.getCountryCallingCode(e)+")",countryCode:e}}))},e.prototype.validatePhoneNumber=function(e,t){var n=(null==e?void 0:e.phoneNumber)||e;if(n&&t)try{var o=this.phoneUtil.parseAndKeepRawInput(n,t);this.phoneUtil.isValidNumberForRegion(o,t)?(this.validationMessage=null,this.onInvalidPhoneNumber.emit("")):(this.validationMessage="Phone number invalid for country code: +"+this.dropdownSelectedItem.value+"("+this.dropdownSelectedItem.countryCode+")",this.onInvalidPhoneNumber.emit(this.validationMessage))}catch(e){this.validationMessage="Invalid input",this.onInvalidPhoneNumber.emit(this.validationMessage)}},e.prototype.onBlur=function(){this.inputTouched=!0,this.validatePhoneNumber(this.inputFormControl.value,this.dropdownSelectedItem.countryCode)},e}();s.decorators=[{type:t.Component,args:[{selector:"mis-phone-input",template:'<div class="main-container-phone">\n  <mis-dropdown \n    [height]="dropdownHeight" \n    [dropdownListWidth]="dropdownListWidth"\n    [dropdownListHeight]="dropdownListHeight" \n    [width]="dropdownWidth" \n    [data]="dropdownData"\n    [selectedItem]="dropdownSelectedItem" \n    [label]="label" \n    [searchEnabled]="searchEnabled" \n    [multiLine]="false"\n    (onChange)="handleDropdownSelection($event)" \n    [searchLabel]="searchLabel">\n  </mis-dropdown>\n  <div class="details-field">\n    <div class="input-box">\n      <input\n        [ngStyle]="{\'height\': inputHeight }"\n        class="black-text"  \n        [placeholder]="inputPlaceholder"\n        [formControl]="inputFormControl" \n        [type]="inputType"\n        (blur)="onBlur()"\n      />\n    </div>\n  </div>\n</div>\n',styles:[".main-container-phone{display:flex;border:1px solid #e0e0e0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;width:100%;height:auto;border-radius:6px}.black-text,input{color:#181f33;line-height:24px;font-size:16px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}"]}]}],s.ctorParameters=function(){return[]},s.propDecorators={dropdownHeight:[{type:t.Input}],dropdownWidth:[{type:t.Input}],inputHeight:[{type:t.Input}],dropdownData:[{type:t.Input}],dropdownSelectedItem:[{type:t.Input}],label:[{type:t.Input}],inputPlaceholder:[{type:t.Input}],inputFormControl:[{type:t.Input}],onDropdownSelection:[{type:t.Output}],onInvalidPhoneNumber:[{type:t.Output}],dropdownListWidth:[{type:t.Input}],dropdownListHeight:[{type:t.Input}],searchEnabled:[{type:t.Input}],inputType:[{type:t.Input}],searchLabel:[{type:t.Input}],defaultCountry:[{type:t.Input}],phoneValidator:[{type:t.Input}]};var p=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();p.decorators=[{type:t.NgModule,args:[{declarations:[s],imports:[r.CommonModule,n.ReactiveFormsModule,n.FormsModule,d.OverlayModule,l.ScrollingModule,a.DropdownModule],exports:[s]}]}],e.PhoneInputComponent=s,e.PhoneInputModule=p,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-phone-input.umd.min.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts"],"names":["PhoneInputComponent","this","dropdownData","dropdownSelectedItem","value","label","inputPlaceholder","inputFormControl","FormControl","onDropdownSelection","EventEmitter","searchEnabled","inputType","searchLabel","prototype","ngOnInit","handleDropdownSelection","item","emit","Component","args","selector","template","Input","Output","PhoneInputModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","FormsModule","OverlayModule","ScrollingModule","DropdownModule","exports"],"mappings":"q3BA2BE,SAAAA,IAdSC,KAAAC,aAA+B,GAC/BD,KAAAE,qBAAoC,CAAEC,MAAO,GAAIC,MAAO,IAGxDJ,KAAAK,iBAA2B,QAC3BL,KAAAM,iBAAgC,IAAIC,EAAAA,YAEnCP,KAAAQ,oBAAsB,IAAIC,EAAAA,aAG3BT,KAAAU,eAAsB,EACtBV,KAAAW,UAAoB,SACpBX,KAAAY,YAAqB,wBAG9Bb,EAAAc,UAAAC,SAAA,aAGAf,EAAAc,UAAAE,wBAAA,SAAwBC,GACtBhB,KAAKQ,oBAAoBS,KAAKD,6BA5BjCE,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,kBACVC,SAAA,+4CAICC,EAAAA,6BACAA,EAAAA,2BACAA,EAAAA,4BACAA,EAAAA,oCACAA,EAAAA,qBACAA,EAAAA,gCAEAA,EAAAA,gCACAA,EAAAA,mCAEAC,EAAAA,kCACAD,EAAAA,kCACAA,EAAAA,6BACAA,EAAAA,yBACAA,EAAAA,2BACAA,EAAAA,0BCVH,SAAAE,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAkBG,UAAW,8BAPnDC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAC9B,GACf+B,QAAS,CAACC,EAAAA,aAAaC,EAAAA,oBAAqBC,EAAAA,YAAaC,EAAAA,cAAeC,EAAAA,gBAAiBC,EAAAA,gBACzFC,QAAS,CAACtC","sourcesContent":["import { Component,  EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl } from \"@angular/forms\";\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n  selector: \"mis-phone-input\",\n  templateUrl: \"./phone-input.component.html\",\n  styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n  @Input() dropdownHeight?: string;\n  @Input() dropdownWidth?: string;\n  @Input() inputHeight?: string;\n  @Input() dropdownData: DropdownItem[] = [];\n  @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n  @Input() label: string;\n\n  @Input() inputPlaceholder: string = 'Enter';\n  @Input() inputFormControl: FormControl = new FormControl();\n\n  @Output() onDropdownSelection = new EventEmitter<any>();\n  @Input() dropdownListWidth;\n  @Input() dropdownListHeight;\n  @Input() searchEnabled:boolean=false;\n  @Input() inputType: string = \"number\";\n  @Input() searchLabel:string = \"Search Keyword\"\n  \n  constructor() {}\n  ngOnInit() {\n  }\n\n  handleDropdownSelection(item: DropdownItem){\n    this.onDropdownSelection.emit(item);\n  }\n\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n  declarations: [PhoneInputComponent],\n  imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n  exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n  static forRoot(): ModuleWithProviders<PhoneInputModule> {\n    return { ngModule: PhoneInputModule, providers: [] };\n  }\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.module.ts"],"names":["PhoneInputComponent","this","dropdownHeight","dropdownWidth","dropdownData","dropdownSelectedItem","value","label","countryCode","inputPlaceholder","inputFormControl","FormControl","onDropdownSelection","EventEmitter","onInvalidPhoneNumber","dropdownListWidth","dropdownListHeight","searchEnabled","inputType","searchLabel","defaultCountry","phoneValidator","countryCodes","selectedCountryName","validationMessage","inputTouched","phoneUtil","PhoneNumberUtil","getInstance","prototype","ngOnInit","_this","loadCountryCodes","countryCodeToSelect_1","def","find","item","validatePhoneNumber","valueChanges","subscribe","handleDropdownSelection","emit","patchValue","emitEvent","countries","getCountries","map","getCountryCallingCode","toString","phoneNumber","number","parseAndKeepRawInput","isValidNumberForRegion","error","onBlur","Component","args","selector","template","Input","Output","PhoneInputModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","ReactiveFormsModule","FormsModule","OverlayModule","ScrollingModule","DropdownModule","exports"],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport { getCountries, getCountryCallingCode, CountryCode } from 'libphonenumber-js';\nimport { DropdownItem } from 'mis-crystal-design-system/dropdown';\n\ninterface CustomDropdownItem extends DropdownItem {\n  countryCode: string;\n}\n\n@Component({\n  selector: \"mis-phone-input\",\n  templateUrl: \"./phone-input.component.html\",\n  styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n  @Input() dropdownHeight?: string = '';\n  @Input() dropdownWidth?: string = '';\n  @Input() inputHeight?;\n  @Input() dropdownData: CustomDropdownItem[] = [];\n  @Input() dropdownSelectedItem: CustomDropdownItem = { value: '', label: '', countryCode: '' };\n  @Input() label: string;\n  @Input() inputPlaceholder: string = 'Enter';\n  @Input() inputFormControl: FormControl = new FormControl();\n  @Output() onDropdownSelection = new EventEmitter<string>();\n  @Output() onInvalidPhoneNumber = new EventEmitter<string>();\n  @Input() dropdownListWidth = '';\n  @Input() dropdownListHeight = '';\n  @Input() searchEnabled: boolean = true;\n  @Input() inputType: string = 'number';\n  @Input() searchLabel: string = 'Search Keyword';\n  @Input() defaultCountry: string = 'IN';\n  @Input() phoneValidator? = true;\n\n  countryCodes: CustomDropdownItem[] = [{ label: '', value: '', countryCode: '' }];\n  selectedCountryName: string = '';\n  validationMessage: string = '';\n  private phoneUtil: PhoneNumberUtil;\n  private inputTouched: boolean = false;\n\n  constructor() {\n    this.phoneUtil = PhoneNumberUtil.getInstance();\n  }\n\n  ngOnInit() {\n    if (this.phoneValidator) {\n      this.loadCountryCodes();\n      this.dropdownData = this.countryCodes;\n      const countryCodeToSelect = this.defaultCountry;\n      const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);\n      if (def) {\n        this.dropdownSelectedItem = def;\n        this.selectedCountryName = def.label;\n      }\n      this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n    }\n\n    this.inputFormControl.valueChanges.subscribe((value) => {\n      this.validatePhoneNumber(value, this.dropdownSelectedItem.countryCode);\n    });\n  }\n\n  handleDropdownSelection(item: CustomDropdownItem) {\n    this.dropdownSelectedItem = item;\n    this.onDropdownSelection.emit(item.countryCode);\n    this.selectedCountryName = item.label;\n    this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n    this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });\n  }\n\n  loadCountryCodes() {\n    const countries = getCountries();\n    this.countryCodes = countries.map((countryCode) => ({\n      value: getCountryCallingCode(countryCode).toString(),\n      label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,\n      countryCode: countryCode,\n    }));\n  }\n\n  public validatePhoneNumber(value: any, countryCode: string) {\n    const phoneNumber = value?.phoneNumber || value;\n    if (phoneNumber && countryCode) {\n      try {\n        const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);\n        const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);\n        if (isValid) {\n          this.validationMessage = null;\n          this.onInvalidPhoneNumber.emit('');\n        } else {\n          this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem.value}(${this.dropdownSelectedItem.countryCode})`;\n          this.onInvalidPhoneNumber.emit(this.validationMessage);\n        }\n      } catch (error) {\n        this.validationMessage = 'Invalid input';\n        this.onInvalidPhoneNumber.emit(this.validationMessage);\n      }\n    }\n  }\n\n  onBlur() {\n    this.inputTouched = true;\n    this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);\n  }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n  declarations: [PhoneInputComponent],\n  imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n  exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n  static forRoot(): ModuleWithProviders<PhoneInputModule> {\n    return { ngModule: PhoneInputModule, providers: [] };\n  }\n}\n"]}

package/bundles/mis-crystal-design-system-ske-loader.umd.js

@@ -27,7 +27,7 @@
         { type: core.Component, args: [{
                     selector: 'mis-skeleton-loader',
                     template: "<div style=\"overflow: hidden\" [ngStyle]=\"{'height': this.height,'width' : this.width}\">\n    <div *ngFor=\"let n of rowCount; let i = index;\">\n        <div class=\"ske-loader\" [ngStyle]=\"{'height':this.lineHeight,'margin-bottom':this.gap }\"></div>\n    </div>\n</div>\n",
-                    styles: [".ske-loader{background:grey;position:relative;width:100%;background:#e5e5e5;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;animation:shine 1s linear infinite;overflow:hidden}@keyframes shine{to{background-position-x:-200%}}"]
+                    styles: [".ske-loader{background:grey;position:relative;width:100%;background:#e5e5e5;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;-webkit-animation:shine 1s linear infinite;animation:shine 1s linear infinite;overflow:hidden}@-webkit-keyframes shine{to{background-position-x:-200%}}@keyframes shine{to{background-position-x:-200%}}"]
                 },] }
     ];
     SkeLoaderComponent.ctorParameters = function () { return []; };

package/bundles/mis-crystal-design-system-ske-loader.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/ske-loader",["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"]["ske-loader"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var o=function(){function e(){this.rowCount=[1],this.lineHeight="20px",this.height="100%",this.width="100%",this.gap="8px"}return Object.defineProperty(e.prototype,"count",{set:function(e){this.rowCount=Array(e)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e}();o.decorators=[{type:t.Component,args:[{selector:"mis-skeleton-loader",template:'<div style="overflow: hidden" [ngStyle]="{\'height\': this.height,\'width\' : this.width}">\n    <div *ngFor="let n of rowCount; let i = index;">\n        <div class="ske-loader" [ngStyle]="{\'height\':this.lineHeight,\'margin-bottom\':this.gap }"></div>\n    </div>\n</div>\n',styles:[".ske-loader{background:grey;position:relative;width:100%;background:#e5e5e5;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;animation:shine 1s linear infinite;overflow:hidden}@keyframes shine{to{background-position-x:-200%}}"]}]}],o.ctorParameters=function(){return[]},o.propDecorators={count:[{type:t.Input}],lineHeight:[{type:t.Input}],height:[{type:t.Input}],width:[{type:t.Input}],gap:[{type:t.Input}]};var i=function(){};i.decorators=[{type:t.NgModule,args:[{declarations:[o],imports:[n.CommonModule],exports:[o]}]}],e.SkeLoaderComponent=o,e.SkeLoaderModule=i,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/ske-loader",["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"]["ske-loader"]={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var i=function(){function e(){this.rowCount=[1],this.lineHeight="20px",this.height="100%",this.width="100%",this.gap="8px"}return Object.defineProperty(e.prototype,"count",{set:function(e){this.rowCount=Array(e)},enumerable:!1,configurable:!0}),e.prototype.ngOnInit=function(){},e}();i.decorators=[{type:t.Component,args:[{selector:"mis-skeleton-loader",template:'<div style="overflow: hidden" [ngStyle]="{\'height\': this.height,\'width\' : this.width}">\n    <div *ngFor="let n of rowCount; let i = index;">\n        <div class="ske-loader" [ngStyle]="{\'height\':this.lineHeight,\'margin-bottom\':this.gap }"></div>\n    </div>\n</div>\n',styles:[".ske-loader{background:grey;position:relative;width:100%;background:#e5e5e5;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);border-radius:5px;background-size:200% 100%;-webkit-animation:shine 1s linear infinite;animation:shine 1s linear infinite;overflow:hidden}@-webkit-keyframes shine{to{background-position-x:-200%}}@keyframes shine{to{background-position-x:-200%}}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={count:[{type:t.Input}],lineHeight:[{type:t.Input}],height:[{type:t.Input}],width:[{type:t.Input}],gap:[{type:t.Input}]};var o=function(){};o.decorators=[{type:t.NgModule,args:[{declarations:[i],imports:[n.CommonModule],exports:[i]}]}],e.SkeLoaderComponent=i,e.SkeLoaderModule=o,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-ske-loader.umd.min.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../projects/mis-components/ske-loader/ske-loader.component.ts","../../../projects/mis-components/ske-loader/ske-loader.module.ts"],"names":["SkeLoaderComponent","this","rowCount","lineHeight","height","width","gap","Object","defineProperty","prototype","num","Array","ngOnInit","Component","args","selector","template","Input","NgModule","declarations","imports","CommonModule","exports"],"mappings":"8fAkBE,SAAAA,IATAC,KAAAC,SAAW,CAAC,GAIHD,KAAAE,WAAqB,OACrBF,KAAAG,OAAiB,OACjBH,KAAAI,MAAgB,OAChBJ,KAAAK,IAAc,aANvBC,OAAAC,eAAaR,EAAAS,UAAA,QAAK,KAAlB,SAAmBC,GACjBT,KAAKC,SAAWS,MAAMD,oCASxBV,EAAAS,UAAAG,SAAA,sCAlBDC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,sBACVC,SAAA,8oBAMCC,EAAAA,0BAGAA,EAAAA,sBACAA,EAAAA,qBACAA,EAAAA,mBACAA,EAAAA,eCPH,iCALCC,EAAAA,SAAQJ,KAAA,CAAC,CACRK,aAAc,CAACnB,GACfoB,QAAS,CAACC,EAAAA,cACVC,QAAS,CAACtB","sourcesContent":["import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n  selector: 'mis-skeleton-loader',\n  templateUrl: './ske-loader.component.html',\n  styleUrls: ['./ske-loader.component.scss']\n})\nexport class SkeLoaderComponent implements OnInit {\n\n  rowCount = [1];\n  @Input() set count(num: number) {\n    this.rowCount = Array(num)\n  };\n  @Input() lineHeight: string = '20px';\n  @Input() height: string = '100%';\n  @Input() width: string = '100%';\n  @Input() gap: string = '8px'\n\n  constructor() { }\n\n  ngOnInit(): void {}\n\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { SkeLoaderComponent } from \"./ske-loader.component\";\n\n@NgModule({\n  declarations: [SkeLoaderComponent],\n  imports: [CommonModule],\n  exports: [SkeLoaderComponent]\n})\nexport class SkeLoaderModule {\n}\n"]}
+{"version":3,"sources":["../../../projects/mis-components/ske-loader/ske-loader.component.ts","../../../projects/mis-components/ske-loader/ske-loader.module.ts"],"names":["SkeLoaderComponent","this","rowCount","lineHeight","height","width","gap","Object","defineProperty","prototype","num","Array","ngOnInit","Component","args","selector","template","Input","NgModule","declarations","imports","CommonModule","exports"],"mappings":"8fAkBE,SAAAA,IATAC,KAAAC,SAAW,CAAC,GAIHD,KAAAE,WAAqB,OACrBF,KAAAG,OAAiB,OACjBH,KAAAI,MAAgB,OAChBJ,KAAAK,IAAc,aANvBC,OAAAC,eAAaR,EAAAS,UAAA,QAAK,KAAlB,SAAmBC,GACjBT,KAAKC,SAAWS,MAAMD,oCASxBV,EAAAS,UAAAG,SAAA,sCAlBDC,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,sBACVC,SAAA,kvBAMCC,EAAAA,0BAGAA,EAAAA,sBACAA,EAAAA,qBACAA,EAAAA,mBACAA,EAAAA,eCPH,iCALCC,EAAAA,SAAQJ,KAAA,CAAC,CACRK,aAAc,CAACnB,GACfoB,QAAS,CAACC,EAAAA,cACVC,QAAS,CAACtB","sourcesContent":["import { Component, OnInit, Input } from '@angular/core';\n\n@Component({\n  selector: 'mis-skeleton-loader',\n  templateUrl: './ske-loader.component.html',\n  styleUrls: ['./ske-loader.component.scss']\n})\nexport class SkeLoaderComponent implements OnInit {\n\n  rowCount = [1];\n  @Input() set count(num: number) {\n    this.rowCount = Array(num)\n  };\n  @Input() lineHeight: string = '20px';\n  @Input() height: string = '100%';\n  @Input() width: string = '100%';\n  @Input() gap: string = '8px'\n\n  constructor() { }\n\n  ngOnInit(): void {}\n\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { SkeLoaderComponent } from \"./ske-loader.component\";\n\n@NgModule({\n  declarations: [SkeLoaderComponent],\n  imports: [CommonModule],\n  exports: [SkeLoaderComponent]\n})\nexport class SkeLoaderModule {\n}\n"]}