import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, Optional, Output, } from '@angular/core';
import { CountrySelectorModalComponent } from '@aztrix/components/country-selector-modal';
import { OverlayService } from '@aztrix/components/overlay';
import { DEFAULT_COUNTRY, hasValue } from '@aztrix/helpers';
import { BehaviorSubject, first } from 'rxjs';
import { AbstractPropertyEdit } from '../abstract-property-edit';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@aztrix/icons";
import * as i7 from "@aztrix/components/button";
import * as i8 from "../property-error/property-error.component";
import * as i9 from "@aztrix/helpers";
import * as i10 from "rxjs";
export class CountryEditComponent extends AbstractPropertyEdit {
    constructor(_overlay, _changeDetector, _elementRef, _defaultCountry$) {
        super();
        this._overlay = _overlay;
        this._changeDetector = _changeDetector;
        this._elementRef = _elementRef;
        this._defaultCountry$ = _defaultCountry$;
        this.countryCodes = [];
        this.countryUpdated = new EventEmitter();
    }
    openSearchSelectCountryModal(event) {
        if (this.form.disabled || this.readonly) {
            return undefined;
        }
        // Avoid ExpressionChangedAfterItHasBeenCheckedError
        const inputElement = event.target;
        (inputElement.querySelector('input') || inputElement).blur();
        event.preventDefault();
        this._overlay.createModal(this._elementRef, CountrySelectorModalComponent, {
            title: 'label.country',
            init: (countryModal) => {
                countryModal.countryCodes = this.countryCodes;
                countryModal.showDefaultCountry = false;
                countryModal.didSelectCountry = (country) => {
                    if (country?.countryCode !== this.form.value) {
                        this.countryUpdated.emit();
                    }
                    if (country?.countryCode) {
                        this.form.get('value').setValue(country.countryCode);
                        this.markAsDirty();
                    }
                    this._changeDetector.markForCheck();
                };
            },
        });
    }
    ngOnInit() {
        if (this._defaultCountry$) {
            this._defaultCountry$.pipe(first()).subscribe((value) => {
                if (!hasValue(this.form.value)) {
                    this.form.get('value').setValue(value.countryCode);
                    this.form.markAsUntouched();
                }
            });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryEditComponent, deps: [{ token: i1.OverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DEFAULT_COUNTRY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CountryEditComponent, selector: "ax-country-edit", inputs: { countryCodes: "countryCodes" }, outputs: { countryUpdated: "countryUpdated" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  *ngIf=\"form\"\n  class=\"c-input\"\n  [ngClass]=\"{'remove-subtext': !showErrors, readonly: readonly}\"\n  appearance=\"outline\"\n  (click)=\"openSearchSelectCountryModal($event)\"\n  [hideRequiredMarker]=\"!required\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  <mat-label *ngIf=\"customLabel\">{{ customLabel }}<span *ngIf=\"required\">&nbsp;*</span></mat-label>\n  <input\n    [attr.name]=\"getName()\"\n    matInput\n    autocomplete=\"off\"\n    readonly\n    type=\"text\"\n    [ngModel]=\"form.value.value | countryCodeLabel\"\n    [disabled]=\"form.disabled\"\n    [readonly]=\"readonly\"\n  />\n  <button type=\"button\" axButton icon-button matSuffix [disabled]=\"form.disabled\">\n    <ax-icon class=\"icon flag\" [name]=\"'flags:' + form.value?.value\"></ax-icon>\n  </button>\n  <mat-error *ngIf=\"showErrors\"><ax-property-error [form]=\"form\"></ax-property-error></mat-error>\n  <mat-hint class=\"hint\" align=\"end\">\n    {{ hint }}\n  </mat-hint>\n</mat-form-field>\n", styles: [":host.address-country ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.flag{width:1rem;height:1rem;line-height:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i8.PropertyErrorComponent, selector: "ax-property-error", inputs: ["form", "label"] }, { kind: "pipe", type: i9.CountryCodeLabelPipe, name: "countryCodeLabel" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CountryEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-country-edit', template: "<mat-form-field\n  *ngIf=\"form\"\n  class=\"c-input\"\n  [ngClass]=\"{'remove-subtext': !showErrors, readonly: readonly}\"\n  appearance=\"outline\"\n  (click)=\"openSearchSelectCountryModal($event)\"\n  [hideRequiredMarker]=\"!required\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  <mat-label *ngIf=\"customLabel\">{{ customLabel }}<span *ngIf=\"required\">&nbsp;*</span></mat-label>\n  <input\n    [attr.name]=\"getName()\"\n    matInput\n    autocomplete=\"off\"\n    readonly\n    type=\"text\"\n    [ngModel]=\"form.value.value | countryCodeLabel\"\n    [disabled]=\"form.disabled\"\n    [readonly]=\"readonly\"\n  />\n  <button type=\"button\" axButton icon-button matSuffix [disabled]=\"form.disabled\">\n    <ax-icon class=\"icon flag\" [name]=\"'flags:' + form.value?.value\"></ax-icon>\n  </button>\n  <mat-error *ngIf=\"showErrors\"><ax-property-error [form]=\"form\"></ax-property-error></mat-error>\n  <mat-hint class=\"hint\" align=\"end\">\n    {{ hint }}\n  </mat-hint>\n</mat-form-field>\n", styles: [":host.address-country ::ng-deep .mat-form-field-wrapper{padding-bottom:0}.flag{width:1rem;height:1rem;line-height:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i10.BehaviorSubject, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [DEFAULT_COUNTRY]
                }] }], propDecorators: { countryCodes: [{
                type: Input
            }], countryUpdated: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 