ionic5-international-input
Version:
An Ionic component for International Phone Number Input, that allows all countries, validation with google phone lib, limited countries, preferred countries, virtual scrolling and much more.
1 lines • 14.8 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"IonIntlTelInputValidators":{"__symbolic":"class","members":{}},"IonIntlTelInputValidatorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":79,"character":1},"arguments":[{"selector":"[ionIntlTelInputValid]","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":84,"character":15},"useExisting":{"__symbolic":"reference","name":"IonIntlTelInputValidatorDirective"},"multi":true}]}]}],"members":{"validate":[{"__symbolic":"method"}]}},"IonIntlTelInputComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"ion-intl-tel-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":45,"character":15},"useExisting":{"__symbolic":"reference","name":"IonIntlTelInputComponent"},"multi":true}],"template":"<div class=\"ion-intl-tel-input-code\">\n <ionic-selectable\n #codeSelect\n [(ngModel)]=\"country\"\n [canSearch]=\"modalCanSearch\"\n closeButtonText=\"{{modalCloseText}}\"\n closeButtonSlot=\"{{modalCloseButtonSlot}}\"\n [disabled] = \"disabled\"\n [hasVirtualScroll]=\"true\"\n itemTextField=\"name\"\n [items]=\"countries\"\n itemValueField=\"isoCode\"\n modalCssClass=\"ionic-tel-input-modal {{modalCssClass}}\"\n placeholder=\"Country\"\n searchFailText=\"{{modalSearchFailText}}\"\n searchPlaceholder=\"{{modalSearchPlaceholder}}\"\n [shouldBackdropClose]=\"modalShouldBackdropClose\"\n [shouldFocusSearchbar]=\"modalShouldFocusSearchbar\"\n (onChange)=\"onCodeChange($event)\"\n (onClose)=\"onCodeClose()\"\n (onOpen)=\"onCodeOpen()\"\n (onSearch)=\"onCodeSearchCountries($event)\"\n (onSelect)=\"onCodeSelect()\"\n >\n <ng-template ionicSelectableTitleTemplate>\n {{modalTitle}}\n </ng-template>\n <ng-template ionicSelectableValueTemplate let-country=\"value\">\n <span class=\"flag-icon flag-icon-{{country.flagClass}}\"></span>\n <span *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.displayDialCode}}</span>\n </ng-template>\n <ng-template ionicSelectableItemTemplate let-country=\"item\">\n <span class=\"ion-margin-end\">{{country.name}}</span>\n <span *ngIf=\"separateDialCode\">{{dialCodePrefix}}{{country.displayDialCode}}</span>\n </ng-template>\n <ng-template ionicSelectableItemEndTemplate let-country=\"item\">\n <span class=\"flag-icon flag-icon-{{country.flagClass}}\"></span>\n </ng-template>\n </ionic-selectable>\n</div>\n\n<div class=\"ion-intl-tel-input-number\">\n <ion-input\n #numberInput\n [(ngModel)]=\"phoneNumber\"\n autocomplete=\"off\"\n [disabled] = \"disabled\" \n [attr.maxLength]=\"maxLength\"\n type=\"tel\"\n (ionBlur)=\"onIonNumberBlur()\"\n (ionChange)=\"onIonNumberChange($event)\"\n (ionFocus)=\"onIonNumberFocus()\"\n (ionInput)=\"onIonNumberInput($event)\"\n (keydown)=\"onNumberKeyDown($event)\"\n (ngModelChange)=\"onNumberChange()\"\n placeholder=\"{{country | countryPlaceholder: inputPlaceholder:separateDialCode:fallbackPlaceholder}}\" >\n </ion-input>\n</div>\n","styles":[":host{width:100%;display:-webkit-box;display:flex;-webkit-box-align:end;align-items:flex-end}:host .ion-intl-tel-input-code{position:relative}:host .ion-intl-tel-input-number{-webkit-box-flex:1;flex:1}:host .ionic-selectable-label-default,:host .ionic-selectable-label-fixed{max-width:100%}:host .ionic-selectable:not(:host.ionic-selectable-label-stacked):not(:host.ionic-selectable-label-floating) ::ng-deep .ionic-selectable-inner .ionic-selectable-value{padding-top:10px;padding-bottom:10px}:host .ionic-selectable:not(:host.ionic-selectable-label-stacked):not(:host.ionic-selectable-label-floating) ::ng-deep .ionic-selectable-icon-inner{top:17px}:host .flag-icon{margin-right:5px}"]}]}],"members":{"cssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":57,"character":3},"arguments":["class.ion-intl-tel-input"]}]}],"isIos":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":3},"arguments":["class.ion-intl-tel-input-ios"]}]}],"isMD":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":61,"character":3},"arguments":["class.ion-intl-tel-input-md"]}]}],"hasFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":63,"character":3},"arguments":["class.has-focus"]}]}],"hasValueCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":65,"character":3},"arguments":["class.ion-intl-tel-input-has-value"]}]}],"isEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["class.ion-intl-tel-input-is-enabled"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3},"arguments":["isEnabled"]}]}],"defaultCountryiso":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}}]}],"dialCodePrefix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":3}}]}],"enableAutoCountrySelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":3}}]}],"enablePlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":3}}]}],"fallbackPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":3}}]}],"inputPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":3}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":3}}]}],"modalTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":3}}]}],"modalCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":164,"character":3}}]}],"modalSearchPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":174,"character":3}}]}],"modalCloseText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":184,"character":3}}]}],"modalCloseButtonSlot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":3}}]}],"modalCanSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"modalShouldBackdropClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":214,"character":3}}]}],"modalShouldFocusSearchbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"modalSearchFailText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":234,"character":3}}]}],"onlyCountries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":245,"character":3}}]}],"preferredCountries":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":256,"character":3}}]}],"selectFirstCountry":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":266,"character":3}}]}],"separateDialCode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":276,"character":3}}]}],"numberChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":285,"character":3}}]}],"numberBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":294,"character":3}}]}],"numberFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":303,"character":3}}]}],"numberInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":312,"character":3}}]}],"codeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":321,"character":3}}]}],"codeOpen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":330,"character":3}}]}],"codeClose":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":339,"character":3}}]}],"codeSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":348,"character":3}}]}],"numberInputEl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":351,"character":3},"arguments":["numberInput",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":366,"character":16},{"__symbolic":"reference","module":"@ionic/angular","name":"Platform","line":367,"character":22},{"__symbolic":"reference","name":"ɵa"}]}],"emitValueChange":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"fillValues":[{"__symbolic":"method"}],"hasValue":[{"__symbolic":"method"}],"onCodeOpen":[{"__symbolic":"method"}],"onCodeChange":[{"__symbolic":"method"}],"onCodeClose":[{"__symbolic":"method"}],"onCodeSearchCountries":[{"__symbolic":"method"}],"onCodeSelect":[{"__symbolic":"method"}],"onIonNumberChange":[{"__symbolic":"method"}],"onIonNumberBlur":[{"__symbolic":"method"}],"onIonNumberFocus":[{"__symbolic":"method"}],"onIonNumberInput":[{"__symbolic":"method"}],"onNumberChange":[{"__symbolic":"method"}],"onNumberKeyDown":[{"__symbolic":"method"}],"filterCountries":[{"__symbolic":"method"}],"getCountryIsoCode":[{"__symbolic":"method"}],"fetchAllCountries":[{"__symbolic":"method"}],"getCountryByIsoCode":[{"__symbolic":"method"}],"isNullOrWhiteSpace":[{"__symbolic":"method"}],"removeDialCode":[{"__symbolic":"method"}],"setCountry":[{"__symbolic":"method"}],"setPreferredCountries":[{"__symbolic":"method"}]}},"IonIntlTelInputModel":{"__symbolic":"interface"},"IonIntlTelInputModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"IonIntlTelInputValidatorDirective"},{"__symbolic":"reference","name":"IonIntlTelInputComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":4},{"__symbolic":"reference","module":"@ionic/angular","name":"IonicModule","line":21,"character":4},{"__symbolic":"reference","module":"ionic-selectable","name":"IonicSelectableModule","line":22,"character":4}],"exports":[{"__symbolic":"reference","name":"IonIntlTelInputComponent"},{"__symbolic":"reference","name":"IonIntlTelInputValidatorDirective"}],"providers":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getListOfCountries":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"countryPlaceholder"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"IonIntlTelInputValidators":"./lib/ion-intl-tel-input.directive","IonIntlTelInputValidatorDirective":"./lib/ion-intl-tel-input.directive","IonIntlTelInputComponent":"./lib/ion-intl-tel-input/ion-intl-tel-input.component","IonIntlTelInputModel":"./lib/models/ion-intl-tel-input.model","IonIntlTelInputModule":"./lib/ion-intl-tel-input.module","ɵa":"./lib/ion-intl-tel-input.service","ɵb":"./lib/pipes/country-placeholder"},"importAs":"ionic5-international-input"}