@energinet/watt 0.0.1

package/fesm2022/energinet-watt-phone-field.mjs

@@ -0,0 +1,322 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, signal, inject, untracked, forwardRef, ViewChild, HostBinding, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MaskitoDirective } from '@maskito/angular';
+import * as i2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MASKITO_DEFAULT_OPTIONS, maskitoTransform } from '@maskito/core';
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import { isValidPhoneNumber } from 'libphonenumber-js';
+import phoneMetadata from 'libphonenumber-js/min/metadata';
+import { WattFlagComponent } from '@energinet/watt/icon/flags';
+import { WattFieldComponent, WattFieldErrorComponent } from '@energinet/watt/field';
+import { Subject } from 'rxjs';
+import * as i3 from '@angular/material/core';
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+class WattPhoneFieldIntlService {
+    changes = new Subject();
+    invalidPhoneNumber = 'Invalid phone number';
+    DK = 'Denmark';
+    DE = 'Germany';
+    FI = 'Finland';
+    NO = 'Norway';
+    SE = 'Sweden';
+    PL = 'Poland';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattPhoneFieldIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattPhoneFieldIntlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattPhoneFieldIntlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+function phoneValidator(countryCode) {
+    return (control) => {
+        if (!control.value)
+            return null;
+        const valid = isValidPhoneNumber(control.value, countryCode);
+        return valid ? null : { invalidPhone: true };
+    };
+}
+class WattPhoneFieldComponent {
+    /** @ignore */
+    countries = [
+        { countryIsoCode: 'DK', phoneExtension: '+45' },
+        { countryIsoCode: 'SE', phoneExtension: '+46' },
+        { countryIsoCode: 'NO', phoneExtension: '+47' },
+        { countryIsoCode: 'DE', phoneExtension: '+49' },
+        { countryIsoCode: 'FI', phoneExtension: '+358' },
+        { countryIsoCode: 'PL', phoneExtension: '+48' },
+    ];
+    formControl = input.required();
+    label = input();
+    /** @ignore */
+    chosenCountry = signal(this.countries[0]);
+    /** @ignore */
+    mask = MASKITO_DEFAULT_OPTIONS;
+    /** @ignore */
+    intl = inject(WattPhoneFieldIntlService);
+    /** @ignore */
+    isDisabled = false;
+    /** @ignore */
+    value = null;
+    /** @ignore */
+    phoneNumberInput;
+    /** @ignore */
+    ngOnInit() {
+        this.setup();
+    }
+    /** @ignore */
+    writeValue(value) {
+        if (value) {
+            const country = this.countries.find((country) => value.startsWith(country.phoneExtension));
+            if (country) {
+                // Exclude Signal from being tracked
+                // in case the parent component sets the value inside an `effect`.
+                // Without this, updating the Signal internaly triggers the parrent `effect` to re-run.
+                // Note: Revisit once v19 is released because the `effect` API has changed
+                // significantly and this might not be necessary anymore
+                untracked(() => {
+                    this.setCountry(country);
+                });
+                value = maskitoTransform(value, this.mask);
+            }
+        }
+        this.value = value;
+    }
+    /** @ignore */
+    onChange = () => {
+        /* noop function */
+    };
+    /** @ignore */
+    onTouched = () => {
+        /* noop function */
+    };
+    /** @ignore */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @ignore */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @ignore */
+    setDisabledState(isDisabled) {
+        this.isDisabled = isDisabled;
+    }
+    /** @ignore */
+    selectedContry({ value }) {
+        const country = this.countries.find((contry) => contry.countryIsoCode === value);
+        if (!country) {
+            throw new Error('Prefix not found');
+        }
+        this.setCountry(country);
+        this.formControl().reset();
+        setTimeout(() => {
+            this.phoneNumberInput.nativeElement.focus();
+        }, 100);
+    }
+    /** @ignore */
+    setCountry(country) {
+        this.chosenCountry.set(country);
+        this.setup();
+    }
+    /** @ignore */
+    onChanged(event) {
+        const value = event.target?.value;
+        this.onChange(value);
+    }
+    /** @ignore */
+    generatePhoneOptions() {
+        const phoneOptions = maskitoPhoneOptionsGenerator({
+            countryIsoCode: this.chosenCountry().countryIsoCode,
+            metadata: phoneMetadata,
+            separator: ' ',
+        });
+        this.mask = phoneOptions;
+    }
+    /** @ignore */
+    setup() {
+        this.generatePhoneOptions();
+        this.setValidator();
+    }
+    /** @ignore */
+    setValidator() {
+        const countryCode = this.chosenCountry().countryIsoCode;
+        this.formControl().addValidators(phoneValidator(countryCode));
+    }
+    /** @ignore */
+    getCountryName(countryIsoCode) {
+        return this.intl[countryIsoCode];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattPhoneFieldComponent, isStandalone: true, selector: "watt-phone-field", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.watt-field-disabled": "this.isDisabled" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WattPhoneFieldComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "phoneNumberInput", first: true, predicate: ["phoneNumberInput"], descendants: true }], ngImport: i0, template: `
+    <watt-field [label]="label()" [control]="formControl()">
+      <div class="watt-phone-field__prefix-container">
+        <mat-select
+          panelWidth=""
+          panelClass="watt-phone-field__select"
+          [hideSingleSelectionIndicator]="true"
+          [value]="chosenCountry().countryIsoCode"
+          (selectionChange)="selectedContry($event)"
+        >
+          <mat-select-trigger>
+            <watt-flag [country]="chosenCountry().countryIsoCode" />
+          </mat-select-trigger>
+          @for (contry of countries; track contry; let index = $index) {
+            <mat-option value="{{ contry.countryIsoCode }}">
+              <watt-flag [country]="contry.countryIsoCode" />
+              <div>{{ getCountryName(contry.countryIsoCode) }}</div>
+            </mat-option>
+          }
+        </mat-select>
+        <input
+          [attr.aria-label]="label()"
+          autocomplete="tel"
+          inputmode="tel"
+          [value]="value"
+          [formControl]="formControl()"
+          (blur)="onTouched()"
+          (input)="onChanged($event)"
+          [maskito]="mask"
+          #phoneNumberInput
+        />
+      </div>
+      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
+      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
+      @if (formControl().hasError('invalidPhone')) {
+        <watt-field-error> {{ intl.invalidPhoneNumber }} </watt-field-error>
+      }
+    </watt-field>
+  `, isInline: true, styles: [".watt-phone-field__select.mat-mdc-select-panel{--mat-option-label-text-size: 14px;overflow-y:scroll}.watt-phone-field__select.mat-mdc-select-panel watt-icon{margin-right:var(--watt-space-s)}.watt-phone-field__select.mat-mdc-select-panel watt-icon .mat-icon{margin-right:0}.watt-phone-field__select.mat-mdc-select-panel .mat-mdc-option.mdc-list-item .mdc-list-item__primary-text{display:flex;width:100%;align-items:center;gap:var(--watt-space-xs)}watt-phone-field{display:block}watt-phone-field .watt-phone-field__prefix-container{width:100%;display:flex;align-items:center;gap:var(--watt-space-xs)}watt-phone-field input{width:100%;border:none}watt-phone-field input:focus-visible,watt-phone-field input:focus-within{border:none;outline:none}watt-phone-field .mat-mdc-select{width:auto;height:24px}watt-phone-field .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:24px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }, { kind: "component", type: WattFieldErrorComponent, selector: "watt-field-error" }, { kind: "component", type: WattFlagComponent, selector: "watt-flag", inputs: ["country", "label", "size"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattPhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'watt-phone-field', encapsulation: ViewEncapsulation.None, imports: [
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                        MaskitoDirective,
+                        WattFieldComponent,
+                        WattFieldErrorComponent,
+                        WattFlagComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WattPhoneFieldComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <watt-field [label]="label()" [control]="formControl()">
+      <div class="watt-phone-field__prefix-container">
+        <mat-select
+          panelWidth=""
+          panelClass="watt-phone-field__select"
+          [hideSingleSelectionIndicator]="true"
+          [value]="chosenCountry().countryIsoCode"
+          (selectionChange)="selectedContry($event)"
+        >
+          <mat-select-trigger>
+            <watt-flag [country]="chosenCountry().countryIsoCode" />
+          </mat-select-trigger>
+          @for (contry of countries; track contry; let index = $index) {
+            <mat-option value="{{ contry.countryIsoCode }}">
+              <watt-flag [country]="contry.countryIsoCode" />
+              <div>{{ getCountryName(contry.countryIsoCode) }}</div>
+            </mat-option>
+          }
+        </mat-select>
+        <input
+          [attr.aria-label]="label()"
+          autocomplete="tel"
+          inputmode="tel"
+          [value]="value"
+          [formControl]="formControl()"
+          (blur)="onTouched()"
+          (input)="onChanged($event)"
+          [maskito]="mask"
+          #phoneNumberInput
+        />
+      </div>
+      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
+      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
+      @if (formControl().hasError('invalidPhone')) {
+        <watt-field-error> {{ intl.invalidPhoneNumber }} </watt-field-error>
+      }
+    </watt-field>
+  `, styles: [".watt-phone-field__select.mat-mdc-select-panel{--mat-option-label-text-size: 14px;overflow-y:scroll}.watt-phone-field__select.mat-mdc-select-panel watt-icon{margin-right:var(--watt-space-s)}.watt-phone-field__select.mat-mdc-select-panel watt-icon .mat-icon{margin-right:0}.watt-phone-field__select.mat-mdc-select-panel .mat-mdc-option.mdc-list-item .mdc-list-item__primary-text{display:flex;width:100%;align-items:center;gap:var(--watt-space-xs)}watt-phone-field{display:block}watt-phone-field .watt-phone-field__prefix-container{width:100%;display:flex;align-items:center;gap:var(--watt-space-xs)}watt-phone-field input{width:100%;border:none}watt-phone-field input:focus-visible,watt-phone-field input:focus-within{border:none;outline:none}watt-phone-field .mat-mdc-select{width:auto;height:24px}watt-phone-field .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:24px;justify-content:center}\n"] }]
+        }], propDecorators: { isDisabled: [{
+                type: HostBinding,
+                args: ['attr.watt-field-disabled']
+            }], phoneNumberInput: [{
+                type: ViewChild,
+                args: ['phoneNumberInput']
+            }] } });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WattPhoneFieldComponent, WattPhoneFieldIntlService };
+//# sourceMappingURL=energinet-watt-phone-field.mjs.map

package/fesm2022/energinet-watt-phone-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energinet-watt-phone-field.mjs","sources":["../../../libs/watt/package/phone-field/watt-phone-field-intl.service.ts","../../../libs/watt/package/phone-field/watt-phone-field.component.ts","../../../libs/watt/package/phone-field/index.ts","../../../libs/watt/package/phone-field/energinet-watt-phone-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class WattPhoneFieldIntlService {\n  readonly changes: Subject<void> = new Subject<void>();\n  invalidPhoneNumber = 'Invalid phone number';\n  DK = 'Denmark';\n  DE = 'Germany';\n  FI = 'Finland';\n  NO = 'Norway';\n  SE = 'Sweden';\n  PL = 'Poland';\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  Component,\n  ElementRef,\n  HostBinding,\n  OnInit,\n  ViewChild,\n  ViewEncapsulation,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  ControlValueAccessor,\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n  ValidationErrors,\n  ValidatorFn,\n} from '@angular/forms';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\nimport { MASKITO_DEFAULT_OPTIONS, maskitoTransform } from '@maskito/core';\nimport { maskitoPhoneOptionsGenerator } from '@maskito/phone';\nimport { isValidPhoneNumber, type CountryCode } from 'libphonenumber-js';\nimport phoneMetadata from 'libphonenumber-js/min/metadata';\n\nimport { WattFlagComponent } from '@energinet/watt/icon/flags';\nimport { WattFieldComponent, WattFieldErrorComponent } from '@energinet/watt/field';\n\nimport { WattPhoneFieldIntlService } from './watt-phone-field-intl.service';\n\ntype Contry = {\n  countryIsoCode: CountryCode;\n  phoneExtension: string;\n};\n\nfunction phoneValidator(countryCode: CountryCode): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    if (!control.value) return null;\n    const valid = isValidPhoneNumber(control.value, countryCode);\n\n    return valid ? null : { invalidPhone: true };\n  };\n}\n\n@Component({\n  selector: 'watt-phone-field',\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    ReactiveFormsModule,\n    MatSelectModule,\n    MaskitoDirective,\n    WattFieldComponent,\n    WattFieldErrorComponent,\n    WattFlagComponent,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattPhoneFieldComponent),\n      multi: true,\n    },\n  ],\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"formControl()\">\n      <div class=\"watt-phone-field__prefix-container\">\n        <mat-select\n          panelWidth=\"\"\n          panelClass=\"watt-phone-field__select\"\n          [hideSingleSelectionIndicator]=\"true\"\n          [value]=\"chosenCountry().countryIsoCode\"\n          (selectionChange)=\"selectedContry($event)\"\n        >\n          <mat-select-trigger>\n            <watt-flag [country]=\"chosenCountry().countryIsoCode\" />\n          </mat-select-trigger>\n          @for (contry of countries; track contry; let index = $index) {\n            <mat-option value=\"{{ contry.countryIsoCode }}\">\n              <watt-flag [country]=\"contry.countryIsoCode\" />\n              <div>{{ getCountryName(contry.countryIsoCode) }}</div>\n            </mat-option>\n          }\n        </mat-select>\n        <input\n          [attr.aria-label]=\"label()\"\n          autocomplete=\"tel\"\n          inputmode=\"tel\"\n          [value]=\"value\"\n          [formControl]=\"formControl()\"\n          (blur)=\"onTouched()\"\n          (input)=\"onChanged($event)\"\n          [maskito]=\"mask\"\n          #phoneNumberInput\n        />\n      </div>\n      <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n      <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n      @if (formControl().hasError('invalidPhone')) {\n        <watt-field-error> {{ intl.invalidPhoneNumber }} </watt-field-error>\n      }\n    </watt-field>\n  `,\n  styleUrl: './watt-phone-field.component.scss',\n})\nexport class WattPhoneFieldComponent implements ControlValueAccessor, OnInit {\n  /** @ignore */\n  readonly countries: Contry[] = [\n    { countryIsoCode: 'DK', phoneExtension: '+45' },\n    { countryIsoCode: 'SE', phoneExtension: '+46' },\n    { countryIsoCode: 'NO', phoneExtension: '+47' },\n    { countryIsoCode: 'DE', phoneExtension: '+49' },\n    { countryIsoCode: 'FI', phoneExtension: '+358' },\n    { countryIsoCode: 'PL', phoneExtension: '+48' },\n  ];\n\n  formControl = input.required<FormControl>();\n  label = input<string>();\n\n  /** @ignore */\n  chosenCountry = signal<Contry>(this.countries[0]);\n\n  /** @ignore */\n  mask = MASKITO_DEFAULT_OPTIONS;\n\n  /** @ignore */\n  intl = inject(WattPhoneFieldIntlService);\n\n  /** @ignore */\n  @HostBinding('attr.watt-field-disabled')\n  isDisabled = false;\n\n  /** @ignore */\n  value: string | null = null;\n\n  /** @ignore */\n  @ViewChild('phoneNumberInput') phoneNumberInput!: ElementRef<HTMLInputElement>;\n\n  /** @ignore */\n  ngOnInit(): void {\n    this.setup();\n  }\n\n  /** @ignore */\n  writeValue(value: string): void {\n    if (value) {\n      const country = this.countries.find((country) => value.startsWith(country.phoneExtension));\n\n      if (country) {\n        // Exclude Signal from being tracked\n        // in case the parent component sets the value inside an `effect`.\n        // Without this, updating the Signal internaly triggers the parrent `effect` to re-run.\n        // Note: Revisit once v19 is released because the `effect` API has changed\n        // significantly and this might not be necessary anymore\n        untracked(() => {\n          this.setCountry(country);\n        });\n\n        value = maskitoTransform(value, this.mask);\n      }\n    }\n\n    this.value = value;\n  }\n\n  /** @ignore */\n  onChange: (value: string) => void = () => {\n    /* noop function */\n  };\n\n  /** @ignore */\n  onTouched: () => void = () => {\n    /* noop function */\n  };\n\n  /** @ignore */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /** @ignore */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /** @ignore */\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled = isDisabled;\n  }\n\n  /** @ignore */\n  selectedContry({ value }: MatSelectChange) {\n    const country = this.countries.find((contry) => contry.countryIsoCode === value);\n\n    if (!country) {\n      throw new Error('Prefix not found');\n    }\n\n    this.setCountry(country);\n    this.formControl().reset();\n\n    setTimeout(() => {\n      this.phoneNumberInput.nativeElement.focus();\n    }, 100);\n  }\n\n  /** @ignore */\n  setCountry(country: Contry) {\n    this.chosenCountry.set(country);\n    this.setup();\n  }\n\n  /** @ignore */\n  onChanged(event: Event): void {\n    const value = (event.target as HTMLSelectElement)?.value;\n    this.onChange(value);\n  }\n\n  /** @ignore */\n  private generatePhoneOptions(): void {\n    const phoneOptions = maskitoPhoneOptionsGenerator({\n      countryIsoCode: this.chosenCountry().countryIsoCode,\n      metadata: phoneMetadata,\n      separator: ' ',\n    });\n\n    this.mask = phoneOptions;\n  }\n\n  /** @ignore */\n  private setup(): void {\n    this.generatePhoneOptions();\n    this.setValidator();\n  }\n\n  /** @ignore */\n  private setValidator() {\n    const countryCode = this.chosenCountry().countryIsoCode;\n    this.formControl().addValidators(phoneValidator(countryCode));\n  }\n\n  /** @ignore */\n  getCountryName(countryIsoCode: CountryCode) {\n    return this.intl[countryIsoCode as keyof WattPhoneFieldIntlService];\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattPhoneFieldComponent } from './watt-phone-field.component';\nexport { WattPhoneFieldIntlService } from './watt-phone-field-intl.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}