npm - @apipass/inputs - Versions diffs - 1.0.98 → 1.0.99 - Mend

@apipass/inputs 1.0.98 → 1.0.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/esm2022/input-date-time-interval/input-date-time-interval.component.mjs CHANGED Viewed

@@ -249,7 +249,7 @@ class InputDateTimeIntervalComponent {
                 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.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.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7.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 });
+            }], 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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;display:flex;justify-content:flex-start;align-items:center}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.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.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7.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 });
 }
 export { InputDateTimeIntervalComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, decorators: [{
@@ -258,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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"] }]
+                        }], 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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;display:flex;justify-content:flex-start;align-items:center}.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.ScrollStrategyOptions }]; }, propDecorators: { timezone: [{
                 type: Input
             }], dateMask: [{

package/fesm2022/apipass-inputs.mjs CHANGED Viewed

@@ -2001,7 +2001,7 @@ class InputDateTimeIntervalComponent {
                 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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 });
+            }], 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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;display:flex;justify-content:flex-start;align-items:center}.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,
@@ -2009,7 +2009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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"] }]
+                        }], 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\">\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:0 10px;margin-top:-1px;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;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.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;display:flex;justify-content:flex-start;align-items:center}.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: [{