@emuanalytics/flow-rdf-ui 4.1.8 → 4.1.9

package/dist/components/range/range.component.mjs

@@ -7,6 +7,7 @@ import { boolean } from '../../internal/boolean.mjs';
 import { defaultValue } from '../../internal/default-value.mjs';
 import { FlowRdfFormControl } from '../../internal/flow-ui-rdf-element.mjs';
 import { FormControlController } from '../../internal/form.mjs';
+import { clamp } from '../../internal/math.mjs';
 import { HasSlotController } from '../../internal/slot.mjs';
 import { isNumber } from '../../internal/type-checks.mjs';
 import { watch } from '../../internal/watch.mjs';
@@ -78,13 +79,15 @@ class FlowUiRange extends FlowRdfFormControl {
     super.disconnectedCallback();
     this.resizeObserver.unobserve(this.input);
   }
-  handleChange() {
+  handleRangeChange(event) {
+    event.stopPropagation();
     this.emit("flow-ui-change");
   }
-  handleInput() {
+  handleRangeInput(event) {
+    event.stopPropagation();
     this.value = parseFloat(this.input.value);
-    this.emit("flow-ui-input");
     this.syncRange();
+    this.emit("flow-ui-input");
   }
   /*
     Handler for flow-ui-input & flow-ui-change events from number input.
@@ -97,11 +100,13 @@ class FlowUiRange extends FlowRdfFormControl {
       this.syncRange();
     }
   }
-  handleBlur() {
+  handleBlur(event) {
+    event.stopPropagation();
     this.hasFocus = false;
     this.emit("flow-ui-blur");
   }
-  handleFocus() {
+  handleFocus(event) {
+    event.stopPropagation();
     this.hasFocus = true;
     this.emit("flow-ui-focus");
   }
@@ -114,8 +119,7 @@ class FlowUiRange extends FlowRdfFormControl {
   }
   handleValueChange() {
     this.formControlController.updateValidity();
-    this.input.value = this.value?.toString();
-    this.value = parseFloat(this.input.value);
+    this.value = clamp(this.value, this.min, this.max);
     this.syncRange();
   }
   handleDisabledChange() {
@@ -126,7 +130,7 @@ class FlowUiRange extends FlowRdfFormControl {
     const percent = Math.max(0, (this.value - this.min) / (this.max - this.min));
     this.syncProgress(percent);
   }
-  handleInvalid(event) {
+  handleRangeInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
   }
@@ -240,30 +244,35 @@ class FlowUiRange extends FlowRdfFormControl {
               step=${ifDefined(this.step)}
               .value=${live(this.value.toString())}
               aria-describedby="help-text"
-              @change=${this.handleChange}
+              @change=${this.handleRangeChange}
               @focus=${this.handleFocus}
-              @input=${this.handleInput}
-              @invalid=${this.handleInvalid}
+              @input=${this.handleRangeInput}
+              @invalid=${this.handleRangeInvalid}
               @blur=${this.handleBlur}
             />
             <slot name="suffix" part="suffix" class="range__suffix"></slot>
 
-            ${this.noInput ? nothing : html`
-                  <flow-ui-input
-                    class="number-input"
-                    type="number"
-                    inline
-                    filled
-                    exportparts="form-control:number-input"
-                    no-step-buttons
-                    size=${this.size}
-                    format=${this.format}
-                    ?disabled=${this.disabled}
-                    .value=${this.value.toString()}
-                    @flow-ui-input=${this.handleNumberChange}
-                    @flow-ui-change=${this.handleNumberChange}
-                  ></flow-ui-input>
-                `}
+            <flow-ui-input
+              class=${classMap({
+      "number-input": true,
+      "no-input": this.noInput
+    })}
+              type="number"
+              inline
+              filled
+              exportparts="form-control:number-input"
+              no-step-buttons
+              size=${this.size}
+              format=${this.format}
+              min=${ifDefined(this.min)}
+              max=${ifDefined(this.max)}
+              step=${ifDefined(this.step)}
+              ?disabled=${this.disabled}
+              .value=${this.value.toString()}
+              @flow-ui-change=${this.handleNumberChange}
+              @flow-ui-focus=${this.handleFocus}
+              @flow-ui-blur=${this.handleBlur}
+            ></flow-ui-input>
           </div>
         </div>
 

package/dist/components/range/range.styles.mjs

@@ -210,6 +210,10 @@ const styles = css`
     color: var(--flow-ui-control-icon-color);
   }
 
+  .number-input.no-input {
+    display: none;
+  }
+
   @media (forced-colors: active) {
     .range__control,
     .range__control::-webkit-slider-thumb {