@ascentgl/ads-ui 22.10.0 → 22.11.1

package/fesm2022/ascentgl-ads-ui.mjs

@@ -3523,12 +3523,35 @@ class AdsInputComponent extends AbstractInputComponent {
             return;
         }
         if (this.type === 'number') {
-            const invalidChars = ['e', 'E', '+', '-'];
+            const allowNegative = this.min !== undefined && this.min < 0;
+            const invalidChars = allowNegative ? ['e', 'E', '+'] : ['e', 'E', '+', '-'];
             if (invalidChars.includes(event.key)) {
                 event.preventDefault();
             }
         }
     }
+    /** @ignore Prevents paste of values outside [min, max] or non-numeric text for number inputs. */
+    handlePaste(event) {
+        if (this.readOnly) {
+            event.preventDefault();
+            return;
+        }
+        if (this.type !== 'number' || (this.min === undefined && this.max === undefined)) {
+            return;
+        }
+        const pasted = event.clipboardData?.getData('text');
+        if (!pasted) {
+            return;
+        }
+        const value = Number(pasted);
+        if (Number.isNaN(value)) {
+            event.preventDefault();
+            return;
+        }
+        if ((this.min !== undefined && value < this.min) || (this.max !== undefined && value > this.max)) {
+            event.preventDefault();
+        }
+    }
     /** @ignore — prevents focus on read-only inputs */
     handleFocusInternal(event) {
         if (this.readOnly) {
@@ -3544,7 +3567,7 @@ class AdsInputComponent extends AbstractInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInputComponent, isStandalone: true, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", matAutocomplete: "matAutocomplete", readOnly: "readOnly", showSearchIcon: "showSearchIcon", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" 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,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n        'read-only': readOnly,\n        'suppress-validation': !showValidationError,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        #input\n        matInput\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [mask]=\"mask\"\n        [maxlength]=\"maxlength\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [id]=\"id\"\n        [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readOnly\"\n        [tabIndex]=\"readOnly ? -1 : 0\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"handleFocusInternal($event)\"\n        (keydown)=\"restrictInput($event)\"\n        (wheel)=\"preventScroll($event)\"\n        (paste)=\"readOnly ? $event.preventDefault() : null\"\n        (cut)=\"readOnly ? $event.preventDefault() : null\"\n        [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n        [attr.pattern]=\"pattern\"\n      />\n      @if (rightHint) {\n        <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\n      }\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n\n      @if (isPasswordField) {\n        <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n          <ads-icon\n            class=\"visibility-eye\"\n            [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            stroke=\"iconPrimary\"\n            color=\"--color-medium\"\n          />\n        </button>\n      }\n\n      @if (showClockIcon) {\n        <button\n          type=\"button\"\n          [disableRipple]=\"true\"\n          mat-icon-button\n          matTextSuffix\n          class=\"action-icon time-picker-button\"\n        >\n          <ads-icon\n            class=\"status_processing\"\n            name=\"status_processing\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            theme=\"iconPrimary\"\n          />\n        </button>\n      }\n\n      @if (showSearchIcon) {\n        <button\n          matTextSuffix\n          type=\"button\"\n          mat-icon-button\n          [disableRipple]=\"true\"\n          [disabled]=\"true\"\n          class=\"action-icon\"\n        >\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n        </button>\n      }\n\n    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\"\n           [class.dynamic]=\"!isStaticFooter\"\n           [class.has-content]=\"hasFooterContent()\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .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(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}: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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "directive", type: 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", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInputComponent, isStandalone: true, selector: "ads-input", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", defaultValue: "defaultValue", isPasswordField: "isPasswordField", showClockIcon: "showClockIcon", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", matAutocomplete: "matAutocomplete", readOnly: "readOnly", showSearchIcon: "showSearchIcon", min: "min", max: "max", onFocus: "onFocus", onBlur: "onBlur", rightHint: "rightHint" }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" 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,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n        'read-only': readOnly,\n        'suppress-validation': !showValidationError,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        #input\n        matInput\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [mask]=\"mask\"\n        [maxlength]=\"maxlength\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [id]=\"id\"\n        [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readOnly\"\n        [tabIndex]=\"readOnly ? -1 : 0\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"handleFocusInternal($event)\"\n        (keydown)=\"restrictInput($event)\"\n        (wheel)=\"preventScroll($event)\"\n        (paste)=\"handlePaste($event)\"\n        (cut)=\"readOnly ? $event.preventDefault() : null\"\n        [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"type === 'number' ? (min ?? null) : null\"\n        [attr.max]=\"type === 'number' ? (max ?? null) : null\"\n      />\n      @if (rightHint) {\n        <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\n      }\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n\n      @if (isPasswordField) {\n        <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n          <ads-icon\n            class=\"visibility-eye\"\n            [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            stroke=\"iconPrimary\"\n            color=\"--color-medium\"\n          />\n        </button>\n      }\n\n      @if (showClockIcon) {\n        <button\n          type=\"button\"\n          [disableRipple]=\"true\"\n          mat-icon-button\n          matTextSuffix\n          class=\"action-icon time-picker-button\"\n        >\n          <ads-icon\n            class=\"status_processing\"\n            name=\"status_processing\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            theme=\"iconPrimary\"\n          />\n        </button>\n      }\n\n      @if (showSearchIcon) {\n        <button\n          matTextSuffix\n          type=\"button\"\n          mat-icon-button\n          [disableRipple]=\"true\"\n          [disabled]=\"true\"\n          class=\"action-icon\"\n        >\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n        </button>\n      }\n\n    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\"\n           [class.dynamic]=\"!isStaticFooter\"\n           [class.has-content]=\"hasFooterContent()\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .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(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}: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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "directive", type: 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", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInputComponent, decorators: [{
             type: Component,
@@ -3560,7 +3583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         AdsErrorComponent,
                         AdsHintComponent,
                         NgxMaskDirective,
-                    ], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" 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,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n        'read-only': readOnly,\n        'suppress-validation': !showValidationError,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        #input\n        matInput\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [mask]=\"mask\"\n        [maxlength]=\"maxlength\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [id]=\"id\"\n        [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readOnly\"\n        [tabIndex]=\"readOnly ? -1 : 0\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"handleFocusInternal($event)\"\n        (keydown)=\"restrictInput($event)\"\n        (wheel)=\"preventScroll($event)\"\n        (paste)=\"readOnly ? $event.preventDefault() : null\"\n        (cut)=\"readOnly ? $event.preventDefault() : null\"\n        [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n        [attr.pattern]=\"pattern\"\n      />\n      @if (rightHint) {\n        <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\n      }\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n\n      @if (isPasswordField) {\n        <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n          <ads-icon\n            class=\"visibility-eye\"\n            [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            stroke=\"iconPrimary\"\n            color=\"--color-medium\"\n          />\n        </button>\n      }\n\n      @if (showClockIcon) {\n        <button\n          type=\"button\"\n          [disableRipple]=\"true\"\n          mat-icon-button\n          matTextSuffix\n          class=\"action-icon time-picker-button\"\n        >\n          <ads-icon\n            class=\"status_processing\"\n            name=\"status_processing\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            theme=\"iconPrimary\"\n          />\n        </button>\n      }\n\n      @if (showSearchIcon) {\n        <button\n          matTextSuffix\n          type=\"button\"\n          mat-icon-button\n          [disableRipple]=\"true\"\n          [disabled]=\"true\"\n          class=\"action-icon\"\n        >\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n        </button>\n      }\n\n    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\"\n           [class.dynamic]=\"!isStaticFooter\"\n           [class.has-content]=\"hasFooterContent()\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .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(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}: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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                    ], providers: [provideNgxMask()], changeDetection: ChangeDetectionStrategy.Eager, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" 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,\n        'success-label': canShowSuccess(),\n        'error-label': canShowError(),\n        'x-small': smallSize,\n        'read-only': readOnly,\n        'suppress-validation': !showValidationError,\n      }\"\n      [ngStyle]=\"{ width: width }\"\n    >\n      @if ((label || required) && !smallSize) {\n        <mat-label>{{ label }}</mat-label>\n      }\n      <input\n        #input\n        matInput\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [mask]=\"mask\"\n        [maxlength]=\"maxlength\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [id]=\"id\"\n        [type]=\"isPasswordField ? (hidePassword ? 'password' : 'text') : type\"\n        [formControl]=\"valueControl\"\n        [required]=\"required\"\n        [placeholder]=\"placeholder\"\n        [readonly]=\"readOnly\"\n        [tabIndex]=\"readOnly ? -1 : 0\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"handleFocusInternal($event)\"\n        (keydown)=\"restrictInput($event)\"\n        (wheel)=\"preventScroll($event)\"\n        (paste)=\"handlePaste($event)\"\n        (cut)=\"readOnly ? $event.preventDefault() : null\"\n        [attr.matAutocomplete]=\"matAutocomplete ? matAutocomplete : null\"\n        [attr.pattern]=\"pattern\"\n        [attr.min]=\"type === 'number' ? (min ?? null) : null\"\n        [attr.max]=\"type === 'number' ? (max ?? null) : null\"\n      />\n      @if (rightHint) {\n        <span class=\"ads-input-right-hint\">{{ rightHint }}</span>\n      }\n\n      @if (canClear) {\n        <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n          <ads-icon class=\"cross-icon\" name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" />\n        </button>\n      }\n\n      @if (isPasswordField) {\n        <button type=\"button\" mat-icon-button matTextSuffix (click)=\"showHidePassword()\" class=\"action-icon\">\n          <ads-icon\n            class=\"visibility-eye\"\n            [name]=\"hidePassword ? 'visibility_eye_none' : 'visibility_eye'\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            stroke=\"iconPrimary\"\n            color=\"--color-medium\"\n          />\n        </button>\n      }\n\n      @if (showClockIcon) {\n        <button\n          type=\"button\"\n          [disableRipple]=\"true\"\n          mat-icon-button\n          matTextSuffix\n          class=\"action-icon time-picker-button\"\n        >\n          <ads-icon\n            class=\"status_processing\"\n            name=\"status_processing\"\n            [size]=\"smallSize ? 'xxs' : 'xs'\"\n            theme=\"iconPrimary\"\n          />\n        </button>\n      }\n\n      @if (showSearchIcon) {\n        <button\n          matTextSuffix\n          type=\"button\"\n          mat-icon-button\n          [disableRipple]=\"true\"\n          [disabled]=\"true\"\n          class=\"action-icon\"\n        >\n          <ads-icon name=\"search\" size=\"xs\" [theme]=\"'iconPrimary'\" class=\"search-icon\" />\n        </button>\n      }\n\n    </mat-form-field>\n    @if (showFooter) {\n      <div class=\"footer-container\"\n           [class.dynamic]=\"!isStaticFooter\"\n           [class.has-content]=\"hasFooterContent()\">\n        @if (canShowError()) {\n          <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n        } @else if (canShowSuccess()) {\n          <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n        } @else if (hint) {\n          <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n        }\n      </div>\n    }\n  </div>\n\n  @if (tooltip) {\n    <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n  }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}: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::-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:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}: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 .status_processing,: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.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!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(--mat-form-field-filled-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;--mat-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 .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}: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{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .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(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}: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(--mat-form-field-filled-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 .status_processing,: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}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { maxlength: [{
                 type: Input
             }], type: [{
@@ -3593,6 +3616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 type: Input
             }], showSearchIcon: [{
                 type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
             }], onFocus: [{
                 type: Input
             }], onBlur: [{
@@ -3665,7 +3692,7 @@ class AdsPhoneFieldComponent extends AbstractInputComponent {
         this.valueChangesSubscription?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: AdsPhoneFieldComponent, isStandalone: true, selector: "ads-phone-field", providers: [provideNgxMask()], usesInheritance: true, ngImport: i0, template: "<ads-input\n  [control]=\"valueControl\"\n  [mask]=\"phoneMask()\"\n  [onBlur]=\"onBlur\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [label]=\"label\"\n  [errorMessages]=\"errorMessages\"\n  [width]=\"width\"\n  [showClearButton]=\"showClearButton\"\n  [showValidationError]=\"showValidationError\"\n  [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n/>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.1", type: AdsPhoneFieldComponent, isStandalone: true, selector: "ads-phone-field", providers: [provideNgxMask()], usesInheritance: true, ngImport: i0, template: "<ads-input\n  [control]=\"valueControl\"\n  [mask]=\"phoneMask()\"\n  [onBlur]=\"onBlur\"\n  [id]=\"id\"\n  [placeholder]=\"placeholder\"\n  [label]=\"label\"\n  [errorMessages]=\"errorMessages\"\n  [width]=\"width\"\n  [showClearButton]=\"showClearButton\"\n  [showValidationError]=\"showValidationError\"\n  [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n/>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "min", "max", "onFocus", "onBlur", "rightHint"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsPhoneFieldComponent, decorators: [{
             type: Component,
@@ -3780,7 +3807,7 @@ class AdsInputDropdownComponent extends AbstractInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInputDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInputDropdownComponent, isStandalone: true, selector: "ads-input-dropdown", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", dropdownControl: "dropdownControl", dropdownId: "dropdownId", dropdownLabel: "dropdownLabel", dropdownPlaceholder: "dropdownPlaceholder", inputWidth: "inputWidth", dropdownWidth: "dropdownWidth", autoSelectSingleDropdownOption: "autoSelectSingleDropdownOption", options: "options", displayValueKey: "displayValueKey", hasEmptyValue: "hasEmptyValue", fitContent: "fitContent", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", onBlur: "onBlur", showTooltip: "showTooltip", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: AdsDropdownComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: showValidationError && dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: inputWidth }\"\n    >\n      <ads-input\n        [control]=\"valueControl\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [showValidationError]=\"showValidationError\"\n        [maxlength]=\"maxlength\"\n        [id]=\"id\"\n        [pattern]=\"pattern\"\n        [label]=\"label\"\n        [type]=\"type\"\n        [placeholder]=\"placeholder\"\n        [errorMessages]=\"errorMessages\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showClearButton]=\"showClearButton\"\n        [immediateValidation]=\"immediateValidation\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [mask]=\"mask\"\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [onBlur]=\"onBlur\"\n      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n          [showValidationError]=\"showValidationError\"\n          [id]=\"id\"\n          [label]=\"dropdownLabel\"\n          [placeholder]=\"dropdownPlaceholder\"\n          [immediateValidation]=\"immediateValidation\"\n          [showFooter]=\"false\"\n          [size]=\"size\"\n          [successMessage]=\"successMessage\"\n          [mask]=\"mask\"\n        />\n      } @else {\n        <ads-dropdown\n          [hasEmptyValue]=\"hasEmptyValue\"\n          [control]=\"dropdownControl\"\n          [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n          [showValidationError]=\"showValidationError\"\n          [id]=\"dropdownId\"\n          [options]=\"options\"\n          [label]=\"dropdownLabel\"\n          [placeholder]=\"dropdownPlaceholder\"\n          [immediateValidation]=\"immediateValidation\"\n          [displayValueKey]=\"displayValueKey\"\n          [fitContent]=\"fitContent\"\n          [showFooter]=\"false\"\n          [checkSelected]=\"false\"\n          [size]=\"size\"\n          [successMessage]=\"successMessage\"\n          [showTooltip]=\"showTooltip\"\n          [closeOnOutOfView]=\"closeOnOutOfView\"\n          [outOfViewRootMargin]=\"outOfViewRootMargin\"\n        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mat-form-field-filled-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInputDropdownComponent, isStandalone: true, selector: "ads-input-dropdown", inputs: { maxlength: "maxlength", type: "type", pattern: "pattern", dropdownControl: "dropdownControl", dropdownId: "dropdownId", dropdownLabel: "dropdownLabel", dropdownPlaceholder: "dropdownPlaceholder", inputWidth: "inputWidth", dropdownWidth: "dropdownWidth", autoSelectSingleDropdownOption: "autoSelectSingleDropdownOption", options: "options", displayValueKey: "displayValueKey", hasEmptyValue: "hasEmptyValue", fitContent: "fitContent", mask: "mask", suffix: "suffix", prefix: "prefix", dropSpecialCharacters: "dropSpecialCharacters", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", outputTransformFn: "outputTransformFn", onBlur: "onBlur", showTooltip: "showTooltip", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "dropdownComponent", first: true, predicate: AdsDropdownComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: showValidationError && dropdownControl.invalid && dropdownControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: inputWidth }\"\n    >\n      <ads-input\n        [control]=\"valueControl\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [showValidationError]=\"showValidationError\"\n        [maxlength]=\"maxlength\"\n        [id]=\"id\"\n        [pattern]=\"pattern\"\n        [label]=\"label\"\n        [type]=\"type\"\n        [placeholder]=\"placeholder\"\n        [errorMessages]=\"errorMessages\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showClearButton]=\"showClearButton\"\n        [immediateValidation]=\"immediateValidation\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [mask]=\"mask\"\n        [suffix]=\"suffix\"\n        [prefix]=\"prefix\"\n        [dropSpecialCharacters]=\"dropSpecialCharacters\"\n        [thousandSeparator]=\"thousandSeparator\"\n        [decimalMarker]=\"decimalMarker\"\n        [outputTransformFn]=\"outputTransformFn\"\n        [onBlur]=\"onBlur\"\n      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n          [showValidationError]=\"showValidationError\"\n          [id]=\"id\"\n          [label]=\"dropdownLabel\"\n          [placeholder]=\"dropdownPlaceholder\"\n          [immediateValidation]=\"immediateValidation\"\n          [showFooter]=\"false\"\n          [size]=\"size\"\n          [successMessage]=\"successMessage\"\n          [mask]=\"mask\"\n        />\n      } @else {\n        <ads-dropdown\n          [hasEmptyValue]=\"hasEmptyValue\"\n          [control]=\"dropdownControl\"\n          [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n          [showValidationError]=\"showValidationError\"\n          [id]=\"dropdownId\"\n          [options]=\"options\"\n          [label]=\"dropdownLabel\"\n          [placeholder]=\"dropdownPlaceholder\"\n          [immediateValidation]=\"immediateValidation\"\n          [displayValueKey]=\"displayValueKey\"\n          [fitContent]=\"fitContent\"\n          [showFooter]=\"false\"\n          [checkSelected]=\"false\"\n          [size]=\"size\"\n          [successMessage]=\"successMessage\"\n          [showTooltip]=\"showTooltip\"\n          [closeOnOutOfView]=\"closeOnOutOfView\"\n          [outOfViewRootMargin]=\"outOfViewRootMargin\"\n        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mat-form-field-filled-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "min", "max", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInputDropdownComponent, decorators: [{
             type: Component,
@@ -3905,7 +3932,7 @@ class AdsCurrencyFieldComponent extends AbstractInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsCurrencyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsCurrencyFieldComponent, isStandalone: true, selector: "ads-currency-field", inputs: { maxlength: "maxlength", inputWidth: "inputWidth", currencyWidth: "currencyWidth" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: inputWidth }\"\n    >\n      <ads-input\n        [control]=\"valueControl\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [maxlength]=\"maxlength\"\n        [id]=\"id\"\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [errorMessages]=\"errorMessages\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showClearButton]=\"showClearButton\"\n        [immediateValidation]=\"immediateValidation\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        mask=\"separator.2\"\n        thousandSeparator=\",\"\n        [outputTransformFn]=\"cleanCurrencyValue\"\n        [onBlur]=\"handleBlur\"\n        prefix=\"$ \"\n        type=\"text\"\n      />\n    </div>\n    <div\n      class=\"currency-box\"\n      [ngStyle]=\"{ width: currencyWidth }\"\n    >\n      <ads-input\n        [control]=\"currencyDisplayControl\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [readOnly]=\"true\"\n      />\n    </div>\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .currency-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsCurrencyFieldComponent, isStandalone: true, selector: "ads-currency-field", inputs: { maxlength: "maxlength", inputWidth: "inputWidth", currencyWidth: "currencyWidth" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\">\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: inputWidth }\"\n    >\n      <ads-input\n        [control]=\"valueControl\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [maxlength]=\"maxlength\"\n        [id]=\"id\"\n        [label]=\"label\"\n        [placeholder]=\"placeholder\"\n        [errorMessages]=\"errorMessages\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showClearButton]=\"showClearButton\"\n        [immediateValidation]=\"immediateValidation\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        mask=\"separator.2\"\n        thousandSeparator=\",\"\n        [outputTransformFn]=\"cleanCurrencyValue\"\n        [onBlur]=\"handleBlur\"\n        prefix=\"$ \"\n        type=\"text\"\n      />\n    </div>\n    <div\n      class=\"currency-box\"\n      [ngStyle]=\"{ width: currencyWidth }\"\n    >\n      <ads-input\n        [control]=\"currencyDisplayControl\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [readOnly]=\"true\"\n      />\n    </div>\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .currency-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-right-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "min", "max", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsCurrencyFieldComponent, decorators: [{
             type: Component,
@@ -10768,7 +10795,7 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTimeFieldComponent, isStandalone: true, selector: "ads-time-field", inputs: { militaryTime: { classPropertyName: "militaryTime", publicName: "militaryTime", isSignal: true, isRequired: false, transformFunction: null }, hideClockIcon: { classPropertyName: "hideClockIcon", publicName: "hideClockIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (militaryTime()) {\n  <ads-input\n    [control]=\"valueControl\"\n    [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n    [showValidationError]=\"showValidationError\"\n    mask=\"Hh:m0\"\n    [onBlur]=\"onBlurUpdateTime\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [label]=\"label\"\n    [errorMessages]=\"mergedErrorMessages\"\n    [width]=\"width\"\n    [showClockIcon]=\"!hideClockIcon()\"\n    [showClearButton]=\"showClearButton\"\n  />\n} @else {\n  <ads-input-dropdown\n    [width]=\"width\"\n    [label]=\"label\"\n    [options]=\"periodOptions\"\n    [hasEmptyValue]=\"false\"\n    [control]=\"timeControl\"\n    [dropdownControl]=\"periodControl\"\n    [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n    [showValidationError]=\"showValidationError\"\n    [placeholder]=\"placeholder\"\n    [id]=\"id\"\n    [dropdownId]=\"dropdownId\"\n    [dropdownLabel]=\"'AM/PM'\"\n    [dropdownPlaceholder]=\"dropdownPlaceholder\"\n    [dropdownWidth]=\"'128px'\"\n    [inputWidth]=\"inputWidth\"\n    [tooltip]=\"tooltip\"\n    [size]=\"size\"\n    [successMessage]=\"successMessage\"\n    [errorMessages]=\"mergedErrorMessages\"\n    [showExclamationOnError]=\"showExclamationOnError\"\n    [showClearButton]=\"showClearButton\"\n    [immediateValidation]=\"immediateValidation\"\n    mask=\"Hh:m0\"\n  />\n}\n", styles: [":host::ng-deep .mdc-floating-label{max-width:100%!important}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdsInputDropdownComponent, selector: "ads-input-dropdown", inputs: ["maxlength", "type", "pattern", "dropdownControl", "dropdownId", "dropdownLabel", "dropdownPlaceholder", "inputWidth", "dropdownWidth", "autoSelectSingleDropdownOption", "options", "displayValueKey", "hasEmptyValue", "fitContent", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "onBlur", "showTooltip", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsTimeFieldComponent, isStandalone: true, selector: "ads-time-field", inputs: { militaryTime: { classPropertyName: "militaryTime", publicName: "militaryTime", isSignal: true, isRequired: false, transformFunction: null }, hideClockIcon: { classPropertyName: "hideClockIcon", publicName: "hideClockIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (militaryTime()) {\n  <ads-input\n    [control]=\"valueControl\"\n    [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n    [showValidationError]=\"showValidationError\"\n    mask=\"Hh:m0\"\n    [onBlur]=\"onBlurUpdateTime\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [label]=\"label\"\n    [errorMessages]=\"mergedErrorMessages\"\n    [width]=\"width\"\n    [showClockIcon]=\"!hideClockIcon()\"\n    [showClearButton]=\"showClearButton\"\n  />\n} @else {\n  <ads-input-dropdown\n    [width]=\"width\"\n    [label]=\"label\"\n    [options]=\"periodOptions\"\n    [hasEmptyValue]=\"false\"\n    [control]=\"timeControl\"\n    [dropdownControl]=\"periodControl\"\n    [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n    [showValidationError]=\"showValidationError\"\n    [placeholder]=\"placeholder\"\n    [id]=\"id\"\n    [dropdownId]=\"dropdownId\"\n    [dropdownLabel]=\"'AM/PM'\"\n    [dropdownPlaceholder]=\"dropdownPlaceholder\"\n    [dropdownWidth]=\"'128px'\"\n    [inputWidth]=\"inputWidth\"\n    [tooltip]=\"tooltip\"\n    [size]=\"size\"\n    [successMessage]=\"successMessage\"\n    [errorMessages]=\"mergedErrorMessages\"\n    [showExclamationOnError]=\"showExclamationOnError\"\n    [showClearButton]=\"showClearButton\"\n    [immediateValidation]=\"immediateValidation\"\n    mask=\"Hh:m0\"\n  />\n}\n", styles: [":host::ng-deep .mdc-floating-label{max-width:100%!important}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdsInputDropdownComponent, selector: "ads-input-dropdown", inputs: ["maxlength", "type", "pattern", "dropdownControl", "dropdownId", "dropdownLabel", "dropdownPlaceholder", "inputWidth", "dropdownWidth", "autoSelectSingleDropdownOption", "options", "displayValueKey", "hasEmptyValue", "fitContent", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "onBlur", "showTooltip", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "min", "max", "onFocus", "onBlur", "rightHint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsTimeFieldComponent, decorators: [{
             type: Component,
@@ -11339,7 +11366,7 @@ class AdsInternationalPhoneFieldComponent extends AbstractInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInternationalPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInternationalPhoneFieldComponent, isStandalone: true, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [showValidationError]=\"showValidationError\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: showValidationError && valueControl.invalid && valueControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showValidationError]=\"showValidationError\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [onBlur]=\"onInputBlur\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: AdsInternationalPhoneFieldComponent, isStandalone: true, selector: "ads-international-phone-field", inputs: { dropdownId: { classPropertyName: "dropdownId", publicName: "dropdownId", isSignal: false, isRequired: false, transformFunction: null }, selectedCountry: { classPropertyName: "selectedCountry", publicName: "selectedCountry", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutOfView: { classPropertyName: "closeOnOutOfView", publicName: "closeOnOutOfView", isSignal: false, isRequired: false, transformFunction: null }, outOfViewRootMargin: { classPropertyName: "outOfViewRootMargin", publicName: "outOfViewRootMargin", isSignal: false, isRequired: false, transformFunction: null } }, providers: [provideNgxMask()], viewQueries: [{ propertyName: "wrapperRef", first: true, predicate: ["wrapperRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-field-wrapper\" [ngStyle]=\"{ width: width }\" #wrapperRef>\n  <div class=\"form-controls-wrapper\">\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: showValidationError && valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: '87px' }\"\n    >\n      <ads-dropdown\n        [control]=\"dropdownControl\"\n        [id]=\"dropdownId\"\n        [options]=\"countryOptions\"\n        [immediateValidation]=\"immediateValidation\"\n        [showValidationError]=\"showValidationError\"\n        [optionTemplate]=\"optionTemplate\"\n        [fitContent]=\"true\"\n        [showFooter]=\"false\"\n        [checkSelected]=\"false\"\n        [size]=\"size\"\n        [successMessage]=\"successMessage\"\n        [triggerTemplate]=\"triggerTemplate\"\n        [panelClass]=\"'full-width-panel'\"\n        [closeOnOutOfView]=\"closeOnOutOfView\"\n        [outOfViewRootMargin]=\"outOfViewRootMargin\"\n      />\n    </div>\n    <div\n      class=\"text-box\"\n      [ngClass]=\"{\n        invalid: showValidationError && valueControl.invalid && valueControl.touched,\n        'success-label': canShowSuccess(),\n        'x-small': smallSize,\n      }\"\n      [ngStyle]=\"{ width: '100%' }\"\n    >\n      <ads-input\n        [control]=\"inputControl\"\n        [mask]=\"phoneMask\"\n        [id]=\"id\"\n        [width]=\"'100%'\"\n        [placeholder]=\"placeholder\"\n        [label]=\"label\"\n        [showClearButton]=\"showClearButton\"\n        [showExclamationOnError]=\"showExclamationOnError\"\n        [showValidationError]=\"showValidationError\"\n        [skipValidationWhenEmpty]=\"skipValidationWhenEmpty\"\n        [immediateValidation]=\"immediateValidation\"\n        [dropSpecialCharacters]=\"true\"\n        [showFooter]=\"false\"\n        [size]=\"size\"\n        [onBlur]=\"onInputBlur\"\n      />\n    </div>\n\n  </div>\n  <div class=\"footer-container\"\n       [class.dynamic]=\"!isStaticFooter\"\n       [class.has-content]=\"hasFooterContent()\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n}\n\n<ng-template #optionTemplate let-option=\"option\">\n  <div class=\"flag-option\">\n    <div>\n      <img [src]=\"getFlag(option)\" alt=\"flag\"/>\n      <span>{{option.name}}</span>\n    </div>\n    <span class=\"code\">{{option.code}}</span>\n  </div>\n</ng-template>\n\n<ng-template #triggerTemplate  let-option=\"option\">\n  <span>{{ option.code }}</span>\n</ng-template>\n", styles: [".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host{display:flex;gap:12px;align-items:flex-start}.form-field-wrapper{display:flex;flex-direction:column}.form-field-wrapper .form-controls-wrapper{display:flex;width:100%}.form-field-wrapper .invalid ::ng-deep .mdc-text-field{border-color:var(--mdc-filled-text-field-error-label-text-color)}.form-field-wrapper .invalid.text-box ::ng-deep .mdc-text-field{border-right-width:1px}.form-field-wrapper .invalid.select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent}.form-field-wrapper .select-box ::ng-deep .mdc-text-field{border-left-width:1px;border-left-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}.form-field-wrapper .text-box{z-index:1}.form-field-wrapper .text-box ::ng-deep .mdc-text-field{border-top-left-radius:0;border-bottom-left-radius:0}.flag-option{display:flex;justify-content:space-between;align-items:center;width:100%}.flag-option div{display:flex;gap:8px;align-items:center}.flag-option div img{width:29px;height:19px}.flag-option span{font-size:16px;color:var(--color-medium);line-height:21px}.flag-option .code{color:var(--color-dark)}::ng-deep .full-width-panel{width:var(--full-width-panel)!important;min-width:var(--full-width-panel)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "outputTransformFn", "matAutocomplete", "readOnly", "showSearchIcon", "min", "max", "onFocus", "onBlur", "rightHint"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options", "optionTemplate", "triggerTemplate", "panelClass", "closeOnOutOfView", "outOfViewRootMargin"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: AdsInternationalPhoneFieldComponent, decorators: [{
             type: Component,