mis-crystal-design-system 18.0.24 → 18.1.0-signal-test

package/fesm2022/mis-crystal-design-system-timepicker.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Input, Output, Component, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Directive, Input, Output, signal, input, output, effect, untracked, Component, ViewChild, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { ConnectionPositionPair, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -17,8 +17,9 @@ import { FormsModule } from '@angular/forms';
 class TimepickerDirective {
     set createOverlayOnInput(openStatus) {
         this.openStatus = openStatus;
-        if (this.originEl && this.openStatus)
+        if (this.originEl && this.openStatus) {
             this.createOverlay(this.originEl);
+        }
     }
     ;
     constructor(templateRef, overlay, viewContainerRef) {
@@ -98,11 +99,11 @@ function TimePickerComponent_ng_template_3_div_0_li_3_Template(rf, ctx) { if (rf
     const interval_r3 = ctx.$implicit;
     const i_r5 = ctx.index;
     const ctx_r3 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, i_r5 === ctx_r3.isHighlighted));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, i_r5 === ctx_r3.isHighlighted()));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", interval_r3, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", interval_r3 === ctx_r3.chosenTime);
+    i0.ɵɵproperty("ngIf", interval_r3 === ctx_r3.chosenTime());
 } }
 function TimePickerComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8)(1, "ul", null, 2);
@@ -110,15 +111,15 @@ function TimePickerComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c5, ctx_r3.dropdownWidth || ctx_r3.inputWidth));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c5, ctx_r3.dropdownWidth() || ctx_r3.inputWidth()));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", ctx_r3.timeIntervals);
+    i0.ɵɵproperty("ngForOf", ctx_r3.timeIntervals());
 } }
 function TimePickerComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, TimePickerComponent_ng_template_3_div_0_Template, 4, 4, "div", 7);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", ctx_r3.openStatus);
+    i0.ɵɵproperty("ngIf", ctx_r3.openStatus());
 } }
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -134,64 +135,152 @@ class TimePickerComponent {
         });
     }
     constructor() {
-        this.openStatus = false;
-        this.isHighlighted = 0;
-        this.isInvalid = false;
-        this.timeIntervals = [];
-        this.shouldScroll = false;
-        this.userInputFlag = false;
-        this.givenTimeFlag = true;
-        this.clockFormat = 12;
-        this.timezone = "Asia/Kolkata";
-        this.height = "max-content";
-        this.inputWidth = "100px";
-        this.interval = 15;
-        this.dateAsEpoch = dayjs.tz(dayjs(), this.timezone).valueOf();
-        this.rangeValidity = true;
-        this.showTooltip = true;
-        this.dispayToolTip = this.showTooltip;
-        this.triggerChange = true;
-        this.disable = false;
-        this.timeEmitter = new EventEmitter();
+        // Convert to signals for better performance and change detection
+        this.currTime = signal('');
+        this.chosenTime = signal('');
+        this.openStatus = signal(false);
+        this.isHighlighted = signal(0);
+        this.isInvalid = signal(false);
+        this.timeIntervals = signal([]);
+        this.shouldScroll = signal(false);
+        this.userInputFlag = signal(false);
+        this.givenTimeFlag = signal(true);
+        // Signal-based inputs with backward compatibility
+        this.clockFormat = input(12);
+        this.timezone = input("Asia/Kolkata");
+        this.height = input("max-content");
+        this.inputWidth = input("100px");
+        this.dropdownWidth = input(undefined);
+        this.interval = input(15);
+        this.dateAsEpoch = input(dayjs.tz(dayjs(), "Asia/Kolkata").valueOf());
+        this.firstInterval = input();
+        this.rangeValidity = input(true);
+        this.showTooltip = input(true);
+        this.dispayToolTip = this.showTooltip();
+        this.givenTime = input();
+        this.minTime = input(undefined);
+        this.triggerChange = input(true);
+        this.disable = input(false);
+        // Internal state for computed first interval
+        this.computedFirstInterval = null;
+        this._isInitializing = false;
+        // Signal-based output with backward compatibility
+        this.timeEmitter = output();
+        // Effect to handle triggerChange from parent component (timerangepicker)
+        effect(() => {
+            const triggerValue = this.triggerChange();
+            const firstIntervalValue = this.firstInterval();
+            // Only update if not during user input and firstInterval is provided
+            if (!untracked(() => this.userInputFlag()) && firstIntervalValue && !this._isInitializing) {
+                const newTime = dayjs.tz(firstIntervalValue, untracked(() => this.timezone())).format(this.timeFormat);
+                // Only update if the time actually changed
+                if (untracked(() => this.chosenTime()) !== newTime) {
+                    // Use setTimeout to defer signal writes and avoid circular dependencies
+                    setTimeout(() => {
+                        this.chosenTime.set(newTime);
+                        this.isInvalid.set(!this.checkTimeValidity(newTime.trim()));
+                        // CRITICAL FIX: Repopulate dropdown when firstInterval changes
+                        this.populateDropdown();
+                        // Recalculate closest interval
+                        this.calculateClosestInterval(newTime);
+                        // Emit the updated time
+                        const timedayjs = this.getdayjs(newTime);
+                        this.emitTime({
+                            valid: !this.isInvalid(),
+                            time: newTime,
+                            epoch: timedayjs.valueOf()
+                        });
+                    }, 0);
+                }
+            }
+        });
     }
     ngOnInit() {
-        if (!this.givenTime && !this.minTime) {
-            this.chosenTime = dayjs.tz(this.firstInterval, this.timezone).format(this.timeFormat);
-            let chosenTimedayjs = this.getdayjs(this.chosenTime);
-            this.emitTime({
-                valid: !this.isInvalid,
-                time: this.chosenTime,
-                epoch: chosenTimedayjs.valueOf()
-            });
-        }
-    }
-    ngOnChanges() {
-        this.timeFormat = this.clockFormat === 12 ? "hh:mm a" : "HH:mm";
-        if (this.timeFormat) {
-            let chosenTimedayjs = this.getdayjs(this.chosenTime);
-            // if the first interval is >= the chosen time
-            // then only update the value of chosen time
-            // else it remains the same
-            if (this.firstInterval >= chosenTimedayjs.valueOf() && this.rangeValidity && !this.userInputFlag) {
-                this.chosenTime = dayjs.tz(this.firstInterval, this.timezone).format(this.timeFormat);
-                chosenTimedayjs = this.getdayjs(this.chosenTime);
+        this._isInitializing = true;
+        // Ensure timeFormat is set before initialization
+        this.timeFormat = this.clockFormat() === 12 ? "hh:mm a" : "HH:mm";
+        // Initialize chosenTime - use firstInterval from parent if available, otherwise calculate
+        if (!this.givenTime() && !this.minTime()) {
+            let initialTime;
+            // If firstInterval is provided by parent (timerangepicker), use it
+            if (this.firstInterval()) {
+                initialTime = dayjs.tz(this.firstInterval(), this.timezone()).format(this.timeFormat);
             }
-            if ((this.givenTimeFlag && this.givenTime) || this.minTime) {
-                this.chosenTime = dayjs.tz(this.minTime || this.givenTime, this.timezone).format(this.timeFormat);
+            else {
+                // Get current time and round to nearest interval using original logic
+                const now = dayjs.tz(dayjs(), this.timezone());
+                const interval = this.interval();
+                const minutes = now.minute();
+                const offset = interval - (minutes % interval);
+                // Round to next interval if we're past halfway point
+                const roundedTime = offset >= interval / 2
+                    ? now.add(offset, "m").second(0).millisecond(0)
+                    : now.subtract(interval - offset, "m").second(0).millisecond(0);
+                initialTime = roundedTime.format(this.timeFormat);
             }
-            chosenTimedayjs = this.getdayjs(this.chosenTime);
-            if (!this.userInputFlag)
-                this.populateDropdown();
-            this.userInputFlag = false;
-            if (this.chosenTime) {
-                this.isInvalid = !this.checkTimeValidity(this.chosenTime.trim());
+            this.chosenTime.set(initialTime);
+            // Set userInputFlag to false to avoid validation issues during initialization
+            this.userInputFlag.set(false);
+            // Populate dropdown first to compute the first interval
+            this.populateDropdown();
+            // Now validate with the computed first interval
+            this.isInvalid.set(!this.checkTimeValidity(this.chosenTime().trim()));
+            let chosenTimedayjs = this.getdayjs(this.chosenTime());
+            // Defer emission to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
                 this.emitTime({
-                    valid: !this.isInvalid,
-                    time: this.chosenTime,
+                    valid: !this.isInvalid(),
+                    time: this.chosenTime(),
                     epoch: chosenTimedayjs.valueOf()
                 });
-                this.calculateClosestInterval(this.chosenTime);
-            }
+            }, 0);
+            // Calculate closest interval
+            this.calculateClosestInterval(this.chosenTime());
+            this._isInitializing = false;
+        }
+        else if (this.givenTime()) {
+            // When givenTime is present, use the given time as the initial value
+            // but the dropdown will start from 12:00 AM
+            this.chosenTime.set(dayjs.tz(this.givenTime(), this.timezone()).format(this.timeFormat));
+            this.userInputFlag.set(false);
+            // Populate dropdown first to compute the first interval
+            this.populateDropdown();
+            // Now validate with the computed first interval
+            this.isInvalid.set(!this.checkTimeValidity(this.chosenTime().trim()));
+            let chosenTimedayjs = this.getdayjs(this.chosenTime());
+            // Defer emission to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
+                this.emitTime({
+                    valid: !this.isInvalid(),
+                    time: this.chosenTime(),
+                    epoch: chosenTimedayjs.valueOf()
+                });
+            }, 0);
+            // Calculate closest interval
+            this.calculateClosestInterval(this.chosenTime());
+            this._isInitializing = false;
+        }
+        else if (this.minTime()) {
+            // Use min time directly - this matches original behavior
+            this.chosenTime.set(dayjs.tz(this.minTime(), this.timezone()).format(this.timeFormat));
+            this.userInputFlag.set(false);
+            // Populate dropdown first to compute the first interval
+            this.populateDropdown();
+            // For minTime, validation should only check format, not time comparison
+            // This matches the original logic where minTime bypasses time validation
+            this.isInvalid.set(!this.checkTimeValidity(this.chosenTime().trim()));
+            let chosenTimedayjs = this.getdayjs(this.chosenTime());
+            // Defer emission to avoid ExpressionChangedAfterItHasBeenCheckedError
+            setTimeout(() => {
+                this.emitTime({
+                    valid: !this.isInvalid(),
+                    time: this.chosenTime(),
+                    epoch: chosenTimedayjs.valueOf()
+                });
+            }, 0);
+            // Calculate closest interval
+            this.calculateClosestInterval(this.chosenTime());
+            this._isInitializing = false;
         }
     }
     emitTime(data) {
@@ -199,13 +288,12 @@ class TimePickerComponent {
     }
     // function to get dayjs object when time is given in string
     getdayjs(time = '00:00') {
-        ;
         if (!time || typeof time !== 'string') {
             throw new Error('Time must be a string');
         }
         let hours;
         let minutes;
-        if (this.clockFormat === 24) {
+        if (this.clockFormat() === 24) {
             hours = parseInt(time.split(':')[0]);
             minutes = parseInt(time.split(':')[1]);
         }
@@ -221,70 +309,88 @@ class TimePickerComponent {
                 hours = 0;
             }
         }
-        return dayjs.tz(this.dateAsEpoch, this.timezone).add(hours, 'h').add(minutes, 'm');
+        // Use the date from dateAsEpoch but set the time to the parsed hours and minutes
+        const baseDate = dayjs.tz(this.dateAsEpoch(), this.timezone());
+        const result = baseDate.hour(hours).minute(minutes).second(0).millisecond(0);
+        return result;
     }
     closeDropdown() {
         this.dispayToolTip = false;
-        this.userInputFlag = false;
-        this.openStatus = false;
+        this.userInputFlag.set(false);
+        this.openStatus.set(false);
         if (this.timepickerDirective)
             this.timepickerDirective.destroyOverlay();
     }
     // toggle timepicker dropdown
     openDropdown() {
         this.dispayToolTip = true;
-        this.openStatus = true;
+        this.openStatus.set(true);
     }
     checkTimeValidity(time) {
         const RE12 = /^(([0][1-9]|1[0-2]):([0-5][0-9])( )?(am|pm|AM|PM))$/i;
         const RE24 = /^([01][0-9]|2[0-3]):[0-5][0-9]$/;
-        const RE = this.clockFormat === 12 ? RE12 : RE24;
+        const RE = this.clockFormat() === 12 ? RE12 : RE24;
+        // Check if the time format is valid first
+        if (!time.match(RE)) {
+            return false;
+        }
+        // Restore proper validation logic
         const timedayjs = this.getdayjs(time);
         let flag = false;
-        // if the first interval is set to the start of the day
-        // or a time is already provided to the component to show
-        // then we don't check its validity against the current time
-        if (this.minTime ||
-            this.givenTime ||
-            (this.firstInterval &&
-                dayjs.tz(this.firstInterval, this.timezone).format(this.timeFormat).valueOf() === dayjs.tz(dayjs(), this.timezone).startOf("day").format(this.timeFormat).valueOf())) {
+        // Original logic: if minTime, givenTime, or firstInterval is start of day, only check format
+        if (this.minTime() ||
+            this.givenTime() ||
+            (this.firstInterval() &&
+                dayjs.tz(this.firstInterval(), this.timezone()).format(this.timeFormat).valueOf() === dayjs.tz(dayjs(), this.timezone()).startOf("day").format(this.timeFormat).valueOf())) {
+            // Only check format validation, not time comparison
             flag = time.match(RE) ? true : false;
         }
         else {
-            flag = time.match(RE) && timedayjs.diff(dayjs.tz(dayjs(), this.timezone), "m") >= 0 ? true : false;
+            // Check against current time for normal cases
+            const currentTime = dayjs.tz(dayjs(), this.timezone());
+            const timeDiff = timedayjs.diff(currentTime, "m");
+            flag = timeDiff >= 0;
         }
         return flag;
     }
     // update chosen time as soon as the user clicks on an interval
     onTimeSelect(time) {
-        this.isInvalid = !this.checkTimeValidity(time.trim());
-        if (!this.isInvalid) {
-            this.chosenTime = time;
-            this.calculateClosestInterval(this.chosenTime);
+        this.isInvalid.set(!this.checkTimeValidity(time.trim()));
+        if (!this.isInvalid()) {
+            this.chosenTime.set(time);
+            this.calculateClosestInterval(this.chosenTime());
         }
         const timedayjs = this.getdayjs(time);
         this.emitTime({
-            valid: !this.isInvalid,
+            valid: !this.isInvalid(),
             time: time,
             epoch: timedayjs.valueOf()
         });
-        this.openStatus = false;
+        this.openStatus.set(false);
         if (this.timepickerDirective)
             this.timepickerDirective.destroyOverlay();
     }
     // checks validity of time on input change and calculates the closest interval
     onTimeChange(time) {
-        this.isInvalid = !this.checkTimeValidity(time.trim());
-        if (!this.isInvalid) {
-            this.userInputFlag = true;
-            this.openStatus = false;
+        // Set user input flag to prevent effects from overriding
+        this.userInputFlag.set(true);
+        // Update the chosenTime signal
+        this.chosenTime.set(time);
+        const isValid = this.checkTimeValidity(time.trim());
+        this.isInvalid.set(!isValid);
+        // Clear user input flag after a delay to allow effects to work again
+        setTimeout(() => {
+            this.userInputFlag.set(false);
+        }, 1000); // 1 second delay
+        if (!this.isInvalid()) {
+            this.openStatus.set(false);
             if (this.timepickerDirective)
                 this.timepickerDirective.destroyOverlay();
             this.calculateClosestInterval(time);
         }
         const timedayjs = this.getdayjs(time);
         this.emitTime({
-            valid: !this.isInvalid,
+            valid: !this.isInvalid(),
             time: time,
             epoch: timedayjs.valueOf()
         });
@@ -292,67 +398,79 @@ class TimePickerComponent {
     calculateClosestInterval(time) {
         let roundedEpoch;
         // Converting time and date to a dayjs object 
-        const chosenDate = dayjs.tz(this.dateAsEpoch, this.timezone).format("DD-MM-YYYY"); // 05-01-2024
-        const parsedTimeWithDate = dayjs.tz(`${chosenDate} ${time}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone);
+        const chosenDate = dayjs.tz(this.dateAsEpoch(), this.timezone()).format("DD-MM-YYYY"); // 05-01-2024
+        const parsedTimeWithDate = dayjs.tz(`${chosenDate} ${time}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone());
         // Converting dayjs object to epoch
         const chosenTimeEpoch = parsedTimeWithDate.valueOf();
-        const offset = this.interval - (dayjs.tz(chosenTimeEpoch, this.timezone).minute() % this.interval);
-        if (this.minTime && !this.givenTime) {
-            this.isHighlighted = 0;
+        const offset = this.interval() - (dayjs.tz(chosenTimeEpoch, this.timezone()).minute() % this.interval());
+        if (this.minTime() && !this.givenTime()) {
+            this.isHighlighted.set(0);
             return;
         }
-        roundedEpoch = offset >= this.interval / 2 ? (dayjs.tz(chosenTimeEpoch, this.timezone).subtract(this.interval - offset, "m")).valueOf() : (dayjs.tz(chosenTimeEpoch, this.timezone).add(offset, "m")).valueOf();
+        roundedEpoch = offset >= this.interval() / 2 ? (dayjs.tz(chosenTimeEpoch, this.timezone()).subtract(this.interval() - offset, "m")).valueOf() : (dayjs.tz(chosenTimeEpoch, this.timezone()).add(offset, "m")).valueOf();
         // finding the index of element that needs to be highlighted
-        if (chosenTimeEpoch > dayjs.tz(this.dateAsEpoch, this.timezone).endOf("day").subtract(this.interval, "m").valueOf()) {
-            this.isHighlighted = this.timeIntervals.length - 1;
+        if (chosenTimeEpoch > dayjs.tz(this.dateAsEpoch(), this.timezone()).endOf("day").subtract(this.interval(), "m").valueOf()) {
+            this.isHighlighted.set(this.timeIntervals().length - 1);
         }
         else {
-            const roundedEpochdayjs = dayjs.tz(roundedEpoch, this.timezone);
-            this.isHighlighted = this.timeIntervals.findIndex(interval => {
-                const intervalObj = dayjs.tz(`${chosenDate} ${interval}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone);
+            const roundedEpochdayjs = dayjs.tz(roundedEpoch, this.timezone());
+            this.isHighlighted.set(this.timeIntervals().findIndex(interval => {
+                const intervalObj = dayjs.tz(`${chosenDate} ${interval}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone());
                 return intervalObj.isSame(roundedEpochdayjs);
-            });
+            }));
         }
     }
     // populates the dropdown according to the first interval received
     populateDropdown() {
-        this.timeIntervals = [];
+        this.timeIntervals.set([]);
+        // Compute the effective first interval
+        let effectiveFirstInterval = this.firstInterval();
         // if picker is used as an individual component
-        if (!this.firstInterval) {
+        if (!effectiveFirstInterval) {
             // firstInterval is initialised according to the current time
             // if the date is same as the current date
-            if (dayjs.tz(this.dateAsEpoch, this.timezone).format("DD-MM-YYYY") === dayjs.tz(dayjs(), this.timezone).format("DD-MM-YYYY") && !this.minTime) {
-                const offset = this.interval - (dayjs.tz(dayjs(), this.timezone).minute() % this.interval);
-                this.firstInterval = dayjs.tz(dayjs(), this.timezone).add(offset, "m").valueOf();
+            if (dayjs.tz(this.dateAsEpoch(), this.timezone()).format("DD-MM-YYYY") === dayjs.tz(dayjs(), this.timezone()).format("DD-MM-YYYY") && !this.minTime()) {
+                const offset = this.interval() - (dayjs.tz(dayjs(), this.timezone()).minute() % this.interval());
+                effectiveFirstInterval = dayjs.tz(dayjs(), this.timezone()).add(offset, "m").valueOf();
             }
             // if minimum time to show is provided
-            else if (this.minTime) {
-                const offset = this.interval - (dayjs.tz(this.minTime, this.timezone).minute() % this.interval);
-                this.firstInterval = dayjs.tz(this.minTime, this.timezone).add(offset, "m").valueOf();
+            else if (this.minTime()) {
+                const minTimeDayjs = dayjs.tz(this.minTime(), this.timezone());
+                const offset = this.interval() - (minTimeDayjs.minute() % this.interval());
+                effectiveFirstInterval = minTimeDayjs.add(offset, "m").valueOf();
             }
             // else the firstInterval is initialised as start of day
             else {
-                this.firstInterval = dayjs.tz(dayjs(), this.timezone).startOf("day").valueOf();
+                effectiveFirstInterval = dayjs.tz(dayjs(), this.timezone()).startOf("day").valueOf();
             }
         }
-        if (this.givenTime && this.givenTimeFlag) {
-            this.firstInterval = dayjs.tz(this.givenTime, this.timezone).startOf('d').valueOf();
-            this.givenTimeFlag = false;
+        if (this.givenTime()) {
+            // When givenTime is present, always start from 12:00 AM (start of day)
+            // regardless of whether the time has passed or not
+            effectiveFirstInterval = dayjs.tz(this.dateAsEpoch(), this.timezone()).startOf('day').valueOf();
+            this.givenTimeFlag.set(false);
         }
-        const dateAsString = dayjs.tz(this.dateAsEpoch, this.timezone).format('DD-MM-YYYY');
-        const intervalAsString = dayjs.tz(this.firstInterval, this.timezone).format(this.timeFormat);
-        let start = dayjs.tz(`${dateAsString} ${intervalAsString}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone);
-        const end = dayjs.tz(this.dateAsEpoch, this.timezone).endOf('d');
+        // Store the computed first interval for later use
+        this.computedFirstInterval = effectiveFirstInterval;
+        const dateAsString = dayjs.tz(this.dateAsEpoch(), this.timezone()).format('DD-MM-YYYY');
+        const intervalAsString = dayjs.tz(effectiveFirstInterval, this.timezone()).format(this.timeFormat);
+        let start = dayjs.tz(`${dateAsString} ${intervalAsString}`, `DD-MM-YYYY ${this.timeFormat}`, this.timezone());
+        const end = dayjs.tz(this.dateAsEpoch(), this.timezone()).endOf('d');
         while (start.valueOf() < end.valueOf()) {
-            this.timeIntervals.push(start.format(this.timeFormat));
-            start = start.add(this.interval, "m");
+            this.timeIntervals.update(intervals => [...intervals, start.format(this.timeFormat)]);
+            start = start.add(this.interval(), "m");
         }
-        // if the start time is equal to the interval just before midnight
-        // and the start date = end date
-        // push 11:59pm only
-        if (this.timeIntervals.length === 0) {
-            this.chosenTime = dayjs.tz(dayjs(), this.timezone).endOf("d").format(this.timeFormat);
-            this.timeIntervals.push(dayjs.tz(dayjs(), this.timezone).endOf("d").format(this.timeFormat));
+        // NEW: Handle end-of-day case - if firstInterval is at or very close to end of day
+        // and we're on the same date, show only 11:59 PM
+        const endOfDay = dayjs.tz(this.dateAsEpoch(), this.timezone()).endOf("d");
+        const firstIntervalDayjs = dayjs.tz(effectiveFirstInterval, this.timezone());
+        // Check if firstInterval is at or very close to end of day (within 1 minute)
+        const isAtEndOfDay = firstIntervalDayjs.isSame(endOfDay, 'day') &&
+            firstIntervalDayjs.diff(endOfDay, 'minute') >= -1;
+        if (isAtEndOfDay || this.timeIntervals().length === 0) {
+            // Clear existing intervals and add only 11:59 PM
+            this.timeIntervals.set([]);
+            this.timeIntervals.update(intervals => [...intervals, endOfDay.format(this.timeFormat)]);
         }
     }
     ngOnDestroy() {
@@ -371,59 +489,27 @@ class TimePickerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timepickerDirective = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltipDirective = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timeIntervalRefs = _t);
-        } }, inputs: { clockFormat: "clockFormat", timezone: "timezone", height: "height", inputWidth: "inputWidth", dropdownWidth: "dropdownWidth", interval: "interval", dateAsEpoch: "dateAsEpoch", firstInterval: "firstInterval", rangeValidity: "rangeValidity", showTooltip: "showTooltip", givenTime: "givenTime", minTime: "minTime", triggerChange: "triggerChange", disable: "disable" }, outputs: { timeEmitter: "timeEmitter" }, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 19, consts: [["input", ""], ["dropdownContainer", ""], ["dropdown", ""], ["timeInterval", ""], [1, "timepicker-container", 3, "ngStyle", "ngClass"], ["type", "text", "misToolTip", "", "cdkOverlayOrigin", "", 1, "h7", 3, "ngModelChange", "click", "ngModel", "ngClass", "ngStyle", "showToolTip", "text", "position", "showOnHover"], ["libDropdownScroll", "", "libTimepicker", "", 3, "statusEmitter", "originEl", "openStatus"], ["class", "timepicker-dropdown", 3, "ngStyle", 4, "ngIf"], [1, "timepicker-dropdown", 3, "ngStyle"], [3, "ngClass", "click", 4, "ngFor", "ngForOf"], [3, "click", "ngClass"], ["class", "ic-ui-check-24 selected-icon", 4, "ngIf"], [1, "ic-ui-check-24", "selected-icon"]], template: function TimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { clockFormat: [1, "clockFormat"], timezone: [1, "timezone"], height: [1, "height"], inputWidth: [1, "inputWidth"], dropdownWidth: [1, "dropdownWidth"], interval: [1, "interval"], dateAsEpoch: [1, "dateAsEpoch"], firstInterval: [1, "firstInterval"], rangeValidity: [1, "rangeValidity"], showTooltip: [1, "showTooltip"], givenTime: [1, "givenTime"], minTime: [1, "minTime"], triggerChange: [1, "triggerChange"], disable: [1, "disable"] }, outputs: { timeEmitter: "timeEmitter" }, decls: 5, vars: 19, consts: [["input", ""], ["dropdownContainer", ""], ["dropdown", ""], ["timeInterval", ""], [1, "timepicker-container", 3, "ngStyle", "ngClass"], ["type", "text", "misToolTip", "", "cdkOverlayOrigin", "", 1, "h7", 3, "ngModelChange", "click", "ngModel", "ngClass", "ngStyle", "showToolTip", "text", "position", "showOnHover"], ["libTimepicker", "", 3, "statusEmitter", "originEl", "openStatus"], ["class", "timepicker-dropdown", 3, "ngStyle", 4, "ngIf"], [1, "timepicker-dropdown", 3, "ngStyle"], [3, "ngClass", "click", 4, "ngFor", "ngForOf"], [3, "click", "ngClass"], ["class", "ic-ui-check-24 selected-icon", 4, "ngIf"], [1, "ic-ui-check-24", "selected-icon"]], template: function TimePickerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 4)(1, "input", 5, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function TimePickerComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.chosenTime, $event) || (ctx.chosenTime = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function TimePickerComponent_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimeChange(ctx.chosenTime)); })("click", function TimePickerComponent_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openDropdown()); });
+            i0.ɵɵlistener("ngModelChange", function TimePickerComponent_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTimeChange($event)); })("click", function TimePickerComponent_Template_input_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openDropdown()); });
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, TimePickerComponent_ng_template_3_Template, 1, 1, "ng-template", 6, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵlistener("statusEmitter", function TimePickerComponent_Template_ng_template_statusEmitter_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeDropdown()); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const input_r6 = i0.ɵɵreference(2);
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(11, _c2, ctx.height))("ngClass", i0.ɵɵpureFunction1(13, _c3, ctx.disable));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(11, _c2, ctx.height()))("ngClass", i0.ɵɵpureFunction1(13, _c3, ctx.disable()));
             i0.ɵɵadvance();
-            i0.ɵɵtwoWayProperty("ngModel", ctx.chosenTime);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c4, ctx.isInvalid || !ctx.rangeValidity))("ngStyle", i0.ɵɵpureFunction1(17, _c5, ctx.inputWidth))("showToolTip", ctx.showTooltip && (ctx.isInvalid || !ctx.rangeValidity) && ctx.dispayToolTip)("text", "Invalid Time")("position", "top")("showOnHover", false);
+            i0.ɵɵproperty("ngModel", ctx.chosenTime())("ngClass", i0.ɵɵpureFunction1(15, _c4, ctx.isInvalid() || !ctx.rangeValidity()))("ngStyle", i0.ɵɵpureFunction1(17, _c5, ctx.inputWidth()))("showToolTip", ctx.showTooltip() && (ctx.isInvalid() || !ctx.rangeValidity()) && ctx.dispayToolTip)("text", "Invalid Time")("position", "top")("showOnHover", false);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("originEl", input_r6)("openStatus", ctx.openStatus);
+            i0.ɵɵproperty("originEl", input_r6)("openStatus", ctx.openStatus());
         } }, dependencies: [i1$1.NgClass, i1$1.NgForOf, i1$1.NgIf, i1$1.NgStyle, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ToolTipDirective, i1.CdkOverlayOrigin, TimepickerDirective], styles: [".h1[_ngcontent-%COMP%]{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2[_ngcontent-%COMP%]{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3[_ngcontent-%COMP%]{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4[_ngcontent-%COMP%]{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b[_ngcontent-%COMP%]{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5[_ngcontent-%COMP%]{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b[_ngcontent-%COMP%]{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b[_ngcontent-%COMP%]{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8[_ngcontent-%COMP%]{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9[_ngcontent-%COMP%]{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b[_ngcontent-%COMP%]{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link[_ngcontent-%COMP%]{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1[_ngcontent-%COMP%]{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2[_ngcontent-%COMP%]{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*[_ngcontent-%COMP%]{box-sizing:border-box;font-family:Lato}.timepicker-container[_ngcontent-%COMP%]{display:inline-block;position:relative}input[_ngcontent-%COMP%]{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input[_ngcontent-%COMP%]:hover{background:#f5f7fc}input[_ngcontent-%COMP%]:focus, input[_ngcontent-%COMP%]:active{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown[_ngcontent-%COMP%]{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}.timepicker-dropdown[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin:0;padding:0}.timepicker-dropdown[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .selected-icon[_ngcontent-%COMP%]{font-weight:900}.highlight[_ngcontent-%COMP%]{background-color:#f5f7fc;border-radius:6px}.invalid[_ngcontent-%COMP%]{background:#fae1ea!important;border-bottom:1px solid #b00020!important}.disable[_ngcontent-%COMP%]{pointer-events:none!important;opacity:.5!important}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimePickerComponent, [{
         type: Component,
-        args: [{ selector: "mis-timepicker", template: "<div class=\"timepicker-container\" [ngStyle]=\"{ height: height }\" [ngClass]=\"{'disable': disable}\">\n  <input\n    type=\"text\"\n    [(ngModel)]=\"chosenTime\"\n    (ngModelChange)=\"onTimeChange(chosenTime)\"\n    [ngClass]=\"{ invalid: isInvalid || !rangeValidity }\"\n    [ngStyle]=\"{ width: inputWidth }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip && (isInvalid || !rangeValidity) && dispayToolTip\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libDropdownScroll libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth || inputWidth }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals; index as i\" [ngClass]=\"{ highlight: i === isHighlighted }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:focus,input:active{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}.disable{pointer-events:none!important;opacity:.5!important}\n"] }]
-    }], () => [], { clockFormat: [{
-            type: Input
-        }], timezone: [{
-            type: Input
-        }], height: [{
-            type: Input
-        }], inputWidth: [{
-            type: Input
-        }], dropdownWidth: [{
-            type: Input
-        }], interval: [{
-            type: Input
-        }], dateAsEpoch: [{
-            type: Input
-        }], firstInterval: [{
-            type: Input
-        }], rangeValidity: [{
-            type: Input
-        }], showTooltip: [{
-            type: Input
-        }], givenTime: [{
-            type: Input
-        }], minTime: [{
-            type: Input
-        }], triggerChange: [{
-            type: Input
-        }], disable: [{
-            type: Input
-        }], timeEmitter: [{
-            type: Output
-        }], input: [{
+        args: [{ selector: "mis-timepicker", template: "<div class=\"timepicker-container\" [ngStyle]=\"{ height: height() }\" [ngClass]=\"{'disable': disable()}\">\n  <input\n    type=\"text\"\n    [ngModel]=\"chosenTime()\"\n    (ngModelChange)=\"onTimeChange($event)\"\n    [ngClass]=\"{ invalid: isInvalid() || !rangeValidity() }\"\n    [ngStyle]=\"{ width: inputWidth() }\"\n    (click)=\"openDropdown()\"\n    misToolTip\n    [showToolTip]=\"showTooltip() && (isInvalid() || !rangeValidity()) && dispayToolTip\"\n    [text]=\"'Invalid Time'\"\n    [position]=\"'top'\"\n    [showOnHover]=\"false\"\n    #input\n    cdkOverlayOrigin\n    class=\"h7\"\n  />\n\n  <ng-template #dropdownContainer libTimepicker [originEl]=\"input\" [openStatus]=\"openStatus()\" (statusEmitter)=\"closeDropdown()\">\n    <div *ngIf=\"openStatus()\" class=\"timepicker-dropdown\" [ngStyle]=\"{ width: dropdownWidth() || inputWidth() }\">\n      <ul #dropdown>\n        <li #timeInterval (click)=\"onTimeSelect(interval)\" *ngFor=\"let interval of timeIntervals(); index as i\" [ngClass]=\"{ highlight: i === isHighlighted() }\">\n          {{ interval }}\n          <div class=\"ic-ui-check-24 selected-icon\" *ngIf=\"interval === chosenTime()\"></div>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", styles: [".h1{font-size:40px;font-weight:400;letter-spacing:0px;line-height:48px}.h2{font-size:32px;font-weight:400;letter-spacing:0px;line-height:40px}.h3{font-size:28px;font-weight:400;letter-spacing:0px;line-height:36px}.h4{font-size:24px;font-weight:400;letter-spacing:0px;line-height:32px}.h5-b{font-size:20px;font-weight:700;letter-spacing:.25px;line-height:28px}.h5{font-size:20px;font-weight:400;letter-spacing:.15px;line-height:28px}.h6-b{font-size:16px;font-weight:700;letter-spacing:0px;line-height:24px}.h6{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.p{font-size:16px;font-weight:400;letter-spacing:0px;line-height:180%}.h7-b{font-size:14px;font-weight:700;letter-spacing:.25px;line-height:20px}.h7{font-size:14px;font-weight:400;letter-spacing:.2px;line-height:20px}.h8-b{font-size:12px;font-weight:700;letter-spacing:.25px;line-height:18px}.h8{font-size:12px;font-weight:400;letter-spacing:.2px;line-height:18px}.h9{font-size:10px;font-weight:400;letter-spacing:0px;line-height:15px}.btn-lg-b{font-size:16px;font-weight:700;letter-spacing:.5px;line-height:24px}.btn-lg{font-size:16px;font-weight:400;letter-spacing:.2px;line-height:24px}.btn-sm{font-size:14px;font-weight:400;letter-spacing:.25px;line-height:20px}.btn-link{font-size:16px;font-weight:400;letter-spacing:0px;line-height:24px}.display-1{font-size:48px;font-weight:400;letter-spacing:0px;line-height:56px}.display-2{font-size:14px;font-weight:400;letter-spacing:.5px;line-height:20px}*{box-sizing:border-box;font-family:Lato}.timepicker-container{display:inline-block;position:relative}input{text-align:center;border:none;border-bottom:1px solid #e0e0e0;outline:none;height:100%;width:100px;padding:4px 16px}input:hover{background:#f5f7fc}input:focus,input:active{background:#e6ebf7;border-bottom:1px solid #0937b2}.timepicker-dropdown{position:absolute;top:calc(100% + 4px);left:0;max-height:200px;overflow-y:auto;border:1px solid #e0e0e0;box-shadow:0 12px 24px #0000001f,0 4px 8px #0000001f;border-radius:4px;padding:8px;background:#fff}.timepicker-dropdown::-webkit-scrollbar{display:none}.timepicker-dropdown ul{margin:0;padding:0}.timepicker-dropdown li{text-align:start;list-style:none;padding:6px 12px;cursor:pointer;font-size:14px;color:#181f33;display:flex;justify-content:space-between;align-items:center}.timepicker-dropdown li:hover{background:#f5f7fc;border-radius:6px}.timepicker-dropdown li .selected-icon{font-weight:900}.highlight{background-color:#f5f7fc;border-radius:6px}.invalid{background:#fae1ea!important;border-bottom:1px solid #b00020!important}.disable{pointer-events:none!important;opacity:.5!important}\n"] }]
+    }], () => [], { input: [{
             type: ViewChild,
             args: ["input", { static: true }]
         }], timepickerDirective: [{