@ascentgl/ads-ui 22.11.1 → 22.12.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -3807,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", "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 }); }
+    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", min: "min", max: "max", 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        [min]=\"min\"\n        [max]=\"max\"\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,
@@ -3824,7 +3824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         AdsErrorComponent,
                         AdsHintComponent,
                         AdsSuccessComponent,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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        [min]=\"min\"\n        [max]=\"max\"\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"] }]
         }], propDecorators: { maxlength: [{
                 type: Input
             }], type: [{
@@ -3867,6 +3867,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 type: Input
             }], outputTransformFn: [{
                 type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
             }], onBlur: [{
                 type: Input
             }], showTooltip: [{
@@ -10795,7 +10799,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", "min", "max", "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", "min", "max", "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,