@tedi-design-system/angular 9.0.0-rc.3 → 9.0.0-rc.5

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -60,7 +60,8 @@ class IconComponent {
     variant = input("outlined", ...(ngDevMode ? [{ debugName: "variant" }] : []));
     /**
      * Type of Material Symbols icon style.
-     * It is recommended to only use one type throughout your app.
+     * It is recommended to only use one type throughout your app, and to load only that type's font
+     * (`icons/<type>.css` with `index-without-icons.css`) instead of all three via `index.css`.
      * @default outlined
      */
     type = input("outlined", ...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -19258,9 +19259,32 @@ function normalizeTime(input) {
 }
 
 const DEFAULT_ITEM_HEIGHT = 40;
-const SMOOTH_SCROLL_LOCK_MS = 400;
-const INSTANT_SCROLL_LOCK_MS = 50;
+/** Quiet period before a programmatic scroll counts as finished. */
+const SCROLL_SETTLE_QUIET_MS = 200;
+/** Releases a column whose programmatic scroll never fired a scroll event. */
+const SCROLL_SETTLE_MAX_WAIT_MS = 1000;
 const SCROLL_DEBOUNCE_MS = 150;
+/**
+ * How long a gesture stays armed before it has scrolled anything. A pointer can
+ * go down on a column's padding and never move it, and nothing else would clear
+ * the flag. Cancelled as soon as the gesture does scroll.
+ */
+const GESTURE_WITHOUT_SCROLL_MS = 500;
+/**
+ * The gestures that can scroll a column. Scrollbars are hidden and scrolling
+ * keys are handled in `onColumnKeydown`, so a scroll with none of these behind
+ * it was not started by the user.
+ */
+const USER_GESTURE_EVENTS = [
+    "wheel",
+    "touchstart",
+    "touchmove",
+    "pointerdown",
+];
+const USER_GESTURE_OPTIONS = {
+    capture: true,
+    passive: true,
+};
 class TimePickerComponent {
     /** Selected time in `HH:mm` format. Two-way bindable. */
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -19288,12 +19312,35 @@ class TimePickerComponent {
     onChange = () => { };
     onTouched = () => { };
     initialized = false;
+    /**
+     * Held until the programmatic scroll has actually settled, not for a fixed
+     * time: `scrollTo` reports its own events plus the scroll-snap adjustment on
+     * top, and the engine decides when those arrive.
+     */
     isProgrammaticScroll = {
         hour: false,
         minute: false,
     };
+    isSmoothProgrammaticScroll = {
+        hour: false,
+        minute: false,
+    };
+    /** Only a scroll with a gesture behind it may change the value. */
+    hasUserGesture = {
+        hour: false,
+        minute: false,
+    };
+    /** Guards against a correction and the engine trading scrolls indefinitely. */
+    hasCorrectedScroll = {
+        hour: false,
+        minute: false,
+    };
+    programmaticScrollTarget = {};
     scrollLockTimer = {};
+    /** Latest moment a programmatic scroll may still own its column. */
+    scrollLockDeadline = {};
     scrollDebounceTimer = {};
+    gestureTimer = {};
     cachedItemHeight = null;
     resizeObserver = null;
     hourScrollIndex = signal(0, ...(ngDevMode ? [{ debugName: "hourScrollIndex" }] : []));
@@ -19370,21 +19417,53 @@ class TimePickerComponent {
         this.initialized = true;
         this.cachedItemHeight = this.measureItemHeight();
         if (typeof ResizeObserver !== "undefined") {
-            this.resizeObserver = new ResizeObserver(() => (this.cachedItemHeight = this.measureItemHeight()));
+            this.resizeObserver = new ResizeObserver(() => this.syncItemHeight());
             this.resizeObserver.observe(this.el.nativeElement);
         }
+        const host = this.el.nativeElement;
+        USER_GESTURE_EVENTS.forEach((name) => {
+            host.addEventListener(name, this.handleUserGesture, USER_GESTURE_OPTIONS);
+        });
         requestAnimationFrame(() => this.alignScroll("instant"));
     }
-    measureItemHeight() {
+    /**
+     * The height a row is actually rendered at, or 0 when it has no box at all
+     * (the picker is hidden, or has not been laid out yet).
+     */
+    measureItemBox() {
         const root = this.el.nativeElement;
         const item = root.querySelector(".tedi-time-picker__item");
-        return item?.offsetHeight || DEFAULT_ITEM_HEIGHT;
+        return item?.offsetHeight ?? 0;
+    }
+    measureItemHeight() {
+        return this.measureItemBox() || DEFAULT_ITEM_HEIGHT;
     }
     getItemHeight() {
         return this.cachedItemHeight ?? this.measureItemHeight();
     }
+    /**
+     * Column offsets are derived from the item height, so when the height changes
+     * (a breakpoint switch, or the first real measurement after
+     * `DEFAULT_ITEM_HEIGHT` stood in) they no longer land on the highlighted row.
+     */
+    syncItemHeight() {
+        // A hidden element measures 0 and ResizeObserver fires for it, so keep the
+        // last height actually rendered rather than caching the fallback.
+        const height = this.measureItemBox();
+        if (!height || height === this.cachedItemHeight)
+            return;
+        this.cachedItemHeight = height;
+        if (this.variant() !== "scroll")
+            return;
+        this.scrollColumnToIndex("hour", this.hourScrollIndex(), "instant");
+        this.scrollColumnToIndex("minute", this.minuteScrollIndex(), "instant");
+    }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        const host = this.el.nativeElement;
+        USER_GESTURE_EVENTS.forEach((name) => {
+            host.removeEventListener(name, this.handleUserGesture, USER_GESTURE_OPTIONS);
+        });
         Object.keys(this.scrollLockTimer).forEach((k) => {
             const t = this.scrollLockTimer[k];
             if (t)
@@ -19395,6 +19474,11 @@ class TimePickerComponent {
             if (t)
                 clearTimeout(t);
         });
+        Object.keys(this.gestureTimer).forEach((k) => {
+            const t = this.gestureTimer[k];
+            if (t)
+                clearTimeout(t);
+        });
     }
     writeValue(value) {
         this.value.set(value);
@@ -19445,6 +19529,9 @@ class TimePickerComponent {
     onHourClick(hour) {
         if (this.isDisabled())
             return;
+        // The pointer went down to pick a row, not to scroll the column.
+        this.hasUserGesture.hour = false;
+        this.clearGestureTimer("hour");
         const idx = parseInt(hour, 10);
         this.scrollColumnToIndex("hour", idx, "smooth");
         this.selectHour(hour);
@@ -19453,6 +19540,8 @@ class TimePickerComponent {
     onMinuteClick(minute) {
         if (this.isDisabled())
             return;
+        this.hasUserGesture.minute = false;
+        this.clearGestureTimer("minute");
         const list = this.minutes();
         const idx = list.indexOf(minute);
         if (idx >= 0)
@@ -19522,33 +19611,125 @@ class TimePickerComponent {
                 return null;
         }
     }
+    handleUserGesture = (event) => {
+        const target = event.target;
+        const column = target?.closest?.(".tedi-time-picker__column") ?? null;
+        if (!column)
+            return;
+        let type = null;
+        if (column === this.getColumnElement("hour"))
+            type = "hour";
+        if (column === this.getColumnElement("minute"))
+            type = "minute";
+        if (!type)
+            return;
+        this.hasUserGesture[type] = true;
+        this.hasCorrectedScroll[type] = false;
+        this.armGestureTimer(type);
+    };
+    /**
+     * Bounds a gesture that never scrolls. Without it one pointer-down on a
+     * column's padding would leave it marked user-driven forever, and the next
+     * offset the engine handed it would be committed as a value.
+     */
+    armGestureTimer(type) {
+        this.clearGestureTimer(type);
+        this.gestureTimer[type] = setTimeout(() => {
+            this.hasUserGesture[type] = false;
+            delete this.gestureTimer[type];
+        }, GESTURE_WITHOUT_SCROLL_MS);
+    }
+    clearGestureTimer(type) {
+        const existing = this.gestureTimer[type];
+        if (existing)
+            clearTimeout(existing);
+        delete this.gestureTimer[type];
+    }
+    /**
+     * Precedence, highest first: a gesture on this column (the offset is the
+     * user's, and it takes over any animation still running), a programmatic
+     * scroll (its own echo, never re-read as a selection), or neither, which
+     * means the engine moved it and the column goes back on the value's row.
+     */
     onColumnScroll(type) {
         const column = this.getColumnElement(type);
         if (!column)
             return;
+        if (this.hasUserGesture[type]) {
+            // The debounce owns the flag from here, not the no-scroll timeout.
+            this.clearGestureTimer(type);
+            this.clearProgrammaticScroll(type);
+            this.setScrollIndex(type, this.indexFromScroll(type, column));
+            this.scheduleScrollSelection(type);
+            return;
+        }
+        if (this.isProgrammaticScroll[type]) {
+            // Keep the lock open for as long as events keep arriving, so a column
+            // that is still settling (a snap adjustment on top of the scroll, a slow
+            // frame) stays owned by the scroll that started it.
+            this.releaseScrollLockAfter(type, SCROLL_SETTLE_QUIET_MS);
+            // A non-smooth programmatic scroll has already set the authoritative
+            // index. Re-deriving it from scrollTop would move the highlight to a
+            // neighbouring row whenever the measured item height and the rendered one
+            // disagree. Smooth ones fall through: their highlight tracks the running
+            // animation.
+            if (this.isSmoothProgrammaticScroll[type]) {
+                this.setScrollIndex(type, this.indexFromScroll(type, column));
+                return;
+            }
+            // A snap adjustment settles on the row next to the offset it was given,
+            // so anything further out is not this scroll finishing.
+            const target = this.programmaticScrollTarget[type] ?? column.scrollTop;
+            if (Math.abs(column.scrollTop - target) <= this.getItemHeight())
+                return;
+        }
+        this.restoreColumnPosition(type);
+    }
+    indexFromScroll(type, column) {
         const list = type === "hour" ? this.hours : this.minutes();
         const rawIndex = Math.round(column.scrollTop / this.getItemHeight());
-        const index = Math.max(0, Math.min(rawIndex, list.length - 1));
+        return Math.max(0, Math.min(rawIndex, list.length - 1));
+    }
+    setScrollIndex(type, index) {
         if (type === "hour")
             this.hourScrollIndex.set(index);
         else
             this.minuteScrollIndex.set(index);
-        if (this.isProgrammaticScroll[type])
-            return;
+    }
+    scheduleScrollSelection(type) {
         const existing = this.scrollDebounceTimer[type];
         if (existing)
             clearTimeout(existing);
         this.scrollDebounceTimer[type] = setTimeout(() => {
-            const col = this.getColumnElement(type);
-            if (!col)
+            delete this.scrollDebounceTimer[type];
+            this.hasUserGesture[type] = false;
+            this.clearGestureTimer(type);
+            const column = this.getColumnElement(type);
+            if (!column)
                 return;
-            const finalIdx = Math.max(0, Math.min(Math.round(col.scrollTop / this.getItemHeight()), list.length - 1));
+            const list = type === "hour" ? this.hours : this.minutes();
+            const index = this.indexFromScroll(type, column);
             if (type === "hour")
-                this.selectHour(list[finalIdx]);
+                this.selectHour(list[index]);
             else
-                this.selectMinute(list[finalIdx]);
+                this.selectMinute(list[index]);
         }, SCROLL_DEBOUNCE_MS);
     }
+    /**
+     * Gecko hands a torn-down scroll container's offset to the one replacing it
+     * in the same position, so a picker can arrive already scrolled to the
+     * previous picker's row. Nothing marks that as not-the-user, which is how
+     * `09:30` came to render and report `14:06`.
+     */
+    restoreColumnPosition(type) {
+        if (this.hasCorrectedScroll[type])
+            return;
+        const index = type === "hour" ? this.selectedHourIndex() : this.selectedMinuteIndex();
+        // Only a correction that moved the column spends the one-shot budget.
+        if (this.scrollColumnToIndex(type, index, "instant")) {
+            this.hasCorrectedScroll[type] = true;
+        }
+    }
     /** Roving-tabindex helper for dropdown items: only the selected item (or the first
      * when nothing is selected yet) is in the tab sequence. */
     getDropdownTabIndex(index) {
@@ -19638,21 +19819,30 @@ class TimePickerComponent {
             return;
         const targetHour = this.selectedHourIndex();
         const targetMinute = this.selectedMinuteIndex();
+        // A fresh alignment is a fresh start for the correction guard.
+        this.hasCorrectedScroll.hour = false;
+        this.hasCorrectedScroll.minute = false;
         if (behavior !== "smooth") {
             this.hourScrollIndex.set(targetHour);
             this.minuteScrollIndex.set(targetMinute);
         }
-        if (!this.isProgrammaticScroll.hour) {
+        // Only a smooth scroll is worth protecting from a realignment: it is still
+        // animating towards the value that started it, and an instant scrollTo to
+        // the same row would cut that animation short. An instant scroll has
+        // already arrived, so a new value must be allowed to move the column even
+        // while the column is settling.
+        if (!this.isSmoothProgrammaticScroll.hour) {
             this.scrollColumnToIndex("hour", targetHour, behavior);
         }
-        if (!this.isProgrammaticScroll.minute) {
+        if (!this.isSmoothProgrammaticScroll.minute) {
             this.scrollColumnToIndex("minute", targetMinute, behavior);
         }
     }
+    /** Returns whether a scroll was actually issued. */
     scrollColumnToIndex(type, index, behavior = "auto") {
         const column = this.getColumnElement(type);
         if (!column)
-            return;
+            return false;
         const target = index * this.getItemHeight();
         if (behavior !== "smooth") {
             if (type === "hour")
@@ -19661,20 +19851,46 @@ class TimePickerComponent {
                 this.minuteScrollIndex.set(index);
         }
         if (Math.abs(column.scrollTop - target) < 1)
-            return;
+            return false;
         this.isProgrammaticScroll[type] = true;
-        const existing = this.scrollLockTimer[type];
-        if (existing)
-            clearTimeout(existing);
+        this.isSmoothProgrammaticScroll[type] = behavior === "smooth";
+        this.programmaticScrollTarget[type] = target;
         if (typeof column.scrollTo === "function") {
             column.scrollTo({ top: target, behavior });
         }
         else {
             column.scrollTop = target;
         }
+        this.scrollLockDeadline[type] = Date.now() + SCROLL_SETTLE_MAX_WAIT_MS;
+        this.releaseScrollLockAfter(type, SCROLL_SETTLE_MAX_WAIT_MS);
+        return true;
+    }
+    releaseScrollLockAfter(type, delay) {
+        const existing = this.scrollLockTimer[type];
+        if (existing)
+            clearTimeout(existing);
+        const deadline = this.scrollLockDeadline[type];
+        const wait = deadline === undefined
+            ? delay
+            : Math.max(0, Math.min(delay, deadline - Date.now()));
         this.scrollLockTimer[type] = setTimeout(() => {
             this.isProgrammaticScroll[type] = false;
-        }, behavior === "smooth" ? SMOOTH_SCROLL_LOCK_MS : INSTANT_SCROLL_LOCK_MS);
+            this.isSmoothProgrammaticScroll[type] = false;
+            delete this.programmaticScrollTarget[type];
+            delete this.scrollLockTimer[type];
+            delete this.scrollLockDeadline[type];
+        }, wait);
+    }
+    /** Drops every trace of a programmatic scroll, target offset included. */
+    clearProgrammaticScroll(type) {
+        const existing = this.scrollLockTimer[type];
+        if (existing)
+            clearTimeout(existing);
+        delete this.scrollLockTimer[type];
+        delete this.scrollLockDeadline[type];
+        this.isProgrammaticScroll[type] = false;
+        this.isSmoothProgrammaticScroll[type] = false;
+        delete this.programmaticScrollTarget[type];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: TimePickerComponent, isStandalone: true, selector: "tedi-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, timeSlots: { classPropertyName: "timeSlots", publicName: "timeSlots", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, showSlotIndicator: { classPropertyName: "showSlotIndicator", publicName: "showSlotIndicator", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", closeRequested: "closeRequested" }, host: { properties: { "class.tedi-time-picker--scroll": "variant() === 'scroll'", "class.tedi-time-picker--slots": "variant() === 'slots'", "class.tedi-time-picker--dropdown": "variant() === 'dropdown'", "class.tedi-time-picker--disabled": "isDisabled()", "class.tedi-time-picker--bordered": "border()" }, classAttribute: "tedi-time-picker" }, providers: [