@ascentgl/ads-ui 0.0.32 → 0.0.33

package/esm2022/lib/components/form-fields/phone-field/phone-field.component.mjs

@@ -21,8 +21,15 @@ export class AdsPhoneFieldComponent extends AbstractInputComponent {
         this.phoneMask = signal('');
     }
     /** @ignore */
+    addPlusSignIfMissing() {
+        const value = this.valueControl.value;
+        if (value && !value.startsWith('+')) {
+            this.valueControl.setValue(`+${value}`);
+        }
+    }
+    /** @ignore */
     ngOnChanges(changes) {
-        if (changes.selectedCountryCode) {
+        if (changes.selectedCountryCode && !changes?.control?.currentValue?.value) {
             this.updatePhoneMask();
             this.setInitialPhoneNumber();
         }
@@ -38,15 +45,15 @@ export class AdsPhoneFieldComponent extends AbstractInputComponent {
     }
     /** @ignore */
     setInitialPhoneNumber() {
-        this.valueControl.setValue(this.selectedCountryCode);
+        this.valueControl.setValue(`${this.selectedCountryCode}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsPhoneFieldComponent, selector: "ads-phone-field", inputs: { selectedCountryCode: "selectedCountryCode" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: i11.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsPhoneFieldComponent, selector: "ads-phone-field", inputs: { selectedCountryCode: "selectedCountryCode" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        (blur)=\"addPlusSignIfMissing()\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i6.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i9.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i10.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: i11.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-phone-field', template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
+            args: [{ selector: 'ads-phone-field', template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        (blur)=\"addPlusSignIfMissing()\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { selectedCountryCode: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3Bob25lLWZpZWxkL3Bob25lLWZpZWxkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9mb3JtLWZpZWxkcy9waG9uZS1maWVsZC9waG9uZS1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ25GLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7Ozs7Ozs7Ozs7O0FBTy9FLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxzQkFBc0I7SUFMbEU7O1FBTUUsMkJBQTJCO1FBQ2xCLHdCQUFtQixHQUFHLElBQUksQ0FBQztRQUVwQyxjQUFjO1FBQ2QsY0FBUyxHQUFHLE1BQU0sQ0FBUyxFQUFFLENBQUMsQ0FBQztLQXVCaEM7SUFyQkMsY0FBYztJQUNkLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztRQUMvQixDQUFDO0lBQ0gsQ0FBQztJQUVELGNBQWM7SUFDTixlQUFlO1FBQ3JCLElBQUksSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUN4QyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO1FBQzNDLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUMxQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGNBQWM7SUFDTixxQkFBcUI7UUFDM0IsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDdkQsQ0FBQzs4R0EzQlUsc0JBQXNCO2tHQUF0QixzQkFBc0IsMkpDUm5DLHVrREE4Q0E7OzJGRHRDYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQU1sQixtQkFBbUI7c0JBQTNCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIHNpZ25hbCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWJzdHJhY3RJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uL2Fic3RyYWN0cy9hYnN0cmFjdC5pbnB1dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtcGhvbmUtZmllbGQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGhvbmUtZmllbGQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi4vaW5wdXQvaW5wdXQuY29tcG9uZW50LnNjc3MnLCAnLi4vY29tbW9uL2NvbW1vbi5pbnB1dC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBZHNQaG9uZUZpZWxkQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBQcm92aWRlIGNvdW50cnkgY29kZSAqL1xuICBASW5wdXQoKSBzZWxlY3RlZENvdW50cnlDb2RlID0gJysxJztcblxuICAvKiogQGlnbm9yZSAqL1xuICBwaG9uZU1hc2sgPSBzaWduYWw8c3RyaW5nPignJyk7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLnNlbGVjdGVkQ291bnRyeUNvZGUpIHtcbiAgICAgIHRoaXMudXBkYXRlUGhvbmVNYXNrKCk7XG4gICAgICB0aGlzLnNldEluaXRpYWxQaG9uZU51bWJlcigpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBAaWdub3JlICovXG4gIHByaXZhdGUgdXBkYXRlUGhvbmVNYXNrKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnNlbGVjdGVkQ291bnRyeUNvZGUubGVuZ3RoID4gMikge1xuICAgICAgdGhpcy5waG9uZU1hc2suc2V0KCcrMDAgKDAwMCkgMDAwLTAwMDAnKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5waG9uZU1hc2suc2V0KCcrMCAoMDAwKSAwMDAtMDAwMCcpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBAaWdub3JlICovXG4gIHByaXZhdGUgc2V0SW5pdGlhbFBob25lTnVtYmVyKCk6IHZvaWQge1xuICAgIHRoaXMudmFsdWVDb250cm9sLnNldFZhbHVlKHRoaXMuc2VsZWN0ZWRDb3VudHJ5Q29kZSk7XG4gIH1cbn1cbiIsIjxkaXYgW25nU3R5bGVdPVwieyBtaW5XaWR0aDogd2lkdGggfVwiIGNsYXNzPVwiYWRzLWZpZWxkLWNvbnRhaW5lclwiPlxuICA8ZGl2IFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIj5cbiAgICA8bWF0LWZvcm0tZmllbGRcbiAgICAgIFtmbG9hdExhYmVsXT1cInZhbHVlQ29udHJvbC52YWx1ZSA/ICdhbHdheXMnIDogJ2F1dG8nXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2ltbWVkaWF0ZS12YWxpZGF0aW9uJzogaW1tZWRpYXRlVmFsaWRhdGlvbixcbiAgICAgICAgJ25vLWxlZnQtcGFkZGluZyc6IGNhbkNsZWFyICYmICFzaG93RXhjbGFtYXRpb24sXG4gICAgICAgICdzdWNjZXNzLWxhYmVsJzogY2FuU2hvd1N1Y2Nlc3MoKSxcbiAgICAgICAgJ2Vycm9yLWxhYmVsJzogY2FuU2hvd0Vycm9yKCksXG4gICAgICAgICd4LXNtYWxsJzogc21hbGxTaXplLFxuICAgICAgfVwiXG4gICAgICBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCJcbiAgICA+XG4gICAgICBAaWYgKChsYWJlbCB8fCByZXF1aXJlZCkgJiYgIXNtYWxsU2l6ZSkge1xuICAgICAgICA8bWF0LWxhYmVsPnt7IGxhYmVsIH19PC9tYXQtbGFiZWw+XG4gICAgICB9XG4gICAgICA8aW5wdXRcbiAgICAgICAgbWF0SW5wdXRcbiAgICAgICAgW2lkXT1cImlkXCJcbiAgICAgICAgW21hc2tdPVwicGhvbmVNYXNrKClcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIlBob25lIG51bWJlclwiXG4gICAgICAgIFtmb3JtQ29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIlxuICAgICAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxuICAgICAgLz5cbiAgICAgIEBpZiAoY2FuQ2xlYXIpIHtcbiAgICAgICAgPGJ1dHRvbiBtYXRUZXh0U3VmZml4IHR5cGU9XCJidXR0b25cIiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cImNsZWFyKCRldmVudClcIj5cbiAgICAgICAgICA8YWRzLWljb24gbmFtZT1cImNyb3NzXCIgc2l6ZT1cInh4c1wiIFt0aGVtZV09XCInaWNvblByaW1hcnknXCIgLz5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICB9XG4gICAgPC9tYXQtZm9ybS1maWVsZD5cbiAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyLWNvbnRhaW5lclwiPlxuICAgICAgQGlmIChjYW5TaG93RXJyb3IoKSkge1xuICAgICAgICA8YWRzLWVycm9yIFtlcnJvcl09XCJkaXNwbGF5Rmlyc3RFcnJvcigpXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9IEBlbHNlIGlmIChjYW5TaG93U3VjY2VzcygpKSB7XG4gICAgICAgIDxhZHMtc3VjY2VzcyBbc3VjY2Vzc109XCJzdWNjZXNzTWVzc2FnZSFcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICAgIH0gQGVsc2UgaWYgKGhpbnQpIHtcbiAgICAgICAgPGFkcy1oaW50IFtoaW50XT1cImhpbnRcIiBbY29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIiBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCIgLz5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgQGlmICh0b29sdGlwKSB7XG4gICAgPGFkcy1pbnB1dC10b29sdGlwIFt0b29sdGlwXT1cInRvb2x0aXBcIiAvPlxuICB9XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGhvbmUtZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL3Bob25lLWZpZWxkL3Bob25lLWZpZWxkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9mb3JtLWZpZWxkcy9waG9uZS1maWVsZC9waG9uZS1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWlCLE1BQU0sZUFBZSxDQUFDO0FBQ25GLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDOzs7Ozs7Ozs7Ozs7O0FBTy9FLE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxzQkFBc0I7SUFMbEU7O1FBTUUsMkJBQTJCO1FBQ2xCLHdCQUFtQixHQUFHLElBQUksQ0FBQztRQUVwQyxjQUFjO1FBQ2QsY0FBUyxHQUFHLE1BQU0sQ0FBUyxFQUFFLENBQUMsQ0FBQztLQStCaEM7SUE3QkMsY0FBYztJQUNkLG9CQUFvQjtRQUNsQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQztRQUN0QyxJQUFJLEtBQUssSUFBSSxDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNwQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDMUMsQ0FBQztJQUNILENBQUM7SUFFRCxjQUFjO0lBQ2QsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLG1CQUFtQixJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLENBQUM7WUFDMUUsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO1FBQy9CLENBQUM7SUFDSCxDQUFDO0lBRUQsY0FBYztJQUNOLGVBQWU7UUFDckIsSUFBSSxJQUFJLENBQUMsbUJBQW1CLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxDQUFDO1lBQ3hDLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDM0MsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO1FBQzFDLENBQUM7SUFDSCxDQUFDO0lBRUQsY0FBYztJQUNOLHFCQUFxQjtRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxHQUFHLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLENBQUM7SUFDNUQsQ0FBQzs4R0FuQ1Usc0JBQXNCO2tHQUF0QixzQkFBc0IsMkpDUm5DLGtuREErQ0E7OzJGRHZDYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQU1sQixtQkFBbUI7c0JBQTNCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkNoYW5nZXMsIHNpZ25hbCwgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWJzdHJhY3RJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uL2Fic3RyYWN0cy9hYnN0cmFjdC5pbnB1dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtcGhvbmUtZmllbGQnLFxuICB0ZW1wbGF0ZVVybDogJy4vcGhvbmUtZmllbGQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi4vaW5wdXQvaW5wdXQuY29tcG9uZW50LnNjc3MnLCAnLi4vY29tbW9uL2NvbW1vbi5pbnB1dC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBZHNQaG9uZUZpZWxkQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RJbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKiBQcm92aWRlIGNvdW50cnkgY29kZSAqL1xuICBASW5wdXQoKSBzZWxlY3RlZENvdW50cnlDb2RlID0gJysxJztcblxuICAvKiogQGlnbm9yZSAqL1xuICBwaG9uZU1hc2sgPSBzaWduYWw8c3RyaW5nPignJyk7XG5cbiAgLyoqIEBpZ25vcmUgKi9cbiAgYWRkUGx1c1NpZ25JZk1pc3NpbmcoKTogdm9pZCB7XG4gICAgY29uc3QgdmFsdWUgPSB0aGlzLnZhbHVlQ29udHJvbC52YWx1ZTtcbiAgICBpZiAodmFsdWUgJiYgIXZhbHVlLnN0YXJ0c1dpdGgoJysnKSkge1xuICAgICAgdGhpcy52YWx1ZUNvbnRyb2wuc2V0VmFsdWUoYCske3ZhbHVlfWApO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBAaWdub3JlICovXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy5zZWxlY3RlZENvdW50cnlDb2RlICYmICFjaGFuZ2VzPy5jb250cm9sPy5jdXJyZW50VmFsdWU/LnZhbHVlKSB7XG4gICAgICB0aGlzLnVwZGF0ZVBob25lTWFzaygpO1xuICAgICAgdGhpcy5zZXRJbml0aWFsUGhvbmVOdW1iZXIoKTtcbiAgICB9XG4gIH1cblxuICAvKiogQGlnbm9yZSAqL1xuICBwcml2YXRlIHVwZGF0ZVBob25lTWFzaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zZWxlY3RlZENvdW50cnlDb2RlLmxlbmd0aCA+IDIpIHtcbiAgICAgIHRoaXMucGhvbmVNYXNrLnNldCgnKzAwICgwMDApIDAwMC0wMDAwJyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucGhvbmVNYXNrLnNldCgnKzAgKDAwMCkgMDAwLTAwMDAnKTtcbiAgICB9XG4gIH1cblxuICAvKiogQGlnbm9yZSAqL1xuICBwcml2YXRlIHNldEluaXRpYWxQaG9uZU51bWJlcigpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlQ29udHJvbC5zZXRWYWx1ZShgJHt0aGlzLnNlbGVjdGVkQ291bnRyeUNvZGV9YCk7XG4gIH1cbn1cbiIsIjxkaXYgW25nU3R5bGVdPVwieyBtaW5XaWR0aDogd2lkdGggfVwiIGNsYXNzPVwiYWRzLWZpZWxkLWNvbnRhaW5lclwiPlxuICA8ZGl2IFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIj5cbiAgICA8bWF0LWZvcm0tZmllbGRcbiAgICAgIFtmbG9hdExhYmVsXT1cInZhbHVlQ29udHJvbC52YWx1ZSA/ICdhbHdheXMnIDogJ2F1dG8nXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2ltbWVkaWF0ZS12YWxpZGF0aW9uJzogaW1tZWRpYXRlVmFsaWRhdGlvbixcbiAgICAgICAgJ25vLWxlZnQtcGFkZGluZyc6IGNhbkNsZWFyICYmICFzaG93RXhjbGFtYXRpb24sXG4gICAgICAgICdzdWNjZXNzLWxhYmVsJzogY2FuU2hvd1N1Y2Nlc3MoKSxcbiAgICAgICAgJ2Vycm9yLWxhYmVsJzogY2FuU2hvd0Vycm9yKCksXG4gICAgICAgICd4LXNtYWxsJzogc21hbGxTaXplLFxuICAgICAgfVwiXG4gICAgICBbbmdTdHlsZV09XCJ7IHdpZHRoOiB3aWR0aCB9XCJcbiAgICA+XG4gICAgICBAaWYgKChsYWJlbCB8fCByZXF1aXJlZCkgJiYgIXNtYWxsU2l6ZSkge1xuICAgICAgICA8bWF0LWxhYmVsPnt7IGxhYmVsIH19PC9tYXQtbGFiZWw+XG4gICAgICB9XG4gICAgICA8aW5wdXRcbiAgICAgICAgbWF0SW5wdXRcbiAgICAgICAgW2lkXT1cImlkXCJcbiAgICAgICAgW21hc2tdPVwicGhvbmVNYXNrKClcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIlBob25lIG51bWJlclwiXG4gICAgICAgIFtmb3JtQ29udHJvbF09XCJ2YWx1ZUNvbnRyb2xcIlxuICAgICAgICBbcmVxdWlyZWRdPVwicmVxdWlyZWRcIlxuICAgICAgICBbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXJcIlxuICAgICAgICAoYmx1cik9XCJhZGRQbHVzU2lnbklmTWlzc2luZygpXCJcbiAgICAgIC8+XG4gICAgICBAaWYgKGNhbkNsZWFyKSB7XG4gICAgICAgIDxidXR0b24gbWF0VGV4dFN1ZmZpeCB0eXBlPVwiYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJjbGVhcigkZXZlbnQpXCI+XG4gICAgICAgICAgPGFkcy1pY29uIG5hbWU9XCJjcm9zc1wiIHNpemU9XCJ4eHNcIiBbdGhlbWVdPVwiJ2ljb25QcmltYXJ5J1wiIC8+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgfVxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgPGRpdiBjbGFzcz1cImZvb3Rlci1jb250YWluZXJcIj5cbiAgICAgIEBpZiAoY2FuU2hvd0Vycm9yKCkpIHtcbiAgICAgICAgPGFkcy1lcnJvciBbZXJyb3JdPVwiZGlzcGxheUZpcnN0RXJyb3IoKVwiIFtuZ1N0eWxlXT1cInsgd2lkdGg6IHdpZHRoIH1cIiAvPlxuICAgICAgfSBAZWxzZSBpZiAoY2FuU2hvd1N1Y2Nlc3MoKSkge1xuICAgICAgICA8YWRzLXN1Y2Nlc3MgW3N1Y2Nlc3NdPVwic3VjY2Vzc01lc3NhZ2UhXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9IEBlbHNlIGlmIChoaW50KSB7XG4gICAgICAgIDxhZHMtaGludCBbaGludF09XCJoaW50XCIgW2NvbnRyb2xdPVwidmFsdWVDb250cm9sXCIgW25nU3R5bGVdPVwieyB3aWR0aDogd2lkdGggfVwiIC8+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuXG4gIEBpZiAodG9vbHRpcCkge1xuICAgIDxhZHMtaW5wdXQtdG9vbHRpcCBbdG9vbHRpcF09XCJ0b29sdGlwXCIgLz5cbiAgfVxuPC9kaXY+XG4iXX0=

package/esm2022/lib/components/steppers/numeric-stepper/components/numeric-step.component.mjs

@@ -13,10 +13,10 @@ export class AdsNumericStepComponent {
         return this.index() === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsNumericStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 55px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsNumericStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-numeric-step', standalone: true, imports: [NgClass, MatFormField], template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 55px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
+            args: [{ selector: 'ads-numeric-step', standalone: true, imports: [NgClass, MatFormField], template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtZXJpYy1zdGVwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYWRzLXVpL3NyYy9saWIvY29tcG9uZW50cy9zdGVwcGVycy9udW1lcmljLXN0ZXBwZXIvY29tcG9uZW50cy9udW1lcmljLXN0ZXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL3N0ZXBwZXJzL251bWVyaWMtc3RlcHBlci9jb21wb25lbnRzL251bWVyaWMtc3RlcC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDMUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDhCQUE4QixDQUFDOztBQVM1RCxNQUFNLE9BQU8sdUJBQXVCO0lBUHBDO1FBUUUsV0FBTSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVcsQ0FBQztRQUNuQyxlQUFVLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVyxDQUFDO1FBQ3ZDLFVBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDakMsYUFBUSxHQUFHLEtBQUssRUFBVSxDQUFDO0tBSzVCO0lBSEMsSUFBSSxPQUFPO1FBQ1QsT0FBTyxJQUFJLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQzVCLENBQUM7OEdBUlUsdUJBQXVCO2tHQUF2Qix1QkFBdUIsZ2xCQ1hwQyw4Y0FxQkEscXRDRFpZLE9BQU87OzJGQUVOLHVCQUF1QjtrQkFQbkMsU0FBUzsrQkFDRSxrQkFBa0IsY0FHaEIsSUFBSSxXQUNQLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTWF0Rm9ybUZpZWxkIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZm9ybS1maWVsZCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Fkcy1udW1lcmljLXN0ZXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vbnVtZXJpYy1zdGVwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbnVtZXJpYy1zdGVwLmNvbXBvbmVudC5zY3NzJ10sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0NsYXNzLCBNYXRGb3JtRmllbGRdLFxufSlcbmV4cG9ydCBjbGFzcyBBZHNOdW1lcmljU3RlcENvbXBvbmVudCB7XG4gIGlzTGFzdCA9IGlucHV0LnJlcXVpcmVkPGJvb2xlYW4+KCk7XG4gIGlzRGVsaXZlcnkgPSBpbnB1dC5yZXF1aXJlZDxib29sZWFuPigpO1xuICBpbmRleCA9IGlucHV0LnJlcXVpcmVkPG51bWJlcj4oKTtcbiAgZGlzdGFuY2UgPSBpbnB1dDxzdHJpbmc+KCk7XG5cbiAgZ2V0IGlzRmlyc3QoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuaW5kZXgoKSA9PT0gMDtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImNpcmNsZS1jb250YWluZXJcIlxuICBbbmdDbGFzc109XCJ7XG4gICAgJ2Rhc2gtbGluZSc6IHRydWUsXG4gICAgb3V0ZXJtb3N0OiBpc0ZpcnN0IHx8IGlzTGFzdCgpLFxuICB9XCJcbj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiZGFzaC1saW5lIHRvcFwiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgdG9wOiBpc0xhc3QoKSxcbiAgICAgIGJvdHRvbTogaXNGaXJzdCxcbiAgICB9XCJcbiAgPjwvZGl2PlxuICBAaWYgKCFpc0xhc3QoKSAmJiBkaXN0YW5jZSgpKSB7XG4gICAgPGRpdiBjbGFzcz1cImRpc3RhbmNlLXRleHRcIj5cbiAgICAgIHt7IGRpc3RhbmNlKCkgfX1cbiAgICA8L2Rpdj5cbiAgfVxuICA8ZGl2IGNsYXNzPVwic3RvcC1jaXJjbGVcIiBbbmdDbGFzc109XCJ7IGRlbGl2ZXJ5OiBpc0RlbGl2ZXJ5KCkgfVwiPnt7IGluZGV4KCkgKyAxIH19PC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/fesm2022/ascentgl-ads-ui.mjs

@@ -3234,8 +3234,15 @@ class AdsPhoneFieldComponent extends AbstractInputComponent {
         this.phoneMask = signal('');
     }
     /** @ignore */
+    addPlusSignIfMissing() {
+        const value = this.valueControl.value;
+        if (value && !value.startsWith('+')) {
+            this.valueControl.setValue(`+${value}`);
+        }
+    }
+    /** @ignore */
     ngOnChanges(changes) {
-        if (changes.selectedCountryCode) {
+        if (changes.selectedCountryCode && !changes?.control?.currentValue?.value) {
             this.updatePhoneMask();
             this.setInitialPhoneNumber();
         }
@@ -3251,14 +3258,14 @@ class AdsPhoneFieldComponent extends AbstractInputComponent {
     }
     /** @ignore */
     setInitialPhoneNumber() {
-        this.valueControl.setValue(this.selectedCountryCode);
+        this.valueControl.setValue(`${this.selectedCountryCode}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsPhoneFieldComponent, selector: "ads-phone-field", inputs: { selectedCountryCode: "selectedCountryCode" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsPhoneFieldComponent, selector: "ads-phone-field", inputs: { selectedCountryCode: "selectedCountryCode" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        (blur)=\"addPlusSignIfMissing()\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$1.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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsPhoneFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-phone-field', template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
+            args: [{ selector: 'ads-phone-field', template: "<div [ngStyle]=\"{ minWidth: width }\" class=\"ads-field-container\">\n  <div [ngStyle]=\"{ width: width }\">\n    <mat-form-field\n      [floatLabel]=\"valueControl.value ? 'always' : 'auto'\"\n      [ngClass]=\"{\n        'immediate-validation': immediateValidation,\n        'no-left-padding': canClear && !showExclamation,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        matInput\n        [id]=\"id\"\n        [mask]=\"phoneMask()\"\n        placeholder=\"Phone number\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        (blur)=\"addPlusSignIfMissing()\"\n      />\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n          <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n    </mat-form-field>\n    <div class=\"footer-container\">\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\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-container-color: var(--color-white);--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { selectedCountryCode: [{
                 type: Input
             }] } });
@@ -6308,11 +6315,11 @@ class AdsNumericStepComponent {
         return this.index() === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsNumericStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 55px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsNumericStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-numeric-step', standalone: true, imports: [NgClass, MatFormField], template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 55px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
+            args: [{ selector: 'ads-numeric-step', standalone: true, imports: [NgClass, MatFormField], template: "<div\n  class=\"circle-container\"\n  [ngClass]=\"{\n    'dash-line': true,\n    outermost: isFirst || isLast(),\n  }\"\n>\n  <div\n    class=\"dash-line top\"\n    [ngClass]=\"{\n      top: isLast(),\n      bottom: isFirst,\n    }\"\n  ></div>\n  @if (!isLast() && distance()) {\n    <div class=\"distance-text\">\n      {{ distance() }}\n    </div>\n  }\n  <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
         }] });
 
 class AdsNumericStepperComponent {