@ascentgl/ads-ui 21.64.0 → 21.65.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -2444,18 +2444,25 @@ class AbstractBaseComponent {
                         if (this.valueControl.errors) {
                             this.valueControl.setErrors(null);
                         }
+                        // hadRequiredValidator stays as is - we remember if it was required originally
                     }
                     else {
                         // When non-empty -> restore validators.
                         this.valueControl.setValidators(this.originalValidator);
                         this.valueControl.setAsyncValidators(this.originalAsyncValidator);
+                        // Don't update hadRequiredValidator here - it was set from originalValidator initially
                     }
                 }, 0);
             });
             // Subscribe to status changes to update hadRequiredValidator when validators are externally added/removed
             // This ensures the asterisk is correctly shown/hidden after addValidators/removeValidators calls
+            // But skip updates during skipValidationWhenEmpty mode where validators are managed internally
             const statusSub = this.valueControl.statusChanges.subscribe(() => {
-                this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
+                // Only update hadRequiredValidator if we're not in skipValidationWhenEmpty mode
+                // When skipValidationWhenEmpty is active, we preserve the original validator state
+                if (!this.skipValidationWhenEmpty) {
+                    this.hadRequiredValidator = this.valueControl.hasValidator(Validators.required);
+                }
             });
             this.destroyRef.onDestroy(() => {
                 subscription.unsubscribe();
@@ -2469,10 +2476,9 @@ class AbstractBaseComponent {
     }
     /** @ignore */
     get required() {
-        // When skipValidationWhenEmpty is active and value is empty, validators are temporarily removed.
-        // In that case, use hadRequiredValidator to preserve the asterisk.
-        // Otherwise, check the actual current validator state.
-        if (this.skipValidationWhenEmpty && this.isEmptyValue(this.valueControl.value)) {
+        // When skipValidationWhenEmpty is active, always use hadRequiredValidator to preserve the asterisk
+        // regardless of whether the value is empty or not, because validators may be temporarily removed.
+        if (this.skipValidationWhenEmpty) {
             return this.hadRequiredValidator;
         }
         return this.valueControl.hasValidator(Validators.required);
@@ -10367,11 +10373,19 @@ const canadianAreaCodes = [
     '905',
 ];
 
+var CountryCode;
+(function (CountryCode) {
+    CountryCode["US"] = "US";
+    CountryCode["CA"] = "CA";
+    CountryCode["MX"] = "MX";
+})(CountryCode || (CountryCode = {}));
 class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
     constructor() {
-        super(...arguments);
+        super();
         /** Optional "id" attribute for dropdown field */
         this.dropdownId = '';
+        /** Country code to display in the dropdown */
+        this.selectedCountry = input(...(ngDevMode ? [undefined, { debugName: "selectedCountry" }] : []));
         /** Enable auto-close when component scrolls out of viewport */
         this.closeOnOutOfView = false;
         /** Root margin for intersection observer (CSS margin format: top right bottom left) */
@@ -10380,9 +10394,9 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         this.phoneMask = '(000) 000-0000';
         /** @ignore */
         this.countryOptions = [
-            { name: 'United States', code: '+1', iso: 'US' },
-            { name: 'Mexico', code: '+52', iso: 'MX' },
-            { name: 'Canada', code: '+1', iso: 'CA' },
+            { name: 'United States', code: '+1', iso: CountryCode.US },
+            { name: 'Mexico', code: '+52', iso: CountryCode.MX },
+            { name: 'Canada', code: '+1', iso: CountryCode.CA },
         ];
         /** @ignore */
         this.flagBase64 = {
@@ -10396,6 +10410,11 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         this.inputControl = new FormControl();
         /** @ignore */
         this.isInternalChange = false;
+        /** @ignore */
+        this.onInputBlur = () => {
+            this.inputControl.markAsTouched({ emitEvent: false });
+            this.valueControl.updateValueAndValidity({ emitEvent: false });
+        };
         this.validateMask = (control) => {
             const value = (control.value || '').trim();
             /**
@@ -10410,6 +10429,23 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
             const digitCount = value.length - this.dropdownControl.value.code.length;
             return digitCount === 10 ? null : { mask: true };
         };
+        // Effect to handle selectedCountry changes
+        effect(() => {
+            const countryCode = this.selectedCountry();
+            if (countryCode && this.dropdownControl) {
+                const country = this.countryOptions.find((opt) => opt.iso === countryCode);
+                if (country && this.dropdownControl.value?.iso !== countryCode) {
+                    this.isInternalChange = true;
+                    this.dropdownControl.setValue(country, { emitEvent: false });
+                    // If there's a value in inputControl, update the valueControl with new country code
+                    if (this.inputControl.value) {
+                        const phone = this.inputControl.value;
+                        this.valueControl.setValue(country.code + phone, { emitEvent: true });
+                    }
+                    this.isInternalChange = false;
+                }
+            }
+        });
     }
     /** @ignore */
     getNorthAmericanCountry(phone) {
@@ -10458,6 +10494,12 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         }
         this.inputControl.valueChanges.subscribe(() => this.provideValueToTheValueControl());
         this.dropdownControl.valueChanges.subscribe(() => this.provideValueToTheValueControl());
+        // Set initial country based on selectedCountry signal (default to US if not provided)
+        const initialCountry = this.selectedCountry() || CountryCode.US;
+        const country = this.countryOptions.find((opt) => opt.iso === initialCountry);
+        if (country) {
+            this.dropdownControl.setValue(country, { emitEvent: false });
+        }
     }
     /** @ignore */
     disableControls() {
@@ -10518,8 +10560,6 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
     }
     /** @ignore */
     getFlag(option) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         return this.flagBase64[option.iso];
     }
     /** @ignore */
@@ -10530,7 +10570,6 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         const phone = this.inputControl.value;
         this.isInternalChange = true;
         this.valueControl.setValue(phone ? code + phone : null);
-        this.inputControl.markAsTouched({ emitEvent: false });
         this.isInternalChange = false;
     }
     /** @ignore */
@@ -10567,15 +10606,15 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
             return `${this.genericError} (${firstErrorKey})`;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: "dropdownId", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "matAutocomplete", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsInternationalPhoneFieldComponent, isStandalone: false, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [onBlur]=\"onInputBlur\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "matAutocomplete", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsInternationalPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"] }]
-        }], propDecorators: { dropdownId: [{
+            args: [{ selector: 'ads-international-phone-field', standalone: false, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [onBlur]=\"onInputBlur\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dropdownId: [{
                 type: Input
-            }], closeOnOutOfView: [{
+            }], selectedCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCountry", required: false }] }], closeOnOutOfView: [{
                 type: Input
             }], outOfViewRootMargin: [{
                 type: Input
@@ -10801,5 +10840,5 @@ function provideAdsUi(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsColumnSortFilterMenuComponent, AdsColumnSortFilterMenuModule, AdsCreateTagComponent, AdsCreateTagModule, AdsCustomHeaderComponent, AdsCustomHeaderModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsHorizontalStepperComponent, AdsHorizontalStepperModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPilotPayLogoComponent, AdsPilotPayLogoModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsShipmentHorizontalStepperComponent, AdsShipmentHorizontalStepperModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSideNavBarV2Component, AdsSideNavBarV2Module, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalSideNavigationStepperComponent, AdsVerticalSideNavigationStepperModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
+export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsColumnSortFilterMenuComponent, AdsColumnSortFilterMenuModule, AdsCreateTagComponent, AdsCreateTagModule, AdsCustomHeaderComponent, AdsCustomHeaderModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsHorizontalStepperComponent, AdsHorizontalStepperModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPilotPayLogoComponent, AdsPilotPayLogoModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsShipmentHorizontalStepperComponent, AdsShipmentHorizontalStepperModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSideNavBarV2Component, AdsSideNavBarV2Module, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalSideNavigationStepperComponent, AdsVerticalSideNavigationStepperModule, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CountryCode, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, HorizontalStepStatus, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus, provideAdsUi };
 //# sourceMappingURL=ascentgl-ads-ui.mjs.map