intl-tel-input-ng
Version:
[](https://github.com/mpalourdio/ng-http-loader/actions/workflows/main.yml) [ • 5.83 kB
JavaScript
import { NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { input, model, ViewChild, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { NgForm, ControlContainer, FormsModule } from '@angular/forms';
import intlTelInput from 'intl-tel-input';
/*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
class IntlTelInputComponent {
cssClass = input();
label = input();
labelCssClass = input();
name = input('intl-tel-input-name');
options = input({});
required = input(false);
E164PhoneNumber = model();
_inputElement;
_phoneNumber;
_intlTelInput;
ngAfterViewInit() {
const intlTelInputInstance = intlTelInput;
this._intlTelInput = intlTelInputInstance(this._inputElement.nativeElement, this.options());
}
get intlTelInput() {
return this._intlTelInput;
}
get phoneNumber() {
return this._phoneNumber;
}
set phoneNumber(value) {
if (!!value) {
this._intlTelInput.setNumber(value);
}
this._phoneNumber = value;
this.i18nizePhoneNumber();
}
i18nizePhoneNumber() {
this.E164PhoneNumber.set(null);
if (this._intlTelInput.isValidNumber()) {
this.E164PhoneNumber.set(this._intlTelInput.getNumber());
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: IntlTelInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: IntlTelInputComponent, isStandalone: true, selector: "intl-tel-input", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelCssClass: { classPropertyName: "labelCssClass", publicName: "labelCssClass", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, E164PhoneNumber: { classPropertyName: "E164PhoneNumber", publicName: "E164PhoneNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { E164PhoneNumber: "E164PhoneNumberChange" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["intlTelInput"], descendants: true }], ngImport: i0, template: "@if (label() && name()) {\n <label [attr.for]=\"name()\" [ngClass]=\"labelCssClass()\" >{{ label() }}</label>\n}\n<input\n type=\"text\"\n [ngClass]=\"cssClass()\"\n [attr.id]=\"name()\"\n [attr.name]=\"name()\"\n [name]=\"name()\"\n [attr.aria-required]=\"required() || null\"\n [required]=\"required()\"\n [(ngModel)]=\"phoneNumber\"\n (countrychange)=\"i18nizePhoneNumber()\"\n #intlTelInput>\n\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: IntlTelInputComponent, decorators: [{
type: Component,
args: [{ selector: 'intl-tel-input', standalone: true, imports: [NgClass, FormsModule], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], template: "@if (label() && name()) {\n <label [attr.for]=\"name()\" [ngClass]=\"labelCssClass()\" >{{ label() }}</label>\n}\n<input\n type=\"text\"\n [ngClass]=\"cssClass()\"\n [attr.id]=\"name()\"\n [attr.name]=\"name()\"\n [name]=\"name()\"\n [attr.aria-required]=\"required() || null\"\n [required]=\"required()\"\n [(ngModel)]=\"phoneNumber\"\n (countrychange)=\"i18nizePhoneNumber()\"\n #intlTelInput>\n\n" }]
}], propDecorators: { _inputElement: [{
type: ViewChild,
args: ['intlTelInput']
}] } });
/*
* Public API Surface of intl-tel-input-ng
*/
/**
* Generated bundle index. Do not edit.
*/
export { IntlTelInputComponent };
//# sourceMappingURL=intl-tel-input-ng.mjs.map