@ascentgl/ads-ui 0.0.18 → 0.0.19

package/esm2022/lib/components/form-fields/area/textarea.component.mjs

@@ -22,11 +22,11 @@ export class AdsTextareaComponent extends AbstractInputComponent {
         this.canResize = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsTextareaComponent, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': canClear && !showExclamation,\n      'success-label': canShowSuccess(),\n      'error-label': canShowError(),\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    <mat-label *ngIf=\"label || required\">{{ label }}</mat-label>\n    <textarea\n      matInput\n      [rows]=\"rows\"\n      [maxlength]=\"maxlength\"\n      [id]=\"id\"\n      [formControl]=\"valueControl\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n    >\n    </textarea>\n    @if (canClear) {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n        <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n      </button>\n    }\n  </mat-form-field>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: i9.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i10.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsTextareaComponent, selector: "ads-textarea", inputs: { maxlength: "maxlength", rows: "rows", canResize: "canResize" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': canClear && !showExclamation,\n      'success-label': canShowSuccess(),\n      'error-label': canShowError(),\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    <mat-label *ngIf=\"label || required\">{{ label }}</mat-label>\n    <textarea\n      matInput\n      [rows]=\"rows\"\n      [maxlength]=\"maxlength\"\n      [id]=\"id\"\n      [formControl]=\"valueControl\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n    >\n    </textarea>\n    @if (canClear) {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n        <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n      </button>\n    }\n  </mat-form-field>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i8.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: i9.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i10.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-textarea', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': canClear && !showExclamation,\n      'success-label': canShowSuccess(),\n      'error-label': canShowError(),\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    <mat-label *ngIf=\"label || required\">{{ label }}</mat-label>\n    <textarea\n      matInput\n      [rows]=\"rows\"\n      [maxlength]=\"maxlength\"\n      [id]=\"id\"\n      [formControl]=\"valueControl\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n    >\n    </textarea>\n    @if (canClear) {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n        <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n      </button>\n    }\n  </mat-form-field>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-textarea', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': canClear && !showExclamation,\n      'success-label': canShowSuccess(),\n      'error-label': canShowError(),\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    <mat-label *ngIf=\"label || required\">{{ label }}</mat-label>\n    <textarea\n      matInput\n      [rows]=\"rows\"\n      [maxlength]=\"maxlength\"\n      [id]=\"id\"\n      [formControl]=\"valueControl\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n      [ngStyle]=\"{ resize: canResize ? null : 'none' }\"\n    >\n    </textarea>\n    @if (canClear) {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\">\n        <ads-icon name=\"cross\" size=\"xxs\" [theme]=\"'iconPrimary'\" />\n      </button>\n    }\n  </mat-form-field>\n  <div class=\"footer-container\">\n    @if (canShowError()) {\n      <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n    } @else if (canShowSuccess()) {\n      <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n    } @else if (hint) {\n      <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n    }\n  </div>\n</div>\n\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", ":host::ng-deep mat-form-field .mdc-text-field{height:auto}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label textarea{min-height:30px;margin-top:12px;margin-bottom:6px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix textarea{line-height:24px;min-height:24px;margin-top:20px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea{line-height:24px;position:relative;bottom:1px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-infix textarea::-webkit-resizer{background-size:contain;background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjEgMTUtNiA2bTYtMTMtMTMgMTMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-icon-suffix,:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{align-self:baseline;height:var(--mat-form-field-container-height);display:flex;align-items:center}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { maxlength: [{
                 type: Input
             }], rows: [{

package/esm2022/lib/components/form-fields/common/error/error.component.mjs

@@ -10,7 +10,7 @@ export class AdsErrorComponent {
         this.error = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsErrorComponent, isStandalone: true, selector: "ads-error", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-error class=\"mat-error\" [@fadeInOut]>\n  <div class=\"error\">\n    <ads-icon [name]=\"'warning'\" [size]=\"'xxs'\" [theme]=\"'warn'\" [stroke]=\"'warn'\" />\n    <span [innerHTML]=\"error()\"></span>\n  </div>\n</mat-error>\n", styles: [":host{display:flex}:host mat-error{font-size:12px;font-weight:400;line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:2px}:host mat-error .error{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: AdsIconModule }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsErrorComponent, isStandalone: true, selector: "ads-error", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-error class=\"mat-error\" [@fadeInOut]>\n  <div class=\"error\">\n    <ads-icon [name]=\"'warning'\" [size]=\"'xxs'\" [theme]=\"'warn'\" [stroke]=\"'warn'\" />\n    <span [innerHTML]=\"error()\"></span>\n  </div>\n</mat-error>\n", styles: [":host{display:flex}:host mat-error{font-size:12px;font-weight:400;line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:4px}:host mat-error .error{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: AdsIconModule }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], animations: [
             trigger('fadeInOut', [
                 state('in', style({ opacity: 1, transform: 'translateX(0)' })),
                 transition('void => *', [style({ opacity: 0, transform: 'translateY(-30%)' }), animate('300ms ease-in')]),
@@ -24,6 +24,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                             state('in', style({ opacity: 1, transform: 'translateX(0)' })),
                             transition('void => *', [style({ opacity: 0, transform: 'translateY(-30%)' }), animate('300ms ease-in')]),
                         ]),
-                    ], template: "<mat-error class=\"mat-error\" [@fadeInOut]>\n  <div class=\"error\">\n    <ads-icon [name]=\"'warning'\" [size]=\"'xxs'\" [theme]=\"'warn'\" [stroke]=\"'warn'\" />\n    <span [innerHTML]=\"error()\"></span>\n  </div>\n</mat-error>\n", styles: [":host{display:flex}:host mat-error{font-size:12px;font-weight:400;line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:2px}:host mat-error .error{display:flex;align-items:center;gap:2px}\n"] }]
+                    ], template: "<mat-error class=\"mat-error\" [@fadeInOut]>\n  <div class=\"error\">\n    <ads-icon [name]=\"'warning'\" [size]=\"'xxs'\" [theme]=\"'warn'\" [stroke]=\"'warn'\" />\n    <span [innerHTML]=\"error()\"></span>\n  </div>\n</mat-error>\n", styles: [":host{display:flex}:host mat-error{font-size:12px;font-weight:400;line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:4px}:host mat-error .error{display:flex;align-items:center;gap:2px}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hZHMtdWkvc3JjL2xpYi9jb21wb25lbnRzL2Zvcm0tZmllbGRzL2NvbW1vbi9lcnJvci9lcnJvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Fkcy11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS1maWVsZHMvY29tbW9uL2Vycm9yL2Vycm9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBZXBELE1BQU0sT0FBTyxpQkFBaUI7SUFiOUI7UUFjRSw2QkFBNkI7UUFDN0IsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztLQUNsQzs4R0FIWSxpQkFBaUI7a0dBQWpCLGlCQUFpQix3TUNsQjlCLDJPQU1BLDhRRElZLFFBQVEsaUZBQUUsYUFBYSwrSUFDckI7WUFDVixPQUFPLENBQUMsV0FBVyxFQUFFO2dCQUNuQixLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxDQUFDLENBQUM7Z0JBQzlELFVBQVUsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDLEVBQUUsT0FBTyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUM7YUFDMUcsQ0FBQztTQUNIOzsyRkFFVSxpQkFBaUI7a0JBYjdCLFNBQVM7K0JBQ0UsV0FBVyxjQUdULElBQUksV0FDUCxDQUFDLFFBQVEsRUFBRSxhQUFhLENBQUMsY0FDdEI7d0JBQ1YsT0FBTyxDQUFDLFdBQVcsRUFBRTs0QkFDbkIsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUsQ0FBQyxDQUFDOzRCQUM5RCxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDO3lCQUMxRyxDQUFDO3FCQUNIIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RXJyb3IgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgQWRzSWNvbk1vZHVsZSB9IGZyb20gJ0Bhc2NlbnRnbC9hZHMtaWNvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtZXJyb3InLFxuICB0ZW1wbGF0ZVVybDogJy4vZXJyb3IuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9lcnJvci5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTWF0RXJyb3IsIEFkc0ljb25Nb2R1bGVdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZmFkZUluT3V0JywgW1xuICAgICAgc3RhdGUoJ2luJywgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDApJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0zMCUpJyB9KSwgYW5pbWF0ZSgnMzAwbXMgZWFzZS1pbicpXSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFkc0Vycm9yQ29tcG9uZW50IHtcbiAgLyoqIFNldCB0ZXh0IHRvIHNob3cgZXJyb3IgKi9cbiAgZXJyb3IgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG59XG4iLCI8bWF0LWVycm9yIGNsYXNzPVwibWF0LWVycm9yXCIgW0BmYWRlSW5PdXRdPlxuICA8ZGl2IGNsYXNzPVwiZXJyb3JcIj5cbiAgICA8YWRzLWljb24gW25hbWVdPVwiJ3dhcm5pbmcnXCIgW3NpemVdPVwiJ3h4cydcIiBbdGhlbWVdPVwiJ3dhcm4nXCIgW3N0cm9rZV09XCInd2FybidcIiAvPlxuICAgIDxzcGFuIFtpbm5lckhUTUxdPVwiZXJyb3IoKVwiPjwvc3Bhbj5cbiAgPC9kaXY+XG48L21hdC1lcnJvcj5cbiJdfQ==

package/esm2022/lib/components/form-fields/common/success/success.component.mjs

@@ -10,7 +10,7 @@ export class AdsSuccessComponent {
         this.success = input.required();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsSuccessComponent, isStandalone: true, selector: "ads-success", inputs: { success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [@fadeInOut] class=\"container\">\n  <div class=\"success\">\n    <ads-icon name=\"check_circle_filled\" size=\"xxs\" color=\"--color-success\" stroke=\"white\" />\n    <span [innerHTML]=\"success()\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .container{font-size:12px;font-weight:400;color:var(--color-success);line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:2px}:host .container .success{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: AdsIconModule }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.1", type: AdsSuccessComponent, isStandalone: true, selector: "ads-success", inputs: { success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [@fadeInOut] class=\"container\">\n  <div class=\"success\">\n    <ads-icon name=\"check_circle_filled\" size=\"xxs\" color=\"--color-success\" stroke=\"white\" />\n    <span [innerHTML]=\"success()\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .container{font-size:12px;font-weight:400;color:var(--color-success);line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:4px}:host .container .success{display:flex;align-items:center;gap:2px}\n"], dependencies: [{ kind: "ngmodule", type: AdsIconModule }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], animations: [
             trigger('fadeInOut', [
                 state('in', style({ opacity: 1, transform: 'translateX(0)' })),
                 transition('void => *', [style({ opacity: 0, transform: 'translateY(-30%)' }), animate('300ms ease-in')]),
@@ -24,6 +24,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                             state('in', style({ opacity: 1, transform: 'translateX(0)' })),
                             transition('void => *', [style({ opacity: 0, transform: 'translateY(-30%)' }), animate('300ms ease-in')]),
                         ]),
-                    ], template: "<div [@fadeInOut] class=\"container\">\n  <div class=\"success\">\n    <ads-icon name=\"check_circle_filled\" size=\"xxs\" color=\"--color-success\" stroke=\"white\" />\n    <span [innerHTML]=\"success()\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .container{font-size:12px;font-weight:400;color:var(--color-success);line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:2px}:host .container .success{display:flex;align-items:center;gap:2px}\n"] }]
+                    ], template: "<div [@fadeInOut] class=\"container\">\n  <div class=\"success\">\n    <ads-icon name=\"check_circle_filled\" size=\"xxs\" color=\"--color-success\" stroke=\"white\" />\n    <span [innerHTML]=\"success()\"></span>\n  </div>\n</div>\n", styles: [":host{display:flex}:host .container{font-size:12px;font-weight:400;color:var(--color-success);line-height:16px;-webkit-font-smoothing:antialiased;display:flex;padding-top:4px}:host .container .success{display:flex;align-items:center;gap:2px}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VjY2Vzcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Fkcy11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS1maWVsZHMvY29tbW9uL3N1Y2Nlc3Mvc3VjY2Vzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2Fkcy11aS9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS1maWVsZHMvY29tbW9uL3N1Y2Nlc3Mvc3VjY2Vzcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDeEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNqRixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQWVwRCxNQUFNLE9BQU8sbUJBQW1CO0lBYmhDO1FBY0UsK0JBQStCO1FBQy9CLFlBQU8sR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7S0FDcEM7OEdBSFksbUJBQW1CO2tHQUFuQixtQkFBbUIsZ05DbEJoQywyT0FNQSw0U0RJc0IsYUFBYSwrSUFDckI7WUFDVixPQUFPLENBQUMsV0FBVyxFQUFFO2dCQUNuQixLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxDQUFDLENBQUM7Z0JBQzlELFVBQVUsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxDQUFDLEVBQUUsT0FBTyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUM7YUFDMUcsQ0FBQztTQUNIOzsyRkFFVSxtQkFBbUI7a0JBYi9CLFNBQVM7K0JBQ0UsYUFBYSxjQUdYLElBQUksV0FDUCxDQUFDLFFBQVEsRUFBRSxhQUFhLENBQUMsY0FDdEI7d0JBQ1YsT0FBTyxDQUFDLFdBQVcsRUFBRTs0QkFDbkIsS0FBSyxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUsQ0FBQyxDQUFDOzRCQUM5RCxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDO3lCQUMxRyxDQUFDO3FCQUNIIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RXJyb3IgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9mb3JtLWZpZWxkJztcbmltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgQWRzSWNvbk1vZHVsZSB9IGZyb20gJ0Bhc2NlbnRnbC9hZHMtaWNvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhZHMtc3VjY2VzcycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdWNjZXNzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vc3VjY2Vzcy5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTWF0RXJyb3IsIEFkc0ljb25Nb2R1bGVdLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZmFkZUluT3V0JywgW1xuICAgICAgc3RhdGUoJ2luJywgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDApJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0zMCUpJyB9KSwgYW5pbWF0ZSgnMzAwbXMgZWFzZS1pbicpXSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFkc1N1Y2Nlc3NDb21wb25lbnQge1xuICAvKiogU2V0IHRleHQgdG8gc2hvdyBzdWNjZXNzICovXG4gIHN1Y2Nlc3MgPSBpbnB1dC5yZXF1aXJlZDxzdHJpbmc+KCk7XG59XG4iLCI8ZGl2IFtAZmFkZUluT3V0XSBjbGFzcz1cImNvbnRhaW5lclwiPlxuICA8ZGl2IGNsYXNzPVwic3VjY2Vzc1wiPlxuICAgIDxhZHMtaWNvbiBuYW1lPVwiY2hlY2tfY2lyY2xlX2ZpbGxlZFwiIHNpemU9XCJ4eHNcIiBjb2xvcj1cIi0tY29sb3Itc3VjY2Vzc1wiIHN0cm9rZT1cIndoaXRlXCIgLz5cbiAgICA8c3BhbiBbaW5uZXJIVE1MXT1cInN1Y2Nlc3MoKVwiPjwvc3Bhbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==

package/esm2022/lib/components/form-fields/datepickers/date-picker/datepicker.component.mjs

@@ -50,11 +50,11 @@ export class AdsDatepickerComponent extends AdsDatetimepickerComponent {
         this.setControlValue(this.displayControl, valueToApply);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsDatepickerComponent, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsDatepickerComponent, selector: "ads-datepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-datepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-datepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"] }]
         }], propDecorators: { customDisplayFormat: [{
                 type: Input
             }] } });

package/esm2022/lib/components/form-fields/datepickers/datetime-picker/datetimepicker.component.mjs

@@ -367,11 +367,11 @@ export class AdsDatetimepickerComponent extends AbstractInputComponent {
         return this.removeOffset(value, this.getRequiredOffset(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsDatetimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsDatetimepickerComponent, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat" }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsDatetimepickerComponent, selector: "ads-datetimepicker", inputs: { twelveHour: "twelveHour", offset: "offset", allowPastValues: "allowPastValues", allowManualInput: "allowManualInput", useShortcuts: "useShortcuts", overrideDisplayFormat: "overrideDisplayFormat", showTimePicker: "showTimePicker", customDisplayFormat: "customDisplayFormat" }, viewQueries: [{ propertyName: "picker", first: true, predicate: MatDatetimepickerComponent, descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsDatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-datetimepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-datetimepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { picker: [{
                 type: ViewChild,
                 args: [MatDatetimepickerComponent]

package/esm2022/lib/components/form-fields/datepickers/time-picker/timepicker.component.mjs

@@ -66,11 +66,11 @@ export class AdsTimepickerComponent extends AdsDatetimepickerComponent {
         super.onSyncDisplayedValue(valueToApply);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsTimepickerComponent, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i2.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: AdsTimepickerComponent, selector: "ads-timepicker", inputs: { customDisplayFormat: "customDisplayFormat" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i2.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i7.DateTimePickerFormatDirective, selector: "[dateTimePickerFormat]", inputs: ["customDisplayFormat", "overrideDisplayFormat"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize"] }, { kind: "component", type: i10.AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: i11.AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: i12.AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AdsTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ads-timepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:22.4px}\n"] }]
+            args: [{ selector: 'ads-timepicker', template: "<div [ngStyle]=\"{ minWidth: width }\">\n  <mat-form-field\n    [ngClass]=\"{\n      'immediate-validation': immediateValidation,\n      'no-left-padding': !showExclamation,\n      invalid: canShowError(),\n      manual: allowManualInput,\n      'success-label': canShowSuccess(),\n      'x-small': smallSize,\n    }\"\n    [ngStyle]=\"{ width: width }\"\n  >\n    @if ((label || required) && !smallSize) {\n      <mat-label>{{ label }}</mat-label>\n    }\n    <mat-datetimepicker\n      #datetimePicker\n      (viewChanged)=\"onViewChanged($event)\"\n      (opened)=\"onOpened()\"\n      (closed)=\"onClosed()\"\n      [type]=\"type === 'datetime' ? (showTimePicker ? 'datetime' : 'date') : type\"\n      [openOnFocus]=\"!allowManualInput\"\n      [twelvehour]=\"twelveHour\"\n      [timeInterval]=\"5\"\n      [mode]=\"'portrait'\"\n    />\n    <input\n      (dateChange)=\"onChanged($event)\"\n      dateTimePickerFormat\n      [overrideDisplayFormat]=\"overrideDisplayFormat || (type === 'datetime' ? !showTimePicker : false)\"\n      [customDisplayFormat]=\"customDisplayFormatOverride\"\n      [ngClass]=\"{ invisible: !valueControl.value }\"\n      #input\n      matInput\n      (keydown)=\"allowManualInput ? onKeyDown($event) : null\"\n      (input)=\"touchControls()\"\n      (blur)=\"touchControls()\"\n      [tabIndex]=\"allowManualInput ? 0 : -1\"\n      [min]=\"minDate || null\"\n      [readonly]=\"!allowManualInput\"\n      [formControl]=\"displayControl\"\n      [matDatetimepicker]=\"datetimePicker\"\n      autocomplete=\"false\"\n      [id]=\"id\"\n      [required]=\"required\"\n      [placeholder]=\"placeholder\"\n    />\n    @if (type === 'time') {\n      <button\n        matTextSuffix\n        type=\"button\"\n        mat-icon-button\n        (click)=\"toggle($event)\"\n        [disabled]=\"!showTimePicker\"\n        class=\"action-icon\"\n      >\n        <ads-icon class=\"picker\" name=\"timepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n      </button>\n    } @else {\n      <button matTextSuffix type=\"button\" mat-icon-button (click)=\"toggle($event)\" class=\"action-icon\">\n        <ads-icon class=\"picker\" name=\"datepicker\" [size]=\"smallSize ? 'xxs' : 'sm'\" [stroke]=\"'iconPrimary'\" />\n        @if (type === 'datetime') {\n          <ads-icon\n            class=\"sub-timepicker mat-mdc-button-persistent-ripple picker\"\n            name=\"timepicker\"\n            size=\"xxs\"\n            [stroke]=\"'iconPrimary'\"\n          />\n        }\n      </button>\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  </mat-form-field>\n  @if (showFooter) {\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  }\n</div>\n@if (tooltip) {\n  <ads-input-tooltip [tooltip]=\"tooltip\" />\n}\n", styles: [":host{display:flex;gap:12px;align-items:flex-start}:host::ng-deep mat-form-field{--mdc-filled-text-field-input-text-color: var(--color-medium);--mdc-filled-text-field-error-label-text-color: var(--color-error);--mdc-filled-text-field-label-text-color: var(--color-medium);--mdc-filled-text-field-focus-label-text-color: var(--color-medium);--mdc-filled-text-field-hover-label-text-color: var(--color-medium);--mdc-filled-text-field-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mdc-filled-text-field-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mdc-filled-text-field-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mdc-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mdc-icon-button-state-layer-size: 22px}:host::ng-deep mat-form-field.readonly .mdc-text-field{background-color:var(--mdc-filled-text-field-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.readonly) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.readonly).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field{outline:2px solid var(--color-medium);outline-offset:-2px}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mdc-filled-text-field-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}\n", "button .sub-timepicker{position:absolute;top:18%;left:18%;background-color:var(--color-white);border-radius:50%}mat-form-field:not(.manual) ::ng-deep .mdc-text-field{cursor:pointer}mat-form-field:not(.manual) ::ng-deep .mdc-text-field input{cursor:pointer}::ng-deep .mdc-text-field:hover button .sub-timepicker{background-color:var(--color-light-30)}\n", ".footer-container{min-height:20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { customDisplayFormat: [{
                 type: Input
             }] } });