import { Component, ElementRef, HostListener, ViewChild, Input, Renderer2 } from '@angular/core';
import { FormControl } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SelectTimeComponent {
    constructor(renderer) {
        this.renderer = renderer;
        this.defaultValue = '00:00';
        this.isDisabled = false;
        this.showDropDown = false;
        this.isValidValue = true;
        this.isShowError = true;
        this.hours = Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0'));
        this.minutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));
    }
    ngOnInit() {
        if (this.defaultValue) {
            this.setValues(this.defaultValue);
        }
        this.controlSubscription = this.formControl.valueChanges.subscribe((value) => {
            if (value) {
                this.setValues(value);
                this.controlSubscription.unsubscribe();
            }
        });
    }
    togglePopup(event) {
        if (this.isDisabled) {
            return;
        }
        this.showDropDown = !this.showDropDown;
        if (this.showDropDown) {
            this.timeInput.nativeElement.blur();
            setTimeout(() => {
                this.initializeScroll(this.hourList.nativeElement);
                this.initializeScroll(this.minuteList.nativeElement);
                this.checkAndSetClass();
                this.scrollToSelected();
            }, 0);
        }
    }
    selectHour(hour) {
        this.selectedHour = hour;
    }
    selectMinute(minute) {
        this.selectedMinute = minute;
    }
    closePopup(event) {
        if (this.dropDown &&
            !this.dropDown.nativeElement.contains(event.target) &&
            !this.timeInputWrapper.nativeElement.contains(event.target)) {
            this.showDropDown = false;
            this.setPreviousValue();
        }
    }
    initializeScroll(list) {
        const itemHeight = list.firstElementChild.clientHeight;
        list.scrollTop = (itemHeight * list.children.length) / 3;
    }
    scrollList(isHour) {
        const list = isHour ? this.hourList.nativeElement : this.minuteList.nativeElement;
        const scrollTop = list.scrollTop;
        const itemHeight = list.firstElementChild.clientHeight;
        const totalHeight = (itemHeight * list.children.length) / 3;
        if (scrollTop >= totalHeight * 2) {
            list.scrollTop = (scrollTop % totalHeight) + totalHeight;
        }
        else if (scrollTop < totalHeight) {
            list.scrollTop = scrollTop + totalHeight;
        }
    }
    updateValues(event) {
        this.setValues(event.target.value);
        this.applyNewValues();
    }
    checkAndSetClass() {
        this.renderer.setStyle(this.dropDown.nativeElement, 'display', 'block');
        this.renderer.removeClass(this.dropDown.nativeElement, 'drop-up');
        const offsetTop = this.dropDown.nativeElement.getBoundingClientRect().top;
        const menuHeight = this.dropDown.nativeElement.offsetHeight;
        const windowHeight = window.innerHeight;
        if (offsetTop + menuHeight > windowHeight) {
            this.renderer.addClass(this.dropDown.nativeElement, 'drop-up');
        }
        this.renderer.removeClass(this.dropDown.nativeElement, 'hidden-dropdown');
        this.renderer.removeStyle(this.dropDown.nativeElement, 'display');
    }
    setPreviousValue() {
        this.setValues(this.formControl.value);
        this.showDropDown = false;
    }
    applyNewValues(hideDropDown = false) {
        if (!this.selectedHour.length && !this.selectedMinute.length) {
            this.isValidValue = false;
            this.formControl.patchValue(null);
            this.formControl.setErrors({ incorrect: true });
        }
        else {
            this.isValidValue = true;
            const time = this.selectedHour + ':' + this.selectedMinute;
            this.formControl.patchValue(time);
            this.formControl.setErrors(null);
        }
        if (hideDropDown) {
            this.showDropDown = false;
        }
    }
    setValues(value) {
        const values = value ? value.split(':') : '';
        this.selectedHour = values[0] ? values[0] : '';
        this.selectedMinute = values[1] ? values[1] : '';
    }
    scrollToSelected() {
        const selectedHourIndex = this.hours.indexOf(this.selectedHour);
        const selectedMinuteIndex = this.minutes.indexOf(this.selectedMinute);
        this.hourList.nativeElement.scrollTop = selectedHourIndex * 34;
        this.minuteList.nativeElement.scrollTop = selectedMinuteIndex * 34;
    }
    toggleError(showError) {
        this.isShowError = showError;
    }
}
SelectTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTimeComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
SelectTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectTimeComponent, selector: "app-select-time", inputs: { defaultValue: "defaultValue", formControl: "formControl", isDisabled: "isDisabled" }, host: { listeners: { "document:click": "closePopup($event)" } }, viewQueries: [{ propertyName: "dropDown", first: true, predicate: ["dropDown"], descendants: true }, { propertyName: "hourList", first: true, predicate: ["hourList"], descendants: true }, { propertyName: "minuteList", first: true, predicate: ["minuteList"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true }, { propertyName: "timeInputWrapper", first: true, predicate: ["timeInputWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"time-picker\">\n  <div #timeInputWrapper class=\"time-input-wrapper form-control-wrapper\" [ngClass]=\"{disabled: isDisabled}\">\n    <input\n      #timeInput\n      type=\"time\"\n      id=\"time-input\"\n      name=\"time-input\"\n      class=\"form-control\"\n      [attr.data-qa]=\"'time-input'\"\n      (click)=\"togglePopup($event)\"\n      [ngClass]=\"{'active-input': showDropDown, 'ng-invalid': !isValidValue && !isDisabled}\"\n      (change)=\"updateValues($event)\"\n      (focus)=\"toggleError(true)\"\n      (blur)=\"toggleError(false)\"\n      [disabled]=\"isDisabled\"\n      value=\"{{ isDisabled ? '' : selectedHour + ':' + selectedMinute }}\"\n    />\n    <span class=\"material-icons material-icons-outlined\" (click)=\"togglePopup($event)\">watch_later</span>\n  </div>\n  <label\n    class=\"form-control-error-message control-label\"\n    *ngIf=\"!isValidValue && !isDisabled && !showDropDown && !isShowError\"\n    >The time is required.\n  </label>\n  <div class=\"popup hidden-dropdown\" *ngIf=\"showDropDown\" #dropDown [attr.data-qa]=\"'time-picker'\">\n    <div class=\"titles\">\n      <span>Hour</span>\n      <span>Min</span>\n    </div>\n    <div class=\"time-lists\" [attr.data-qa]=\"'hour-list'\">\n      <div class=\"list-container\" #hourList (scroll)=\"scrollList(true)\">\n        <ul class=\"time-list\">\n          <ng-container *ngFor=\"let _ of [0, 1, 2]\">\n            <li [ngClass]=\"{active: this.selectedHour === hour}\" *ngFor=\"let hour of hours\" (click)=\"selectHour(hour)\">\n              {{ hour }}\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"list-container\" [attr.data-qa]=\"'minute-list'\" #minuteList (scroll)=\"scrollList(false)\">\n        <ul class=\"time-list\">\n          <ng-container *ngFor=\"let _ of [0, 1, 2]\">\n            <li\n              [ngClass]=\"{active: this.selectedMinute === minute}\"\n              *ngFor=\"let minute of minutes\"\n              (click)=\"selectMinute(minute)\"\n            >\n              {{ minute }}\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n    </div>\n    <div class=\"button-list\">\n      <button class=\"button button-outlined-grey\" [attr.data-qa]=\"'cancel'\" (click)=\"setPreviousValue()\">Cancel</button>\n      <button\n        class=\"button button-primary\"\n        [attr.data-qa]=\"'apply'\"\n        [disabled]=\"!selectedHour.length || !selectedMinute.length\"\n        (click)=\"applyNewValues(true)\"\n      >\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex:1}.time-picker{position:relative;width:100%;max-width:196px}.form-control-wrapper input.form-control{cursor:pointer;padding:7px 48px 8px 12px}.form-control-wrapper input.form-control.ng-invalid:not(:hover){border-color:var(--error-default-color)}.form-control-wrapper span.material-icons{color:var(--themePrimButtonsBg-color);position:absolute;right:1px;top:1px;padding:7px 12px 8px 16px;width:48px;font-size:20px;height:34px}.form-control-wrapper.disabled span.material-icons{color:var(--neutral-on-disable-color)}.time-input-wrapper:hover input.form-control,.time-input-wrapper:hover input[type=time]:before{background-color:var(--neutral-on-surface-variant-4-color);border:1px solid var(--neutral-outline-variant-color)}.form-control-wrapper:hover input.form-control.ng-invalid{border-color:var(--neutral-outline-variant-color)!important}.time-input-wrapper:hover input.form-control:disabled{background-color:var(--neutral-main-neutral-color);cursor:not-allowed}.active-input{border-color:var(--themePrimButtonsBg-color)}input::placeholder{color:var(--neutral-outline-variant-color)}.popup{display:inline-flex;flex-direction:column;align-items:flex-start;position:absolute;top:calc(100% + 4px);left:0;width:196px;z-index:1000;border-radius:4px;border-top:2px solid var(--themePrimButtonsBg-color);background:var(--neutral-main-neutral-color);box-shadow:-1px 0 20px #181c220d,0 1px 5px #00000026}.popup .titles{display:flex;padding:12px;align-items:flex-start;gap:16px;border-bottom:1px solid var(--neutral-outline-variant-color);width:100%;margin-bottom:12px}.popup .titles span{display:flex;width:50%;justify-content:center;align-items:center;color:var(--neutral-outline-color);text-align:center;font-size:12px;font-weight:400;line-height:18px}.popup .time-lists{display:flex;align-items:flex-start;width:100%}.list-container{max-height:200px;overflow-y:auto;width:50%;text-align:center;padding:0 12px}.list-container:first-child{padding-right:8px}.list-container:last-child{padding-left:8px}.time-list{list-style-type:none;margin:0;padding:0}.time-list li{display:flex;width:100%;padding:6px 12px;margin-bottom:4px;justify-content:center;align-items:center;cursor:pointer;border-radius:4px;color:var(--neutral-on-main-neutral-color);font-size:12px;font-weight:400;line-height:18px}.time-list li:hover{background-color:var(--themePrimButtonsBg-8-color)}.time-list li:focus,.time-list li:active{background-color:var(--themePrimButtonsBg-12-color)}.time-list li.active{background-color:var(--themePrimButtonsBg-16-color);font-weight:600}.list-container,.time-list{-ms-overflow-style:none;scrollbar-width:none}input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-clear-button{display:none}input[type=time]:focus::-webkit-datetime-edit-hour-field,input[type=time]:focus::-webkit-datetime-edit-minute-field{background-color:transparent}input[type=time]:focus::-webkit-datetime-edit-hour-field:focus,input[type=time]:focus::-webkit-datetime-edit-minute-field:focus{background-color:var(--themePrimButtonsBg-color);color:var(--on-themePrimButtonsBg-color)}input[type=time]::-webkit-datetime-edit-hour-field,input[type=time]::-webkit-datetime-edit-minute-field{background-color:transparent;color:var(--neutral-on-main-neutral-color)}input[type=time]:disabled::-webkit-datetime-edit-hour-field,input[type=time]:disabled::-webkit-datetime-edit-minute-field{border-color:var(--neutral-on-disable-color);color:var(--neutral-on-disable-color)}input[type=time]:disabled:hover{background-color:var(--neutral-main-neutral-color);cursor:not-allowed}input[type=time]:focus-visible{outline:0}input[type=time]::-webkit-datetime-edit-text{padding:0 8px}.drop-up{bottom:40px;top:unset}.hidden-dropdown{visibility:hidden}.button-list{display:flex;padding:12px;justify-content:center;gap:8px;width:100%;border-top:1px solid var(--neutral-outline-variant-color);margin-top:12px}.button-list .button{width:82px;min-width:unset}\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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectTimeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-select-time', template: "<div class=\"time-picker\">\n  <div #timeInputWrapper class=\"time-input-wrapper form-control-wrapper\" [ngClass]=\"{disabled: isDisabled}\">\n    <input\n      #timeInput\n      type=\"time\"\n      id=\"time-input\"\n      name=\"time-input\"\n      class=\"form-control\"\n      [attr.data-qa]=\"'time-input'\"\n      (click)=\"togglePopup($event)\"\n      [ngClass]=\"{'active-input': showDropDown, 'ng-invalid': !isValidValue && !isDisabled}\"\n      (change)=\"updateValues($event)\"\n      (focus)=\"toggleError(true)\"\n      (blur)=\"toggleError(false)\"\n      [disabled]=\"isDisabled\"\n      value=\"{{ isDisabled ? '' : selectedHour + ':' + selectedMinute }}\"\n    />\n    <span class=\"material-icons material-icons-outlined\" (click)=\"togglePopup($event)\">watch_later</span>\n  </div>\n  <label\n    class=\"form-control-error-message control-label\"\n    *ngIf=\"!isValidValue && !isDisabled && !showDropDown && !isShowError\"\n    >The time is required.\n  </label>\n  <div class=\"popup hidden-dropdown\" *ngIf=\"showDropDown\" #dropDown [attr.data-qa]=\"'time-picker'\">\n    <div class=\"titles\">\n      <span>Hour</span>\n      <span>Min</span>\n    </div>\n    <div class=\"time-lists\" [attr.data-qa]=\"'hour-list'\">\n      <div class=\"list-container\" #hourList (scroll)=\"scrollList(true)\">\n        <ul class=\"time-list\">\n          <ng-container *ngFor=\"let _ of [0, 1, 2]\">\n            <li [ngClass]=\"{active: this.selectedHour === hour}\" *ngFor=\"let hour of hours\" (click)=\"selectHour(hour)\">\n              {{ hour }}\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n      <div class=\"list-container\" [attr.data-qa]=\"'minute-list'\" #minuteList (scroll)=\"scrollList(false)\">\n        <ul class=\"time-list\">\n          <ng-container *ngFor=\"let _ of [0, 1, 2]\">\n            <li\n              [ngClass]=\"{active: this.selectedMinute === minute}\"\n              *ngFor=\"let minute of minutes\"\n              (click)=\"selectMinute(minute)\"\n            >\n              {{ minute }}\n            </li>\n          </ng-container>\n        </ul>\n      </div>\n    </div>\n    <div class=\"button-list\">\n      <button class=\"button button-outlined-grey\" [attr.data-qa]=\"'cancel'\" (click)=\"setPreviousValue()\">Cancel</button>\n      <button\n        class=\"button button-primary\"\n        [attr.data-qa]=\"'apply'\"\n        [disabled]=\"!selectedHour.length || !selectedMinute.length\"\n        (click)=\"applyNewValues(true)\"\n      >\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [":host{flex:1}.time-picker{position:relative;width:100%;max-width:196px}.form-control-wrapper input.form-control{cursor:pointer;padding:7px 48px 8px 12px}.form-control-wrapper input.form-control.ng-invalid:not(:hover){border-color:var(--error-default-color)}.form-control-wrapper span.material-icons{color:var(--themePrimButtonsBg-color);position:absolute;right:1px;top:1px;padding:7px 12px 8px 16px;width:48px;font-size:20px;height:34px}.form-control-wrapper.disabled span.material-icons{color:var(--neutral-on-disable-color)}.time-input-wrapper:hover input.form-control,.time-input-wrapper:hover input[type=time]:before{background-color:var(--neutral-on-surface-variant-4-color);border:1px solid var(--neutral-outline-variant-color)}.form-control-wrapper:hover input.form-control.ng-invalid{border-color:var(--neutral-outline-variant-color)!important}.time-input-wrapper:hover input.form-control:disabled{background-color:var(--neutral-main-neutral-color);cursor:not-allowed}.active-input{border-color:var(--themePrimButtonsBg-color)}input::placeholder{color:var(--neutral-outline-variant-color)}.popup{display:inline-flex;flex-direction:column;align-items:flex-start;position:absolute;top:calc(100% + 4px);left:0;width:196px;z-index:1000;border-radius:4px;border-top:2px solid var(--themePrimButtonsBg-color);background:var(--neutral-main-neutral-color);box-shadow:-1px 0 20px #181c220d,0 1px 5px #00000026}.popup .titles{display:flex;padding:12px;align-items:flex-start;gap:16px;border-bottom:1px solid var(--neutral-outline-variant-color);width:100%;margin-bottom:12px}.popup .titles span{display:flex;width:50%;justify-content:center;align-items:center;color:var(--neutral-outline-color);text-align:center;font-size:12px;font-weight:400;line-height:18px}.popup .time-lists{display:flex;align-items:flex-start;width:100%}.list-container{max-height:200px;overflow-y:auto;width:50%;text-align:center;padding:0 12px}.list-container:first-child{padding-right:8px}.list-container:last-child{padding-left:8px}.time-list{list-style-type:none;margin:0;padding:0}.time-list li{display:flex;width:100%;padding:6px 12px;margin-bottom:4px;justify-content:center;align-items:center;cursor:pointer;border-radius:4px;color:var(--neutral-on-main-neutral-color);font-size:12px;font-weight:400;line-height:18px}.time-list li:hover{background-color:var(--themePrimButtonsBg-8-color)}.time-list li:focus,.time-list li:active{background-color:var(--themePrimButtonsBg-12-color)}.time-list li.active{background-color:var(--themePrimButtonsBg-16-color);font-weight:600}.list-container,.time-list{-ms-overflow-style:none;scrollbar-width:none}input[type=time]::-webkit-calendar-picker-indicator{display:none}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-clear-button{display:none}input[type=time]:focus::-webkit-datetime-edit-hour-field,input[type=time]:focus::-webkit-datetime-edit-minute-field{background-color:transparent}input[type=time]:focus::-webkit-datetime-edit-hour-field:focus,input[type=time]:focus::-webkit-datetime-edit-minute-field:focus{background-color:var(--themePrimButtonsBg-color);color:var(--on-themePrimButtonsBg-color)}input[type=time]::-webkit-datetime-edit-hour-field,input[type=time]::-webkit-datetime-edit-minute-field{background-color:transparent;color:var(--neutral-on-main-neutral-color)}input[type=time]:disabled::-webkit-datetime-edit-hour-field,input[type=time]:disabled::-webkit-datetime-edit-minute-field{border-color:var(--neutral-on-disable-color);color:var(--neutral-on-disable-color)}input[type=time]:disabled:hover{background-color:var(--neutral-main-neutral-color);cursor:not-allowed}input[type=time]:focus-visible{outline:0}input[type=time]::-webkit-datetime-edit-text{padding:0 8px}.drop-up{bottom:40px;top:unset}.hidden-dropdown{visibility:hidden}.button-list{display:flex;padding:12px;justify-content:center;gap:8px;width:100%;border-top:1px solid var(--neutral-outline-variant-color);margin-top:12px}.button-list .button{width:82px;min-width:unset}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { dropDown: [{
                type: ViewChild,
                args: ['dropDown']
            }], hourList: [{
                type: ViewChild,
                args: ['hourList']
            }], minuteList: [{
                type: ViewChild,
                args: ['minuteList']
            }], timeInput: [{
                type: ViewChild,
                args: ['timeInput']
            }], timeInputWrapper: [{
                type: ViewChild,
                args: ['timeInputWrapper']
            }], defaultValue: [{
                type: Input,
                args: ['defaultValue']
            }], formControl: [{
                type: Input,
                args: ['formControl']
            }], isDisabled: [{
                type: Input,
                args: ['isDisabled']
            }], closePopup: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 