@maggioli-design-system/mds-input-range 2.3.0 → 2.5.0

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-03-05T17:19:41",
+  "timestamp": "2025-04-02T09:16:46",
   "compiler": {
     "name": "node",
     "version": "22.11.0"
@@ -9,13 +9,14 @@
     "fsNamespace": "mds-input-range",
     "components": 1,
     "entries": 1,
-    "bundles": 101,
+    "bundles": 103,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 53,
+        "files": 55,
         "generatedFiles": [
           "./dist/collection/common/aria.js",
+          "./dist/collection/common/browser.js",
           "./dist/collection/common/date.js",
           "./dist/collection/common/device.js",
           "./dist/collection/common/file.js",
@@ -59,6 +60,7 @@
           "./dist/collection/type/floating-ui.js",
           "./dist/collection/type/form-rel.js",
           "./dist/collection/type/header-bar.js",
+          "./dist/collection/type/input-tip.js",
           "./dist/collection/type/input.js",
           "./dist/collection/type/keyboard.js",
           "./dist/collection/type/loading.js",
@@ -85,19 +87,19 @@
         "files": 42,
         "generatedFiles": [
           "./dist/cjs/app-globals-3a1e7e63.js",
-          "./dist/cjs/index-9509a00b.js",
+          "./dist/cjs/index-37d5e60f.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-input-range.cjs.entry.js",
           "./dist/cjs/mds-input-range.cjs.js",
           "./dist/esm-es5/app-globals-0f993ce5.js",
-          "./dist/esm-es5/index-476f378c.js",
+          "./dist/esm-es5/index-e9d1fa7e.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-input-range.entry.js",
           "./dist/esm-es5/mds-input-range.js",
           "./dist/esm/app-globals-0f993ce5.js",
-          "./dist/esm/index-476f378c.js",
+          "./dist/esm/index-e9d1fa7e.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-input-range.entry.js",
@@ -107,25 +109,25 @@
           "./dist/mds-input-range/index.esm.js",
           "./dist/mds-input-range/mds-input-range.esm.js",
           "./dist/mds-input-range/mds-input-range.js",
+          "./dist/mds-input-range/p-155deafe.js",
           "./dist/mds-input-range/p-50ea2036.system.js",
+          "./dist/mds-input-range/p-55273f42.entry.js",
           "./dist/mds-input-range/p-56ba5cbf.system.js",
-          "./dist/mds-input-range/p-87f42ab7.js",
-          "./dist/mds-input-range/p-c22c5274.system.entry.js",
-          "./dist/mds-input-range/p-d47766b6.system.js",
+          "./dist/mds-input-range/p-7315ada7.system.js",
+          "./dist/mds-input-range/p-b3abfa80.system.entry.js",
+          "./dist/mds-input-range/p-b6d99f83.system.js",
           "./dist/mds-input-range/p-e1255160.js",
-          "./dist/mds-input-range/p-e79d51c6.system.js",
-          "./dist/mds-input-range/p-e838760a.entry.js",
           "./www/build/index.esm.js",
           "./www/build/mds-input-range.esm.js",
           "./www/build/mds-input-range.js",
+          "./www/build/p-155deafe.js",
           "./www/build/p-50ea2036.system.js",
+          "./www/build/p-55273f42.entry.js",
           "./www/build/p-56ba5cbf.system.js",
-          "./www/build/p-87f42ab7.js",
-          "./www/build/p-c22c5274.system.entry.js",
-          "./www/build/p-d47766b6.system.js",
-          "./www/build/p-e1255160.js",
-          "./www/build/p-e79d51c6.system.js",
-          "./www/build/p-e838760a.entry.js"
+          "./www/build/p-7315ada7.system.js",
+          "./www/build/p-b3abfa80.system.entry.js",
+          "./www/build/p-b6d99f83.system.js",
+          "./www/build/p-e1255160.js"
         ]
       },
       {
@@ -158,12 +160,12 @@
         "components": [
           "mds-input-range"
         ],
-        "bundleId": "p-e838760a",
-        "fileName": "p-e838760a.entry.js",
+        "bundleId": "p-55273f42",
+        "fileName": "p-55273f42.entry.js",
         "imports": [
-          "p-87f42ab7.js"
+          "p-155deafe.js"
         ],
-        "originalByteSize": 16757
+        "originalByteSize": 17502
       }
     ],
     "esm": [
@@ -175,9 +177,9 @@
         "bundleId": "mds-input-range",
         "fileName": "mds-input-range.entry.js",
         "imports": [
-          "index-476f378c.js"
+          "index-e9d1fa7e.js"
         ],
-        "originalByteSize": 16761
+        "originalByteSize": 17506
       }
     ],
     "es5": [
@@ -189,9 +191,9 @@
         "bundleId": "mds-input-range",
         "fileName": "mds-input-range.entry.js",
         "imports": [
-          "index-476f378c.js"
+          "index-e9d1fa7e.js"
         ],
-        "originalByteSize": 16761
+        "originalByteSize": 17506
       }
     ],
     "system": [
@@ -200,12 +202,12 @@
         "components": [
           "mds-input-range"
         ],
-        "bundleId": "p-c22c5274.system",
-        "fileName": "p-c22c5274.system.entry.js",
+        "bundleId": "p-b3abfa80.system",
+        "fileName": "p-b3abfa80.system.entry.js",
         "imports": [
-          "p-e79d51c6.system.js"
+          "p-7315ada7.system.js"
         ],
-        "originalByteSize": 17581
+        "originalByteSize": 18404
       }
     ],
     "commonjs": [
@@ -217,9 +219,9 @@
         "bundleId": "mds-input-range.cjs",
         "fileName": "mds-input-range.cjs.entry.js",
         "imports": [
-          "index-9509a00b.js"
+          "index-37d5e60f.js"
         ],
-        "originalByteSize": 16862
+        "originalByteSize": 17607
       }
     ]
   },
@@ -272,6 +274,26 @@
         "mds-text"
       ],
       "properties": [
+        {
+          "name": "formatValue",
+          "type": "unknown",
+          "reflect": false,
+          "mutable": false,
+          "required": false,
+          "optional": true,
+          "complexType": {
+            "original": "(value: number) => string",
+            "resolved": "((value: number) => string) | undefined",
+            "references": {}
+          },
+          "docs": {
+            "tags": [],
+            "text": "A function to custom how value is represented"
+          },
+          "internal": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "max",
           "type": "number",
@@ -403,6 +425,26 @@
           "encapsulation": "shadow",
           "shadowDelegatesFocus": false,
           "properties": [
+            {
+              "name": "formatValue",
+              "type": "unknown",
+              "reflect": false,
+              "mutable": false,
+              "required": false,
+              "optional": true,
+              "complexType": {
+                "original": "(value: number) => string",
+                "resolved": "((value: number) => string) | undefined",
+                "references": {}
+              },
+              "docs": {
+                "tags": [],
+                "text": "A function to custom how value is represented"
+              },
+              "internal": false,
+              "getter": false,
+              "setter": false
+            },
             {
               "name": "max",
               "type": "number",
@@ -662,7 +704,7 @@
           "hasVdomKey": true,
           "hasVdomListener": true,
           "hasVdomPropOrAttr": true,
-          "hasVdomRef": false,
+          "hasVdomRef": true,
           "hasVdomRender": true,
           "hasVdomStyle": true,
           "hasVdomText": true,
@@ -674,6 +716,7 @@
             "part",
             "typography",
             "style",
+            "ref",
             "aria-label",
             "disabled",
             "max",
@@ -708,11 +751,12 @@
   ],
   "componentGraph": {
     "sc-mds-input-range": [
-      "p-87f42ab7.js"
+      "p-155deafe.js"
     ]
   },
   "sourceGraph": {
     "./src/common/aria.ts": [],
+    "./src/common/browser.ts": [],
     "./src/common/date.ts": [],
     "./src/common/device.ts": [],
     "./src/common/file.ts": [],
@@ -771,6 +815,7 @@
     "./src/type/floating-ui.ts": [],
     "./src/type/form-rel.ts": [],
     "./src/type/header-bar.ts": [],
+    "./src/type/input-tip.ts": [],
     "./src/type/input.ts": [],
     "./src/type/keyboard.ts": [],
     "./src/type/loading.ts": [],

package/dist/types/common/browser.d.ts

@@ -0,0 +1,2 @@
+declare const isSafari: () => boolean;
+export { isSafari, };

package/dist/types/common/floating-controller.d.ts

@@ -27,6 +27,7 @@ export declare class FloatingController {
     private readonly arrowInset;
     private readonly arrowTransform;
     private readonly arrowTransformOrigin;
+    private convertToTransformOrigin;
     private readonly calculatePosition;
     updatePosition(): void;
     dismiss(): void;

package/dist/types/common/locale.d.ts

@@ -15,6 +15,6 @@ export declare class Locale {
     lang: (el: HTMLElement) => string;
     update: (doc?: Document | ShadowRoot) => void;
     private pluralize;
-    get: (tag: string | string[], context?: Record<string, string | number>) => string;
+    get: (tag: string | string[], context?: Record<string, string | number | boolean>) => string;
 }
 export {};

package/dist/types/components/mds-input-range/mds-input-range.d.ts

@@ -6,8 +6,13 @@ export declare class MdsInputRange {
     private progress;
     private label;
     private inputElement;
+    private decimalPlaces;
     private element;
     internals: ElementInternals;
+    /**
+     * A function to custom how value is represented
+     */
+    readonly formatValue?: (value: number) => string;
     /**
      * The greatest value in the range of permitted values
      */
@@ -35,8 +40,9 @@ export declare class MdsInputRange {
     changeEvent: EventEmitter<number>;
     calculateProgress(): void;
     private onInput;
+    private countDecimals;
     protected disabledChanged(newValue: boolean): void;
-    valueChanged(): void;
+    valueChanged(newValue: string, oldValue: string): void;
     minChanged(): void;
     maxChanged(): void;
     stepChanged(): void;

package/dist/types/components/mds-input-range/test/mds-input-range.stories.d.ts

@@ -40,4 +40,5 @@ export declare const Min: any;
 export declare const Max: any;
 export declare const Step: any;
 export declare const Value: any;
+export declare const FormatLabel: any;
 export declare const HideHeader: any;

package/dist/types/components.d.ts

@@ -11,6 +11,10 @@ export namespace Components {
           * Sets if the component is disabled
          */
         "disabled"?: boolean;
+        /**
+          * A function to custom how value is represented
+         */
+        "formatValue"?: (value: number) => string;
         /**
           * The greatest value in the range of permitted values
          */
@@ -61,6 +65,10 @@ declare namespace LocalJSX {
           * Sets if the component is disabled
          */
         "disabled"?: boolean;
+        /**
+          * A function to custom how value is represented
+         */
+        "formatValue"?: (value: number) => string;
         /**
           * The greatest value in the range of permitted values
          */

package/dist/types/type/button.d.ts

@@ -2,4 +2,4 @@ export type ButtonType = 'a' | 'button' | 'reset' | 'submit';
 export type ButtonTargetType = 'self' | 'blank';
 export type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonIconPositionType = 'left' | 'right';
-export type ButtonVariantType = 'primary' | 'secondary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export type ButtonVariantType = 'primary' | 'secondary' | 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning' | 'google' | 'apple';

package/dist/types/type/input-tip.d.ts

@@ -0,0 +1 @@
+export type InputTipItemVariantType = 'count-almost' | 'count-almost-full' | 'count-empty' | 'count-full' | 'count-incomplete' | 'disabled' | 'readonly' | 'required' | 'required-success' | 'text';

package/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-03-05T16:16:01",
+  "timestamp": "2025-04-02T08:30:40",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -46,6 +46,31 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "formatValue",
+          "type": "((value: number) => string) | undefined",
+          "complexType": {
+            "original": "(value: number) => string",
+            "resolved": "((value: number) => string) | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function to custom how value is represented",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((value: number) => string)"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "max",
           "type": "number",
@@ -312,7 +337,7 @@
       "path": "src/type/button.ts"
     },
     "src/type/button.ts::ButtonVariantType": {
-      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
+      "declaration": "export type ButtonVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'light'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'google'\n  | 'apple'",
       "docstring": "",
       "path": "src/type/button.ts"
     },
@@ -411,6 +436,11 @@
       "docstring": "",
       "path": "src/components/mds-horizontal-scroll/meta/types.ts"
     },
+    "src/components/mds-horizontal-scroll/meta/types.ts::NavigationType": {
+      "declaration": "export type NavigationType =\n  | 'none'\n  | 'scrollbar'\n  | 'position'",
+      "docstring": "",
+      "path": "src/components/mds-horizontal-scroll/meta/types.ts"
+    },
     "src/components/mds-horizontal-scroll/meta/types.ts::SnapType": {
       "declaration": "export type SnapType =\n  | 'center'\n  | 'end'\n  | 'none'\n  | 'start'",
       "docstring": "",
@@ -506,10 +536,10 @@
       "docstring": "",
       "path": "src/components/mds-input-tip/meta/types.ts"
     },
-    "src/components/mds-input-tip-item/meta/types.ts::InputTipItemVariantType": {
-      "declaration": "export type InputTipItemVariantType =\n  | 'required'\n  | 'required-success'\n  | 'disabled'\n  | 'readonly'\n  | 'text'",
+    "src/type/input-tip.ts::InputTipItemVariantType": {
+      "declaration": "export type InputTipItemVariantType =\n  | 'count-almost'\n  | 'count-almost-full'\n  | 'count-empty'\n  | 'count-full'\n  | 'count-incomplete'\n  | 'disabled'\n  | 'readonly'\n  | 'required'\n  | 'required-success'\n  | 'text'",
       "docstring": "",
-      "path": "src/components/mds-input-tip-item/meta/types.ts"
+      "path": "src/type/input-tip.ts"
     },
     "src/components/mds-input-upload/meta/types.ts::AttachmentSort": {
       "declaration": "type AttachmentSort =\n  'status' |\n  'date'",
@@ -551,6 +581,11 @@
       "docstring": "",
       "path": "src/components/mds-modal/meta/types.ts"
     },
+    "src/components/mds-modal/meta/types.ts::ModalAnimationStyleType": {
+      "declaration": "export type ModalAnimationStyleType =\n  | 'slide'\n  | 'custom'\n  | '3d'",
+      "docstring": "",
+      "path": "src/components/mds-modal/meta/types.ts"
+    },
     "src/components/mds-modal/meta/types.ts::ModalOverflowType": {
       "declaration": "export type ModalOverflowType =\n  | 'auto'\n  | 'manual'",
       "docstring": "",
@@ -616,20 +651,25 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
+    "src/components/mds-push-notification/meta/event-detail.ts::MdsPushNotificationEventDetail": {
+      "declaration": "export interface MdsPushNotificationEventDetail {\n  visible: boolean\n}",
+      "docstring": "",
+      "path": "src/components/mds-push-notification/meta/event-detail.ts"
+    },
+    "src/components/mds-push-notification-item/meta/types.ts::NotificationItemDateFormatType": {
       "declaration": "string",
       "docstring": "",
-      "path": "src/components/mds-push-notification/meta/types.ts"
+      "path": "src/components/mds-push-notification-item/meta/types.ts"
     },
-    "src/components/mds-push-notification/meta/types.ts::NotificationPreviewType": {
-      "declaration": "export type NotificationPreviewType =\n  | 'avatar'\n  | 'image'",
+    "src/components/mds-push-notification-item/meta/types.ts::NotificationItemPreviewType": {
+      "declaration": "export type NotificationItemPreviewType =\n  | 'avatar'\n  | 'image'",
       "docstring": "",
-      "path": "src/components/mds-push-notification/meta/types.ts"
+      "path": "src/components/mds-push-notification-item/meta/types.ts"
     },
-    "src/components/mds-push-notification/meta/event-detail.ts::MdsPushNotificationEventDetail": {
-      "declaration": "export interface MdsPushNotificationEventDetail {\n  id: string;\n}",
+    "src/components/mds-push-notification-item/meta/event-detail.ts::MdsPushNotificationItemEventDetail": {
+      "declaration": "export interface MdsPushNotificationItemEventDetail {\n  id: string;\n}",
       "docstring": "",
-      "path": "src/components/mds-push-notification/meta/event-detail.ts"
+      "path": "src/components/mds-push-notification-item/meta/event-detail.ts"
     },
     "src/type/text.ts::TypographyHeadingTagType": {
       "declaration": "export type TypographyHeadingTagType =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-range",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "mds-input-range is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,8 +24,8 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "15.9.0",
-    "@maggioli-design-system/mds-text": "4.7.0",
+    "@maggioli-design-system/styles": "15.9.1",
+    "@maggioli-design-system/mds-text": "4.7.2",
     "@stencil/core": "4.27.2"
   },
   "license": "MIT",

package/readme.md

@@ -9,13 +9,14 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                      | Type                   | Default     |
-| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |
-| `disabled` | `disabled` | Sets if the component is disabled                                                                                                                | `boolean \| undefined` | `undefined` |
-| `max`      | `max`      | The greatest value in the range of permitted values                                                                                              | `number`               | `100`       |
-| `min`      | `min`      | The lowest value in the range of permitted values                                                                                                | `number`               | `0`         |
-| `step`     | `step`     | The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. | `number`               | `1`         |
-| `value`    | `value`    | The value attribute contains a number which contains a representation of the selected number.                                                    | `number`               | `undefined` |
+| Property      | Attribute  | Description                                                                                                                                      | Type                                       | Default     |
+| ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ----------- |
+| `disabled`    | `disabled` | Sets if the component is disabled                                                                                                                | `boolean \| undefined`                     | `undefined` |
+| `formatValue` | --         | A function to custom how value is represented                                                                                                    | `((value: number) => string) \| undefined` | `undefined` |
+| `max`         | `max`      | The greatest value in the range of permitted values                                                                                              | `number`                                   | `100`       |
+| `min`         | `min`      | The lowest value in the range of permitted values                                                                                                | `number`                                   | `0`         |
+| `step`        | `step`     | The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. | `number`                                   | `1`         |
+| `value`       | `value`    | The value attribute contains a number which contains a representation of the selected number.                                                    | `number`                                   | `undefined` |
 
 
 ## Events

package/src/common/browser.ts

@@ -0,0 +1,10 @@
+const isSafari = (): boolean => {
+  if (navigator) {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  }
+  return false
+}
+
+export {
+  isSafari,
+}

package/src/common/floating-controller.ts

@@ -7,6 +7,7 @@ import {
   Middleware,
   MiddlewareData,
   offset,
+  Placement,
   shift,
 } from '@floating-ui/dom'
 import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
@@ -138,6 +139,24 @@ export class FloatingController {
     }
   }
 
+  private convertToTransformOrigin = (position: Placement): string => {
+    const positions = {
+      top: 'center bottom',
+      right: 'left center',
+      bottom: 'center top',
+      left: 'right center',
+      'bottom-end': 'top right',
+      'bottom-start': 'top left',
+      'left-end': 'right bottom',
+      'left-start': 'right top',
+      'right-end': 'left bottom',
+      'right-start': 'left top',
+      'top-end': 'bottom right',
+      'top-start': 'bottom left',
+    }
+    return positions[position]
+  }
+
   private readonly calculatePosition = (): void => {
     if (!this._caller) return
 
@@ -181,6 +200,8 @@ export class FloatingController {
       Object.assign(this._host.style, {
         left: `${x}px`,
         top: `${y}px`,
+        transformOrigin: this.convertToTransformOrigin(placement),
+        position: this._host.strategy,
       })
 
       const arrowStyle = {}
@@ -204,12 +225,14 @@ export class FloatingController {
   }
 
   updatePosition (): void {
-    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
-    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+    if (this._host.visible) {
+      this.dismiss() // to clean the old update function before update function
+      this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+    }
   }
 
   dismiss (): void {
-    this.cleanupAutoUpdate()
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
   }
 }
 

package/src/common/keyboard-manager.ts

@@ -27,6 +27,7 @@ export class KeyboardManager {
   }
 
   attachClickBehavior = (name = 'element'): void => {
+    this.elements.get(name)?.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent)
     this.elements.get(name)?.addEventListener('keydown', this.handleClickBehaviorDispatchEvent)
   }
 

package/src/common/locale.ts

@@ -52,7 +52,7 @@ export class Locale {
     })
   }
 
-  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+  private pluralize = (tag: string | string[], context: Record<string, string | number | boolean>): string => {
 
     const languagePhrase: string | string[] = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag]
     const phrases: string[] = []
@@ -81,7 +81,7 @@ export class Locale {
     return render(translatePhrase, context)
   }
 
-  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+  get = (tag: string | string[], context?: Record<string, string | number | boolean>): string => {
     if (context) {
       return this.pluralize(tag, context)
     }