@ascentgl/ads-ui 0.0.154 → 0.0.155

package/fesm2022/ascentgl-ads-ui.mjs

@@ -3422,6 +3422,16 @@ class AdsInputDropdownComponent extends AbstractInputComponent {
         this.fitContent = true;
         /** Add mask to the Input */
         this.mask = '';
+        /** Add suffix to the Input */
+        this.suffix = '';
+        /** Add prefix to the Input */
+        this.prefix = '';
+        /** If true Special Characters not be included in the actual value */
+        this.dropSpecialCharacters = false;
+        /** Add thousand Separator */
+        this.thousandSeparator = '';
+        /** Add decimal marker */
+        this.decimalMarker = '.';
         /** @ignore */
         this.isSingleOptionSelected = false;
     }
@@ -3449,11 +3459,11 @@ class AdsInputDropdownComponent extends AbstractInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsInputDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsInputDropdownComponent, isStandalone: false, 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" }, 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: 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        [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      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [id]=\"id\"\n          [readonly]=\"true\"\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          [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        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@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(--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-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}::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: "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", "readonly", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "onBlur"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsInputDropdownComponent, isStandalone: false, 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" }, 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: 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        [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      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [id]=\"id\"\n          [readonly]=\"true\"\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          [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        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@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(--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-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}::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: "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", "readonly", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "onBlur"] }, { kind: "component", type: AdsDropdownComponent, selector: "ads-dropdown", inputs: ["displayValueFormatter", "mode", "hasEmptyValue", "checkSelected", "options"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsInputDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-input-dropdown', standalone: false, 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: 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        [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      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [id]=\"id\"\n          [readonly]=\"true\"\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          [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        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@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(--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-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}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'ads-input-dropdown', standalone: false, 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: 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        [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      />\n    </div>\n    <div\n      class=\"select-box\"\n      [ngClass]=\"{ invalid: valueControl.invalid && valueControl.touched }\"\n      [ngStyle]=\"{ width: dropdownWidth }\"\n    >\n      @if (isSingleOptionSelected) {\n        <ads-input\n          [control]=\"dropdownControl\"\n          [id]=\"id\"\n          [readonly]=\"true\"\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          [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        />\n      }\n    </div>\n  </div>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n@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(--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-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}::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: [{
@@ -3484,6 +3494,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 type: Input
             }], mask: [{
                 type: Input
+            }], suffix: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], dropSpecialCharacters: [{
+                type: Input
+            }], thousandSeparator: [{
+                type: Input
+            }], decimalMarker: [{
+                type: Input
             }], dropdownComponent: [{
                 type: ViewChild,
                 args: [AdsDropdownComponent]
@@ -3503,7 +3523,8 @@ class AdsInputDropdownModule {
             AdsInputTooltipComponent,
             AdsErrorComponent,
             AdsHintComponent,
-            AdsSuccessComponent], exports: [AdsInputDropdownComponent] }); }
+            AdsSuccessComponent,
+            NgxMaskDirective], exports: [AdsInputDropdownComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsInputDropdownModule, imports: [CommonModule,
             MatDividerModule,
             MatFormFieldModule,
@@ -3534,6 +3555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         AdsErrorComponent,
                         AdsHintComponent,
                         AdsSuccessComponent,
+                        NgxMaskDirective,
                     ],
                     declarations: [AdsInputDropdownComponent],
                     exports: [AdsInputDropdownComponent],
@@ -7077,7 +7099,7 @@ class AdsTimeFieldComponent extends AdsInputDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsTimeFieldComponent, isStandalone: false, 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, ngImport: i0, template: "@if (militaryTime()) {\n  <ads-input\n    [control]=\"valueControl\"\n    mask=\"Hh:m0\"\n    [onBlur]=\"onBlurUpdateTime\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [label]=\"label\"\n    [errorMessages]=\"errorMessages\"\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    [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]=\"errorMessages\"\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}::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: "component", type: AdsInputDropdownComponent, selector: "ads-input-dropdown", inputs: ["maxlength", "type", "pattern", "dropdownControl", "dropdownId", "dropdownLabel", "dropdownPlaceholder", "inputWidth", "dropdownWidth", "autoSelectSingleDropdownOption", "options", "displayValueKey", "hasEmptyValue", "fitContent", "mask"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "readonly", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsTimeFieldComponent, isStandalone: false, 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, ngImport: i0, template: "@if (militaryTime()) {\n  <ads-input\n    [control]=\"valueControl\"\n    mask=\"Hh:m0\"\n    [onBlur]=\"onBlurUpdateTime\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [label]=\"label\"\n    [errorMessages]=\"errorMessages\"\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    [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]=\"errorMessages\"\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}::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: "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"] }, { kind: "component", type: AdsInputComponent, selector: "ads-input", inputs: ["maxlength", "type", "pattern", "defaultValue", "readonly", "isPasswordField", "showClockIcon", "mask", "suffix", "prefix", "dropSpecialCharacters", "thousandSeparator", "decimalMarker", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsTimeFieldComponent, decorators: [{
             type: Component,