@apipass/inputs 1.0.90 → 1.0.92

package/fesm2022/apipass-inputs.mjs

@@ -1,3 +1,6 @@
+export * from '@angular-material-components/color-picker';
+export * from '@angular-material-components/datetime-picker';
+export * from '@angular-material-components/moment-adapter';
 import * as i0 from '@angular/core';
 import { forwardRef, Component, ViewEncapsulation, Input, EventEmitter, Output, ViewChild, Directive, ElementRef, HostBinding, HostListener, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
@@ -11,6 +14,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6 from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
 import * as i7 from '@apipass/pipes';
 import { PipeModule } from '@apipass/pipes';
 import * as i5 from '@angular/material/icon';
@@ -32,9 +36,16 @@ import 'brace';
 import 'brace/theme/monokai';
 import * as i3$3 from '@apipass/buttons';
 import { ButtonsModule } from '@apipass/buttons';
-export * from '@angular-material-components/color-picker';
-export * from '@angular-material-components/datetime-picker';
-export * from '@angular-material-components/moment-adapter';
+import moment from 'moment-timezone';
+import * as i7$1 from '@angular/material/datepicker';
+import { DateRange, MatDatepickerModule, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy } from '@angular/material/datepicker';
+import * as i8 from 'ngx-scrollbar';
+import { NgScrollbarModule } from 'ngx-scrollbar';
+import * as i9 from 'ngx-mask';
+import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
+export * from 'ngx-mask';
+import { MatCardModule } from '@angular/material/card';
+import moment$1 from 'moment';
 
 class ValueAccessorBase {
     innerValue;
@@ -1567,7 +1578,7 @@ class SelectInterpolationComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectInterpolationComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\" [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           dndDropzone\n           (dndDrop)=\"onDrop($event)\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
+            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\" [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           dndDropzone [dndAllowExternal]=\"true\"\n           (dndDrop)=\"onDrop($event)\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: 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: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectInterpolationComponent, decorators: [{
             type: Component,
@@ -1575,7 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectInterpolationComponent),
                             multi: true
-                        }], template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\" [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           dndDropzone\n           (dndDrop)=\"onDrop($event)\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
+                        }], template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\" [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           dndDropzone [dndAllowExternal]=\"true\"\n           (dndDrop)=\"onDrop($event)\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.ScrollStrategyOptions }]; }, propDecorators: { disabled: [{
                 type: Input
             }], items: [{
@@ -1701,6 +1712,360 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 args: ['actionFile']
             }] } });
 
+class TimeIntervalValue {
+    _timezone;
+    _absoluteStartDate;
+    _absoluteEndDate;
+    _interval;
+    constructor(timezone) {
+        this._timezone = timezone;
+    }
+    getStartDate() {
+        if (this._interval?.getStartDate) {
+            return new Date(moment(this._interval.getStartDate()).tz(this._timezone).format());
+        }
+        if (this._absoluteStartDate) {
+            return new Date(moment(this._absoluteStartDate).tz(this._timezone).format());
+        }
+        return this._absoluteStartDate;
+    }
+    getEndDate() {
+        if (this._interval?.getEndDate) {
+            return new Date(moment(this._interval.getEndDate()).tz(this._timezone).format());
+        }
+        if (this._absoluteEndDate) {
+            return new Date(moment(this._absoluteEndDate).tz(this._timezone).format());
+        }
+        return this._absoluteEndDate;
+    }
+    isRelativeInterval() {
+        return !!this._interval;
+    }
+    isAbsoluteDate() {
+        return !this.isRelativeInterval();
+    }
+    get absoluteStartDate() {
+        return this._absoluteStartDate;
+    }
+    set absoluteStartDate(value) {
+        this._absoluteStartDate = value;
+    }
+    get absoluteEndDate() {
+        return this._absoluteEndDate;
+    }
+    set absoluteEndDate(value) {
+        this._absoluteEndDate = value;
+    }
+    get interval() {
+        return this._interval;
+    }
+    set interval(value) {
+        this._interval = value;
+    }
+    get timezone() {
+        return this._timezone;
+    }
+}
+
+class InputDateTimeIntervalComponent {
+    sso;
+    _value;
+    _selectedDateRange;
+    scrollStrategy;
+    timezone = 'America/Sao_Paulo';
+    dateMask = '00/00/0000';
+    timeMask = '00:00:00';
+    dateFormat = 'DD/MM/YYYY HH:mm:ss';
+    label;
+    periodLabel = 'Selected Relative Interval';
+    relativeLabel = 'Relative Time';
+    absoluteLabel = 'Absolute Time';
+    startDateLabel = 'Start Date';
+    startDate;
+    startTimeLabel = 'Start Time';
+    startTime;
+    endTimeLabel = 'End Time';
+    endTime;
+    endDateLabel = 'End Date';
+    endDate;
+    calendarMaxDate;
+    calendarMinDate;
+    cancelLabel = 'Cancel';
+    applyLabel = 'Apply';
+    hideTime = false;
+    get value() {
+        if (!this._value) {
+            this._value = new TimeIntervalValue(this.timezone);
+        }
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.refreshValues();
+    }
+    refreshValues() {
+        if (this._value.interval) {
+            this.selectedInterval = this._value.interval;
+            this.resetDates();
+        }
+        else if (this._value?.absoluteStartDate || this._value?.absoluteEndDate) {
+            const startDate = this._value?.absoluteStartDate || this.startDate;
+            this.selectedStartDate = this.dateToString(startDate);
+            const endDate = this._value?.absoluteEndDate || this.endDate;
+            this.selectedEndDate = this.dateToString(endDate);
+            this._selectedDateRange = this.getDateRange(this.stringToDate(this.selectedStartDate), this.stringToDate(this.selectedEndDate));
+            if (this._value?.absoluteStartDate) {
+                this.selectedStartTime = this._value.absoluteStartDate.toTimeString().split(' ')[0];
+            }
+            if (this.value?.absoluteEndDate) {
+                this.selectedEndTime = this.value?.absoluteEndDate.toTimeString().split(' ')[0];
+            }
+            this.selectedStartTime = this.selectedStartTime || this.startTime;
+            this.selectedEndTime = this.selectedEndTime || this.endTime;
+            this.selectedInterval = undefined;
+        }
+    }
+    intervals;
+    valueChange = new EventEmitter();
+    selectedInterval;
+    selectedStartTime;
+    selectedEndTime;
+    selectedStartDate;
+    selectedEndDate;
+    dropdownOpen;
+    scrollbarRef;
+    onKeydownHandler() {
+        this.dropdownOpen = false;
+    }
+    constructor(sso) {
+        this.sso = sso;
+        this.scrollStrategy = this.sso.block();
+        this.resetDates();
+    }
+    openDropDown(event) {
+        this.dropdownOpen = true;
+        setTimeout(() => {
+            if (this._value.interval) {
+                const selectedInterval = this._value.interval;
+                this.scrollbarRef.scrollToElement(`#apipass-datetime-interval-${selectedInterval.id}`, { duration: 800 }).then();
+            }
+        });
+        event.stopPropagation();
+    }
+    closeDropdown(event) {
+        this.cancel();
+        this.dropdownOpen = false;
+        event.stopPropagation();
+    }
+    isSelected(interval) {
+        return interval?.id === this.selectedInterval?.id;
+    }
+    selectInterval(interval) {
+        this.selectedInterval = interval;
+        this.resetDates();
+    }
+    resetDates() {
+        this._selectedDateRange = this.getDateRange(this.startDate, this.endDate);
+        this.selectedStartTime = this.startTime;
+        this.selectedEndTime = this.endTime;
+        this.selectedStartDate = this.dateToString(this.startDate);
+        this.selectedEndDate = this.dateToString(this.endDate);
+    }
+    onDateRangeChange(date) {
+        if (this._selectedDateRange?.start && date > this._selectedDateRange.start && !this._selectedDateRange.end) {
+            this._selectedDateRange = this.getDateRange(this._selectedDateRange.start, date);
+            this.selectedEndDate = this.dateToString(date);
+            this.selectedInterval = undefined;
+        }
+        else {
+            this._selectedDateRange = this.getDateRange(date, undefined);
+            this.selectedStartDate = this.dateToString(date);
+            this.selectedInterval = undefined;
+        }
+    }
+    dateToString(date) {
+        return date ? moment(date).format(this.dateFormat) : undefined;
+    }
+    stringToDate(date) {
+        return date ? moment(date, this.dateFormat).toDate() : undefined;
+    }
+    getDateRange(startDate, endDate) {
+        try {
+            return new DateRange(startDate ? moment(startDate).toDate() : undefined, endDate ? moment(endDate).toDate() : undefined);
+        }
+        catch (e) {
+            return new DateRange(null, null);
+        }
+    }
+    startDateChanged() {
+        this._selectedDateRange = this.getDateRange(this.stringToDate(this.selectedStartDate), this.stringToDate(this.selectedEndDate));
+        this.selectedInterval = undefined;
+    }
+    endDateChanged() {
+        const startDate = this.stringToDate(this.selectedStartDate);
+        const endDate = this.stringToDate(this.selectedEndDate);
+        if (endDate < startDate) {
+            this.selectedEndDate = undefined;
+        }
+        this._selectedDateRange = this.getDateRange(startDate, endDate);
+        this.selectedInterval = undefined;
+    }
+    cancel() {
+        this.refreshValues();
+        this.dropdownOpen = false;
+    }
+    apply() {
+        if (this.selectedInterval) {
+            this._value.interval = this.selectedInterval;
+            this._value.absoluteStartDate = undefined;
+            this._value.absoluteEndDate = undefined;
+        }
+        else {
+            if (this.selectedStartDate) {
+                const startDate = this.stringToDate(this.selectedStartDate);
+                this.applyTimeOnDate(startDate, this.selectedStartTime);
+                this.selectedStartTime = this.selectedStartTime ?? '00:00:00';
+                this._value.absoluteStartDate = moment(startDate).toDate();
+            }
+            else {
+                this._value.absoluteStartDate = undefined;
+            }
+            if (this.selectedEndDate) {
+                const endDate = this.stringToDate(this.selectedEndDate);
+                this.applyTimeOnDate(endDate, this.selectedEndTime);
+                this.selectedEndTime = this.selectedEndTime ?? '00:00:00';
+                this._value.absoluteEndDate = moment(endDate).toDate();
+            }
+            else {
+                this._value.absoluteEndDate = undefined;
+            }
+            this._value.interval = undefined;
+        }
+        this.valueChange.emit(this._value);
+        this.dropdownOpen = false;
+    }
+    applyTimeOnDate(date, time) {
+        if (time) {
+            date.setHours(this.getHoursFromTime(time));
+            date.setMinutes(this.getMinutesFromTime(time));
+            date.setSeconds(this.getSecondsFromTime(time));
+        }
+    }
+    getHoursFromTime(time) {
+        try {
+            return parseFloat(time.split(':')[0]) || 0;
+        }
+        catch (e) {
+            return 0;
+        }
+    }
+    getMinutesFromTime(time) {
+        try {
+            return parseFloat(time.split(':')[1]) || 0;
+        }
+        catch (e) {
+            return 0;
+        }
+    }
+    getSecondsFromTime(time) {
+        try {
+            return parseFloat(time.split(':')[2]) || 0;
+        }
+        catch (e) {
+            return 0;
+        }
+    }
+    getInputText() {
+        if (this._value?.interval) {
+            return this.periodLabel;
+        }
+        const emptyDate = this.hideTime ? '__________' : '__________ ________';
+        let formatedText = '';
+        if (this._value.absoluteStartDate) {
+            formatedText += this.dateToString(this._value.absoluteStartDate);
+        }
+        else {
+            formatedText += emptyDate;
+        }
+        formatedText += ' - ';
+        if (this._value.absoluteEndDate) {
+            formatedText += this.dateToString(this._value.absoluteEndDate);
+        }
+        else {
+            formatedText += emptyDate;
+        }
+        return formatedText;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, deps: [{ token: i1$2.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputDateTimeIntervalComponent, selector: "input-date-time-interval", inputs: { timezone: "timezone", dateMask: "dateMask", timeMask: "timeMask", dateFormat: "dateFormat", label: "label", periodLabel: "periodLabel", relativeLabel: "relativeLabel", absoluteLabel: "absoluteLabel", startDateLabel: "startDateLabel", startDate: "startDate", startTimeLabel: "startTimeLabel", startTime: "startTime", endTimeLabel: "endTimeLabel", endTime: "endTime", endDateLabel: "endDateLabel", endDate: "endDate", calendarMaxDate: "calendarMaxDate", calendarMinDate: "calendarMinDate", cancelLabel: "cancelLabel", applyLabel: "applyLabel", hideTime: "hideTime", value: "value", intervals: "intervals" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputDateTimeIntervalComponent),
+                multi: true
+            }], viewQueries: [{ propertyName: "scrollbarRef", first: true, predicate: ["intervalsBar"], descendants: true }], ngImport: i0, template: "<div class=\"input-date-time-interval\">\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\n    <span class=\"interval-input\">\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\n        <mat-icon>date_range</mat-icon>\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\n      </div>\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\n    </span>\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\n  </mat-form-field>\n</div>\n\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n             (backdropClick)=\"closeDropdown($event)\"\n             (overlayOutsideClick)=\"closeDropdown($event)\"\n             [cdkConnectedOverlayOrigin]=\"origin\"\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\n  <div class=\"input-date-time-interval-dropdown mdc-menu-surface\">\n    <div class=\"input-options-container\">\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\n        </div>\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\n          <div class=\"interval\"\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\n               (click)=\"selectInterval(interval)\"\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\n               *ngFor=\"let interval of this.intervals\">\n            <div class=\"interval-label\">\n              <span [innerHTML]=\"interval.label\"></span>\n            </div>\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\n            </div>\n          </div>\n        </ng-scrollbar>\n      </div>\n\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\n        </div>\n        <div class=\"picker\">\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedStartDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedEndDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-calendar\n            [selected]=\"_selectedDateRange\"\n            [maxDate]=\"calendarMaxDate\"\n            [minDate]=\"calendarMinDate\"\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-date-time-actions\">\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\n      </button>\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:1px 10px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i8.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i9.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-date-time-interval', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputDateTimeIntervalComponent),
+                            multi: true
+                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-date-time-interval\">\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\n    <span class=\"interval-input\">\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\n        <mat-icon>date_range</mat-icon>\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\n      </div>\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\n    </span>\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\n  </mat-form-field>\n</div>\n\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n             (backdropClick)=\"closeDropdown($event)\"\n             (overlayOutsideClick)=\"closeDropdown($event)\"\n             [cdkConnectedOverlayOrigin]=\"origin\"\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\n  <div class=\"input-date-time-interval-dropdown mdc-menu-surface\">\n    <div class=\"input-options-container\">\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\n        </div>\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\n          <div class=\"interval\"\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\n               (click)=\"selectInterval(interval)\"\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\n               *ngFor=\"let interval of this.intervals\">\n            <div class=\"interval-label\">\n              <span [innerHTML]=\"interval.label\"></span>\n            </div>\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\n            </div>\n          </div>\n        </ng-scrollbar>\n      </div>\n\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\n        </div>\n        <div class=\"picker\">\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedStartDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedEndDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-calendar\n            [selected]=\"_selectedDateRange\"\n            [maxDate]=\"calendarMaxDate\"\n            [minDate]=\"calendarMinDate\"\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-date-time-actions\">\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\n      </button>\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:1px 10px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.ScrollStrategyOptions }]; }, propDecorators: { timezone: [{
+                type: Input
+            }], dateMask: [{
+                type: Input
+            }], timeMask: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], periodLabel: [{
+                type: Input
+            }], relativeLabel: [{
+                type: Input
+            }], absoluteLabel: [{
+                type: Input
+            }], startDateLabel: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], startTimeLabel: [{
+                type: Input
+            }], startTime: [{
+                type: Input
+            }], endTimeLabel: [{
+                type: Input
+            }], endTime: [{
+                type: Input
+            }], endDateLabel: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], calendarMaxDate: [{
+                type: Input
+            }], calendarMinDate: [{
+                type: Input
+            }], cancelLabel: [{
+                type: Input
+            }], applyLabel: [{
+                type: Input
+            }], hideTime: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], intervals: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], scrollbarRef: [{
+                type: ViewChild,
+                args: ['intervalsBar']
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
 class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, declarations: [MatSelectInfiniteScrollDirective,
@@ -1717,7 +2082,8 @@ class InputsModule {
             FieldComponent,
             AceEditorComponent,
             AceEditorDirective,
-            DebouceInputDirective], imports: [RouterModule,
+            DebouceInputDirective,
+            InputDateTimeIntervalComponent], imports: [RouterModule,
             CommonModule,
             FormsModule,
             MatFormFieldModule,
@@ -1730,7 +2096,13 @@ class InputsModule {
             MatTooltipModule,
             DndModule,
             ButtonsModule,
-            OverlayModule], exports: [SelectBoxComponent,
+            OverlayModule,
+            MatCardModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            NgScrollbarModule,
+            NgxMaskDirective,
+            NgxMaskPipe], exports: [SelectBoxComponent,
             SelectEnumComponent,
             InputTextComponent,
             InputNumberComponent,
@@ -1743,7 +2115,10 @@ class InputsModule {
             FieldComponent,
             AceEditorComponent,
             AceEditorDirective,
-            DebouceInputDirective] });
+            DebouceInputDirective,
+            InputDateTimeIntervalComponent,
+            NgxMaskDirective,
+            NgxMaskPipe] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, providers: [
             {
                 provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -1751,7 +2126,12 @@ class InputsModule {
                     appearance: 'outline',
                     subscriptSizing: 'dynamic'
                 }
-            }
+            },
+            {
+                provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                useClass: DefaultMatCalendarRangeStrategy
+            },
+            provideNgxMask()
         ], imports: [RouterModule,
             CommonModule,
             FormsModule,
@@ -1765,7 +2145,11 @@ class InputsModule {
             MatTooltipModule,
             DndModule,
             ButtonsModule,
-            OverlayModule] });
+            OverlayModule,
+            MatCardModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            NgScrollbarModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
@@ -1784,7 +2168,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         MatTooltipModule,
                         DndModule,
                         ButtonsModule,
-                        OverlayModule
+                        OverlayModule,
+                        MatCardModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        NgScrollbarModule,
+                        NgxMaskDirective,
+                        NgxMaskPipe
                     ],
                     declarations: [
                         MatSelectInfiniteScrollDirective,
@@ -1801,7 +2191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         FieldComponent,
                         AceEditorComponent,
                         AceEditorDirective,
-                        DebouceInputDirective
+                        DebouceInputDirective,
+                        InputDateTimeIntervalComponent
                     ],
                     exports: [
                         SelectBoxComponent,
@@ -1817,7 +2208,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         FieldComponent,
                         AceEditorComponent,
                         AceEditorDirective,
-                        DebouceInputDirective
+                        DebouceInputDirective,
+                        InputDateTimeIntervalComponent,
+                        NgxMaskDirective,
+                        NgxMaskPipe
                     ],
                     providers: [
                         {
@@ -1826,14 +2220,430 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                 appearance: 'outline',
                                 subscriptSizing: 'dynamic'
                             }
-                        }
+                        },
+                        {
+                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+                            useClass: DefaultMatCalendarRangeStrategy
+                        },
+                        provideNgxMask()
                     ]
                 }]
         }] });
 
+class CurrentMonthInterval {
+    id = 'CurrentMonthInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('month').toDate();
+    }
+}
+
+class TimeIntervalsBuilder {
+    _timezone = 'America/Sao_Paulo';
+    _value = [];
+    static builder() {
+        return new TimeIntervalsBuilder();
+    }
+    withTimezone(timezone) {
+        this._timezone = timezone || this._timezone;
+        return this;
+    }
+    withInterval(interval) {
+        this._value.push(interval);
+        return this;
+    }
+    build() {
+        return this._value;
+    }
+}
+
+class LastHourInterval {
+    id = 'LastHourInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'hours').toDate();
+    }
+}
+
+class LastMinuteInterval {
+    id = 'LastMinuteInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'minutes').toDate();
+    }
+}
+
+class LastOneWeekInterval {
+    id = 'LastOneWeekInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'weeks').startOf('weeks').toDate();
+    }
+    getEndDate() {
+        return moment$1().subtract(1, 'weeks').endOf('weeks').toDate();
+    }
+}
+
+class LastTenMinutesInterval {
+    id = 'LastTenMinutesInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(10, 'minutes').toDate();
+    }
+}
+
+class LastThirtyMinutesInterval {
+    id = 'LastThirtyMinutesInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(30, 'minutes').toDate();
+    }
+}
+
+class TodayInterval {
+    id = 'TodayInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('day').toDate();
+    }
+}
+
+class LastFiveMinutesInterval {
+    id = 'LastFiveMinutesInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(5, 'minutes').toDate();
+    }
+}
+
+class LastTwoHoursInterval {
+    id = 'LastTwoHoursInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(2, 'hours').toDate();
+    }
+}
+
+class LastThreeHoursInterval {
+    id = 'LastThreeHoursInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(3, 'hours').toDate();
+    }
+}
+
+class LastMonthInterval {
+    id = 'LastMonthInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'month').startOf('month').toDate();
+    }
+    getEndDate() {
+        return moment$1().subtract(1, 'month').endOf('month').toDate();
+    }
+}
+
+class ThisYearInterval {
+    id = 'ThisYearInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('year').toDate();
+    }
+    getEndDate() {
+        return moment$1().toDate();
+    }
+}
+
+class ThisWeekInterval {
+    id = 'ThisWeekInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('week').toDate();
+    }
+    getEndDate() {
+        return moment$1().toDate();
+    }
+}
+
+class LastYearInterval {
+    id = 'LastYearInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'year').startOf('year').toDate();
+    }
+    getEndDate() {
+        return moment$1().subtract(1, 'year').endOf('year').toDate();
+    }
+}
+
+class YesterdayInterval {
+    id = 'YesterdayInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().subtract(1, 'day').startOf('day').toDate();
+    }
+    getEndDate() {
+        return moment$1().subtract(1, 'day').endOf('day').toDate();
+    }
+}
+
+class LastQuarterInterval {
+    id = 'LastQuarterInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('quarter').subtract(1, 'quarter').toDate();
+    }
+    getEndDate() {
+        return moment$1().endOf('quarter').subtract(1, 'quarter').toDate();
+    }
+}
+
+class ThisQuarterInterval {
+    id = 'ThisQuarterInterval';
+    label;
+    constructor(label) {
+        this.label = label;
+    }
+    getStartDate() {
+        return moment$1().startOf('quarter').toDate();
+    }
+    getEndDate() {
+        return moment$1().toDate();
+    }
+}
+
+class DefaultIntervalsBuilder extends TimeIntervalsBuilder {
+    static builder() {
+        return new DefaultIntervalsBuilder();
+    }
+    withTodayInterval(label) {
+        this.withInterval(new TodayInterval(label));
+        return this;
+    }
+    withCurrentMonthInterval(label) {
+        this.withInterval(new CurrentMonthInterval(label));
+        return this;
+    }
+    withThisYearInterval(label) {
+        this.withInterval(new ThisYearInterval(label));
+        return this;
+    }
+    withThisWeekInterval(label) {
+        this.withInterval(new ThisWeekInterval(label));
+        return this;
+    }
+    withLastHourInterval(label) {
+        this.withInterval(new LastHourInterval(label));
+        return this;
+    }
+    withLastTwoHoursInterval(label) {
+        this.withInterval(new LastTwoHoursInterval(label));
+        return this;
+    }
+    withLastThreeHoursInterval(label) {
+        this.withInterval(new LastThreeHoursInterval(label));
+        return this;
+    }
+    withLastMinuteInterval(label) {
+        this.withInterval(new LastMinuteInterval(label));
+        return this;
+    }
+    withLastOneWeekInterval(label) {
+        this.withInterval(new LastOneWeekInterval(label));
+        return this;
+    }
+    withLastFiveMinutesInterval(label) {
+        this.withInterval(new LastFiveMinutesInterval(label));
+        return this;
+    }
+    withLastTenMinutesInterval(label) {
+        this.withInterval(new LastTenMinutesInterval(label));
+        return this;
+    }
+    withLastThirtyMinutesInterval(label) {
+        this.withInterval(new LastThirtyMinutesInterval(label));
+        return this;
+    }
+    withLastMonthInterval(label) {
+        this.withInterval(new LastMonthInterval(label));
+        return this;
+    }
+    withLastYearInterval(label) {
+        this.withInterval(new LastYearInterval(label));
+        return this;
+    }
+    withYesterdayInterval(label) {
+        this.withInterval(new YesterdayInterval(label));
+        return this;
+    }
+    withThisQuarter(label) {
+        this.withInterval(new ThisQuarterInterval(label));
+        return this;
+    }
+    withLastQuarter(label) {
+        this.withInterval(new LastQuarterInterval(label));
+        return this;
+    }
+}
+
+class TimeIntervalValueBuilder {
+    _timezone = 'America/Sao_Paulo';
+    _absoluteStartDate;
+    _absoluteEndDate;
+    _interval;
+    static builder() {
+        return new TimeIntervalValueBuilder();
+    }
+    withTimezone(timezone) {
+        this._timezone = timezone || this._timezone;
+        return this;
+    }
+    withAbsoluteStartDate(date) {
+        this._absoluteStartDate = date;
+        this._interval = undefined;
+        return this;
+    }
+    withAbsoluteEndDate(date) {
+        this._absoluteEndDate = date;
+        this._interval = undefined;
+        return this;
+    }
+    withCurrentMonthInterval(label) {
+        this.withInterval(new CurrentMonthInterval(label));
+        return this;
+    }
+    withLastMonthInterval(label) {
+        this.withInterval(new LastMonthInterval(label));
+        return this;
+    }
+    withThisYearInterval(label) {
+        this.withInterval(new ThisYearInterval(label));
+        return this;
+    }
+    withThisWeekInterval(label) {
+        this.withInterval(new ThisWeekInterval(label));
+        return this;
+    }
+    withLastHourInterval(label) {
+        this.withInterval(new LastHourInterval(label));
+        return this;
+    }
+    withLastMinuteInterval(label) {
+        this.withInterval(new LastMinuteInterval(label));
+        return this;
+    }
+    withLastTwoHoursInterval(label) {
+        this.withInterval(new LastTwoHoursInterval(label));
+        return this;
+    }
+    withLastThreeHoursInterval(label) {
+        this.withInterval(new LastThreeHoursInterval(label));
+        return this;
+    }
+    withLastOneWeekInterval(label) {
+        this.withInterval(new LastOneWeekInterval(label));
+        return this;
+    }
+    withLastFiveMinutesInterval(label) {
+        this.withInterval(new LastFiveMinutesInterval(label));
+        return this;
+    }
+    withLastTenMinutesInterval(label) {
+        this.withInterval(new LastTenMinutesInterval(label));
+        return this;
+    }
+    withLastThirtyMinutesInterval(label) {
+        this.withInterval(new LastThirtyMinutesInterval(label));
+        return this;
+    }
+    withTodayInterval(label) {
+        this.withInterval(new TodayInterval(label));
+        return this;
+    }
+    withLastYearInterval(label) {
+        this.withInterval(new LastYearInterval(label));
+        return this;
+    }
+    withYesterdayInterval(label) {
+        this.withInterval(new YesterdayInterval(label));
+        return this;
+    }
+    withThisQuarter(label) {
+        this.withInterval(new ThisQuarterInterval(label));
+        return this;
+    }
+    withLastQuarter(label) {
+        this.withInterval(new LastQuarterInterval(label));
+        return this;
+    }
+    withInterval(interval) {
+        this._absoluteStartDate = undefined;
+        this._absoluteEndDate = undefined;
+        this._interval = interval;
+        return this;
+    }
+    build() {
+        const value = new TimeIntervalValue(this._timezone);
+        value.interval = this._interval;
+        value.absoluteStartDate = this._absoluteStartDate;
+        value.absoluteEndDate = this._absoluteEndDate;
+        return value;
+    }
+}
+
+// Export builders
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AceEditorComponent, AceEditorDirective, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ValueAccessorBase };
+export { AceEditorComponent, AceEditorDirective, CurrentMonthInterval, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, DefaultIntervalsBuilder, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputDateTimeIntervalComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, LastFiveMinutesInterval, LastHourInterval, LastMinuteInterval, LastMonthInterval, LastOneWeekInterval, LastQuarterInterval, LastTenMinutesInterval, LastThirtyMinutesInterval, LastThreeHoursInterval, LastTwoHoursInterval, LastYearInterval, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ThisQuarterInterval, ThisWeekInterval, ThisYearInterval, TimeIntervalValue, TimeIntervalValueBuilder, TimeIntervalsBuilder, TodayInterval, ValueAccessorBase, YesterdayInterval };
 //# sourceMappingURL=apipass-inputs.mjs.map