iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
6 lines • 24.9 kB
JavaScript
/*! For license information please see 21543.5d45c581526d2d91.js.LICENSE.txt */
export const __rspack_esm_id=21543;export const __rspack_esm_ids=[21543];export const __webpack_modules__={60346(t,e,i){i.a(t,async function(t,a){try{i.d(e,{A:()=>k});i(44114);var s=i(5124),h=i(22441),n=i(6412),o=i(89784),r=i(71956),l=i(95010),u=i(40991),m=i(92070),d=i(28225),c=i(24566),p=i(9395),b=i(62676),g=i(15477),v=i(31896),x=i(17060),f=i(52630),w=i(76348),V=t([f,x]);[f,x]=V.then?(await V)():V;var y=Object.defineProperty,T=Object.getOwnPropertyDescriptor,$=(t,e,i,a)=>{for(var s,h=a>1?void 0:a?T(e,i):e,n=t.length-1;n>=0;n--)(s=t[n])&&(h=(a?s(e,i,h):s(h))||h);return a&&h&&y(e,i,h),h};let k=class extends b.q{static get validators(){return[...super.validators,(0,c.Q)()]}get focusableAnchor(){return this.isRange&&this.thumbMin||this.slider}get validationTarget(){return this.focusableAnchor}get value(){if(this.valueHasChanged){const t=this._value??this.minValue??0;return(0,l.q)(t,this.min,this.max)}const t=this._value??this.defaultValue;return(0,l.q)(t,this.min,this.max)}set value(t){t=Number(t)??this.minValue,this._value!==t&&(this.valueHasChanged=!0,this._value=t)}get isRange(){return this.range}handleSizeChange(){(0,u.b)(this.localName,this.size)}firstUpdated(){this.isRange?(this.draggableThumbMin=new r.W(this.thumbMin,{start:()=>{this.activeThumb="min",this.trackBoundingClientRect=this.track.getBoundingClientRect(),this.valueWhenDraggingStarted=this.minValue,this.customStates.set("dragging",!0),this.showRangeTooltips()},move:(t,e)=>{this.setThumbValueFromCoordinates(t,e,"min")},stop:()=>{this.minValue!==this.valueWhenDraggingStarted&&(this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.hasInteracted=!0),this.hideRangeTooltips(),this.customStates.set("dragging",!1),this.valueWhenDraggingStarted=void 0,this.activeThumb=null}}),this.draggableThumbMax=new r.W(this.thumbMax,{start:()=>{this.activeThumb="max",this.trackBoundingClientRect=this.track.getBoundingClientRect(),this.valueWhenDraggingStarted=this.maxValue,this.customStates.set("dragging",!0),this.showRangeTooltips()},move:(t,e)=>{this.setThumbValueFromCoordinates(t,e,"max")},stop:()=>{this.maxValue!==this.valueWhenDraggingStarted&&(this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.hasInteracted=!0),this.hideRangeTooltips(),this.customStates.set("dragging",!1),this.valueWhenDraggingStarted=void 0,this.activeThumb=null}}),this.draggableTrack=new r.W(this.track,{start:(t,e)=>{if(this.trackBoundingClientRect=this.track.getBoundingClientRect(),this.activeThumb)this.valueWhenDraggingStarted="min"===this.activeThumb?this.minValue:this.maxValue;else{const i=this.getValueFromCoordinates(t,e),a=Math.abs(i-this.minValue),s=Math.abs(i-this.maxValue);if(a===s)if(i>this.maxValue)this.activeThumb="max";else if(i<this.minValue)this.activeThumb="min";else{const i="rtl"===this.localize.dir(),a="vertical"===this.orientation,s=a?e:t,h=this.lastTrackPosition||s;this.lastTrackPosition=s;const n=s>h!==i&&!a||s<h&&a;this.activeThumb=n?"max":"min"}else this.activeThumb=a<=s?"min":"max";this.valueWhenDraggingStarted="min"===this.activeThumb?this.minValue:this.maxValue}this.customStates.set("dragging",!0),this.setThumbValueFromCoordinates(t,e,this.activeThumb),this.showRangeTooltips()},move:(t,e)=>{this.activeThumb&&this.setThumbValueFromCoordinates(t,e,this.activeThumb)},stop:()=>{if(this.activeThumb){("min"===this.activeThumb?this.minValue:this.maxValue)!==this.valueWhenDraggingStarted&&(this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.hasInteracted=!0)}this.hideRangeTooltips(),this.customStates.set("dragging",!1),this.valueWhenDraggingStarted=void 0,this.activeThumb=null}})):this.draggableTrack=new r.W(this.slider,{start:(t,e)=>{this.trackBoundingClientRect=this.track.getBoundingClientRect(),this.valueWhenDraggingStarted=this.value,this.customStates.set("dragging",!0),this.setValueFromCoordinates(t,e),this.showTooltip()},move:(t,e)=>{this.setValueFromCoordinates(t,e)},stop:()=>{this.value!==this.valueWhenDraggingStarted&&(this.updateComplete.then(()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.hasInteracted=!0),this.hideTooltip(),this.customStates.set("dragging",!1),this.valueWhenDraggingStarted=void 0}})}willUpdate(t){this.isRange&&(t.has("minValue")||t.has("maxValue")||t.has("min")||t.has("max"))&&(this.minValue=(0,l.q)(this.minValue,this.min,this.maxValue),this.maxValue=(0,l.q)(this.maxValue,this.minValue,this.max)),super.willUpdate(t)}updated(t){if(this.isRange&&(t.has("minValue")||t.has("maxValue"))&&this.updateFormValue(),t.has("disabled")||t.has("readonly")){const t=!(this.disabled||this.readonly);this.isRange&&(this.draggableThumbMin&&this.draggableThumbMin.toggle(t),this.draggableThumbMax&&this.draggableThumbMax.toggle(t)),this.draggableTrack&&this.draggableTrack.toggle(t)}super.updated(t)}formDisabledCallback(t){this.disabled=t}formResetCallback(){this.isRange?(this.minValue=parseFloat(this.getAttribute("min-value")??String(this.min)),this.maxValue=parseFloat(this.getAttribute("max-value")??String(this.max))):(this._value=null,this.defaultValue=this.defaultValue??parseFloat(this.getAttribute("value")??String(this.min))),this.valueHasChanged=!1,this.hasInteracted=!1,super.formResetCallback()}clampAndRoundToStep(t){const e=(String(this.step).split(".")[1]||"").replace(/0+$/g,"").length,i=Number(this.step),a=Number(this.min),s=Number(this.max);return t=Math.round(t/i)*i,t=(0,l.q)(t,a,s),parseFloat(t.toFixed(e))}getPercentageFromValue(t){return(t-this.min)/(this.max-this.min)*100}getValueFromCoordinates(t,e){const i="rtl"===this.localize.dir(),a="vertical"===this.orientation,{top:s,right:h,bottom:n,left:o,height:r,width:l}=this.trackBoundingClientRect,u=a?e:t,m=a?{start:s,end:n,size:r}:{start:o,end:h,size:l},d=(a||i?m.end-u:u-m.start)/m.size;return this.clampAndRoundToStep(this.min+(this.max-this.min)*d)}handleBlur(){this.isRange?requestAnimationFrame(()=>{const t=this.shadowRoot?.activeElement;t===this.thumbMin||t===this.thumbMax||this.hideRangeTooltips()}):this.hideTooltip(),this.customStates.set("focused",!1),this.dispatchEvent(new FocusEvent("blur",{bubbles:!0,composed:!0}))}handleFocus(t){const e=t.target;this.isRange?(e===this.thumbMin?this.activeThumb="min":e===this.thumbMax&&(this.activeThumb="max"),this.showRangeTooltips()):this.showTooltip(),this.customStates.set("focused",!0),this.dispatchEvent(new FocusEvent("focus",{bubbles:!0,composed:!0}))}handleKeyDown(t){const e="rtl"===this.localize.dir(),i=t.target;if(this.disabled||this.readonly)return;if(this.isRange&&(i===this.thumbMin?this.activeThumb="min":i===this.thumbMax&&(this.activeThumb="max"),!this.activeThumb))return;const a=this.isRange?"min"===this.activeThumb?this.minValue:this.maxValue:this.value;let s=a;switch(t.key){case"ArrowUp":case e?"ArrowLeft":"ArrowRight":t.preventDefault(),s=this.clampAndRoundToStep(a+this.step);break;case"ArrowDown":case e?"ArrowRight":"ArrowLeft":t.preventDefault(),s=this.clampAndRoundToStep(a-this.step);break;case"Home":t.preventDefault(),s=this.isRange&&"min"===this.activeThumb?this.min:this.isRange?this.minValue:this.min;break;case"End":t.preventDefault(),s=this.isRange&&"max"===this.activeThumb?this.max:this.isRange?this.maxValue:this.max;break;case"PageUp":t.preventDefault();const i=Math.max(a+(this.max-this.min)/10,a+this.step);s=this.clampAndRoundToStep(i);break;case"PageDown":t.preventDefault();const h=Math.min(a-(this.max-this.min)/10,a-this.step);s=this.clampAndRoundToStep(h);break;case"Enter":return void(0,d.U)(t,this)}s!==a&&(this.isRange?("min"===this.activeThumb?s>this.maxValue?(this.maxValue=s,this.minValue=s):this.minValue=Math.max(this.min,s):s<this.minValue?(this.minValue=s,this.maxValue=s):this.maxValue=Math.min(this.max,s),this.updateFormValue()):this.value=(0,l.q)(s,this.min,this.max),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),this.hasInteracted=!0)}handleLabelPointerDown(t){t.preventDefault(),this.disabled||(this.isRange?this.thumbMin?.focus():this.slider.focus())}setValueFromCoordinates(t,e){const i=this.value;this.value=this.getValueFromCoordinates(t,e),this.value!==i&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))})}setThumbValueFromCoordinates(t,e,i){const a=this.getValueFromCoordinates(t,e),s="min"===i?this.minValue:this.maxValue;"min"===i?a>this.maxValue?(this.maxValue=a,this.minValue=a):this.minValue=Math.max(this.min,a):a<this.minValue?(this.minValue=a,this.maxValue=a):this.maxValue=Math.min(this.max,a),s!==("min"===i?this.minValue:this.maxValue)&&(this.updateFormValue(),this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))}))}showTooltip(){this.withTooltip&&this.tooltip&&(this.tooltip.open=!0)}hideTooltip(){this.withTooltip&&this.tooltip&&(this.tooltip.open=!1)}showRangeTooltips(){if(!this.withTooltip)return;const t=this.shadowRoot?.getElementById("tooltip-thumb-min"),e=this.shadowRoot?.getElementById("tooltip-thumb-max");"min"===this.activeThumb?(t&&(t.open=!0),e&&(e.open=!1)):"max"===this.activeThumb&&(e&&(e.open=!0),t&&(t.open=!1))}hideRangeTooltips(){if(!this.withTooltip)return;const t=this.shadowRoot?.getElementById("tooltip-thumb-min"),e=this.shadowRoot?.getElementById("tooltip-thumb-max");t&&(t.open=!1),e&&(e.open=!1)}updateFormValue(){if(this.isRange){const t=new FormData;t.append(this.name||"",String(this.minValue)),t.append(this.name||"",String(this.maxValue)),this.setValue(t)}}focus(){this.isRange?this.thumbMin?.focus():this.slider.focus()}blur(){this.isRange?document.activeElement===this.thumbMin?this.thumbMin.blur():document.activeElement===this.thumbMax&&this.thumbMax.blur():this.slider.blur()}stepDown(){if(this.isRange){const t=this.clampAndRoundToStep(this.minValue-this.step);this.minValue=(0,l.q)(t,this.min,this.maxValue),this.updateFormValue()}else{const t=this.clampAndRoundToStep(this.value-this.step);this.value=t}}stepUp(){if(this.isRange){const t=this.clampAndRoundToStep(this.maxValue+this.step);this.maxValue=(0,l.q)(t,this.minValue,this.max),this.updateFormValue()}else{const t=this.clampAndRoundToStep(this.value+this.step);this.value=t}}render(){const t=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,e=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,i=!!this.label||!!t,a=!!this.hint||!!e,h=this.hasSlotController.test("reference"),r=(0,n.H)({xs:"xs"===this.size,s:"s"===this.size||"small"===this.size,m:"m"===this.size||"medium"===this.size,l:"l"===this.size||"large"===this.size,xl:"xl"===this.size,small:"small"===this.size||"s"===this.size,medium:"medium"===this.size||"m"===this.size,large:"large"===this.size||"l"===this.size,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,disabled:this.disabled}),u=[];if(this.withMarkers)for(let t=this.min;t<=this.max;t+=this.step)u.push(this.getPercentageFromValue(t));const m=s.qy` <label id="label" part="label" for="${this.isRange?"thumb-min":"text-box"}" class="${(0,n.H)({vh:!i,"has-label":i})}" @pointerdown="${this.handleLabelPointerDown}"> <slot name="label">${this.label}</slot> </label> `,d=s.qy` <div id="hint" part="hint" class="${(0,n.H)({"has-slotted":a})}"> <slot name="hint">${this.hint}</slot> </div> `,c=this.withMarkers?s.qy` <div id="markers" part="markers"> ${u.map(t=>s.qy`<span part="marker" class="marker" style="${(0,o.W)({"--position":`${t}%`})}"></span>`)} </div> `:"",p=h?s.qy` <div id="references" part="references" aria-hidden="true"> <slot name="reference"></slot> </div> `:"",b=(t,e)=>this.withTooltip?s.qy` <wa-tooltip id="${"tooltip"+("thumb"!==t?"-"+t:"")}" part="tooltip" exportparts="
base:tooltip__base,
body:tooltip__body,
arrow:tooltip__arrow
" trigger="manual" distance="${this.tooltipDistance}" placement="${this.tooltipPlacement}" for="${t}" activation="manual" dir="${this.localize.dir()}"> <span aria-hidden="true"> ${"function"==typeof this.valueFormatter?this.valueFormatter(e):this.localize.number(e)} </span> </wa-tooltip> `:"";if(this.isRange){const t=(0,l.q)(this.getPercentageFromValue(this.minValue),0,100),e=(0,l.q)(this.getPercentageFromValue(this.maxValue),0,100);return s.qy` ${m} <div id="slider" part="slider" class="${r}"> <div id="track" part="track"> <div id="indicator" part="indicator" style="${(0,o.W)({"--start":`${Math.min(t,e)}%`,"--end":`${Math.max(t,e)}%`})}"></div> ${c} <span id="thumb-min" part="thumb thumb-min" style="${(0,o.W)({"--position":`${t}%`})}" role="slider" aria-valuemin="${this.min}" aria-valuenow="${this.minValue}" aria-valuetext="${"function"==typeof this.valueFormatter?this.valueFormatter(this.minValue):this.localize.number(this.minValue)}" aria-valuemax="${this.max}" aria-label="${this.label?`${this.label} (minimum value)`:"Minimum value"}" aria-orientation="${this.orientation}" aria-disabled="${this.disabled?"true":"false"}" aria-readonly="${this.readonly?"true":"false"}" tabindex="${this.disabled?-1:0}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @keydown="${this.handleKeyDown}"></span> <span id="thumb-max" part="thumb thumb-max" style="${(0,o.W)({"--position":`${e}%`})}" role="slider" aria-valuemin="${this.min}" aria-valuenow="${this.maxValue}" aria-valuetext="${"function"==typeof this.valueFormatter?this.valueFormatter(this.maxValue):this.localize.number(this.maxValue)}" aria-valuemax="${this.max}" aria-label="${this.label?`${this.label} (maximum value)`:"Maximum value"}" aria-orientation="${this.orientation}" aria-disabled="${this.disabled?"true":"false"}" aria-readonly="${this.readonly?"true":"false"}" tabindex="${this.disabled?-1:0}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @keydown="${this.handleKeyDown}"></span> </div> ${p} ${d} </div> ${b("thumb-min",this.minValue)} ${b("thumb-max",this.maxValue)} `}{const t=(0,l.q)(this.getPercentageFromValue(this.value),0,100),e=(0,l.q)(this.getPercentageFromValue("number"==typeof this.indicatorOffset?this.indicatorOffset:this.min),0,100);return s.qy` ${m} <div id="slider" part="slider" class="${r}" role="slider" aria-disabled="${this.disabled?"true":"false"}" aria-readonly="${this.disabled?"true":"false"}" aria-orientation="${this.orientation}" aria-valuemin="${this.min}" aria-valuenow="${this.value}" aria-valuetext="${"function"==typeof this.valueFormatter?this.valueFormatter(this.value):this.localize.number(this.value)}" aria-valuemax="${this.max}" aria-labelledby="label" aria-describedby="hint" tabindex="${this.disabled?-1:0}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @keydown="${this.handleKeyDown}"> <div id="track" part="track"> <div id="indicator" part="indicator" style="${(0,o.W)({"--start":`${e}%`,"--end":`${t}%`})}"></div> ${c} <span id="thumb" part="thumb" style="${(0,o.W)({"--position":`${t}%`})}"></span> </div> ${p} ${d} </div> ${b("thumb",this.value)} `}}constructor(){super(...arguments),this.draggableThumbMin=null,this.draggableThumbMax=null,this.hasSlotController=new m.X(this,"hint","label"),this.localize=new x.c(this),this.activeThumb=null,this.lastTrackPosition=null,this.label="",this.hint="",this.minValue=0,this.maxValue=50,this.defaultValue=null==this.getAttribute("value")?this.minValue:Number(this.getAttribute("value")),this._value=null,this.range=!1,this.disabled=!1,this.readonly=!1,this.orientation="horizontal",this.size="m",this.min=0,this.max=100,this.step=1,this.tooltipDistance=8,this.tooltipPlacement="top",this.withMarkers=!1,this.withTooltip=!1,this.withLabel=!1,this.withHint=!1}};k.formAssociated=!0,k.observeSlots=!0,k.css=[v.A,g.A,w.A],$([(0,h.P)("#slider")],k.prototype,"slider",2),$([(0,h.P)("#thumb")],k.prototype,"thumb",2),$([(0,h.P)("#thumb-min")],k.prototype,"thumbMin",2),$([(0,h.P)("#thumb-max")],k.prototype,"thumbMax",2),$([(0,h.P)("#track")],k.prototype,"track",2),$([(0,h.P)("#tooltip")],k.prototype,"tooltip",2),$([(0,h.MZ)()],k.prototype,"label",2),$([(0,h.MZ)({attribute:"hint"})],k.prototype,"hint",2),$([(0,h.MZ)({reflect:!0})],k.prototype,"name",2),$([(0,h.MZ)({type:Number,attribute:"min-value"})],k.prototype,"minValue",2),$([(0,h.MZ)({type:Number,attribute:"max-value"})],k.prototype,"maxValue",2),$([(0,h.MZ)({attribute:"value",reflect:!0,type:Number})],k.prototype,"defaultValue",2),$([(0,h.wk)()],k.prototype,"value",1),$([(0,h.MZ)({type:Boolean,reflect:!0})],k.prototype,"range",2),$([(0,h.MZ)({type:Boolean})],k.prototype,"disabled",2),$([(0,h.MZ)({type:Boolean,reflect:!0})],k.prototype,"readonly",2),$([(0,h.MZ)({reflect:!0})],k.prototype,"orientation",2),$([(0,h.MZ)({reflect:!0})],k.prototype,"size",2),$([(0,p.w)("size")],k.prototype,"handleSizeChange",1),$([(0,h.MZ)({attribute:"indicator-offset",type:Number})],k.prototype,"indicatorOffset",2),$([(0,h.MZ)({type:Number})],k.prototype,"min",2),$([(0,h.MZ)({type:Number})],k.prototype,"max",2),$([(0,h.MZ)({type:Number})],k.prototype,"step",2),$([(0,h.MZ)({type:Boolean})],k.prototype,"autofocus",2),$([(0,h.MZ)({attribute:"tooltip-distance",type:Number})],k.prototype,"tooltipDistance",2),$([(0,h.MZ)({attribute:"tooltip-placement",reflect:!0})],k.prototype,"tooltipPlacement",2),$([(0,h.MZ)({attribute:"with-markers",type:Boolean})],k.prototype,"withMarkers",2),$([(0,h.MZ)({attribute:"with-tooltip",type:Boolean})],k.prototype,"withTooltip",2),$([(0,h.MZ)({attribute:"with-label",type:Boolean})],k.prototype,"withLabel",2),$([(0,h.MZ)({attribute:"with-hint",type:Boolean})],k.prototype,"withHint",2),$([(0,h.MZ)({attribute:!1})],k.prototype,"valueFormatter",2),k=$([(0,h.EM)("wa-slider")],k),a()}catch(t){a(t)}})},76348(t,e,i){i.d(e,{A:()=>a});var a=i(5124).AH`:host{--track-size:0.5em;--thumb-width:1.4em;--thumb-height:1.4em;--marker-width:0.1875em;--marker-height:0.1875em}:host([orientation=vertical]){width:auto}#label:has(~ .vertical){display:block;order:2;max-width:none;text-align:center}#description:has(~ .vertical){order:3;text-align:center}#label.has-label~#slider.horizontal{margin-block-start:0.5em}#label.has-label~#slider.vertical{margin-block-end:0.5em}#slider{touch-action:none}#slider:focus{outline:0}#slider:focus-visible:not(.disabled) #thumb,#slider:focus-visible:not(.disabled) #thumb-max,#slider:focus-visible:not(.disabled) #thumb-min{outline:var(--wa-focus-ring)}#track{position:relative;border-radius:9999px;background:var(--wa-color-neutral-fill-normal);isolation:isolate}.horizontal #track{height:var(--track-size)}.vertical #track{order:1;width:var(--track-size);height:200px}.disabled #track{cursor:not-allowed;opacity:.5}#indicator{position:absolute;border-radius:inherit;background-color:var(--wa-form-control-activated-color)}#indicator:dir(ltr){right:calc(100% - max(var(--start),var(--end)));left:min(var(--start),var(--end))}#indicator:dir(rtl){right:min(var(--start),var(--end));left:calc(100% - max(var(--start),var(--end)))}.horizontal #indicator{top:0;height:100%}.vertical #indicator{top:calc(100% - var(--end));bottom:var(--start);left:0;width:100%}#thumb,#thumb-max,#thumb-min{z-index:3;position:absolute;width:var(--thumb-width);height:var(--thumb-height);border:solid .125em var(--wa-color-surface-default);border-radius:50%;background-color:var(--wa-form-control-activated-color);cursor:pointer}.disabled #thumb,.disabled #thumb-max,.disabled #thumb-min{cursor:inherit}.horizontal #thumb,.horizontal #thumb-max,.horizontal #thumb-min{top:calc(50% - var(--thumb-height)/ 2)}:is(.horizontal #thumb,.horizontal #thumb-min,.horizontal #thumb-max):dir(ltr){right:auto;left:calc(var(--position) - var(--thumb-width)/ 2)}:is(.horizontal #thumb,.horizontal #thumb-min,.horizontal #thumb-max):dir(rtl){right:calc(var(--position) - var(--thumb-width)/ 2);left:auto}.vertical #thumb,.vertical #thumb-max,.vertical #thumb-min{bottom:calc(var(--position) - var(--thumb-height)/ 2);left:calc(50% - var(--thumb-width)/ 2)}:host([range]) #thumb-max:focus-visible,:host([range]) #thumb-min:focus-visible{z-index:4;outline:var(--wa-focus-ring)}#markers{pointer-events:none}.marker{z-index:2;position:absolute;width:var(--marker-width);height:var(--marker-height);border-radius:50%;background-color:var(--wa-color-surface-default)}.marker:first-of-type,.marker:last-of-type{display:none}.horizontal .marker{top:calc(50% - var(--marker-height)/ 2);left:calc(var(--position) - var(--marker-width)/ 2)}.vertical .marker{top:calc(var(--position) - var(--marker-height)/ 2);left:calc(50% - var(--marker-width)/ 2)}#references{position:relative}#references slot{display:flex;justify-content:space-between;height:100%}#references ::slotted(*){color:var(--wa-color-text-quiet);font-size:.875em;line-height:1}.horizontal #references{margin-block-start:0.5em}.vertical{display:flex;margin-inline:auto}.vertical #track{order:1}.vertical #references{order:2;width:min-content;margin-inline-start:.75em}.vertical #references slot{flex-direction:column}.vertical #references slot{flex-direction:column}`},71956(t,e,i){i.d(e,{W:()=>s});const a="undefined"!=typeof window&&"ontouchstart"in window;class s{start(){this.isActive||(this.element.addEventListener("pointerdown",this.handleDragStart),a&&this.element.addEventListener("touchstart",this.handleDragStart),this.isActive=!0)}stop(){document.removeEventListener("pointerup",this.handleDragStop),document.removeEventListener("pointermove",this.handleDragMove),document.removeEventListener("pointercancel",this.handleDragStop),document.removeEventListener("touchend",this.handleDragStop),document.removeEventListener("touchmove",this.handleDragMove),document.removeEventListener("touchcancel",this.handleDragStop),this.element.removeEventListener("pointerdown",this.handleDragStart),a&&this.element.removeEventListener("touchstart",this.handleDragStart),this.isActive=!1,this.isDragging=!1}toggle(t){(void 0!==t?t:!this.isActive)?this.start():this.stop()}constructor(t,e){this.isActive=!1,this.isDragging=!1,this.handleDragStart=t=>{const e="touches"in t?t.touches[0].clientX:t.clientX,i="touches"in t?t.touches[0].clientY:t.clientY;this.isDragging||!a&&t.buttons>1||(this.isDragging=!0,document.addEventListener("pointerup",this.handleDragStop),document.addEventListener("pointermove",this.handleDragMove),document.addEventListener("pointercancel",this.handleDragStop),document.addEventListener("touchend",this.handleDragStop),document.addEventListener("touchmove",this.handleDragMove),document.addEventListener("touchcancel",this.handleDragStop),this.options.start(e,i))},this.handleDragStop=t=>{const e="changedTouches"in t?t.changedTouches[0].clientX:t.clientX,i="changedTouches"in t?t.changedTouches[0].clientY:t.clientY;this.isDragging=!1,document.removeEventListener("pointerup",this.handleDragStop),document.removeEventListener("pointermove",this.handleDragMove),document.removeEventListener("pointercancel",this.handleDragStop),document.removeEventListener("touchend",this.handleDragStop),document.removeEventListener("touchmove",this.handleDragMove),document.removeEventListener("touchcancel",this.handleDragStop),this.options.stop(e,i)},this.handleDragMove=t=>{const e="touches"in t?t.touches[0].clientX:t.clientX,i="touches"in t?t.touches[0].clientY:t.clientY;window.getSelection()?.removeAllRanges(),this.options.move(e,i)},this.element=t,this.options={start:()=>{},stop:()=>{},move:()=>{},...e},this.start()}}},24566(t,e,i){i.d(e,{Q:()=>a});i(44114);const a=()=>({observedAttributes:["min","max","step"],checkValidity(t){const e={message:"",isValid:!0,invalidKeys:[]},i=(t,e,i,a)=>{const s=document.createElement("input");return s.type="range",s.min=String(e),s.max=String(i),s.step=String(a),s.value=String(t),s.checkValidity(),s.validationMessage};if(t.isRange){const a=t.minValue,s=t.maxValue;if(a<t.min)return e.isValid=!1,e.invalidKeys.push("rangeUnderflow"),e.message=i(a,t.min,t.max,t.step)||`Value must be greater than or equal to ${t.min}.`,e;if(s>t.max)return e.isValid=!1,e.invalidKeys.push("rangeOverflow"),e.message=i(s,t.min,t.max,t.step)||`Value must be less than or equal to ${t.max}.`,e;if(t.step&&1!==t.step){const h=(a-t.min)%t.step!==0,n=(s-t.min)%t.step!==0;if(h||n){e.isValid=!1,e.invalidKeys.push("stepMismatch");const n=h?a:s;return e.message=i(n,t.min,t.max,t.step)||`Value must be a multiple of ${t.step}.`,e}}}else{const a=t.value;if(a<t.min)return e.isValid=!1,e.invalidKeys.push("rangeUnderflow"),e.message=i(a,t.min,t.max,t.step)||`Value must be greater than or equal to ${t.min}.`,e;if(a>t.max)return e.isValid=!1,e.invalidKeys.push("rangeOverflow"),e.message=i(a,t.min,t.max,t.step)||`Value must be less than or equal to ${t.max}.`,e;if(t.step&&1!==t.step&&(a-t.min)%t.step!==0)return e.isValid=!1,e.invalidKeys.push("stepMismatch"),e.message=i(a,t.min,t.max,t.step)||`Value must be a multiple of ${t.step}.`,e}return e}})}};