@bsginstitute/bsg-integra 0.0.2 → 0.0.3

package/fesm2022/bsginstitute-bsg-integra.mjs

@@ -6538,7 +6538,7 @@ const switchThumbVariants = cva(clsx(
             false: 'translate-x-0',
         },
         size: {
-            sm: 'size-3 data-[checked=true]:translate-x-3',
+            sm: 'size-3 data-[checked=true]:translate-x-5',
             default: 'size-4 data-[checked=true]:translate-x-4',
             lg: 'size-5 data-[checked=true]:translate-x-5',
         },
@@ -7263,6 +7263,35 @@ class TimePickerComponent {
         this.selectedHour.set(hour);
         this.selectedMinute.set(Math.min(snappedMinute, 59));
         this.updateTimeValue();
+        // Scroll to show selected values
+        this.scrollToSelected();
+    }
+    /** Scroll both lists to show the selected values centered */
+    scrollToSelected() {
+        // Use setTimeout to allow Angular to render the changes first
+        setTimeout(() => {
+            this.scrollToElement(this.hoursList, this.selectedHour());
+            this.scrollToElement(this.minutesList, this.selectedMinute());
+        }, 0);
+    }
+    /** Scroll a list to center the element with the given value */
+    scrollToElement(listRef, value) {
+        if (!listRef?.nativeElement)
+            return;
+        const listElement = listRef.nativeElement;
+        const optionElement = listElement.querySelector(`[data-value="${value}"]`);
+        if (optionElement) {
+            // Calculate scroll position to center the element
+            const listHeight = listElement.clientHeight;
+            const optionTop = optionElement.offsetTop;
+            const optionHeight = optionElement.offsetHeight;
+            // Scroll to center the option in the list
+            const scrollTop = optionTop - listHeight / 2 + optionHeight / 2;
+            listElement.scrollTo({
+                top: Math.max(0, scrollTop),
+                behavior: 'smooth',
+            });
+        }
     }
     clearTime() {
         if (this.state() === 'disabled')
@@ -7285,8 +7314,13 @@ class TimePickerComponent {
     toggleDropdown() {
         if (this.state() === 'disabled')
             return;
+        const wasOpen = this.isOpen();
         this.isOpen.update((v) => !v);
         this.openChange.emit(this.isOpen());
+        // Scroll to selected values when opening
+        if (!wasOpen && this.internalValue()) {
+            this.scrollToSelected();
+        }
     }
     openDropdown() {
         if (this.state() === 'disabled')
@@ -7294,6 +7328,10 @@ class TimePickerComponent {
         if (!this.isOpen()) {
             this.isOpen.set(true);
             this.openChange.emit(true);
+            // Scroll to selected values when opening
+            if (this.internalValue()) {
+                this.scrollToSelected();
+            }
         }
     }
     closeDropdown() {