@emuanalytics/flow-rdf-ui 4.1.7 → 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 {

package/dist/custom-elements.json

@@ -1602,6 +1602,145 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowUiBadge",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The badge's content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The badge size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
+              },
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The badge size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "pill",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
+            },
+            {
+              "name": "pulse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "tagName": "flow-ui-badge",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBadge",
+            "module": "components/badge/badge.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowUiBadge",
+            "module": "components/badge/badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb/breadcrumb.component.js",
@@ -2186,145 +2325,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowUiBadge",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The badge size.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
-              },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The badge size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
-            },
-            {
-              "name": "pulse",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "tagName": "flow-ui-badge",
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBadge",
-            "module": "components/badge/badge.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowUiBadge",
-            "module": "components/badge/badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/breadcrumb-item/breadcrumb-item.component.js",
@@ -17643,13 +17643,29 @@
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "private"
+              "name": "handleRangeChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "privacy": "private"
+              "name": "handleRangeInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -17659,12 +17675,28 @@
             {
               "kind": "method",
               "name": "handleBlur",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
               "name": "handleFocus",
-              "privacy": "private"
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "FocusEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -17691,7 +17723,7 @@
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
+              "name": "handleRangeInvalid",
               "privacy": "private",
               "parameters": [
                 {
@@ -25736,6 +25768,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "4.1.7"
+    "version": "4.1.9"
   }
 }

package/dist/index.d.mts

@@ -5379,8 +5379,8 @@ declare class FlowUiRange extends FlowRdfFormControl {
     get validationMessage(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleChange;
-    private handleInput;
+    private handleRangeChange;
+    private handleRangeInput;
     private handleNumberChange;
     private handleBlur;
     private handleFocus;
@@ -5393,7 +5393,7 @@ declare class FlowUiRange extends FlowRdfFormControl {
     handleDisabledChange(): void;
     /** @internal */
     syncRange(): void;
-    private handleInvalid;
+    private handleRangeInvalid;
     /** Sets focus on the range. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the range. */

package/dist/index.d.ts

@@ -5379,8 +5379,8 @@ declare class FlowUiRange extends FlowRdfFormControl {
     get validationMessage(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleChange;
-    private handleInput;
+    private handleRangeChange;
+    private handleRangeInput;
     private handleNumberChange;
     private handleBlur;
     private handleFocus;
@@ -5393,7 +5393,7 @@ declare class FlowUiRange extends FlowRdfFormControl {
     handleDisabledChange(): void;
     /** @internal */
     syncRange(): void;
-    private handleInvalid;
+    private handleRangeInvalid;
     /** Sets focus on the range. */
     focus(options?: FocusOptions): void;
     /** Removes focus from the range. */

package/dist/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "4.1.7";
+const version = "4.1.9";
 
 export { version };

package/dist/vscode.html-custom-data.json

@@ -237,6 +237,44 @@
       ],
       "references": []
     },
+    {
+      "name": "flow-ui-badge",
+      "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The badge's theme variant.",
+          "values": [
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The badge size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style badge with rounded edges.",
+          "values": []
+        },
+        {
+          "name": "pulse",
+          "description": "Makes the badge pulsate to draw attention.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "flow-ui-breadcrumb",
       "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -310,44 +348,6 @@
       ],
       "references": []
     },
-    {
-      "name": "flow-ui-badge",
-      "description": "Badges are used to draw attention and display statuses or counts.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "variant",
-          "description": "The badge's theme variant.",
-          "values": [
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "size",
-          "description": "The badge size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "pill",
-          "description": "Draws a pill-style badge with rounded edges.",
-          "values": []
-        },
-        {
-          "name": "pulse",
-          "description": "Makes the badge pulsate to draw attention.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "flow-ui-breadcrumb-item",
       "description": "Breadcrumb Items are used inside [breadcrumbs](./flow-ui-breadcrumb) to represent different links.\n\n\n---\n\n\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<flow-ui-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emuanalytics/flow-rdf-ui",
-  "version": "4.1.7",
+  "version": "4.1.9",
   "type": "module",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -104,13 +104,13 @@
     "vite": "^4.3.9",
     "vite-plugin-dts": "^3.5.1",
     "webdriverio": "^8.14.3",
-    "@emuanalytics/flow-rdf-core": "4.0.11"
+    "@emuanalytics/flow-rdf-core": "4.0.12"
   },
   "peerDependencies": {
     "chart.js": "^4.4.2",
     "lit": "^2.7.2",
     "lit-html": "^2.7.5",
-    "@emuanalytics/flow-rdf-core": "~4.0.11"
+    "@emuanalytics/flow-rdf-core": "~4.0.12"
   },
   "scripts": {
     "dev": "vite",