@zywave/zui-slider 4.4.0-pre.5 → 4.4.0-pre.7

package/dist/custom-elements.json

@@ -94,7 +94,7 @@
               "kind": "field",
               "name": "#thumbInputState",
               "privacy": "private",
-              "default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false }], ['startThumb', { visible: false, focused: false }], ['endThumb', { visible: false, focused: false }], ])"
+              "default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; committed: boolean; timer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false, committed: false }], ['startThumb', { visible: false, focused: false, committed: false }], ['endThumb', { visible: false, focused: false, committed: false }], ])"
             },
             {
               "kind": "field",
@@ -126,14 +126,19 @@
               "name": "#onRangeEndInput",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "#stopClickPropagation",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "#h",
               "privacy": "private",
               "type": {
-                "text": "Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }>"
+                "text": "Record<\n    ThumbFlag,\n    { show: () => void; hide: () => void; focus: () => void; input: () => void; blurCommit: (e: FocusEvent) => void }\n  >"
               },
-              "default": "{ thumb: { show: () => this.#showThumbInput('thumb'), hide: () => this.#scheduleHideThumbInput('thumb'), focus: () => this.#focusFloatingInput('thumb'), blur: () => this.#blurFloatingInput('thumb'), }, startThumb: { show: () => this.#showThumbInput('startThumb'), hide: () => this.#scheduleHideThumbInput('startThumb'), focus: () => this.#focusFloatingInput('startThumb'), blur: () => this.#blurFloatingInput('startThumb'), }, endThumb: { show: () => this.#showThumbInput('endThumb'), hide: () => this.#scheduleHideThumbInput('endThumb'), focus: () => this.#focusFloatingInput('endThumb'), blur: () => this.#blurFloatingInput('endThumb'), }, }"
+              "default": "{ thumb: this.#makeThumbHandlers('thumb'), startThumb: this.#makeThumbHandlers('startThumb'), endThumb: this.#makeThumbHandlers('endThumb'), }"
             },
             {
               "kind": "field",
@@ -673,6 +678,67 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "#makeThumbHandlers",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "flag",
+                  "type": {
+                    "text": "ThumbFlag"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nudgeStepsValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "flag",
+                  "type": {
+                    "text": "ThumbFlag"
+                  }
+                },
+                {
+                  "name": "resolved",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#nudgeNumericValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "flag",
+                  "type": {
+                    "text": "ThumbFlag"
+                  }
+                },
+                {
+                  "name": "processed",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#makeFloatingChange",

package/dist/zui-slider.js

@@ -65,11 +65,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         this.#cachedNormalizedSteps = null;
         this.#cachedNumericValues = null;
         this.#thumbInputState = new Map([
-            ['thumb', { visible: false, focused: false }],
-            ['startThumb', { visible: false, focused: false }],
-            ['endThumb', { visible: false, focused: false }],
+            ['thumb', { visible: false, focused: false, committed: false }],
+            ['startThumb', { visible: false, focused: false, committed: false }],
+            ['endThumb', { visible: false, focused: false, committed: false }],
         ]);
-        // Cached floating input change handlers; commit value on Enter or blur
         this.#onThumbFloatingChange = this.#makeFloatingChange('thumb', (v) => (this.value = v), () => this.#onChange());
         this.#onStartThumbFloatingChange = this.#makeFloatingChange('startThumb', (v) => (this.valueStart = v), () => this.#onRangeChange());
         this.#onEndThumbFloatingChange = this.#makeFloatingChange('endThumb', (v) => (this.valueEnd = v), () => this.#onRangeChange());
@@ -79,32 +78,16 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
                 e.preventDefault();
                 const input = e.target;
                 input.dispatchEvent(new Event('change'));
-                input.blur();
             }
         };
-        // Cached range drag input handlers
         this.#onRangeStartInput = this.#onRangeInput('start');
         this.#onRangeEndInput = this.#onRangeInput('end');
+        this.#stopClickPropagation = (e) => e.stopPropagation();
         // Cached pointer/focus handlers per thumb; prevents new closures on every render
         this.#h = {
-            thumb: {
-                show: () => this.#showThumbInput('thumb'),
-                hide: () => this.#scheduleHideThumbInput('thumb'),
-                focus: () => this.#focusFloatingInput('thumb'),
-                blur: () => this.#blurFloatingInput('thumb'),
-            },
-            startThumb: {
-                show: () => this.#showThumbInput('startThumb'),
-                hide: () => this.#scheduleHideThumbInput('startThumb'),
-                focus: () => this.#focusFloatingInput('startThumb'),
-                blur: () => this.#blurFloatingInput('startThumb'),
-            },
-            endThumb: {
-                show: () => this.#showThumbInput('endThumb'),
-                hide: () => this.#scheduleHideThumbInput('endThumb'),
-                focus: () => this.#focusFloatingInput('endThumb'),
-                blur: () => this.#blurFloatingInput('endThumb'),
-            },
+            thumb: this.#makeThumbHandlers('thumb'),
+            startThumb: this.#makeThumbHandlers('startThumb'),
+            endThumb: this.#makeThumbHandlers('endThumb'),
         };
         this.steps = [];
         this.stepParser = null;
@@ -124,15 +107,14 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
     #cachedNormalizedSteps;
     #cachedNumericValues;
     #thumbInputState;
-    // Cached floating input change handlers; commit value on Enter or blur
     #onThumbFloatingChange;
     #onStartThumbFloatingChange;
     #onEndThumbFloatingChange;
     // Cached keydown handler: Enter commits the floating input value in both number and text modes.
     #onFloatingInputKeydown;
-    // Cached range drag input handlers
     #onRangeStartInput;
     #onRangeEndInput;
+    #stopClickPropagation;
     // Cached pointer/focus handlers per thumb; prevents new closures on every render
     #h;
     static get styles() {
@@ -239,6 +221,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
             entry.timer = undefined;
             entry.visible = false;
             entry.focused = false;
+            entry.committed = false;
         }
     }
     #syncValuesToSteps() {
@@ -529,6 +512,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         .step="${nativeStep}"
         .value="${live(nativeValue)}"
         ?disabled="${this.disabled || this.readOnly}"
+        @click="${this.#stopClickPropagation}"
         @input="${onInput}"
         @change="${this.#onRangeChange}"
         @pointerenter="${h.show}"
@@ -547,6 +531,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
       <div
         class=${classMap({ 'thumb-input': true, 'thumb-input--visible': visible })}
         style=${styleMap({ left: _a.#thumbPositionCSS(progress) })}
+        @click="${this.#stopClickPropagation}"
         @pointerenter="${h.show}"
         @pointerleave="${h.hide}"
       >
@@ -560,9 +545,10 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
           @keydown="${this.#onFloatingInputKeydown}"
+          @input="${h.input}"
           @change="${onFloatingChange}"
           @focus="${h.focus}"
-          @blur="${h.blur}"
+          @blur="${h.blurCommit}"
         />
       </div>
     `;
@@ -618,7 +604,7 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         const normalized = this.#normalizedSteps;
         const minLabel = this.#stepsMode ? normalized[0]?.label ?? '' : String(this.min);
         const maxLabel = this.#stepsMode ? normalized[normalized.length - 1]?.label ?? '' : String(this.max);
-        const hidden = this.showStepLabels && this.#stepsMode;
+        const hidden = this.showStepLabels;
         return html `
       <div
         class="min-max-labels"
@@ -661,6 +647,62 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
         }
         return this.#value;
     }
+    #makeThumbHandlers(flag) {
+        return {
+            show: () => this.#showThumbInput(flag),
+            hide: () => this.#scheduleHideThumbInput(flag),
+            focus: () => this.#focusFloatingInput(flag),
+            input: () => {
+                this.#thumbInputState.get(flag).committed = false;
+            },
+            blurCommit: (e) => {
+                const entry = this.#thumbInputState.get(flag);
+                if (!entry.committed) {
+                    e.target.dispatchEvent(new Event('change'));
+                }
+                entry.committed = false;
+                this.#blurFloatingInput(flag);
+            },
+        };
+    }
+    #nudgeStepsValue(flag, resolved) {
+        if (flag === 'thumb') {
+            return resolved;
+        }
+        const resolvedIdx = this.#stepsIndexOf(resolved);
+        const endIdx = Math.max(0, this.#stepsIndexOf(this.#valueEnd));
+        const startIdx = Math.max(0, this.#stepsIndexOf(this.#valueStart));
+        if (flag === 'startThumb' && resolvedIdx >= endIdx) {
+            const nudgedIdx = endIdx - 1;
+            return nudgedIdx >= 0 ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+        }
+        if (flag === 'endThumb' && resolvedIdx <= startIdx) {
+            const nudgedIdx = startIdx + 1;
+            return nudgedIdx < this.#normalizedSteps.length ? this.#stepAt(nudgedIdx) : this.#currentValueForFlag(flag);
+        }
+        return resolved;
+    }
+    #nudgeNumericValue(flag, processed) {
+        if (flag === 'thumb') {
+            return processed;
+        }
+        const effectiveStep = this.step > 0 ? this.step : 1;
+        if (flag === 'startThumb') {
+            const endNum = parseFloat(this.#valueEnd);
+            if (parseFloat(processed) >= endNum) {
+                const nudged = this.#processFloatingValue(endNum - effectiveStep);
+                return parseFloat(nudged) < endNum ? nudged : this.#currentValueForFlag(flag);
+            }
+        }
+        else {
+            const startNum = parseFloat(this.#valueStart);
+            if (parseFloat(processed) <= startNum) {
+                const nudged = this.#processFloatingValue(startNum + effectiveStep);
+                return parseFloat(nudged) > startNum ? nudged : this.#currentValueForFlag(flag);
+            }
+        }
+        return processed;
+    }
     #makeFloatingChange(flag, setter, dispatch) {
         return (e) => {
             if (this.readOnly) {
@@ -672,25 +714,25 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
                 return;
             }
             const before = this.#currentValueForFlag(flag);
+            const commit = (value) => {
+                setter(value);
+                this.#thumbInputState.get(flag).committed = true;
+                if (this.#currentValueForFlag(flag) !== before) {
+                    dispatch();
+                }
+                // Force re-render so live() corrects the DOM when the nudged/clamped value equals the stored value and the setter no-ops.
+                this.requestUpdate();
+            };
             if (this.#stepsMode) {
                 const resolved = this.#resolveFloatingInput(input.value);
-                if (resolved !== null) {
-                    setter(resolved);
-                    this.requestUpdate();
-                    if (this.#currentValueForFlag(flag) !== before) {
-                        dispatch();
-                    }
-                }
-                else {
+                if (resolved === null) {
                     input.value = this.#currentValueForFlag(flag);
+                    return;
                 }
+                commit(this.#nudgeStepsValue(flag, resolved));
             }
             else {
-                setter(this.#processFloatingValue(parseFloat(input.value)));
-                this.requestUpdate();
-                if (this.#currentValueForFlag(flag) !== before) {
-                    dispatch();
-                }
+                commit(this.#nudgeNumericValue(flag, this.#processFloatingValue(parseFloat(input.value))));
             }
         };
     }
@@ -833,7 +875,9 @@ export class ZuiSlider extends ZuiFormAssociatedElement {
             return;
         }
         this.#showThumbInput(flag);
-        this.#thumbInputState.get(flag).focused = true;
+        const entry = this.#thumbInputState.get(flag);
+        entry.focused = true;
+        entry.committed = false;
     }
     #blurFloatingInput(flag) {
         const entry = this.#thumbInputState.get(flag);