mis-crystal-design-system 4.0.44 → 4.0.46-sukhad-test
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.
- package/bundles/mis-crystal-design-system-input.umd.js +3 -1
- package/bundles/mis-crystal-design-system-input.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.js +78 -11
- package/bundles/mis-crystal-design-system-phone-input.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-phone-input.umd.min.js.map +1 -1
- package/esm2015/input/mis-input.component.js +4 -2
- package/esm2015/phone-input/phone-input.component.js +78 -10
- package/fesm2015/mis-crystal-design-system-input.js +3 -1
- package/fesm2015/mis-crystal-design-system-input.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-phone-input.js +75 -7
- package/fesm2015/mis-crystal-design-system-phone-input.js.map +1 -1
- package/input/mis-crystal-design-system-input.metadata.json +1 -1
- package/input/mis-input.component.d.ts +1 -0
- package/package.json +1 -1
- package/phone-input/mis-crystal-design-system-phone-input.metadata.json +1 -1
- package/phone-input/phone-input.component.d.ts +25 -10
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
this.size = "sm";
|
|
47
47
|
this.noHints = false;
|
|
48
48
|
this.hasError = false; // show input in error state
|
|
49
|
+
this.isMandatory = false; // show input as mandatory
|
|
49
50
|
this.inputValidity = true;
|
|
50
51
|
}
|
|
51
52
|
Object.defineProperty(MisInputComponent.prototype, "formInput", {
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
MisInputComponent.decorators = [
|
|
74
75
|
{ type: core.Component, args: [{
|
|
75
76
|
selector: "mis-input",
|
|
76
|
-
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}
|
|
77
|
+
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n",
|
|
77
78
|
styles: [":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]
|
|
78
79
|
},] }
|
|
79
80
|
];
|
|
@@ -84,6 +85,7 @@
|
|
|
84
85
|
placeholder: [{ type: core.Input }],
|
|
85
86
|
noHints: [{ type: core.Input }],
|
|
86
87
|
hasError: [{ type: core.Input }],
|
|
88
|
+
isMandatory: [{ type: core.Input }],
|
|
87
89
|
formInput: [{ type: core.ContentChild, args: [MisInputDirective,] }]
|
|
88
90
|
};
|
|
89
91
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input.umd.js","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n // tslint:disable-next-line\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n validity = this.validityChange.asObservable();\n endObs: Subject<void> = new Subject();\n focus = false;\n hasValue = false;\n\n ngOnInit(): void {\n this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n this.validityChange.next(!this.control.control?.invalid);\n });\n this.el.nativeElement.placeholder += \" \";\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n @Input() type: \"rounded\" | \"floating\" = \"floating\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n @Input() placeholder: string; // floating placeholder text\n @Input() noHints = false;\n @Input() hasError = false; // show input in error state\n @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n if (!this.placeholder) {\n this.placeholder = input?.el.nativeElement.placeholder || \"\";\n }\n this.inputCtrl = input.control?.control;\n this.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n this.placeholder += \" \";\n }\n inputCtrl: AbstractControl;\n inputSubscription: Subscription | undefined;\n inputValidity: boolean = true;\n constructor() {}\n\n ngOnInit(): void {}\n ngOnDestroy(): void {\n this.inputSubscription?.unsubscribe();\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ReplaySubject","Subject","takeUntil","Directive","ElementRef","NgControl","Self","Optional","Component","Input","ContentChild","NgModule","CommonModule","FormsModule"],"mappings":";;;;;;;QAUE,2BAAmB,EAAc,EAA6B,OAAkB;YAA7D,OAAE,GAAF,EAAE,CAAY;YAA6B,YAAO,GAAP,OAAO,CAAW;YACxE,mBAAc,GAA2B,IAAIA,kBAAa,CAAC,CAAC,CAAC,CAAC;YACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;YAC9C,WAAM,GAAkB,IAAIC,YAAO,EAAE,CAAC;YACtC,UAAK,GAAG,KAAK,CAAC;YACd,aAAQ,GAAG,KAAK,CAAC;SALmE;QAOpF,oCAAQ,GAAR;YAAA,iBAKC;;YAJC,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,YAAY,CAAC,IAAI,CAACC,mBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;;gBACzE,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,KAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;aAC1D,EAAE;YACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;SAC1C;QACD,uCAAW,GAAX;YACE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;SACxB;;;;gBArBFC,cAAS,SAAC;;oBAET,QAAQ,EAAE,iBAAiB;iBAC5B;;;gBARmBC,eAAU;gBACrBC,eAAS,uBASoBC,SAAI,YAAIC,aAAQ;;;;
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input.umd.js","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n // tslint:disable-next-line\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n validity = this.validityChange.asObservable();\n endObs: Subject<void> = new Subject();\n focus = false;\n hasValue = false;\n\n ngOnInit(): void {\n this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n this.validityChange.next(!this.control.control?.invalid);\n });\n this.el.nativeElement.placeholder += \" \";\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n @Input() type: \"rounded\" | \"floating\" = \"floating\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n @Input() placeholder: string; // floating placeholder text\n @Input() noHints = false;\n @Input() hasError = false; // show input in error state\n @Input() isMandatory:boolean = false; // show input as mandatory\n @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n if (!this.placeholder) {\n this.placeholder = input?.el.nativeElement.placeholder || \"\";\n }\n this.inputCtrl = input.control?.control;\n this.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n this.placeholder += \" \";\n }\n inputCtrl: AbstractControl;\n inputSubscription: Subscription | undefined;\n inputValidity: boolean = true;\n constructor() {}\n\n ngOnInit(): void {}\n ngOnDestroy(): void {\n this.inputSubscription?.unsubscribe();\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ReplaySubject","Subject","takeUntil","Directive","ElementRef","NgControl","Self","Optional","Component","Input","ContentChild","NgModule","CommonModule","FormsModule"],"mappings":";;;;;;;QAUE,2BAAmB,EAAc,EAA6B,OAAkB;YAA7D,OAAE,GAAF,EAAE,CAAY;YAA6B,YAAO,GAAP,OAAO,CAAW;YACxE,mBAAc,GAA2B,IAAIA,kBAAa,CAAC,CAAC,CAAC,CAAC;YACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;YAC9C,WAAM,GAAkB,IAAIC,YAAO,EAAE,CAAC;YACtC,UAAK,GAAG,KAAK,CAAC;YACd,aAAQ,GAAG,KAAK,CAAC;SALmE;QAOpF,oCAAQ,GAAR;YAAA,iBAKC;;YAJC,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,YAAY,CAAC,IAAI,CAACC,mBAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;;gBACzE,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,KAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;aAC1D,EAAE;YACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;SAC1C;QACD,uCAAW,GAAX;YACE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;SACxB;;;;gBArBFC,cAAS,SAAC;;oBAET,QAAQ,EAAE,iBAAiB;iBAC5B;;;gBARmBC,eAAU;gBACrBC,eAAS,uBASoBC,SAAI,YAAIC,aAAQ;;;;QCmBpD;YAlBS,SAAI,GAA2B,UAAU,CAAC;YAC1C,SAAI,GAAuB,IAAI,CAAC;YAEhC,YAAO,GAAG,KAAK,CAAC;YAChB,aAAQ,GAAG,KAAK,CAAC;YACjB,gBAAW,GAAW,KAAK,CAAC;YAYrC,kBAAa,GAAY,IAAI,CAAC;SACd;QAZhB,sBAAqC,wCAAS;iBAA9C,UAA+C,KAAwB;gBAAvE,iBAQC;;gBAPC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;oBACrB,IAAI,CAAC,WAAW,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAC,aAAa,CAAC,WAAW,KAAI,EAAE,CAAC;iBAC9D;gBACD,IAAI,CAAC,SAAS,SAAG,KAAK,CAAC,OAAO,0CAAE,OAAO,CAAC;gBACxC,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;gBACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,SAAS,CAAC,UAAA,GAAG,IAAI,QAAC,KAAI,CAAC,aAAa,GAAG,GAAG,IAAC,CAAC,CAAC;gBACtF,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;aACzB;;;WAAA;QAMD,oCAAQ,GAAR,eAAmB;QACnB,uCAAW,GAAX;;YACE,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;SACvC;;;;gBA7BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,8vBAAyC;;iBAE1C;;;;uBAEEC,UAAK;uBACLA,UAAK;8BACLA,UAAK;0BACLA,UAAK;2BACLA,UAAK;8BACLA,UAAK;4BACLC,iBAAY,SAAC,iBAAiB;;;;QCNjC;;;;;gBALCC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;oBACpD,OAAO,EAAE,CAACC,mBAAY,EAAEC,iBAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;iBAChD;;;ICVD;;;;;;;;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/input",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t(((n="undefined"!=typeof globalThis?globalThis:n||self)["mis-crystal-design-system"]=n["mis-crystal-design-system"]||{},n["mis-crystal-design-system"].input={}),n.ng.core,n.ng.forms,n.rxjs,n.rxjs.operators,n.ng.common)}(this,(function(n,t,e,i,r,o){"use strict";var p=function(){function n(n,t){this.el=n,this.control=t,this.validityChange=new i.ReplaySubject(1),this.validity=this.validityChange.asObservable(),this.endObs=new i.Subject,this.focus=!1,this.hasValue=!1}return n.prototype.ngOnInit=function(){var n,t,e=this;null===(t=null===(n=this.control)||void 0===n?void 0:n.control)||void 0===t||t.valueChanges.pipe(r.takeUntil(this.endObs)).subscribe((function(){var n;e.validityChange.next(!(null===(n=e.control.control)||void 0===n?void 0:n.invalid))})),this.el.nativeElement.placeholder+=" "},n.prototype.ngOnDestroy=function(){this.endObs.next(),this.endObs.complete()},n}();p.decorators=[{type:t.Directive,args:[{selector:"input[misInput]"}]}],p.ctorParameters=function(){return[{type:t.ElementRef},{type:e.NgControl,decorators:[{type:t.Self},{type:t.Optional}]}]};var a=function(){function n(){this.type="floating",this.size="sm",this.noHints=!1,this.hasError=!1,this.inputValidity=!0}return Object.defineProperty(n.prototype,"formInput",{set:function(n){var t,e,i=this;this.placeholder||(this.placeholder=(null==n?void 0:n.el.nativeElement.placeholder)||""),this.inputCtrl=null===(t=n.control)||void 0===t?void 0:t.control,null===(e=this.inputSubscription)||void 0===e||e.unsubscribe(),this.inputSubscription=null==n?void 0:n.validity.subscribe((function(n){return i.inputValidity=n})),this.placeholder+=" "},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.ngOnDestroy=function(){var n;null===(n=this.inputSubscription)||void 0===n||n.unsubscribe()},n}();a.decorators=[{type:t.Component,args:[{selector:"mis-input",template:'<div\n [class]="\'input-container \' + size"\n [ngClass]="{\n rounded: type === \'rounded\',\n floating: type === \'floating\',\n \'has-error\': !inputValidity || hasError,\n \'no-hint\': noHints,\n \'mis-disabled\': inputCtrl?.disabled\n }"\n>\n <div class="input-wrapper">\n <ng-content select="[mis-input-icon]"></ng-content>\n <div class="mis-input">\n <ng-content select="input"></ng-content>\n <span class="mis-placeholder">{{ placeholder }}
|
|
1
|
+
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/input",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t(((n="undefined"!=typeof globalThis?globalThis:n||self)["mis-crystal-design-system"]=n["mis-crystal-design-system"]||{},n["mis-crystal-design-system"].input={}),n.ng.core,n.ng.forms,n.rxjs,n.rxjs.operators,n.ng.common)}(this,(function(n,t,e,i,r,o){"use strict";var p=function(){function n(n,t){this.el=n,this.control=t,this.validityChange=new i.ReplaySubject(1),this.validity=this.validityChange.asObservable(),this.endObs=new i.Subject,this.focus=!1,this.hasValue=!1}return n.prototype.ngOnInit=function(){var n,t,e=this;null===(t=null===(n=this.control)||void 0===n?void 0:n.control)||void 0===t||t.valueChanges.pipe(r.takeUntil(this.endObs)).subscribe((function(){var n;e.validityChange.next(!(null===(n=e.control.control)||void 0===n?void 0:n.invalid))})),this.el.nativeElement.placeholder+=" "},n.prototype.ngOnDestroy=function(){this.endObs.next(),this.endObs.complete()},n}();p.decorators=[{type:t.Directive,args:[{selector:"input[misInput]"}]}],p.ctorParameters=function(){return[{type:t.ElementRef},{type:e.NgControl,decorators:[{type:t.Self},{type:t.Optional}]}]};var a=function(){function n(){this.type="floating",this.size="sm",this.noHints=!1,this.hasError=!1,this.isMandatory=!1,this.inputValidity=!0}return Object.defineProperty(n.prototype,"formInput",{set:function(n){var t,e,i=this;this.placeholder||(this.placeholder=(null==n?void 0:n.el.nativeElement.placeholder)||""),this.inputCtrl=null===(t=n.control)||void 0===t?void 0:t.control,null===(e=this.inputSubscription)||void 0===e||e.unsubscribe(),this.inputSubscription=null==n?void 0:n.validity.subscribe((function(n){return i.inputValidity=n})),this.placeholder+=" "},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){},n.prototype.ngOnDestroy=function(){var n;null===(n=this.inputSubscription)||void 0===n||n.unsubscribe()},n}();a.decorators=[{type:t.Component,args:[{selector:"mis-input",template:'<div\n [class]="\'input-container \' + size"\n [ngClass]="{\n rounded: type === \'rounded\',\n floating: type === \'floating\',\n \'has-error\': !inputValidity || hasError,\n \'no-hint\': noHints,\n \'mis-disabled\': inputCtrl?.disabled\n }"\n>\n <div class="input-wrapper">\n <ng-content select="[mis-input-icon]"></ng-content>\n <div class="mis-input">\n <ng-content select="input"></ng-content>\n <span class="mis-placeholder">{{ placeholder }}<span *ngIf="isMandatory" style="color: red;">*</span></span>\n </div>\n <ng-content select="[mis-input-act]"></ng-content>\n </div>\n <ng-content select="[mis-input-hint]"></ng-content>\n <ng-content select="[mis-input-error]"></ng-content>\n</div>\n',styles:[":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],placeholder:[{type:t.Input}],noHints:[{type:t.Input}],hasError:[{type:t.Input}],isMandatory:[{type:t.Input}],formInput:[{type:t.ContentChild,args:[p]}]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{declarations:[a,p],imports:[o.CommonModule,e.FormsModule],exports:[a,p]}]}],n.MisInputComponent=a,n.MisInputDirective=p,n.MisInputModule=s,Object.defineProperty(n,"__esModule",{value:!0})}));
|
|
2
2
|
//# sourceMappingURL=mis-crystal-design-system-input.umd.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts"],"names":["MisInputDirective","el","control","this","validityChange","ReplaySubject","validity","asObservable","endObs","Subject","focus","hasValue","prototype","ngOnInit","_this","_b","_a","valueChanges","pipe","takeUntil","subscribe","next","invalid","nativeElement","placeholder","ngOnDestroy","complete","Directive","args","selector","ElementRef","NgControl","decorators","type","Self","Optional","MisInputComponent","size","noHints","hasError","inputValidity","Object","defineProperty","input","inputCtrl","inputSubscription","unsubscribe","res","Component","template","Input","ContentChild","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"uoBAUE,SAAAA,EAAmBC,EAA2CC,GAA3CC,KAAAF,GAAAA,EAA2CE,KAAAD,QAAAA,EACtDC,KAAAC,eAAyC,IAAIC,EAAAA,cAAc,GACnEF,KAAAG,SAAWH,KAAKC,eAAeG,eAC/BJ,KAAAK,OAAwB,IAAIC,EAAAA,QAC5BN,KAAAO,OAAQ,EACRP,KAAAQ,UAAW,SAEXX,EAAAY,UAAAC,SAAA,WAAA,QAAAC,EAAAX,KACuB,QAArBY,EAAY,QAAZC,EAAAb,KAAKD,eAAO,IAAAc,OAAA,EAAAA,EAAEd,eAAO,IAAAa,GAAAA,EAAEE,aAAaC,KAAKC,EAAAA,UAAUhB,KAAKK,SAASY,WAAU,iBACzEN,EAAKV,eAAeiB,OAA0B,QAArBL,EAACF,EAAKZ,QAAQA,eAAO,IAAAc,OAAA,EAAAA,EAAEM,aAElDnB,KAAKF,GAAGsB,cAAcC,aAAe,KAEvCxB,EAAAY,UAAAa,YAAA,WACEtB,KAAKK,OAAOa,OACZlB,KAAKK,OAAOkB,qCApBfC,EAAAA,UAASC,KAAA,CAAC,CAETC,SAAU,+DAPQC,EAAAA,kBACXC,EAAAA,UAASC,WAAA,CAAA,CAAAC,KASoBC,EAAAA,MAAI,CAAAD,KAAIE,EAAAA,+
|
|
1
|
+
{"version":3,"sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts"],"names":["MisInputDirective","el","control","this","validityChange","ReplaySubject","validity","asObservable","endObs","Subject","focus","hasValue","prototype","ngOnInit","_this","_b","_a","valueChanges","pipe","takeUntil","subscribe","next","invalid","nativeElement","placeholder","ngOnDestroy","complete","Directive","args","selector","ElementRef","NgControl","decorators","type","Self","Optional","MisInputComponent","size","noHints","hasError","isMandatory","inputValidity","Object","defineProperty","input","inputCtrl","inputSubscription","unsubscribe","res","Component","template","Input","ContentChild","NgModule","declarations","imports","CommonModule","FormsModule","exports"],"mappings":"uoBAUE,SAAAA,EAAmBC,EAA2CC,GAA3CC,KAAAF,GAAAA,EAA2CE,KAAAD,QAAAA,EACtDC,KAAAC,eAAyC,IAAIC,EAAAA,cAAc,GACnEF,KAAAG,SAAWH,KAAKC,eAAeG,eAC/BJ,KAAAK,OAAwB,IAAIC,EAAAA,QAC5BN,KAAAO,OAAQ,EACRP,KAAAQ,UAAW,SAEXX,EAAAY,UAAAC,SAAA,WAAA,QAAAC,EAAAX,KACuB,QAArBY,EAAY,QAAZC,EAAAb,KAAKD,eAAO,IAAAc,OAAA,EAAAA,EAAEd,eAAO,IAAAa,GAAAA,EAAEE,aAAaC,KAAKC,EAAAA,UAAUhB,KAAKK,SAASY,WAAU,iBACzEN,EAAKV,eAAeiB,OAA0B,QAArBL,EAACF,EAAKZ,QAAQA,eAAO,IAAAc,OAAA,EAAAA,EAAEM,aAElDnB,KAAKF,GAAGsB,cAAcC,aAAe,KAEvCxB,EAAAY,UAAAa,YAAA,WACEtB,KAAKK,OAAOa,OACZlB,KAAKK,OAAOkB,qCApBfC,EAAAA,UAASC,KAAA,CAAC,CAETC,SAAU,+DAPQC,EAAAA,kBACXC,EAAAA,UAASC,WAAA,CAAA,CAAAC,KASoBC,EAAAA,MAAI,CAAAD,KAAIE,EAAAA,+BCmB5C,SAAAC,IAlBSjC,KAAA8B,KAA+B,WAC/B9B,KAAAkC,KAA2B,KAE3BlC,KAAAmC,SAAU,EACVnC,KAAAoC,UAAW,EACXpC,KAAAqC,aAAsB,EAY/BrC,KAAAsC,eAAyB,SAXzBC,OAAAC,eAAqCP,EAAAxB,UAAA,YAAS,KAA9C,SAA+CgC,GAA/C,QAAA9B,EAAAX,KACOA,KAAKqB,cACRrB,KAAKqB,aAAcoB,MAAAA,OAAK,EAALA,EAAO3C,GAAGsB,cAAcC,cAAe,IAE5DrB,KAAK0C,UAAyB,QAAhB7B,EAAG4B,EAAM1C,eAAO,IAAAc,OAAA,EAAAA,EAAEd,QACV,QAAtBa,EAAAZ,KAAK2C,yBAAiB,IAAA/B,GAAAA,EAAEgC,cACxB5C,KAAK2C,kBAAoBF,MAAAA,OAAK,EAALA,EAAOtC,SAASc,WAAU,SAAA4B,GAAO,OAAClC,EAAK2B,cAAgBO,KAChF7C,KAAKqB,aAAe,qCAOtBY,EAAAxB,UAAAC,SAAA,aACAuB,EAAAxB,UAAAa,YAAA,iBACwB,QAAtBT,EAAAb,KAAK2C,yBAAiB,IAAA9B,GAAAA,EAAE+B,wCA5B3BE,EAAAA,UAASrB,KAAA,CAAC,CACTC,SAAU,YACVqB,SAAA,k/MAICC,EAAAA,oBACAA,EAAAA,2BACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,2BACAA,EAAAA,yBACAC,EAAAA,aAAYxB,KAAA,CAAC5B,YCNhB,iCALCqD,EAAAA,SAAQzB,KAAA,CAAC,CACR0B,aAAc,CAAClB,EAAmBpC,GAClCuD,QAAS,CAACC,EAAAA,aAAcC,EAAAA,aACxBC,QAAS,CAACtB,EAAmBpC","sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n // tslint:disable-next-line\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n validity = this.validityChange.asObservable();\n endObs: Subject<void> = new Subject();\n focus = false;\n hasValue = false;\n\n ngOnInit(): void {\n this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n this.validityChange.next(!this.control.control?.invalid);\n });\n this.el.nativeElement.placeholder += \" \";\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n @Input() type: \"rounded\" | \"floating\" = \"floating\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n @Input() placeholder: string; // floating placeholder text\n @Input() noHints = false;\n @Input() hasError = false; // show input in error state\n @Input() isMandatory:boolean = false; // show input as mandatory\n @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n if (!this.placeholder) {\n this.placeholder = input?.el.nativeElement.placeholder || \"\";\n }\n this.inputCtrl = input.control?.control;\n this.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n this.placeholder += \" \";\n }\n inputCtrl: AbstractControl;\n inputSubscription: Subscription | undefined;\n inputValidity: boolean = true;\n constructor() {}\n\n ngOnInit(): void {}\n ngOnDestroy(): void {\n this.inputSubscription?.unsubscribe();\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n"]}
|
|
@@ -1,31 +1,95 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
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')) :
|
|
3
|
-
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) :
|
|
4
|
-
(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));
|
|
5
|
-
}(this, (function (exports, core, forms, common, overlay, scrolling, dropdown) { 'use strict';
|
|
2
|
+
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')) :
|
|
3
|
+
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) :
|
|
4
|
+
(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));
|
|
5
|
+
}(this, (function (exports, core, forms, googleLibphonenumber, libphonenumberJs, common, overlay, scrolling, dropdown) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var PhoneInputComponent = /** @class */ (function () {
|
|
8
8
|
function PhoneInputComponent() {
|
|
9
|
+
this.dropdownHeight = '';
|
|
10
|
+
this.dropdownWidth = '';
|
|
9
11
|
this.dropdownData = [];
|
|
10
|
-
this.dropdownSelectedItem = { value:
|
|
12
|
+
this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
|
|
11
13
|
this.inputPlaceholder = 'Enter';
|
|
12
14
|
this.inputFormControl = new forms.FormControl();
|
|
13
15
|
this.onDropdownSelection = new core.EventEmitter();
|
|
14
|
-
this.
|
|
15
|
-
this.
|
|
16
|
-
this.
|
|
16
|
+
this.onInvalidPhoneNumber = new core.EventEmitter();
|
|
17
|
+
this.dropdownListWidth = '';
|
|
18
|
+
this.dropdownListHeight = '';
|
|
19
|
+
this.searchEnabled = true;
|
|
20
|
+
this.inputType = 'number';
|
|
21
|
+
this.searchLabel = 'Search Keyword';
|
|
22
|
+
this.defaultCountry = 'IN';
|
|
23
|
+
this.phoneValidator = true;
|
|
24
|
+
this.countryCodes = [{ label: '', value: '', countryCode: '' }];
|
|
25
|
+
this.selectedCountryName = '';
|
|
26
|
+
this.validationMessage = '';
|
|
27
|
+
this.inputTouched = false;
|
|
28
|
+
this.phoneUtil = googleLibphonenumber.PhoneNumberUtil.getInstance();
|
|
17
29
|
}
|
|
18
30
|
PhoneInputComponent.prototype.ngOnInit = function () {
|
|
31
|
+
var _this = this;
|
|
32
|
+
if (this.phoneValidator) {
|
|
33
|
+
this.loadCountryCodes();
|
|
34
|
+
this.dropdownData = this.countryCodes;
|
|
35
|
+
var countryCodeToSelect_1 = this.defaultCountry;
|
|
36
|
+
var def = this.countryCodes.find(function (item) { return item.countryCode === countryCodeToSelect_1; });
|
|
37
|
+
if (def) {
|
|
38
|
+
this.dropdownSelectedItem = def;
|
|
39
|
+
this.selectedCountryName = def.label;
|
|
40
|
+
}
|
|
41
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
42
|
+
}
|
|
43
|
+
this.inputFormControl.valueChanges.subscribe(function (value) {
|
|
44
|
+
_this.validatePhoneNumber(value, _this.dropdownSelectedItem.countryCode);
|
|
45
|
+
});
|
|
19
46
|
};
|
|
20
47
|
PhoneInputComponent.prototype.handleDropdownSelection = function (item) {
|
|
21
|
-
this.
|
|
48
|
+
this.dropdownSelectedItem = item;
|
|
49
|
+
this.onDropdownSelection.emit(item.countryCode);
|
|
50
|
+
this.selectedCountryName = item.label;
|
|
51
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
52
|
+
this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
|
|
53
|
+
};
|
|
54
|
+
PhoneInputComponent.prototype.loadCountryCodes = function () {
|
|
55
|
+
var countries = libphonenumberJs.getCountries();
|
|
56
|
+
this.countryCodes = countries.map(function (countryCode) { return ({
|
|
57
|
+
value: libphonenumberJs.getCountryCallingCode(countryCode).toString(),
|
|
58
|
+
label: countryCode + " (+" + libphonenumberJs.getCountryCallingCode(countryCode) + ")",
|
|
59
|
+
countryCode: countryCode,
|
|
60
|
+
}); });
|
|
61
|
+
};
|
|
62
|
+
PhoneInputComponent.prototype.validatePhoneNumber = function (value, countryCode) {
|
|
63
|
+
var phoneNumber = (value === null || value === void 0 ? void 0 : value.phoneNumber) || value;
|
|
64
|
+
if (phoneNumber && countryCode) {
|
|
65
|
+
try {
|
|
66
|
+
var number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
|
|
67
|
+
var isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
|
|
68
|
+
if (isValid) {
|
|
69
|
+
this.validationMessage = null;
|
|
70
|
+
this.onInvalidPhoneNumber.emit('');
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
this.validationMessage = "Phone number invalid for country code: +" + this.dropdownSelectedItem.value + "(" + this.dropdownSelectedItem.countryCode + ")";
|
|
74
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
catch (error) {
|
|
78
|
+
this.validationMessage = 'Invalid input';
|
|
79
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
PhoneInputComponent.prototype.onBlur = function () {
|
|
84
|
+
this.inputTouched = true;
|
|
85
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
22
86
|
};
|
|
23
87
|
return PhoneInputComponent;
|
|
24
88
|
}());
|
|
25
89
|
PhoneInputComponent.decorators = [
|
|
26
90
|
{ type: core.Component, args: [{
|
|
27
91
|
selector: "mis-phone-input",
|
|
28
|
-
template: "<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\"
|
|
92
|
+
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",
|
|
29
93
|
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}"]
|
|
30
94
|
},] }
|
|
31
95
|
];
|
|
@@ -40,11 +104,14 @@
|
|
|
40
104
|
inputPlaceholder: [{ type: core.Input }],
|
|
41
105
|
inputFormControl: [{ type: core.Input }],
|
|
42
106
|
onDropdownSelection: [{ type: core.Output }],
|
|
107
|
+
onInvalidPhoneNumber: [{ type: core.Output }],
|
|
43
108
|
dropdownListWidth: [{ type: core.Input }],
|
|
44
109
|
dropdownListHeight: [{ type: core.Input }],
|
|
45
110
|
searchEnabled: [{ type: core.Input }],
|
|
46
111
|
inputType: [{ type: core.Input }],
|
|
47
|
-
searchLabel: [{ type: core.Input }]
|
|
112
|
+
searchLabel: [{ type: core.Input }],
|
|
113
|
+
defaultCountry: [{ type: core.Input }],
|
|
114
|
+
phoneValidator: [{ type: core.Input }]
|
|
48
115
|
};
|
|
49
116
|
|
|
50
117
|
var PhoneInputModule = /** @class */ (function () {
|
|
@@ -1 +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,
|
|
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 { 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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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!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})}));
|
|
2
2
|
//# sourceMappingURL=mis-crystal-design-system-phone-input.umd.min.js.map
|
|
@@ -1 +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","
|
|
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","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"]}
|
|
@@ -6,6 +6,7 @@ export class MisInputComponent {
|
|
|
6
6
|
this.size = "sm";
|
|
7
7
|
this.noHints = false;
|
|
8
8
|
this.hasError = false; // show input in error state
|
|
9
|
+
this.isMandatory = false; // show input as mandatory
|
|
9
10
|
this.inputValidity = true;
|
|
10
11
|
}
|
|
11
12
|
set formInput(input) {
|
|
@@ -27,7 +28,7 @@ export class MisInputComponent {
|
|
|
27
28
|
MisInputComponent.decorators = [
|
|
28
29
|
{ type: Component, args: [{
|
|
29
30
|
selector: "mis-input",
|
|
30
|
-
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}
|
|
31
|
+
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n",
|
|
31
32
|
styles: [":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]
|
|
32
33
|
},] }
|
|
33
34
|
];
|
|
@@ -38,6 +39,7 @@ MisInputComponent.propDecorators = {
|
|
|
38
39
|
placeholder: [{ type: Input }],
|
|
39
40
|
noHints: [{ type: Input }],
|
|
40
41
|
hasError: [{ type: Input }],
|
|
42
|
+
isMandatory: [{ type: Input }],
|
|
41
43
|
formInput: [{ type: ContentChild, args: [MisInputDirective,] }]
|
|
42
44
|
};
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL2lucHV0L21pcy1pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUF3QyxNQUFNLGVBQWUsQ0FBQztBQUdyRyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQU92RSxNQUFNLE9BQU8saUJBQWlCO0lBbUI1QjtRQWxCUyxTQUFJLEdBQTJCLFVBQVUsQ0FBQztRQUMxQyxTQUFJLEdBQXVCLElBQUksQ0FBQztRQUVoQyxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGFBQVEsR0FBRyxLQUFLLENBQUMsQ0FBQyw0QkFBNEI7UUFDOUMsZ0JBQVcsR0FBVyxLQUFLLENBQUMsQ0FBQywwQkFBMEI7UUFZaEUsa0JBQWEsR0FBWSxJQUFJLENBQUM7SUFDZixDQUFDO0lBWmhCLElBQXFDLFNBQVMsQ0FBQyxLQUF3Qjs7UUFDckUsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxDQUFBLEtBQUssYUFBTCxLQUFLLHVCQUFMLEtBQUssQ0FBRSxFQUFFLENBQUMsYUFBYSxDQUFDLFdBQVcsS0FBSSxFQUFFLENBQUM7U0FDOUQ7UUFDRCxJQUFJLENBQUMsU0FBUyxTQUFHLEtBQUssQ0FBQyxPQUFPLDBDQUFFLE9BQU8sQ0FBQztRQUN4QyxNQUFBLElBQUksQ0FBQyxpQkFBaUIsMENBQUUsV0FBVyxHQUFHO1FBQ3RDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLGFBQUwsS0FBSyx1QkFBTCxLQUFLLENBQUUsUUFBUSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ3RGLElBQUksQ0FBQyxXQUFXLElBQUksR0FBRyxDQUFDO0lBQzFCLENBQUM7SUFNRCxRQUFRLEtBQVUsQ0FBQztJQUNuQixXQUFXOztRQUNULE1BQUEsSUFBSSxDQUFDLGlCQUFpQiwwQ0FBRSxXQUFXLEdBQUc7SUFDeEMsQ0FBQzs7O1lBN0JGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsV0FBVztnQkFDckIsOHZCQUF5Qzs7YUFFMUM7Ozs7bUJBRUUsS0FBSzttQkFDTCxLQUFLOzBCQUNMLEtBQUs7c0JBQ0wsS0FBSzt1QkFDTCxLQUFLOzBCQUNMLEtBQUs7d0JBQ0wsWUFBWSxTQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCB9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSBcInJ4anNcIjtcbmltcG9ydCB7IE1pc0lucHV0RGlyZWN0aXZlIH0gZnJvbSBcIi4vZGlyZWN0aXZlcy9pbnB1dC9pbnB1dC5kaXJlY3RpdmVcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm1pcy1pbnB1dFwiLFxuICB0ZW1wbGF0ZVVybDogXCIuL21pcy1pbnB1dC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vbWlzLWlucHV0LmNvbXBvbmVudC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIE1pc0lucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSB0eXBlOiBcInJvdW5kZWRcIiB8IFwiZmxvYXRpbmdcIiA9IFwiZmxvYXRpbmdcIjtcbiAgQElucHV0KCkgc2l6ZTogXCJzbVwiIHwgXCJtZFwiIHwgXCJsZ1wiID0gXCJzbVwiO1xuICBASW5wdXQoKSBwbGFjZWhvbGRlcjogc3RyaW5nOyAvLyBmbG9hdGluZyBwbGFjZWhvbGRlciB0ZXh0XG4gIEBJbnB1dCgpIG5vSGludHMgPSBmYWxzZTtcbiAgQElucHV0KCkgaGFzRXJyb3IgPSBmYWxzZTsgLy8gc2hvdyBpbnB1dCBpbiBlcnJvciBzdGF0ZVxuICBASW5wdXQoKSBpc01hbmRhdG9yeTpib29sZWFuID0gZmFsc2U7IC8vIHNob3cgaW5wdXQgYXMgbWFuZGF0b3J5XG4gIEBDb250ZW50Q2hpbGQoTWlzSW5wdXREaXJlY3RpdmUpIHNldCBmb3JtSW5wdXQoaW5wdXQ6IE1pc0lucHV0RGlyZWN0aXZlKSB7XG4gICAgaWYgKCF0aGlzLnBsYWNlaG9sZGVyKSB7XG4gICAgICB0aGlzLnBsYWNlaG9sZGVyID0gaW5wdXQ/LmVsLm5hdGl2ZUVsZW1lbnQucGxhY2Vob2xkZXIgfHwgXCJcIjtcbiAgICB9XG4gICAgdGhpcy5pbnB1dEN0cmwgPSBpbnB1dC5jb250cm9sPy5jb250cm9sO1xuICAgIHRoaXMuaW5wdXRTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5pbnB1dFN1YnNjcmlwdGlvbiA9IGlucHV0Py52YWxpZGl0eS5zdWJzY3JpYmUocmVzID0+ICh0aGlzLmlucHV0VmFsaWRpdHkgPSByZXMpKTtcbiAgICB0aGlzLnBsYWNlaG9sZGVyICs9IFwiIFwiO1xuICB9XG4gIGlucHV0Q3RybDogQWJzdHJhY3RDb250cm9sO1xuICBpbnB1dFN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uIHwgdW5kZWZpbmVkO1xuICBpbnB1dFZhbGlkaXR5OiBib29sZWFuID0gdHJ1ZTtcbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5pbnB1dFN1YnNjcmlwdGlvbj8udW5zdWJzY3JpYmUoKTtcbiAgfVxufVxuIl19
|
|
@@ -1,26 +1,91 @@
|
|
|
1
|
-
import { Component, EventEmitter, Input, Output } from
|
|
2
|
-
import { FormControl } from
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { FormControl } from '@angular/forms';
|
|
3
|
+
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
4
|
+
import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
|
|
3
5
|
export class PhoneInputComponent {
|
|
4
6
|
constructor() {
|
|
7
|
+
this.dropdownHeight = '';
|
|
8
|
+
this.dropdownWidth = '';
|
|
5
9
|
this.dropdownData = [];
|
|
6
|
-
this.dropdownSelectedItem = { value:
|
|
10
|
+
this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
|
|
7
11
|
this.inputPlaceholder = 'Enter';
|
|
8
12
|
this.inputFormControl = new FormControl();
|
|
9
13
|
this.onDropdownSelection = new EventEmitter();
|
|
10
|
-
this.
|
|
11
|
-
this.
|
|
12
|
-
this.
|
|
14
|
+
this.onInvalidPhoneNumber = new EventEmitter();
|
|
15
|
+
this.dropdownListWidth = '';
|
|
16
|
+
this.dropdownListHeight = '';
|
|
17
|
+
this.searchEnabled = true;
|
|
18
|
+
this.inputType = 'number';
|
|
19
|
+
this.searchLabel = 'Search Keyword';
|
|
20
|
+
this.defaultCountry = 'IN';
|
|
21
|
+
this.phoneValidator = true;
|
|
22
|
+
this.countryCodes = [{ label: '', value: '', countryCode: '' }];
|
|
23
|
+
this.selectedCountryName = '';
|
|
24
|
+
this.validationMessage = '';
|
|
25
|
+
this.inputTouched = false;
|
|
26
|
+
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
13
27
|
}
|
|
14
28
|
ngOnInit() {
|
|
29
|
+
if (this.phoneValidator) {
|
|
30
|
+
this.loadCountryCodes();
|
|
31
|
+
this.dropdownData = this.countryCodes;
|
|
32
|
+
const countryCodeToSelect = this.defaultCountry;
|
|
33
|
+
const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);
|
|
34
|
+
if (def) {
|
|
35
|
+
this.dropdownSelectedItem = def;
|
|
36
|
+
this.selectedCountryName = def.label;
|
|
37
|
+
}
|
|
38
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
39
|
+
}
|
|
40
|
+
this.inputFormControl.valueChanges.subscribe((value) => {
|
|
41
|
+
this.validatePhoneNumber(value, this.dropdownSelectedItem.countryCode);
|
|
42
|
+
});
|
|
15
43
|
}
|
|
16
44
|
handleDropdownSelection(item) {
|
|
17
|
-
this.
|
|
45
|
+
this.dropdownSelectedItem = item;
|
|
46
|
+
this.onDropdownSelection.emit(item.countryCode);
|
|
47
|
+
this.selectedCountryName = item.label;
|
|
48
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
49
|
+
this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
|
|
50
|
+
}
|
|
51
|
+
loadCountryCodes() {
|
|
52
|
+
const countries = getCountries();
|
|
53
|
+
this.countryCodes = countries.map((countryCode) => ({
|
|
54
|
+
value: getCountryCallingCode(countryCode).toString(),
|
|
55
|
+
label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,
|
|
56
|
+
countryCode: countryCode,
|
|
57
|
+
}));
|
|
58
|
+
}
|
|
59
|
+
validatePhoneNumber(value, countryCode) {
|
|
60
|
+
const phoneNumber = (value === null || value === void 0 ? void 0 : value.phoneNumber) || value;
|
|
61
|
+
if (phoneNumber && countryCode) {
|
|
62
|
+
try {
|
|
63
|
+
const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
|
|
64
|
+
const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
|
|
65
|
+
if (isValid) {
|
|
66
|
+
this.validationMessage = null;
|
|
67
|
+
this.onInvalidPhoneNumber.emit('');
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem.value}(${this.dropdownSelectedItem.countryCode})`;
|
|
71
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
catch (error) {
|
|
75
|
+
this.validationMessage = 'Invalid input';
|
|
76
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
onBlur() {
|
|
81
|
+
this.inputTouched = true;
|
|
82
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
18
83
|
}
|
|
19
84
|
}
|
|
20
85
|
PhoneInputComponent.decorators = [
|
|
21
86
|
{ type: Component, args: [{
|
|
22
87
|
selector: "mis-phone-input",
|
|
23
|
-
template: "<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\"
|
|
88
|
+
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",
|
|
24
89
|
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}"]
|
|
25
90
|
},] }
|
|
26
91
|
];
|
|
@@ -35,10 +100,13 @@ PhoneInputComponent.propDecorators = {
|
|
|
35
100
|
inputPlaceholder: [{ type: Input }],
|
|
36
101
|
inputFormControl: [{ type: Input }],
|
|
37
102
|
onDropdownSelection: [{ type: Output }],
|
|
103
|
+
onInvalidPhoneNumber: [{ type: Output }],
|
|
38
104
|
dropdownListWidth: [{ type: Input }],
|
|
39
105
|
dropdownListHeight: [{ type: Input }],
|
|
40
106
|
searchEnabled: [{ type: Input }],
|
|
41
107
|
inputType: [{ type: Input }],
|
|
42
|
-
searchLabel: [{ type: Input }]
|
|
108
|
+
searchLabel: [{ type: Input }],
|
|
109
|
+
defaultCountry: [{ type: Input }],
|
|
110
|
+
phoneValidator: [{ type: Input }]
|
|
43
111
|
};
|
|
44
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvcGhvbmUtaW5wdXQvcGhvbmUtaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUcsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBUTdDLE1BQU0sT0FBTyxtQkFBbUI7SUFrQjlCO1FBZFMsaUJBQVksR0FBbUIsRUFBRSxDQUFDO1FBQ2xDLHlCQUFvQixHQUFnQixFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxDQUFBO1FBRzVELHFCQUFnQixHQUFXLE9BQU8sQ0FBQztRQUNuQyxxQkFBZ0IsR0FBZ0IsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQUVqRCx3QkFBbUIsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO1FBRy9DLGtCQUFhLEdBQVMsS0FBSyxDQUFDO1FBQzVCLGNBQVMsR0FBVyxRQUFRLENBQUM7UUFDN0IsZ0JBQVcsR0FBVSxnQkFBZ0IsQ0FBQTtJQUUvQixDQUFDO0lBQ2hCLFFBQVE7SUFDUixDQUFDO0lBRUQsdUJBQXVCLENBQUMsSUFBa0I7UUFDeEMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN0QyxDQUFDOzs7WUE3QkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxpQkFBaUI7Z0JBQzNCLDh1QkFBMkM7O2FBRTVDOzs7OzZCQUVFLEtBQUs7NEJBQ0wsS0FBSzswQkFDTCxLQUFLOzJCQUNMLEtBQUs7bUNBQ0wsS0FBSztvQkFDTCxLQUFLOytCQUVMLEtBQUs7K0JBQ0wsS0FBSztrQ0FFTCxNQUFNO2dDQUNOLEtBQUs7aUNBQ0wsS0FBSzs0QkFDTCxLQUFLO3dCQUNMLEtBQUs7MEJBQ0wsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEZvcm1Db250cm9sIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5pbXBvcnQgeyBEcm9wZG93bkl0ZW0gfSBmcm9tIFwibWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS9kcm9wZG93blwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwibWlzLXBob25lLWlucHV0XCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcGhvbmUtaW5wdXQuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3Bob25lLWlucHV0LmNvbXBvbmVudC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIFBob25lSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkcm9wZG93bkhlaWdodD86IHN0cmluZztcbiAgQElucHV0KCkgZHJvcGRvd25XaWR0aD86IHN0cmluZztcbiAgQElucHV0KCkgaW5wdXRIZWlnaHQ/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGRyb3Bkb3duRGF0YTogRHJvcGRvd25JdGVtW10gPSBbXTtcbiAgQElucHV0KCkgZHJvcGRvd25TZWxlY3RlZEl0ZW06RHJvcGRvd25JdGVtID0geyB2YWx1ZTogXCJcIiwgbGFiZWw6IFwiXCIgfSBcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZztcblxuICBASW5wdXQoKSBpbnB1dFBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnRW50ZXInO1xuICBASW5wdXQoKSBpbnB1dEZvcm1Db250cm9sOiBGb3JtQ29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuXG4gIEBPdXRwdXQoKSBvbkRyb3Bkb3duU2VsZWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG4gIEBJbnB1dCgpIGRyb3Bkb3duTGlzdFdpZHRoO1xuICBASW5wdXQoKSBkcm9wZG93bkxpc3RIZWlnaHQ7XG4gIEBJbnB1dCgpIHNlYXJjaEVuYWJsZWQ6Ym9vbGVhbj1mYWxzZTtcbiAgQElucHV0KCkgaW5wdXRUeXBlOiBzdHJpbmcgPSBcIm51bWJlclwiO1xuICBASW5wdXQoKSBzZWFyY2hMYWJlbDpzdHJpbmcgPSBcIlNlYXJjaCBLZXl3b3JkXCJcbiAgXG4gIGNvbnN0cnVjdG9yKCkge31cbiAgbmdPbkluaXQoKSB7XG4gIH1cblxuICBoYW5kbGVEcm9wZG93blNlbGVjdGlvbihpdGVtOiBEcm9wZG93bkl0ZW0pe1xuICAgIHRoaXMub25Ecm9wZG93blNlbGVjdGlvbi5lbWl0KGl0ZW0pO1xuICB9XG5cbn1cbiJdfQ==
|
|
112
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvcGhvbmUtaW5wdXQvcGhvbmUtaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsWUFBWSxFQUFFLHFCQUFxQixFQUFlLE1BQU0sbUJBQW1CLENBQUM7QUFZckYsTUFBTSxPQUFPLG1CQUFtQjtJQXlCOUI7UUF4QlMsbUJBQWMsR0FBWSxFQUFFLENBQUM7UUFDN0Isa0JBQWEsR0FBWSxFQUFFLENBQUM7UUFFNUIsaUJBQVksR0FBeUIsRUFBRSxDQUFDO1FBQ3hDLHlCQUFvQixHQUF1QixFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxXQUFXLEVBQUUsRUFBRSxFQUFFLENBQUM7UUFFckYscUJBQWdCLEdBQVcsT0FBTyxDQUFDO1FBQ25DLHFCQUFnQixHQUFnQixJQUFJLFdBQVcsRUFBRSxDQUFDO1FBQ2pELHdCQUFtQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDakQseUJBQW9CLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUNuRCxzQkFBaUIsR0FBRyxFQUFFLENBQUM7UUFDdkIsdUJBQWtCLEdBQUcsRUFBRSxDQUFDO1FBQ3hCLGtCQUFhLEdBQVksSUFBSSxDQUFDO1FBQzlCLGNBQVMsR0FBVyxRQUFRLENBQUM7UUFDN0IsZ0JBQVcsR0FBVyxnQkFBZ0IsQ0FBQztRQUN2QyxtQkFBYyxHQUFXLElBQUksQ0FBQztRQUM5Qixt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QUFLO2lDQUNMLEtBQUs7NEJBQ0wsS0FBSzt3QkFDTCxLQUFLOzBCQUNMLEtBQUs7NkJBQ0wsS0FBSzs2QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBQaG9uZU51bWJlclV0aWwgfSBmcm9tICdnb29nbGUtbGlicGhvbmVudW1iZXInO1xuaW1wb3J0IHsgZ2V0Q291bnRyaWVzLCBnZXRDb3VudHJ5Q2FsbGluZ0NvZGUsIENvdW50cnlDb2RlIH0gZnJvbSAnbGlicGhvbmVudW1iZXItanMnO1xuaW1wb3J0IHsgRHJvcGRvd25JdGVtIH0gZnJvbSAnbWlzLWNyeXN0YWwtZGVzaWduLXN5c3RlbS9kcm9wZG93bic7XG5cbmludGVyZmFjZSBDdXN0b21Ecm9wZG93bkl0ZW0gZXh0ZW5kcyBEcm9wZG93bkl0ZW0ge1xuICBjb3VudHJ5Q29kZTogc3RyaW5nO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6IFwibWlzLXBob25lLWlucHV0XCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vcGhvbmUtaW5wdXQuY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3Bob25lLWlucHV0LmNvbXBvbmVudC5zY3NzXCJdXG59KVxuZXhwb3J0IGNsYXNzIFBob25lSW5wdXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkcm9wZG93bkhlaWdodD86IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBkcm9wZG93bldpZHRoPzogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGlucHV0SGVpZ2h0PztcbiAgQElucHV0KCkgZHJvcGRvd25EYXRhOiBDdXN0b21Ecm9wZG93bkl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBkcm9wZG93blNlbGVjdGVkSXRlbTogQ3VzdG9tRHJvcGRvd25JdGVtID0geyB2YWx1ZTogJycsIGxhYmVsOiAnJywgY291bnRyeUNvZGU6ICcnIH07XG4gIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGlucHV0UGxhY2Vob2xkZXI6IHN0cmluZyA9ICdFbnRlcic7XG4gIEBJbnB1dCgpIGlucHV0Rm9ybUNvbnRyb2w6IEZvcm1Db250cm9sID0gbmV3IEZvcm1Db250cm9sKCk7XG4gIEBPdXRwdXQoKSBvbkRyb3Bkb3duU2VsZWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBvbkludmFsaWRQaG9uZU51bWJlciA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBASW5wdXQoKSBkcm9wZG93bkxpc3RXaWR0aCA9ICcnO1xuICBASW5wdXQoKSBkcm9wZG93bkxpc3RIZWlnaHQgPSAnJztcbiAgQElucHV0KCkgc2VhcmNoRW5hYmxlZDogYm9vbGVhbiA9IHRydWU7XG4gIEBJbnB1dCgpIGlucHV0VHlwZTogc3RyaW5nID0gJ251bWJlcic7XG4gIEBJbnB1dCgpIHNlYXJjaExhYmVsOiBzdHJpbmcgPSAnU2VhcmNoIEtleXdvcmQnO1xuICBASW5wdXQoKSBkZWZhdWx0Q291bnRyeTogc3RyaW5nID0gJ0lOJztcbiAgQElucHV0KCkgcGhvbmVWYWxpZGF0b3I/ID0gdHJ1ZTtcblxuICBjb3VudHJ5Q29kZXM6IEN1c3RvbURyb3Bkb3duSXRlbVtdID0gW3sgbGFiZWw6ICcnLCB2YWx1ZTogJycsIGNvdW50cnlDb2RlOiAnJyB9XTtcbiAgc2VsZWN0ZWRDb3VudHJ5TmFtZTogc3RyaW5nID0gJyc7XG4gIHZhbGlkYXRpb25NZXNzYWdlOiBzdHJpbmcgPSAnJztcbiAgcHJpdmF0ZSBwaG9uZVV0aWw6IFBob25lTnVtYmVyVXRpbDtcbiAgcHJpdmF0ZSBpbnB1dFRvdWNoZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLnBob25lVXRpbCA9IFBob25lTnVtYmVyVXRpbC5nZXRJbnN0YW5jZSgpO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgaWYgKHRoaXMucGhvbmVWYWxpZGF0b3IpIHtcbiAgICAgIHRoaXMubG9hZENvdW50cnlDb2RlcygpO1xuICAgICAgdGhpcy5kcm9wZG93bkRhdGEgPSB0aGlzLmNvdW50cnlDb2RlcztcbiAgICAgIGNvbnN0IGNvdW50cnlDb2RlVG9TZWxlY3QgPSB0aGlzLmRlZmF1bHRDb3VudHJ5O1xuICAgICAgY29uc3QgZGVmID0gdGhpcy5jb3VudHJ5Q29kZXMuZmluZChpdGVtID0+IGl0ZW0uY291bnRyeUNvZGUgPT09IGNvdW50cnlDb2RlVG9TZWxlY3QpO1xuICAgICAgaWYgKGRlZikge1xuICAgICAgICB0aGlzLmRyb3Bkb3duU2VsZWN0ZWRJdGVtID0gZGVmO1xuICAgICAgICB0aGlzLnNlbGVjdGVkQ291bnRyeU5hbWUgPSBkZWYubGFiZWw7XG4gICAgICB9XG4gICAgICB0aGlzLnZhbGlkYXRlUGhvbmVOdW1iZXIodGhpcy5pbnB1dEZvcm1Db250cm9sLnZhbHVlLCB0aGlzLmRyb3Bkb3duU2VsZWN0ZWRJdGVtLmNvdW50cnlDb2RlKTtcbiAgICB9XG5cbiAgICB0aGlzLmlucHV0Rm9ybUNvbnRyb2wudmFsdWVDaGFuZ2VzLnN1YnNjcmliZSgodmFsdWUpID0+IHtcbiAgICAgIHRoaXMudmFsaWRhdGVQaG9uZU51bWJlcih2YWx1ZSwgdGhpcy5kcm9wZG93blNlbGVjdGVkSXRlbS5jb3VudHJ5Q29kZSk7XG4gICAgfSk7XG4gIH1cblxuICBoYW5kbGVEcm9wZG93blNlbGVjdGlvbihpdGVtOiBDdXN0b21Ecm9wZG93bkl0ZW0pIHtcbiAgICB0aGlzLmRyb3Bkb3duU2VsZWN0ZWRJdGVtID0gaXRlbTtcbiAgICB0aGlzLm9uRHJvcGRvd25TZWxlY3Rpb24uZW1pdChpdGVtLmNvdW50cnlDb2RlKTtcbiAgICB0aGlzLnNlbGVjdGVkQ291bnRyeU5hbWUgPSBpdGVtLmxhYmVsO1xuICAgIHRoaXMudmFsaWRhdGVQaG9uZU51bWJlcih0aGlzLmlucHV0Rm9ybUNvbnRyb2wudmFsdWUsIHRoaXMuZHJvcGRvd25TZWxlY3RlZEl0ZW0uY291bnRyeUNvZGUpO1xuICAgIHRoaXMuaW5wdXRGb3JtQ29udHJvbC5wYXRjaFZhbHVlKHsgY291bnRyeUNvZGU6IGl0ZW0uY291bnRyeUNvZGUgfSwgeyBlbWl0RXZlbnQ6IGZhbHNlIH0pO1xuICB9XG5cbiAgbG9hZENvdW50cnlDb2RlcygpIHtcbiAgICBjb25zdCBjb3VudHJpZXMgPSBnZXRDb3VudHJpZXMoKTtcbiAgICB0aGlzLmNvdW50cnlDb2RlcyA9IGNvdW50cmllcy5tYXAoKGNvdW50cnlDb2RlKSA9PiAoe1xuICAgICAgdmFsdWU6IGdldENvdW50cnlDYWxsaW5nQ29kZShjb3VudHJ5Q29kZSkudG9TdHJpbmcoKSxcbiAgICAgIGxhYmVsOiBgJHtjb3VudHJ5Q29kZX0gKCske2dldENvdW50cnlDYWxsaW5nQ29kZShjb3VudHJ5Q29kZSl9KWAsXG4gICAgICBjb3VudHJ5Q29kZTogY291bnRyeUNvZGUsXG4gICAgfSkpO1xuICB9XG5cbiAgcHVibGljIHZhbGlkYXRlUGhvbmVOdW1iZXIodmFsdWU6IGFueSwgY291bnRyeUNvZGU6IHN0cmluZykge1xuICAgIGNvbnN0IHBob25lTnVtYmVyID0gdmFsdWU/LnBob25lTnVtYmVyIHx8IHZhbHVlO1xuICAgIGlmIChwaG9uZU51bWJlciAmJiBjb3VudHJ5Q29kZSkge1xuICAgICAgdHJ5IHtcbiAgICAgICAgY29uc3QgbnVtYmVyID0gdGhpcy5waG9uZVV0aWwucGFyc2VBbmRLZWVwUmF3SW5wdXQocGhvbmVOdW1iZXIsIGNvdW50cnlDb2RlKTtcbiAgICAgICAgY29uc3QgaXNWYWxpZCA9IHRoaXMucGhvbmVVdGlsLmlzVmFsaWROdW1iZXJGb3JSZWdpb24obnVtYmVyLCBjb3VudHJ5Q29kZSk7XG4gICAgICAgIGlmIChpc1ZhbGlkKSB7XG4gICAgICAgICAgdGhpcy52YWxpZGF0aW9uTWVzc2FnZSA9IG51bGw7XG4gICAgICAgICAgdGhpcy5vbkludmFsaWRQaG9uZU51bWJlci5lbWl0KCcnKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLnZhbGlkYXRpb25NZXNzYWdlID0gYFBob25lIG51bWJlciBpbnZhbGlkIGZvciBjb3VudHJ5IGNvZGU6ICske3RoaXMuZHJvcGRvd25TZWxlY3RlZEl0ZW0udmFsdWV9KCR7dGhpcy5kcm9wZG93blNlbGVjdGVkSXRlbS5jb3VudHJ5Q29kZX0pYDtcbiAgICAgICAgICB0aGlzLm9uSW52YWxpZFBob25lTnVtYmVyLmVtaXQodGhpcy52YWxpZGF0aW9uTWVzc2FnZSk7XG4gICAgICAgIH1cbiAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICAgIHRoaXMudmFsaWRhdGlvbk1lc3NhZ2UgPSAnSW52YWxpZCBpbnB1dCc7XG4gICAgICAgIHRoaXMub25JbnZhbGlkUGhvbmVOdW1iZXIuZW1pdCh0aGlzLnZhbGlkYXRpb25NZXNzYWdlKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBvbkJsdXIoKSB7XG4gICAgdGhpcy5pbnB1dFRvdWNoZWQgPSB0cnVlO1xuICAgIHRoaXMudmFsaWRhdGVQaG9uZU51bWJlcih0aGlzLmlucHV0Rm9ybUNvbnRyb2wudmFsdWUsIHRoaXMuZHJvcGRvd25TZWxlY3RlZEl0ZW0uY291bnRyeUNvZGUpO1xuICB9XG59XG4iXX0=
|
|
@@ -44,6 +44,7 @@ class MisInputComponent {
|
|
|
44
44
|
this.size = "sm";
|
|
45
45
|
this.noHints = false;
|
|
46
46
|
this.hasError = false; // show input in error state
|
|
47
|
+
this.isMandatory = false; // show input as mandatory
|
|
47
48
|
this.inputValidity = true;
|
|
48
49
|
}
|
|
49
50
|
set formInput(input) {
|
|
@@ -65,7 +66,7 @@ class MisInputComponent {
|
|
|
65
66
|
MisInputComponent.decorators = [
|
|
66
67
|
{ type: Component, args: [{
|
|
67
68
|
selector: "mis-input",
|
|
68
|
-
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}
|
|
69
|
+
template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n",
|
|
69
70
|
styles: [":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]
|
|
70
71
|
},] }
|
|
71
72
|
];
|
|
@@ -76,6 +77,7 @@ MisInputComponent.propDecorators = {
|
|
|
76
77
|
placeholder: [{ type: Input }],
|
|
77
78
|
noHints: [{ type: Input }],
|
|
78
79
|
hasError: [{ type: Input }],
|
|
80
|
+
isMandatory: [{ type: Input }],
|
|
79
81
|
formInput: [{ type: ContentChild, args: [MisInputDirective,] }]
|
|
80
82
|
};
|
|
81
83
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input.js","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n // tslint:disable-next-line\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n validity = this.validityChange.asObservable();\n endObs: Subject<void> = new Subject();\n focus = false;\n hasValue = false;\n\n ngOnInit(): void {\n this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n this.validityChange.next(!this.control.control?.invalid);\n });\n this.el.nativeElement.placeholder += \" \";\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n @Input() type: \"rounded\" | \"floating\" = \"floating\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n @Input() placeholder: string; // floating placeholder text\n @Input() noHints = false;\n @Input() hasError = false; // show input in error state\n @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n if (!this.placeholder) {\n this.placeholder = input?.el.nativeElement.placeholder || \"\";\n }\n this.inputCtrl = input.control?.control;\n this.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n this.placeholder += \" \";\n }\n inputCtrl: AbstractControl;\n inputSubscription: Subscription | undefined;\n inputValidity: boolean = true;\n constructor() {}\n\n ngOnInit(): void {}\n ngOnDestroy(): void {\n this.inputSubscription?.unsubscribe();\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MASa,iBAAiB;IAC5B,YAAmB,EAAc,EAA6B,OAAkB;QAA7D,OAAE,GAAF,EAAE,CAAY;QAA6B,YAAO,GAAP,OAAO,CAAW;QACxE,mBAAc,GAA2B,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QAC9C,WAAM,GAAkB,IAAI,OAAO,EAAE,CAAC;QACtC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;KALmE;IAOpF,QAAQ;;QACN,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;;YACzE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;SAC1D,EAAE;QACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;KAC1C;IACD,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACxB;;;YArBF,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;aAC5B;;;YARmB,UAAU;YACrB,SAAS,uBASoB,IAAI,YAAI,QAAQ;;;MCAzC,iBAAiB;
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input.js","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnDestroy, OnInit, Optional, Self } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { ReplaySubject, Subject, Subscription } from \"rxjs\";\nimport { takeUntil } from \"rxjs/operators\";\n\n@Directive({\n // tslint:disable-next-line\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n constructor(public el: ElementRef, @Self() @Optional() public control: NgControl) {}\n private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n validity = this.validityChange.asObservable();\n endObs: Subject<void> = new Subject();\n focus = false;\n hasValue = false;\n\n ngOnInit(): void {\n this.control?.control?.valueChanges.pipe(takeUntil(this.endObs)).subscribe(() => {\n this.validityChange.next(!this.control.control?.invalid);\n });\n this.el.nativeElement.placeholder += \" \";\n }\n ngOnDestroy(): void {\n this.endObs.next();\n this.endObs.complete();\n }\n}\n","import { Component, ContentChild, Input, OnDestroy, OnInit, ViewEncapsulation } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { Subscription } from \"rxjs\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"]\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n @Input() type: \"rounded\" | \"floating\" = \"floating\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"sm\";\n @Input() placeholder: string; // floating placeholder text\n @Input() noHints = false;\n @Input() hasError = false; // show input in error state\n @Input() isMandatory:boolean = false; // show input as mandatory\n @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n if (!this.placeholder) {\n this.placeholder = input?.el.nativeElement.placeholder || \"\";\n }\n this.inputCtrl = input.control?.control;\n this.inputSubscription?.unsubscribe();\n this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));\n this.placeholder += \" \";\n }\n inputCtrl: AbstractControl;\n inputSubscription: Subscription | undefined;\n inputValidity: boolean = true;\n constructor() {}\n\n ngOnInit(): void {}\n ngOnDestroy(): void {\n this.inputSubscription?.unsubscribe();\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MASa,iBAAiB;IAC5B,YAAmB,EAAc,EAA6B,OAAkB;QAA7D,OAAE,GAAF,EAAE,CAAY;QAA6B,YAAO,GAAP,OAAO,CAAW;QACxE,mBAAc,GAA2B,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QAC9C,WAAM,GAAkB,IAAI,OAAO,EAAE,CAAC;QACtC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;KALmE;IAOpF,QAAQ;;QACN,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;;YACzE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAC,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,OAAO,CAAA,CAAC,CAAC;SAC1D,EAAE;QACH,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;KAC1C;IACD,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACxB;;;YArBF,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;aAC5B;;;YARmB,UAAU;YACrB,SAAS,uBASoB,IAAI,YAAI,QAAQ;;;MCAzC,iBAAiB;IAmB5B;QAlBS,SAAI,GAA2B,UAAU,CAAC;QAC1C,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,gBAAW,GAAW,KAAK,CAAC;QAYrC,kBAAa,GAAY,IAAI,CAAC;KACd;IAZhB,IAAqC,SAAS,CAAC,KAAwB;;QACrE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAC,aAAa,CAAC,WAAW,KAAI,EAAE,CAAC;SAC9D;QACD,IAAI,CAAC,SAAS,SAAG,KAAK,CAAC,OAAO,0CAAE,OAAO,CAAC;QACxC,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;QACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,CAAC;QACtF,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;KACzB;IAMD,QAAQ,MAAW;IACnB,WAAW;;QACT,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;KACvC;;;YA7BF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,8vBAAyC;;aAE1C;;;;mBAEE,KAAK;mBACL,KAAK;0BACL,KAAK;sBACL,KAAK;uBACL,KAAK;0BACL,KAAK;wBACL,YAAY,SAAC,iBAAiB;;;MCNpB,cAAc;;;YAL1B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;gBACpD,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;gBACpC,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;aAChD;;;ACVD;;;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
2
2
|
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
3
|
+
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
4
|
+
import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
|
|
3
5
|
import { CommonModule } from '@angular/common';
|
|
4
6
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
5
7
|
import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
|
|
@@ -7,25 +9,88 @@ import { DropdownModule } from 'mis-crystal-design-system/dropdown';
|
|
|
7
9
|
|
|
8
10
|
class PhoneInputComponent {
|
|
9
11
|
constructor() {
|
|
12
|
+
this.dropdownHeight = '';
|
|
13
|
+
this.dropdownWidth = '';
|
|
10
14
|
this.dropdownData = [];
|
|
11
|
-
this.dropdownSelectedItem = { value:
|
|
15
|
+
this.dropdownSelectedItem = { value: '', label: '', countryCode: '' };
|
|
12
16
|
this.inputPlaceholder = 'Enter';
|
|
13
17
|
this.inputFormControl = new FormControl();
|
|
14
18
|
this.onDropdownSelection = new EventEmitter();
|
|
15
|
-
this.
|
|
16
|
-
this.
|
|
17
|
-
this.
|
|
19
|
+
this.onInvalidPhoneNumber = new EventEmitter();
|
|
20
|
+
this.dropdownListWidth = '';
|
|
21
|
+
this.dropdownListHeight = '';
|
|
22
|
+
this.searchEnabled = true;
|
|
23
|
+
this.inputType = 'number';
|
|
24
|
+
this.searchLabel = 'Search Keyword';
|
|
25
|
+
this.defaultCountry = 'IN';
|
|
26
|
+
this.phoneValidator = true;
|
|
27
|
+
this.countryCodes = [{ label: '', value: '', countryCode: '' }];
|
|
28
|
+
this.selectedCountryName = '';
|
|
29
|
+
this.validationMessage = '';
|
|
30
|
+
this.inputTouched = false;
|
|
31
|
+
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
18
32
|
}
|
|
19
33
|
ngOnInit() {
|
|
34
|
+
if (this.phoneValidator) {
|
|
35
|
+
this.loadCountryCodes();
|
|
36
|
+
this.dropdownData = this.countryCodes;
|
|
37
|
+
const countryCodeToSelect = this.defaultCountry;
|
|
38
|
+
const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);
|
|
39
|
+
if (def) {
|
|
40
|
+
this.dropdownSelectedItem = def;
|
|
41
|
+
this.selectedCountryName = def.label;
|
|
42
|
+
}
|
|
43
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
44
|
+
}
|
|
45
|
+
this.inputFormControl.valueChanges.subscribe((value) => {
|
|
46
|
+
this.validatePhoneNumber(value, this.dropdownSelectedItem.countryCode);
|
|
47
|
+
});
|
|
20
48
|
}
|
|
21
49
|
handleDropdownSelection(item) {
|
|
22
|
-
this.
|
|
50
|
+
this.dropdownSelectedItem = item;
|
|
51
|
+
this.onDropdownSelection.emit(item.countryCode);
|
|
52
|
+
this.selectedCountryName = item.label;
|
|
53
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
54
|
+
this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
|
|
55
|
+
}
|
|
56
|
+
loadCountryCodes() {
|
|
57
|
+
const countries = getCountries();
|
|
58
|
+
this.countryCodes = countries.map((countryCode) => ({
|
|
59
|
+
value: getCountryCallingCode(countryCode).toString(),
|
|
60
|
+
label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,
|
|
61
|
+
countryCode: countryCode,
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
validatePhoneNumber(value, countryCode) {
|
|
65
|
+
const phoneNumber = (value === null || value === void 0 ? void 0 : value.phoneNumber) || value;
|
|
66
|
+
if (phoneNumber && countryCode) {
|
|
67
|
+
try {
|
|
68
|
+
const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
|
|
69
|
+
const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
|
|
70
|
+
if (isValid) {
|
|
71
|
+
this.validationMessage = null;
|
|
72
|
+
this.onInvalidPhoneNumber.emit('');
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem.value}(${this.dropdownSelectedItem.countryCode})`;
|
|
76
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
catch (error) {
|
|
80
|
+
this.validationMessage = 'Invalid input';
|
|
81
|
+
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
onBlur() {
|
|
86
|
+
this.inputTouched = true;
|
|
87
|
+
this.validatePhoneNumber(this.inputFormControl.value, this.dropdownSelectedItem.countryCode);
|
|
23
88
|
}
|
|
24
89
|
}
|
|
25
90
|
PhoneInputComponent.decorators = [
|
|
26
91
|
{ type: Component, args: [{
|
|
27
92
|
selector: "mis-phone-input",
|
|
28
|
-
template: "<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\"
|
|
93
|
+
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",
|
|
29
94
|
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}"]
|
|
30
95
|
},] }
|
|
31
96
|
];
|
|
@@ -40,11 +105,14 @@ PhoneInputComponent.propDecorators = {
|
|
|
40
105
|
inputPlaceholder: [{ type: Input }],
|
|
41
106
|
inputFormControl: [{ type: Input }],
|
|
42
107
|
onDropdownSelection: [{ type: Output }],
|
|
108
|
+
onInvalidPhoneNumber: [{ type: Output }],
|
|
43
109
|
dropdownListWidth: [{ type: Input }],
|
|
44
110
|
dropdownListHeight: [{ type: Input }],
|
|
45
111
|
searchEnabled: [{ type: Input }],
|
|
46
112
|
inputType: [{ type: Input }],
|
|
47
|
-
searchLabel: [{ type: Input }]
|
|
113
|
+
searchLabel: [{ type: Input }],
|
|
114
|
+
defaultCountry: [{ type: Input }],
|
|
115
|
+
phoneValidator: [{ type: Input }]
|
|
48
116
|
};
|
|
49
117
|
|
|
50
118
|
class PhoneInputModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-phone-input.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,
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-phone-input.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":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"MisInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"input[misInput]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":10,"character":38}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":46}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":10,"character":73}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mis-input","template":"<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}</span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n","styles":[":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"noHints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"hasError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":16,"character":3},"arguments":[{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"members":{}}},"origins":{"MisInputDirective":"./directives/input/input.directive","MisInputComponent":"./mis-input.component","MisInputModule":"./mis-input.module"},"importAs":"mis-crystal-design-system/input"}
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"MisInputDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"input[misInput]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":10,"character":38}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":10,"character":46}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":10,"character":73}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mis-input","template":"<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error': !inputValidity || hasError,\n 'no-hint': noHints,\n 'mis-disabled': inputCtrl?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder }}<span *ngIf=\"isMandatory\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n","styles":[":root{--pmry-200:#99baf7;--pmry-100:#cbddfb;--pmry-500:#0937b2;--pmry-400:#3c68d0;--pmry-600:#062a99;--pmry-700:#041f80;--pmry-300:#638fe7;--pmry-800:#021567;--pmry-900:#010f55;--sec-d-purple:#40447f;--sec-maroon:#6b034e;--sec-mud-red:#b23600;--sec-orange:#ed711c;--sec-purple:#815fd5;--sec-teal:#10adae;--sec-yellow:#d4900c;--sec-green:#547f40;--sec-bright-green:#27d22e;--sec-dark-teal:#035f6b;--sec-chocolate:#7c2f33;--sec-rube-pink:#c13d6d;--sec-cerulean:#0087b2;--sem-error:#b00020;--sem-info:#0091ff;--sem-warning:#ff9d00;--sem-success:#38af49;--grey-bg-1:#fafafa;--grey-bg:#f5f5f5;--grey-seperators:#e0e0e0;--grey-disabled:#c8cdd3;--grey-hover:#f5f7fc;--grey-pressed:#e6ebf7;--grey-row:#f5f7fc;--dec-light-yellow:#f4e7c3;--dec-light-purple:#dacff9;--dec-light-green:#e4f5e9;--dec-light-green2:#f1fff3;--dec-light-pink:#fae1ea;--dec-:#f4cbc1;--dec-lt-orange:#faefed;--dec-light-blue:#cfecf9;--dec-row-selection:#f1fdf8;--dec-row-selection2:#f2fbff;--dec-row-lines:#d3e1e9;--text-white:#fff;--text-disabled:#929dab;--text-muted:#6a737d;--text-black:#181f33;--MR-solid-blue2:#c8d5f6;--MR-solid-purple:#c9c3fb;--MR-solid-orange:#eeac9f;--MR-solid-green:#acdada;--MR-solid-brown:#e8c8af;--MR-solid-yellow:#ffefc7;--MR-solid-blue:#bbe6ff;--MR-solid-pink:#ffc6f2;--tr-hover:#f0f3fa;--tr-pressed:#dae1f3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"noHints":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"hasError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"isMandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":17,"character":3},"arguments":[{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"MisInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"MisInputComponent"},{"__symbolic":"reference","name":"MisInputDirective"}]}]}],"members":{}}},"origins":{"MisInputDirective":"./directives/input/input.directive","MisInputComponent":"./mis-input.component","MisInputModule":"./mis-input.module"},"importAs":"mis-crystal-design-system/input"}
|
|
@@ -8,6 +8,7 @@ export declare class MisInputComponent implements OnInit, OnDestroy {
|
|
|
8
8
|
placeholder: string;
|
|
9
9
|
noHints: boolean;
|
|
10
10
|
hasError: boolean;
|
|
11
|
+
isMandatory: boolean;
|
|
11
12
|
set formInput(input: MisInputDirective);
|
|
12
13
|
inputCtrl: AbstractControl;
|
|
13
14
|
inputSubscription: Subscription | undefined;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"PhoneInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"PhoneInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"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}"]}]}],"members":{"dropdownHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"dropdownWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"inputHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"dropdownData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"dropdownSelectedItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"inputPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"inputFormControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"onDropdownSelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":3}}]}],"onInvalidPhoneNumber":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"dropdownListWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"dropdownListHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"searchEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"inputType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"searchLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"defaultCountry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"phoneValidator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"handleDropdownSelection":[{"__symbolic":"method"}],"loadCountryCodes":[{"__symbolic":"method"}],"validatePhoneNumber":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}]}},"PhoneInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"PhoneInputComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":25},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":12,"character":46},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":12,"character":59},{"__symbolic":"reference","module":"@angular/cdk-experimental/scrolling","name":"ScrollingModule","line":12,"character":74},{"__symbolic":"reference","module":"mis-crystal-design-system/dropdown","name":"DropdownModule","line":12,"character":91}],"exports":[{"__symbolic":"reference","name":"PhoneInputComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"PhoneInputModule"},"providers":[]}}}}},"origins":{"PhoneInputComponent":"./phone-input.component","PhoneInputModule":"./phone-input.module"},"importAs":"mis-crystal-design-system/phone-input"}
|
|
@@ -1,22 +1,37 @@
|
|
|
1
|
-
import { EventEmitter, OnInit } from
|
|
2
|
-
import { FormControl } from
|
|
3
|
-
import { DropdownItem } from
|
|
1
|
+
import { EventEmitter, OnInit } from '@angular/core';
|
|
2
|
+
import { FormControl } from '@angular/forms';
|
|
3
|
+
import { DropdownItem } from 'mis-crystal-design-system/dropdown';
|
|
4
|
+
interface CustomDropdownItem extends DropdownItem {
|
|
5
|
+
countryCode: string;
|
|
6
|
+
}
|
|
4
7
|
export declare class PhoneInputComponent implements OnInit {
|
|
5
8
|
dropdownHeight?: string;
|
|
6
9
|
dropdownWidth?: string;
|
|
7
|
-
inputHeight?:
|
|
8
|
-
dropdownData:
|
|
9
|
-
dropdownSelectedItem:
|
|
10
|
+
inputHeight?: any;
|
|
11
|
+
dropdownData: CustomDropdownItem[];
|
|
12
|
+
dropdownSelectedItem: CustomDropdownItem;
|
|
10
13
|
label: string;
|
|
11
14
|
inputPlaceholder: string;
|
|
12
15
|
inputFormControl: FormControl;
|
|
13
|
-
onDropdownSelection: EventEmitter<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
onDropdownSelection: EventEmitter<string>;
|
|
17
|
+
onInvalidPhoneNumber: EventEmitter<string>;
|
|
18
|
+
dropdownListWidth: string;
|
|
19
|
+
dropdownListHeight: string;
|
|
16
20
|
searchEnabled: boolean;
|
|
17
21
|
inputType: string;
|
|
18
22
|
searchLabel: string;
|
|
23
|
+
defaultCountry: string;
|
|
24
|
+
phoneValidator?: boolean;
|
|
25
|
+
countryCodes: CustomDropdownItem[];
|
|
26
|
+
selectedCountryName: string;
|
|
27
|
+
validationMessage: string;
|
|
28
|
+
private phoneUtil;
|
|
29
|
+
private inputTouched;
|
|
19
30
|
constructor();
|
|
20
31
|
ngOnInit(): void;
|
|
21
|
-
handleDropdownSelection(item:
|
|
32
|
+
handleDropdownSelection(item: CustomDropdownItem): void;
|
|
33
|
+
loadCountryCodes(): void;
|
|
34
|
+
validatePhoneNumber(value: any, countryCode: string): void;
|
|
35
|
+
onBlur(): void;
|
|
22
36
|
}
|
|
37
|
+
export {};
|