@solid-design-system/components 6.7.0 → 6.7.1

package/cdn/chunks/chunk.3G2JTYRD.js

@@ -0,0 +1,2 @@
+import{a as p,b,c as _}from"./chunk.IVHEBGOY.js";import{a as A}from"./chunk.N3WG3NAL.js";import{b as D}from"./chunk.CJ34NUTS.js";import{a as d}from"./chunk.PV6UYBMY.js";import{a as M}from"./chunk.CGQ2BPPZ.js";import{a as w}from"./chunk.IQPMMUES.js";import{a as c}from"./chunk.YFQFOIEM.js";import{a as C,b as h,d as f,e as I,h as T}from"./chunk.CMXQRUFT.js";import{b as E,e as v}from"./chunk.763RLJEK.js";import{e as o}from"./chunk.6EV4YU6C.js";var l=class extends T{constructor(){super();this.formControlController=new D(this);this.hasSlotController=new M(this,"label","help-text");this.localize=new w(this);this.name="";this.label="";this.helpText="";this.min=0;this.max=100;this.step=1;this.disabled=!1;this.visuallyDisabled=!1;this.noTrackBar=!1;this.tooltip="on-interaction";this.defaultValue="";this._value=[0];this._rangeValues=new Map;this._lastChangeValue=[];this._hasFocus=!1;this._dragStyleElement=null;this._preventSelectStart=t=>t.preventDefault();this.tooltipFormatter=this.localize.number.bind(this.localize)}set value(t){this._value=t?t.split(" ").map(Number).sort(p):[]}get value(){return this._value.slice().sort(p).join(" ")}set valueAsArray(t){let e=this._value;this._value=Array.isArray(t)?t.slice().sort(p):t||[],b(e,this._value)&&this.requestUpdate("value",e.join(" "))}get valueAsArray(){return[...this._value].sort(p)}get rtl(){return this.localize.dir()==="rtl"}disconnectedCallback(){super.disconnectedCallback(),this._restoreTextSelection()}firstUpdated(){this.formControlController.updateValidity(),this._lastChangeValue=Array.from(this._value),this.thumbs.forEach(async t=>{var i,a;let e=t.parentElement;await e.updateComplete,(a=(i=e.shadowRoot)==null?void 0:i.querySelector("sd-popup"))==null||a.setAttribute("distance","14")})}willUpdate(t){super.willUpdate(t),this.min>this.max&&([this.min,this.max]=[this.max,this.min]),this.step>this.max-this.min&&(this.step=this.max-this.min),this.step<=0&&(this.step=1);let e=this._value.map(i=>{if(i<=this.min)return this.min;if(i>=this.max)return this.max;let a=this.min+this.step*Math.round((i-this.min)/this.step);return a>this.max?this.max:a});b(this._value,e)&&(this._value=e)}updated(t){super.updated(t);for(let e of this.thumbs){let i=+e.dataset.rangeId;this._rangeValues.has(i)&&(this.moveThumb(e,this._rangeValues.get(i)),this.tooltip==="always-visible"&&(e.parentElement.closeTrigger="manual",e.parentElement.show()))}this.updateActiveTrack()}focus(t){let e=this.thumbs.item(0);e?e.focus(t):super.focus(t)}get validity(){return this.input.validity}checkValidity(){var t;return(t=this.input)==null?void 0:t.checkValidity()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}updateTooltip(t){let e=+t.dataset.rangeId;if(!this._rangeValues.has(e))return;let i=this._rangeValues.get(e),a=t.parentElement;a.content=this.tooltipFormatter(i)}updateActiveTrack(){let{activeTrack:t}=this;if(!t)return;if(this.min===this.max){t.style.insetInlineStart="0%",t.style.insetInlineEnd="0%";return}if(this._value.length===1){let s=getComputedStyle(this).getPropertyValue("--track-active-offset")||"0%",n=100*(this._value[0]-this.min)/(this.max-this.min);t.style.insetInlineStart=`min(${s}, ${n}%)`,t.style.insetInlineEnd=`min(calc(100% - ${s}), calc(100% - ${n}%))`;return}let e=this._value.slice().sort(p),i=100*(e[0]-this.min)/(this.max-this.min),a=100*(e[e.length-1]-this.min)/(this.max-this.min);t.style.insetInlineStart=`${i}%`,t.style.insetInlineEnd=`calc(100% - ${a}%)`}moveThumb(t,e){t.setAttribute("aria-valuenow",e.toString()),t.setAttribute("aria-valuetext",this.tooltipFormatter(e));let i=(e-this.min)/(this.max-this.min);t.style.insetInlineStart=`calc(${100*i}% - 8px)`,this.updateTooltip(t)}movementBoundariesForThumb(t,e){let i=this.valueAsArray,s=Array.from(this.thumbs).indexOf(t),n=i[s-1]||this.min,r=i[s+1]||this.max,u=e<n||e>r;return{finalValue:Math.max(n,Math.min(r,e)),isRestricted:u,nextValue:r,prevValue:n}}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t)}onClickTrack(t,e=!0){if(this.disabled||this.visuallyDisabled)return;let{clientX:i}=t,a=Array.from(this.thumbs),s=_(this.inputWrapper,i),n=this.step/(this.max-this.min),r=this.min+this.step*Math.round(s/n),u=a.reduce((g,x)=>{let k=this._rangeValues.get(+x.dataset.rangeId),L=this._rangeValues.get(+g.dataset.rangeId),V=Math.abs(k-r),$=Math.abs(L-r);return V===$?k<r?x:g:V<$?x:g}),m=+u.dataset.rangeId;if(!m)return;this._rangeValues.set(m,r),this.moveThumb(u,r);let y=this._value;this._value=Array.from(this._rangeValues.values()),this.updateActiveTrack(),b(y,this._value)&&(this._lastChangeValue=Array.from(this._value),this.emit("sd-input"),this.emit("sd-change"));let F=new PointerEvent("pointerdown",t);e&&u.dispatchEvent(F)&&this.updateTooltip(u)}onClickTrackItem(t){this.onClickTrack(t,!1)}_preventTextSelection(){if(!this._dragStyleElement){let t=document.createElement("style");t.setAttribute("data-sd-range-drag",""),t.textContent="*, *::before, *::after { user-select: none !important; -webkit-user-select: none !important; }",document.head.appendChild(t),this._dragStyleElement=t}document.addEventListener("selectstart",this._preventSelectStart)}_restoreTextSelection(){this._dragStyleElement&&(this._dragStyleElement.remove(),this._dragStyleElement=null),document.removeEventListener("selectstart",this._preventSelectStart)}async onClickThumb(t){if(this.disabled||this.visuallyDisabled)return;let e=t.target;if(this.updateTooltip(e),e.dataset.pointerId)try{e.releasePointerCapture(+e.dataset.pointerId)}catch(i){}e.dataset.pointerId=t.pointerId.toString(),e.setPointerCapture(t.pointerId),this._preventTextSelection(),e.classList.add("grabbed"),this.tooltip==="on-interaction"&&await e.parentElement.show()}onDragThumb(t){if(this.disabled||this.visuallyDisabled)return;let e=t.target,i=+e.dataset.rangeId;if(!this._rangeValues.has(i)||(e.dataset.pointerId?+e.dataset.pointerId:null)!==t.pointerId)return;let s=_(this.inputWrapper,t.clientX),n=this.step/(this.max-this.min),r=this.min+this.step*Math.round(s/n);if(this.emit("sd-move",{cancelable:!0,detail:{element:e,value:r}}).defaultPrevented)return;let m=this.movementBoundariesForThumb(e,r);m.isRestricted?(r=m.finalValue,e.style.zIndex=(3+this.thumbs.length).toFixed(0)):e.style.zIndex="3",this._rangeValues.set(i,r),this.moveThumb(e,r);let y=this._value;this._value=Array.from(this._rangeValues.values()),this.updateActiveTrack(),b(y,this._value)&&this.emit("sd-input")}async onReleaseThumb(t){let e=t.target;!e.dataset.pointerId||t.pointerId!==+e.dataset.pointerId||(e.classList.remove("grabbed"),e.releasePointerCapture(t.pointerId),this._restoreTextSelection(),delete e.dataset.pointerId,b(this._lastChangeValue,this._value)&&(this._lastChangeValue=Array.from(this._value),this.emit("sd-change")),this.tooltip==="on-interaction"&&await e.parentElement.hide())}onKeyPress(t){let e=t.target,i=+e.dataset.rangeId,a=this._rangeValues.get(i);if(a===void 0)return;let s=a;switch(t.key){case"ArrowUp":case"Up":s=Math.min(a+this.step,this.max);break;case"ArrowDown":case"Down":s=Math.max(a-this.step,this.min);break;case"ArrowLeft":case"Left":s=this.rtl?Math.min(a+this.step,this.max):Math.max(a-this.step,this.min);break;case"ArrowRight":case"Right":s=this.rtl?Math.max(a-this.step,this.min):Math.min(a+this.step,this.max);break;case"PageUp":s=Math.min(a+(this.max-this.min)/5,this.max);break;case"PageDown":s=Math.max(a-(this.max-this.min)/5,this.min);break;case"Home":s=this.min;break;case"End":s=this.max;break;default:return}if(s!==a){if(this.emit("sd-move",{cancelable:!0,detail:{element:e,value:s}}).defaultPrevented)return;let r=this.movementBoundariesForThumb(e,s);r.isRestricted&&(s=r.finalValue),this.moveThumb(e,s),this._rangeValues.set(i,s),this._value=Array.from(this._rangeValues.values()),this.updateActiveTrack(),this.updateTooltip(e),this._lastChangeValue=Array.from(this._value),this.emit("sd-input"),this.emit("sd-change")}t.preventDefault()}onBlur(t){var e;t.relatedTarget&&((e=this.shadowRoot)!=null&&e.contains(t.relatedTarget))||(this.emit("sd-blur"),this._hasFocus=!1)}onFocusThumb(t){var i;if(this.disabled||this.visuallyDisabled)return;this._hasFocus||(this._hasFocus=!0,this.emit("sd-focus"));let e=t.target;(i=e==null?void 0:e.dataset)!=null&&i.rangeId&&this.updateTooltip(e)}renderThumbs(t){let e=this._value.length>1;return this._rangeValues.clear(),this._value.map((i,a)=>{let s=a+1;this._rangeValues.set(s,i);let n=`thumb-${s}`,r="",u="";return e?(u=t?`label aria-label-hidden ${n}`:`aria-label-hidden ${n}`,a===0?r=`${this.localize.term("minimum")} (${this.tooltipFormatter(i)})`:a===this._value.length-1?r=`${this.localize.term("maximum")} (${this.tooltipFormatter(i)})`:r=this.tooltipFormatter(i)):u=t?"label aria-label-hidden":"",v`<sd-tooltip trigger="${this.tooltip==="on-interaction"?"focus":"manual"}" disabled="${d(this.disabled||this.visuallyDisabled||this.tooltip==="hidden"?!0:void 0)}"><div id="${n}" part="thumb" role="slider" tabindex="${this.disabled||this.visuallyDisabled?-1:0}" aria-disabled="${d(this.disabled||this.visuallyDisabled?"true":void 0)}" aria-labelledby="${u}" aria-label="${r}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${i}" aria-valuetext="${this.tooltipFormatter(i)}" data-range-id="${s}" data-disabled="${d(this.disabled||this.visuallyDisabled||void 0)}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${c("rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",this.disabled||this.visuallyDisabled?"outline-none":"cursor-pointer focus-visible:focus-outline")}"></div></sd-tooltip>`})}render(){let t={label:this.hasSlotController.test("label"),helpText:this.hasSlotController.test("help-text")},e=!!(this.label||t.label),i=!!(this.helpText||t.helpText);return v`<div part="form-control" @focusout="${this.onBlur}" class="flex flex-col">${e?v`<div class="flex items-center gap-1"><label id="label" part="form-control-label" aria-hidden="${e?"false":"true"}" class="${c("w-full text-start",e?"inline-block":"hidden")}" @click="${this.focus}"><slot name="label">${this.label}</slot></label></div>`:null} <label id="aria-label-hidden" class="sr-only">(${this._value.map(this.tooltipFormatter).join(" - ")})</label><div part="base" class="${c("inline-flex w-full",this.visuallyDisabled&&"focus-visible:focus-outline")}" tabindex="${d(this.visuallyDisabled?"0":void 0)}"><div part="input-wrapper" class="relative flex-1 mx-2 mb-[10px]"><input id="input" tabindex="-1" hidden @invalid="${this.handleInvalid}"><div part="track-wrapper" role="presentation" @pointerdown="${this.onClickTrack}" class="relative cursor-pointer -mx-2"><div part="track-click-helper" class="absolute -inset-y-2 inset-x-0"></div><div part="track" data-disabled="${d(this.disabled||this.visuallyDisabled||void 0)}" class="${c("h-1 my-[6px]")}"></div><div part="active-track" hidden="${d(this.noTrackBar?!0:void 0)}" data-disabled="${d(this.disabled||this.visuallyDisabled||void 0)}" class="${c("absolute top-0 h-1")}"></div></div>${this.renderThumbs(e)}<div class="-mt-[10px]" part="scale-ticks" @pointerdown="${this.onClickTrackItem}" role="presentation"><slot name="scale-ticks"></slot></div></div></div><slot></slot><slot name="help-text" part="form-control-help-text" id="help-text" class="${c("text-sm text-neutral-700 mt-1",i?"block":"hidden")}" aria-hidden="${!i}">${this.helpText}</slot></div>`}};l.styles=[...T.styles,E`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
+[part='base']{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}[part=thumb]{background-color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}[part=thumb]:hover{background-color:rgba(var(--sd-color-icon-fill-primary-500,rgba(var(--sd-color-primary-500))))}[part=thumb].grabbed{background-color:rgba(var(--sd-color-icon-fill-primary-800,rgba(var(--sd-color-primary-800))))}[part=thumb][data-disabled]{background-color:rgba(var(--sd-color-icon-fill-neutral-500,rgba(var(--sd-color-neutral-500))))}[part=track]{background-color:rgba(var(--sd-color-border-neutral-400,rgba(var(--sd-color-neutral-400))))}[part=track][data-disabled]{background-color:rgba(var(--sd-color-background-neutral-500,rgba(var(--sd-color-neutral-500))))}[part=active-track]{background-color:rgba(var(--sd-color-icon-fill-primary,rgba(var(--sd-color-primary))))}[part=active-track][data-disabled]{background-color:rgba(var(--sd-color-icon-fill-neutral-500,rgba(var(--sd-color-neutral-500))))}`],o([f("#input")],l.prototype,"input",2),o([f('[part="active-track"]')],l.prototype,"activeTrack",2),o([f('[part="input-wrapper"]')],l.prototype,"inputWrapper",2),o([I('[part="thumb"]')],l.prototype,"thumbs",2),o([h({attribute:!1})],l.prototype,"tooltipFormatter",2),o([h({type:String,reflect:!0})],l.prototype,"name",2),o([h({type:String,reflect:!0})],l.prototype,"label",2),o([h({attribute:"help-text",reflect:!0})],l.prototype,"helpText",2),o([h({type:Number,reflect:!0})],l.prototype,"min",2),o([h({type:Number,reflect:!0})],l.prototype,"max",2),o([h({type:Number,reflect:!0})],l.prototype,"step",2),o([h({type:Boolean,reflect:!0})],l.prototype,"disabled",2),o([h({attribute:"visually-disabled",type:Boolean,reflect:!0})],l.prototype,"visuallyDisabled",2),o([h({attribute:"no-track-bar",type:Boolean,reflect:!0})],l.prototype,"noTrackBar",2),o([h({attribute:"tooltip",type:String,reflect:!0})],l.prototype,"tooltip",2),o([A()],l.prototype,"defaultValue",2),o([h({type:String})],l.prototype,"value",1),l=o([C("sd-range")],l);export{l as a};

package/cdn/components/range/range.d.ts

@@ -1,3 +1,4 @@
+import '../tooltip/tooltip';
 import { FormControlController } from '../../internal/form';
 import { LocalizeController } from '../../utilities/localize';
 import SolidElement from '../../internal/solid-element';
@@ -31,8 +32,11 @@ export default class SdRange extends SolidElement implements SolidFormControl {
     private _rangeValues;
     private _lastChangeValue;
     private _hasFocus;
+    private _dragStyleElement;
+    private _preventSelectStart;
     get rtl(): boolean;
     constructor();
+    disconnectedCallback(): void;
     firstUpdated(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
@@ -48,6 +52,8 @@ export default class SdRange extends SolidElement implements SolidFormControl {
     private handleInvalid;
     private onClickTrack;
     private onClickTrackItem;
+    private _preventTextSelection;
+    private _restoreTextSelection;
     private onClickThumb;
     private onDragThumb;
     private onReleaseThumb;

package/cdn/components/range/range.js

@@ -1 +1 @@
-import{a}from"../../chunks/chunk.G7D3WBTA.js";import"../../chunks/chunk.IVHEBGOY.js";import"../../chunks/chunk.N3WG3NAL.js";import"../../chunks/chunk.CJ34NUTS.js";import"../../chunks/chunk.PV6UYBMY.js";import"../../chunks/chunk.CGQ2BPPZ.js";import"../../chunks/chunk.IQPMMUES.js";import"../../chunks/chunk.B3QUTUIL.js";import"../../chunks/chunk.3TJM745S.js";import"../../chunks/chunk.HJGLYEWV.js";import"../../chunks/chunk.YFQFOIEM.js";import"../../chunks/chunk.CMXQRUFT.js";import"../../chunks/chunk.763RLJEK.js";import"../../chunks/chunk.W4QBFD6E.js";import"../../chunks/chunk.6EV4YU6C.js";export{a as default};
+import{a}from"../../chunks/chunk.3G2JTYRD.js";import"../../chunks/chunk.3GKNX2TO.js";import"../../chunks/chunk.IVHEBGOY.js";import"../../chunks/chunk.N3WG3NAL.js";import"../../chunks/chunk.NQFJN2CW.js";import"../../chunks/chunk.CJ34NUTS.js";import"../../chunks/chunk.PV6UYBMY.js";import"../../chunks/chunk.CGQ2BPPZ.js";import"../../chunks/chunk.B2NUKX6G.js";import"../../chunks/chunk.KLRPP4NQ.js";import"../../chunks/chunk.RXJ46J4Q.js";import"../../chunks/chunk.MP6XEXRW.js";import"../../chunks/chunk.D6LAH53B.js";import"../../chunks/chunk.54UVKIZB.js";import"../../chunks/chunk.3FMN7C5N.js";import"../../chunks/chunk.MB7SWCJ2.js";import"../../chunks/chunk.PYHYYOBE.js";import"../../chunks/chunk.TWZDCIM2.js";import"../../chunks/chunk.MWDEA25W.js";import"../../chunks/chunk.IQPMMUES.js";import"../../chunks/chunk.B3QUTUIL.js";import"../../chunks/chunk.3TJM745S.js";import"../../chunks/chunk.HJGLYEWV.js";import"../../chunks/chunk.YFQFOIEM.js";import"../../chunks/chunk.NYKJXI3Q.js";import"../../chunks/chunk.CMXQRUFT.js";import"../../chunks/chunk.763RLJEK.js";import"../../chunks/chunk.W4QBFD6E.js";import"../../chunks/chunk.6EV4YU6C.js";export{a as default};

package/cdn/custom-elements.json

@@ -22544,7 +22544,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "6.7.0",
+    "version": "6.7.1",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"