@maggioli-design-system/mds-input-range 2.1.0 → 2.1.1

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

@@ -0,0 +1,46 @@
+import { FloatingUIPlacement, FloatingUIStrategy } from "../type/floating-ui";
+import { HTMLStencilElement } from '../stencil-public-runtime';
+export interface FloatingElement extends PositionOptions {
+    host: HTMLFloatingElement;
+}
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+    visible: boolean;
+}
+export interface PositionOptions {
+    arrow: boolean;
+    arrowPadding: number;
+    autoPlacement: boolean;
+    flip: boolean;
+    offset: number;
+    placement: FloatingUIPlacement;
+    shift: boolean;
+    shiftPadding: number;
+    strategy: FloatingUIStrategy;
+}
+export declare class FloatingController {
+    private _caller;
+    private readonly _host;
+    arrowEl: HTMLElement | undefined;
+    private cleanupAutoUpdate;
+    constructor(host: HTMLFloatingElement, arrowEl?: HTMLElement);
+    updateCaller(target: string): HTMLElement;
+    private readonly arrowInset;
+    private readonly arrowTransform;
+    private readonly arrowTransformOrigin;
+    private readonly calculatePosition;
+    updatePosition(): void;
+    dismiss(): void;
+}
+export declare class Backdrop {
+    private readonly defaultBackdropId;
+    private readonly backdropBackgroundVisible;
+    private readonly backdropBackgroundHidden;
+    private readonly backdropId;
+    private readonly cssBackdropZIndex;
+    private readonly cssBackdropDuration;
+    private backdropEl;
+    private backdropTimer;
+    constructor(backdropId?: string);
+    attachBackdrop(): void;
+    detachBackdrop(): void;
+}

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

@@ -1,2 +1,3 @@
 declare const hasSlottedElements: (el: HTMLElement, name?: string) => boolean;
-export { hasSlottedElements, };
+declare const hasSlottedNodes: (el: HTMLElement, name?: string) => boolean;
+export { hasSlottedElements, hasSlottedNodes, };

package/dist/types/dictionary/tree.d.ts

@@ -0,0 +1,4 @@
+declare const treeActionsDictionary: string[];
+declare const treeAppearanceDictionary: string[];
+declare const treeIconDictionary: string[];
+export { treeActionsDictionary, treeAppearanceDictionary, treeIconDictionary, };

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

@@ -0,0 +1,3 @@
+export type TreeAppearance = 'none' | 'depth';
+export type TreeIcon = 'folder' | 'chevron';
+export type TreeActions = 'auto' | 'visible';

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-12-19T14:37:09",
+  "timestamp": "2025-02-06T07:52:44",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -42,7 +42,9 @@
             }
           ],
           "optional": true,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "max",
@@ -64,7 +66,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "min",
@@ -86,7 +90,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "step",
@@ -108,7 +114,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "value",
@@ -129,7 +137,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -316,6 +326,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/text.ts::TypographyTruncateType": {
+      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
     "src/type/variant.ts::ChipVariantType": {
       "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
@@ -356,11 +371,6 @@
       "docstring": "",
       "path": "src/components/mds-file/meta/event-detail.ts"
     },
-    "src/type/text.ts::TypographyTruncateType": {
-      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
-      "docstring": "",
-      "path": "src/type/text.ts"
-    },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
       "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
@@ -681,6 +691,26 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/type/tree.ts::TreeAppearance": {
+      "declaration": "export type TreeAppearance =\n  | 'none'\n  | 'depth'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeIcon": {
+      "declaration": "export type TreeIcon =\n  | 'folder'\n  | 'chevron'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeActions": {
+      "declaration": "export type TreeActions =\n  | 'auto'\n  | 'visible'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/components/mds-tree-item/meta/event-detail.ts::MdsTreeItemEventDetail": {
+      "declaration": "export interface MdsTreeItemEventDetail {\n  element: HTMLMdsTreeItemElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-tree-item/meta/event-detail.ts"
+    },
     "src/components/mds-usage/meta/types.ts::UsageType": {
       "declaration": "export type UsageType =\n  | 'do'\n  | 'dont'\n  | 'info'\n  | 'warn'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-range",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "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,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "15.5.0",
-    "@maggioli-design-system/mds-text": "4.5.2",
-    "@stencil/core": "4.22.2"
+    "@maggioli-design-system/styles": "15.7.0",
+    "@maggioli-design-system/mds-text": "4.5.3",
+    "@stencil/core": "4.25.1"
   },
   "license": "MIT",
   "author": {

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId
+  private readonly cssBackdropZIndex
+  private readonly cssBackdropDuration
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -1,8 +1,16 @@
 const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
-  let query = 'slot'
-  if (name) {
-    query = `slot[name=${name}]`
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
   }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
   const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
   if (slot) {
     return slot.assignedNodes().length > 0
@@ -12,4 +20,5 @@ const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
 
 export {
   hasSlottedElements,
+  hasSlottedNodes,
 }

package/src/dictionary/tree.ts

@@ -0,0 +1,21 @@
+const treeActionsDictionary = [
+  'auto',
+  'visible',
+]
+
+const treeAppearanceDictionary = [
+  'depth',
+  'none',
+]
+
+const treeIconDictionary = [
+  'folder',
+  'chevron',
+]
+
+export {
+  treeActionsDictionary,
+  treeAppearanceDictionary,
+  treeIconDictionary,
+}
+

package/src/fixtures/icons.json

@@ -7,6 +7,10 @@
     "mdi/dots-vertical",
     "mdi/email",
     "mdi/file-document-remove-outline",
+    "mdi/file-download-outline",
+    "mdi/file-upload-outline",
+    "mdi/folder-open",
+    "mdi/handshake",
     "mdi/harddisk",
     "mdi/license",
     "mdi/map-marker",
@@ -44,6 +48,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -68,6 +73,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist",
     "mgg/checklist-settings",
@@ -164,7 +170,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -237,7 +245,9 @@
     "mgg/places-park",
     "mgg/places-park-alt",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
@@ -332,21 +342,27 @@
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
+    "mi/baseline/chevron-right",
     "mi/baseline/close",
     "mi/baseline/contrast",
     "mi/baseline/css",
     "mi/baseline/dark-mode",
     "mi/baseline/delete",
     "mi/baseline/description",
+    "mi/baseline/desk",
     "mi/baseline/directions-run",
     "mi/baseline/directions-walk",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
+    "mi/baseline/draw",
     "mi/baseline/eco",
     "mi/baseline/email",
     "mi/baseline/error",
     "mi/baseline/explore",
+    "mi/baseline/favorite",
+    "mi/baseline/favorite-border",
     "mi/baseline/file-download-done",
+    "mi/baseline/folder",
     "mi/baseline/folder-zip",
     "mi/baseline/horizontal-rule",
     "mi/baseline/indeterminate-check-box",
@@ -356,9 +372,12 @@
     "mi/baseline/keyboard-arrow-up",
     "mi/baseline/light-mode",
     "mi/baseline/local-activity",
+    "mi/baseline/location-city",
     "mi/baseline/lock-open",
     "mi/baseline/login",
     "mi/baseline/logout",
+    "mi/baseline/meeting-room",
+    "mi/baseline/more-vert",
     "mi/baseline/navigate-next",
     "mi/baseline/panorama",
     "mi/baseline/person",
@@ -376,6 +395,7 @@
     "mi/baseline/terminal",
     "mi/baseline/timer",
     "mi/baseline/tv",
+    "mi/baseline/unfold-less",
     "mi/baseline/unfold-more",
     "mi/baseline/videocam",
     "mi/baseline/visibility",

package/src/fixtures/iconsauce.json

@@ -31,6 +31,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -55,6 +56,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist-settings",
     "mgg/checklist",
@@ -151,7 +153,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -224,7 +228,9 @@
     "mgg/places-park-alt",
     "mgg/places-park",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",

package/src/type/tree.ts

@@ -0,0 +1,12 @@
+export type TreeAppearance =
+  | 'none'
+  | 'depth'
+
+export type TreeIcon =
+  | 'folder'
+  | 'chevron'
+
+
+export type TreeActions =
+  | 'auto'
+  | 'visible'

package/www/build/mds-input-range.esm.js

@@ -1 +1 @@
-import{p as a,b as e}from"./p-d06a229e.js";export{s as setNonce}from"./p-d06a229e.js";import{g as n}from"./p-e1255160.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((async a=>(await n(),e([["p-e5a76261",[[65,"mds-input-range",{max:[2],min:[2],step:[2],disabled:[1540],value:[1538],progress:[32]},null,{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}]]]],a))));
+import{p as a,b as e}from"./p-dd7b28fc.js";export{s as setNonce}from"./p-dd7b28fc.js";import{g as d}from"./p-e1255160.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((async a=>(await d(),e([["p-8951c4d3",[[65,"mds-input-range",{max:[2],min:[2],step:[2],disabled:[1540],value:[1538],progress:[32]},null,{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}]]]],a))));

package/www/build/mds-input-range.js

@@ -115,7 +115,7 @@ DOMTokenList
     var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
     var start = function() {
       // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-      var url = new URL('./p-939e9c32.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+      var url = new URL('./p-7a612415.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
       System.import(url.href);
     };