@luzmo/analytics-components-kit 1.1.1 → 1.2.1

package/standalone/chunks/{heat-map-options.config-DF5kjOOe.js → heat-map-options.config-D93AeYFi.js}

@@ -1,2 +1,2 @@
 
-import{t as e}from"./info-tooltip-options.config-DtfU5ZO8.js";import{n as t,t as n}from"./color-palettes-B41FvzWH.js";import{t as r}from"./map-tile-providers-DZT1QZX_.js";import{t as i}from"./color-7IgCGZKz.js";var a=()=>structuredClone(n().Spectrum.colors5),o=e=>{if(!e||e.length===0)return[];let t=/^rgb(a)?\s*\(/i.test(e.at(-1)?.trim()??``);return e.map(e=>new i(e).toString({format:t?`hex`:`rgb`}))},s=e=>{let r=e?.length||0;return r===0?{type:`heat`,colorClass:`Spectrum`,colors:a()??[]}:t().map(e=>({type:n()[e]?.type,colorClass:e,colors:n()[e]?.[`colors${r}`]??[]})).find(t=>Array.isArray(t.colors)&&Array.isArray(e)&&t.colors.length===e.length&&t.colors.every((t,n)=>t===e[n]))??{type:`manual`,colorClass:`manual`,colors:e}},c=[{key:`general`,type:`group`,open:!0,children:[{key:`display.title`,control:{type:`switch`,label:`Title`,default:!0}},{key:`enabled.zoom`,control:{type:`switch`,label:`Zoom`,default:!0}},{key:`enabled.pan`,control:{type:`switch`,label:`Pan`,default:!0}},{key:`enabled.pitchBearing`,control:{type:`switch`,label:`Pitch & Rotate`,default:!1}},{type:`divider`},{key:`vectorTileProvider`,control:{type:`picker`,label:`Map style`,default:`Basic`,enum:[`Basic`,`Bright`,`Dark`,`Fiord`,`Liberty`,`Pastel`,`Positron`,`Streets`,`Toner`,`Topographique`,`Voyager`,`No Tiles`],parseValue:e=>e?.name||`Basic`,toValue:e=>r[e]??{}}}]},{key:`heat`,type:`group`,open:!0,children:[{key:`enabled.adaptOnZoom`,control:{type:`switch`,label:`Adapt on zoom`,tooltip:`If turned off, density is calculated based on map surface`,default:!0}},{key:`screenRadius`,control:{type:`slider`,label:`Radius`,default:20,min:1,max:50,step:1}},{key:`intensity`,control:{type:`slider`,label:`Intensity`,tooltip:`Multiplier for the density, multiplies by 1 on minimum (default)`,default:1,min:1,max:100,step:1}}]},{key:`heatColors`,type:`group`,open:!0,children:[{key:`transparency`,control:{type:`slider`,label:`Opacity`,default:.8,min:0,max:1,step:.01}},{key:`colorsClassType`,control:{type:`picker`,label:`Colors type`,default:`sequential`,enum:[`heat`,`sequential`,`manual`],calculateValue:({options:e})=>s(e?.colors??[]).type,toOptions:({options:e,value:r})=>{let i=s(e?.colors??[]),c={...e};return i.type!==r&&(c.colors=r===`manual`?o(i.colors??a()):n()[t(r)?.[0]]?.colors5??a()),c}}},{key:`colorsClass`,control:{type:`color-palette-picker`,label:`Color palette`,hideLabel:!0,default:`Spectrum`,enum:({options:e})=>{let n=s(e?.colors??[]).type;return t([`heat`,`sequential`].includes(n)?n:`heat`)},calculateValue:({options:e})=>{let t=s(e?.colors??[]);return t?.colorClass&&t.colorClass!==`manual`?t.colorClass:`Spectrum`},toOptions:({options:e,value:t})=>({...e,colors:n()[t]?.colors5??a()})},visibleIf:({options:e})=>s(e?.colors??[]).type!==`manual`},{key:`colors`,control:{type:`color-range`,editRangeSize:!1,noValues:!0,minimumRangeSize:4,noAlphaChannel:!0,hideLabel:!0,label:`Manual color ranges`,default:a(),parseValue:e=>e?.map(e=>({color:e})),toValue:e=>e?.map(e=>e?.color)??[]},visibleIf:({options:e})=>s(e?.colors??[]).type===`manual`}]},e()];export{c as default};
+import{t as e}from"./info-tooltip-options.config-DtfU5ZO8.js";import{n as t,t as n}from"./color-palettes-B41FvzWH.js";import{t as r}from"./map-tile-providers-DZT1QZX_.js";import{t as i}from"./embed-CBu7iQRx.js";var a=()=>structuredClone(n().Spectrum.colors5),o=e=>{if(!e||e.length===0)return[];let t=/^rgb(a)?\s*\(/i.test(e.at(-1)?.trim()??``);return e.map(e=>new i(e).toString({format:t?`hex`:`rgb`}))},s=e=>{let r=e?.length||0;return r===0?{type:`heat`,colorClass:`Spectrum`,colors:a()??[]}:t().map(e=>({type:n()[e]?.type,colorClass:e,colors:n()[e]?.[`colors${r}`]??[]})).find(t=>Array.isArray(t.colors)&&Array.isArray(e)&&t.colors.length===e.length&&t.colors.every((t,n)=>t===e[n]))??{type:`manual`,colorClass:`manual`,colors:e}},c=[{key:`general`,type:`group`,open:!0,children:[{key:`display.title`,control:{type:`switch`,label:`Title`,default:!0}},{key:`enabled.zoom`,control:{type:`switch`,label:`Zoom`,default:!0}},{key:`enabled.pan`,control:{type:`switch`,label:`Pan`,default:!0}},{key:`enabled.pitchBearing`,control:{type:`switch`,label:`Pitch & Rotate`,default:!1}},{type:`divider`},{key:`vectorTileProvider`,control:{type:`picker`,label:`Map style`,default:`Basic`,enum:[`Basic`,`Bright`,`Dark`,`Fiord`,`Liberty`,`Pastel`,`Positron`,`Streets`,`Toner`,`Topographique`,`Voyager`,`No Tiles`],parseValue:e=>e?.name||`Basic`,toValue:e=>r[e]??{}}}]},{key:`heat`,type:`group`,open:!0,children:[{key:`enabled.adaptOnZoom`,control:{type:`switch`,label:`Adapt on zoom`,tooltip:`If turned off, density is calculated based on map surface`,default:!0}},{key:`screenRadius`,control:{type:`slider`,label:`Radius`,default:20,min:1,max:50,step:1}},{key:`intensity`,control:{type:`slider`,label:`Intensity`,tooltip:`Multiplier for the density, multiplies by 1 on minimum (default)`,default:1,min:1,max:100,step:1}}]},{key:`heatColors`,type:`group`,open:!0,children:[{key:`transparency`,control:{type:`slider`,label:`Opacity`,default:.8,min:0,max:1,step:.01}},{key:`colorsClassType`,control:{type:`picker`,label:`Colors type`,default:`sequential`,enum:[`heat`,`sequential`,`manual`],calculateValue:({options:e})=>s(e?.colors??[]).type,toOptions:({options:e,value:r})=>{let i=s(e?.colors??[]),c={...e};return i.type!==r&&(c.colors=r===`manual`?o(i.colors??a()):n()[t(r)?.[0]]?.colors5??a()),c}}},{key:`colorsClass`,control:{type:`color-palette-picker`,label:`Color palette`,hideLabel:!0,default:`Spectrum`,enum:({options:e})=>{let n=s(e?.colors??[]).type;return t([`heat`,`sequential`].includes(n)?n:`heat`)},calculateValue:({options:e})=>{let t=s(e?.colors??[]);return t?.colorClass&&t.colorClass!==`manual`?t.colorClass:`Spectrum`},toOptions:({options:e,value:t})=>({...e,colors:n()[t]?.colors5??a()})},visibleIf:({options:e})=>s(e?.colors??[]).type!==`manual`},{key:`colors`,control:{type:`color-range`,editRangeSize:!1,noValues:!0,minimumRangeSize:4,noAlphaChannel:!0,hideLabel:!0,label:`Manual color ranges`,default:a(),parseValue:e=>e?.map(e=>({color:e})),toValue:e=>e?.map(e=>e?.color)??[]},visibleIf:({options:e})=>s(e?.colors??[]).type===`manual`}]},e()];export{c as default};

package/standalone/chunks/{heat-table-options.config-DaePzfHG.js → heat-table-options.config-ZVML76FK.js}

@@ -1,2 +1,2 @@
 
-import{n as e}from"./axis-options.config-DOE0YdaK.js";import{t}from"./info-tooltip-options.config-DtfU5ZO8.js";import{t as n}from"./interactivity-options.config-09eXx6k6.js";import{t as r}from"./slot-content-BZhmLTG1.js";import{n as i,t as a}from"./color-palettes-B41FvzWH.js";import{n as o,r as s,t as c}from"./color-range-utils-CKDpd3gZ.js";var l=(e,{slots:t})=>{let n=t?.find(t=>t?.name===e)?.content?.[0]?.type;return r(n)?[`auto`,`asc`,`desc`]:[`asc`,`desc`]},u=[{key:`general`,type:`group`,open:!0,children:[{key:`display.title`,control:{type:`switch`,label:`Title`,default:!0}},{key:`display.values`,control:{type:`switch`,label:`Show values`,default:!1}}]},{key:`heatTable`,type:`group`,label:`Heat table`,open:!0,children:[{key:`heattable.opacity`,control:{type:`slider`,label:`Opacity`,default:.8,min:0,max:1,step:.01}},{key:`heattable.rounding`,control:{type:`slider`,label:`Rounding`,default:({theme:e})=>e?.itemSpecific?.rounding,min:0,max:20,step:1,extraLabel:({options:e,theme:t})=>typeof t?.itemSpecific?.rounding==`number`?typeof e?.heattable?.rounding==`number`?`reset`:`auto`:null,extraLabelHasClickAction:({options:e,theme:t})=>typeof t?.itemSpecific?.rounding==`number`&&typeof e?.heattable?.rounding==`number`,extraLabelClickAction:({options:e})=>{let t={...e,heattable:{...e.heattable,rounding:void 0}};return delete t.heattable.rounding,{value:null,options:t}}}},{key:`heattable.spacing`,control:{type:`slider`,label:`Spacing`,default:({theme:e})=>e?.itemSpecific?.padding,min:0,max:20,step:1,extraLabel:({options:e,theme:t})=>typeof t?.itemSpecific?.padding==`number`?typeof e?.heattable?.spacing==`number`?`reset`:`auto`:null,extraLabelHasClickAction:({options:e,theme:t})=>typeof t?.itemSpecific?.padding==`number`&&typeof e?.heattable?.spacing==`number`,extraLabelClickAction:({options:e})=>{let t={...e,heattable:{...e.heattable,spacing:void 0}};return delete t.heattable.spacing,{value:null,options:t}}}},{key:`colorsType`,control:{type:`picker`,label:`Colors type`,default:`sequential`,enum:[`sequential`,`divergent`,`manual`],toOptions:({options:e,value:t})=>{let n=a()?.[e?.colorsClass]?.type,r=e?.colorsType??n??`sequential`,l=e?.colorsClass??`PuBu`,u=e?.numberClasses??7,d=o(e?.manualValues?.ranges),f=r===`manual`?`manual`:l,p={...e,colorsType:t};if(t===`manual`){let e=c(u,f,d);p.manualValues={...p.manualValues,ranges:s(e)}}else t!==r&&(p.colorsClass=i(t??`sequential`)[0]),delete p.manualValues;return p}}},{key:`classification`,control:{type:`picker`,label:`Method`,default:`quantile`,enum:[`interval`,`quantile`,`continuous`]},visibleIf:({options:e})=>e?.colorsType!==`manual`},{key:`numberClasses`,control:{type:`picker`,label:`Number of classes`,default:`7`,enum:[`3`,`4`,`5`,`6`,`7`,`8`,`9`],parseValue:e=>e?.toString()??`7`,toOptions:({options:e,value:t})=>{let n=Number.parseInt(t,10)||7,r={...e,numberClasses:n};if(e?.colorsType===`manual`){let n=c(t,`manual`,o(e?.manualValues?.ranges));r.manualValues={...r.manualValues,ranges:s(n)}}return r}}},{key:`colorsClass`,control:{type:`color-palette-picker`,label:`Color palette`,hideLabel:!0,default:({options:e})=>{let t=a()?.[e?.colorsClass]?.type;return i(e?.colorsType??t??`sequential`)[0]},enum:({options:e})=>{let t=a()?.[e?.colorsClass]?.type;return i(e?.colorsType??t??`sequential`)},toOptions:({options:e,value:t})=>{let n=a()?.[e?.colorsClass]?.type,r={...e,colorsClass:t,colorsType:n??`sequential`};return delete r.manualValues,r}},visibleIf:({options:e})=>e?.colorsType!==`manual`},{key:`manualValues.ranges`,control:{type:`color-range`,editRangeSize:!1,debounce:500,label:`Manual range values`,hideLabel:!0,calculateValue:({options:e})=>c(e?.numberClasses??7,`manual`,o(e?.manualValues?.ranges)),toOptions:({options:e,value:t})=>({...e,manualValues:{...e.manualValues,ranges:s(t)}})},visibleIf:({options:e})=>e?.colorsType===`manual`}]},e([{axis:`x`,role:`axis`,color:!0,label:!0,tickMode:!0},{axis:`y`,role:`axis`,color:!0,label:!0,tickMode:!0}],[{key:`sort.x.order`,control:{type:`picker`,label:`X-axis order`,default:`asc`,enum:e=>l(`x-axis`,e)}},{key:`sort.y.order`,control:{type:`picker`,label:`Y-axis order`,default:`asc`,enum:e=>l(`y-axis`,e)}}]),t(),n({select:{default:!0}})];export{u as default};
+import{n as e}from"./axis-options.config-DOE0YdaK.js";import{t}from"./info-tooltip-options.config-DtfU5ZO8.js";import{t as n}from"./interactivity-options.config-09eXx6k6.js";import{t as r}from"./slot-content-BZhmLTG1.js";import{n as i,t as a}from"./color-palettes-B41FvzWH.js";import{n as o,r as s,t as c}from"./color-range-utils-DxOtqAKB.js";var l=(e,{slots:t})=>{let n=t?.find(t=>t?.name===e)?.content?.[0]?.type;return r(n)?[`auto`,`asc`,`desc`]:[`asc`,`desc`]},u=[{key:`general`,type:`group`,open:!0,children:[{key:`display.title`,control:{type:`switch`,label:`Title`,default:!0}},{key:`display.values`,control:{type:`switch`,label:`Show values`,default:!1}}]},{key:`heatTable`,type:`group`,label:`Heat table`,open:!0,children:[{key:`heattable.opacity`,control:{type:`slider`,label:`Opacity`,default:.8,min:0,max:1,step:.01}},{key:`heattable.rounding`,control:{type:`slider`,label:`Rounding`,default:({theme:e})=>e?.itemSpecific?.rounding,min:0,max:20,step:1,extraLabel:({options:e,theme:t})=>typeof t?.itemSpecific?.rounding==`number`?typeof e?.heattable?.rounding==`number`?`reset`:`auto`:null,extraLabelHasClickAction:({options:e,theme:t})=>typeof t?.itemSpecific?.rounding==`number`&&typeof e?.heattable?.rounding==`number`,extraLabelClickAction:({options:e})=>{let t={...e,heattable:{...e.heattable,rounding:void 0}};return delete t.heattable.rounding,{value:null,options:t}}}},{key:`heattable.spacing`,control:{type:`slider`,label:`Spacing`,default:({theme:e})=>e?.itemSpecific?.padding,min:0,max:20,step:1,extraLabel:({options:e,theme:t})=>typeof t?.itemSpecific?.padding==`number`?typeof e?.heattable?.spacing==`number`?`reset`:`auto`:null,extraLabelHasClickAction:({options:e,theme:t})=>typeof t?.itemSpecific?.padding==`number`&&typeof e?.heattable?.spacing==`number`,extraLabelClickAction:({options:e})=>{let t={...e,heattable:{...e.heattable,spacing:void 0}};return delete t.heattable.spacing,{value:null,options:t}}}},{key:`colorsType`,control:{type:`picker`,label:`Colors type`,default:`sequential`,enum:[`sequential`,`divergent`,`manual`],toOptions:({options:e,value:t})=>{let n=a()?.[e?.colorsClass]?.type,r=e?.colorsType??n??`sequential`,l=e?.colorsClass??`PuBu`,u=e?.numberClasses??7,d=o(e?.manualValues?.ranges),f=r===`manual`?`manual`:l,p={...e,colorsType:t};if(t===`manual`){let e=c(u,f,d);p.manualValues={...p.manualValues,ranges:s(e)}}else t!==r&&(p.colorsClass=i(t??`sequential`)[0]),delete p.manualValues;return p}}},{key:`classification`,control:{type:`picker`,label:`Method`,default:`quantile`,enum:[`interval`,`quantile`,`continuous`]},visibleIf:({options:e})=>e?.colorsType!==`manual`},{key:`numberClasses`,control:{type:`picker`,label:`Number of classes`,default:`7`,enum:[`3`,`4`,`5`,`6`,`7`,`8`,`9`],parseValue:e=>e?.toString()??`7`,toOptions:({options:e,value:t})=>{let n=Number.parseInt(t,10)||7,r={...e,numberClasses:n};if(e?.colorsType===`manual`){let n=c(t,`manual`,o(e?.manualValues?.ranges));r.manualValues={...r.manualValues,ranges:s(n)}}return r}}},{key:`colorsClass`,control:{type:`color-palette-picker`,label:`Color palette`,hideLabel:!0,default:({options:e})=>{let t=a()?.[e?.colorsClass]?.type;return i(e?.colorsType??t??`sequential`)[0]},enum:({options:e})=>{let t=a()?.[e?.colorsClass]?.type;return i(e?.colorsType??t??`sequential`)},toOptions:({options:e,value:t})=>{let n=a()?.[e?.colorsClass]?.type,r={...e,colorsClass:t,colorsType:n??`sequential`};return delete r.manualValues,r}},visibleIf:({options:e})=>e?.colorsType!==`manual`},{key:`manualValues.ranges`,control:{type:`color-range`,editRangeSize:!1,debounce:500,label:`Manual range values`,hideLabel:!0,calculateValue:({options:e})=>c(e?.numberClasses??7,`manual`,o(e?.manualValues?.ranges)),toOptions:({options:e,value:t})=>({...e,manualValues:{...e.manualValues,ranges:s(t)}})},visibleIf:({options:e})=>e?.colorsType===`manual`}]},e([{axis:`x`,role:`axis`,color:!0,label:!0,tickMode:!0},{axis:`y`,role:`axis`,color:!0,label:!0,tickMode:!0}],[{key:`sort.x.order`,control:{type:`picker`,label:`X-axis order`,default:`asc`,enum:e=>l(`x-axis`,e)}},{key:`sort.y.order`,control:{type:`picker`,label:`Y-axis order`,default:`asc`,enum:e=>l(`y-axis`,e)}}]),t(),n({select:{default:!0}})];export{u as default};

package/standalone/chunks/is-same-option-value-Di-A7Wmg.js

@@ -0,0 +1,2 @@
+
+import{t as e}from"./embed-CBu7iQRx.js";var t=1e-9,n=(e,n)=>Object.is(e,n)||Math.abs(e-n)<=t,r=t=>{try{let n=new e(t).to(`srgb`);return[...n.coords.map(e=>e??0),n.alpha??1]}catch{return}},i=e=>typeof e==`object`&&!!e&&Object.getPrototypeOf(e)===Object.prototype,a=(e,t)=>{if(Object.is(e,t))return!0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every((e,n)=>a(e,t[n]));if(i(e)&&i(t)){let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>Object.hasOwn(t,n)&&a(e[n],t[n]))}return!1},o=(e,t)=>{if(typeof e!=`string`||typeof t!=`string`||e===t)return a(e,t);let i=r(e),o=r(t);return!!i&&!!o&&i.every((e,t)=>n(e,o[t]))};export{a as n,o as t};

package/standalone/chunks/item-option-color-picker-lLvBPnKA.js

@@ -0,0 +1,19 @@
+
+import{r as e}from"./version-BW4Ixl63.js";import{t}from"./is-same-option-value-Di-A7Wmg.js";import{t as n}from"./option-interaction-controller-BslAXAHF.js";import{t as r}from"./item-option-base-CRUxNhJQ.js";import{html as i,property as a,query as o}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/menu.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-picker.js";var s=class extends r{constructor(...e){super(...e),this.value=`transparent`,this.disabled=!1,this.noAlphaChannel=!1,this.swatches=[],this.rounding=`full`,this.shape=`circle`,this.placement=`left-start`,this.debounce=50,this.liveInteractions=!1,this._interaction=new n(this,t)}static{this.styles=[super.styles]}willUpdate(e){super.willUpdate(e),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction())}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_clearDebounce(){clearTimeout(this.debounceTimeout),this.debounceTimeout=void 0}_emitLegacy(){this.debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.colorPicker.color}}))}endInteraction(){this.colorPicker?.endInteraction?.(),this._interaction.endAll()}_emitLive(e,t){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:t?{value:e,interaction:t}:{value:e}}))}_handleInteractionStart(e){this.liveInteractions&&this._interaction.start(e.currentTarget,e.detail,this.colorPicker.color)}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_handleEvent(e){if(this.liveInteractions){let t=this.colorPicker.color;this._interaction.update(e.currentTarget,t,e=>this._emitLive(t,e))}else this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>this._emitLegacy(),this.debounce??200)}renderController(){return i`
+      <luzmo-color-picker
+        id="luzmo-item-option-control"
+        .color=${this.value}
+        .size=${this.size}
+        .rounding=${this.rounding}
+        .shape=${this.shape}
+        .swatches=${this.swatches}
+        .placement=${this.placement}
+        .noAlphaChannel=${this.noAlphaChannel}
+        ?disabled=${this.disabled}
+        @change=${this._handleEvent}
+        @luzmo-interaction-start=${this._handleInteractionStart}
+        @luzmo-interaction-end=${this._handleInteractionEnd}
+        @luzmo-interaction-cancel=${this._handleInteractionCancel}
+      >
+      </luzmo-color-picker>
+    `}};e([a({type:String,reflect:!0})],s.prototype,`value`,void 0),e([a({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e([a({type:Boolean,reflect:!0})],s.prototype,`noAlphaChannel`,void 0),e([a({type:Array,reflect:!0})],s.prototype,`swatches`,void 0),e([a({type:String,reflect:!0})],s.prototype,`rounding`,void 0),e([a({type:String,reflect:!0})],s.prototype,`shape`,void 0),e([a()],s.prototype,`placement`,void 0),e([a({type:Number,reflect:!0})],s.prototype,`debounce`,void 0),e([a({type:Boolean,reflect:!0,attribute:`live-interactions`})],s.prototype,`liveInteractions`,void 0),e([o(`luzmo-color-picker`)],s.prototype,`colorPicker`,void 0),customElements.get(`luzmo-item-option-color-picker`)||customElements.define(`luzmo-item-option-color-picker`,s);export{s as LuzmoItemOptionColorPicker};

package/standalone/chunks/{item-option-color-range-CyJd1LZ_.js → item-option-color-range-BqeatOei.js}

@@ -1,5 +1,5 @@
 
-import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrashOutline-DXZpJx7f.js";import{t as r}from"./color-7IgCGZKz.js";import{t as i}from"./item-option-base-CRUxNhJQ.js";import{html as a,property as o,queryAll as s,state as c,unsafeCSS as l}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-button.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/icon.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/number-field.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/text-field.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-picker.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-field.js";var u=(e,t=.1)=>{if(e.length<2)return`#AAAAAA`;let n=e.length,i=new r(e[n-2]).to(`oklab`),a=new r(e[n-1]).to(`oklab`),o=i.coords[0],s=a.coords[0],c=Math.min(1,Math.max(0,s+(s>o?1:-1)*t));return new r(`oklab`,[c,a.coords[1],a.coords[2]],a.alpha).to(`srgb`).toString({format:`hex`,precision:0})},d=`:host{--luzmo-swatch-size:14px}.luzmo-item-option{align-items:start;height:fit-content}.control-container{flex-grow:1;align-items:start}.color-range-line{align-items:center;display:flex}luzmo-color-field,luzmo-number-field{flex-grow:1}.color-range-lines-container,.color-range-lines{gap:var(--luzmo-item-option-color-range-ranges-gap,var(--color-ranges-gap));flex-direction:column;flex-grow:1;display:flex}.color-range-lines{width:100%}.extra-label{height:var(--item-option-component-height);align-items:center;display:flex}.color-range-percentage-value{padding-inline-start:var(--luzmo-item-option-color-range-color-swatch-to-percentage,var(--color-swatch-to-percentage));padding-inline-end:var(--luzmo-item-option-color-range-percentage-to-input-field,var(--percentage-to-input-field))}luzmo-color-picker{position:relative}luzmo-color-picker:not(:has(+.color-range-percentage-value)){padding-inline-end:var(--luzmo-item-option-color-range-color-swatch-to-input-field,var(--color-swatch-to-input-field))}:is(luzmo-number-field:has(+luzmo-action-button),luzmo-color-field:has(+luzmo-action-button)){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-picker:before{box-sizing:border-box;content:"";top:var(--color-range-connector-top);left:var(--color-range-connector-left);height:var(--color-range-connector-height);width:var(--color-range-connector-width);background:var(--range-color);border:var(--luzmo-item-option-color-range-connector-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-color-range-connector-border-color,var(--luzmo-border-color));z-index:-1;border-top:0;border-bottom:0;position:absolute}:host([reverse]) luzmo-color-picker:before{top:var(--color-range-reverse-connector-top)}.color-range-lines:not(.edit-range-size) .color-range-line:last-child luzmo-color-picker:before{display:none}.color-range-add-value-container{height:var(--color-range-input-field-height);justify-content:start;align-items:center;display:flex}.color-range-add-value{box-sizing:border-box;width:var(--luzmo-item-option-color-range-add-value-width,var(--luzmo-swatch-size));height:var(--luzmo-item-option-color-range-add-value-height,var(--luzmo-swatch-size));border-width:var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-item-option-color-range-add-value-border-color,var(--luzmo-primary));border-radius:var(--luzmo-item-option-color-range-add-value-border-radius,50%);background-color:var(--luzmo-item-option-color-range-add-value-background-color,var(--luzmo-background-color));cursor:pointer;color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));justify-content:center;align-items:center;display:flex;position:relative}.color-range-add-value .plus-sign{width:100%;height:100%;position:absolute;top:0;left:0}.color-range-add-value .plus-sign:before{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));height:var(--add-color-range-plus-size);width:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value .plus-sign:after{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));width:var(--add-color-range-plus-size);height:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value:hover{background-color:var(--luzmo-item-option-color-range-add-value-background-color-hover,var(--luzmo-background-color-hover));color:var(--luzmo-item-option-color-range-add-value-color-hover,var(--luzmo-primary-hover))}.color-range-add-value[focused],.color-range-add-value:focus-visible{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value[focused]:after,.color-range-add-value:focus-visible:after{content:"";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}:host{--luzmo-swatch-size:var(--color-range-swatch-size);--color-range-swatch-size:16px;--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--color-range-connector-width:.25rem;--color-range-connector-height:calc(var(--color-range-input-field-height) + var(--color-ranges-gap) - var(--color-range-swatch-size) + var(--color-range-connector-width));--color-range-connector-top:calc(var(--color-range-swatch-size) - (var(--color-range-connector-width) / 2));--color-range-reverse-connector-top:calc(-1 * var(--color-range-connector-height) + (var(--color-range-connector-width) / 2));--color-range-connector-left:calc((var(--color-range-swatch-size) - var(--color-range-connector-width)) / 2);--color-range-input-field-height:var(--luzmo-component-height);--add-color-range-size:var(--color-range-swatch-size);--add-color-range-plus-size:8px;--add-color-range-plus-sign-border-width:2px;--add-value-focus-indicator-border-radius:50%;--add-value-focus-indicator-gap:3px;--add-value-focus-indicator-width:1px;--add-value-focus-indicator-color:var(--luzmo-primary);--color-swatch-to-percentage:var(--luzmo-spacing-4);--color-swatch-to-input-field:var(--luzmo-spacing-4);--percentage-to-input-field:var(--luzmo-spacing-4);--input-field-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--color-range-swatch-size:14px;--color-range-input-field-height:var(--luzmo-component-height-s);--color-ranges-gap:var(--luzmo-spacing-2);--add-color-range-plus-size:6px;--add-color-range-plus-sign-border-width:2px;--color-swatch-to-percentage:var(--luzmo-spacing-3);--color-swatch-to-input-field:var(--luzmo-spacing-3);--percentage-to-input-field:var(--luzmo-spacing-3);--input-field-to-button:var(--luzmo-spacing-2)}:host([size=l]){--color-range-swatch-size:18px;--color-range-input-field-height:var(--luzmo-component-height-l);--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-3)}:host([size=xl]){--color-range-swatch-size:20px;--color-range-input-field-height:var(--luzmo-component-height-xl);--color-ranges-gap:var(--luzmo-spacing-3);--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-4)}`,f=class extends i{constructor(...e){super(...e),this.disabled=!1,this.percentage=!1,this.noAlphaChannel=!1,this.editRangeSize=!1,this.noValues=!1,this.minimumRangeSize=2,this.negativeInfinityValue=!1,this.readOnlyColorPicker=!1,this.reverse=!1,this.debounce=100,this._ranges=[]}static{this.styles=[super.styles,l(d)]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._ranges=typeof this.parseValue==`function`?this.parseValue(this.value??this.default??[]):this.value??this.default??[]),this.negativeInfinityValue&&(this._ranges=[{color:this._ranges[0].color,value:-1/0},...this._ranges.slice(1)])}_handleChangeEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this._ranges):this._ranges}}))},this.debounce??200)}_getIndex(e){let t=[...this.colorRangeLines].indexOf((e?.target)?.closest(`.color-range-line`));return this.reverse&&(t=(this._ranges?.length??0)-1-t),t}_extrapolateNewValue(e){if(e.length<2)return 0;let t=e.at(-1),n=e.at(-2),r=(t??0)-(n??0);return(t??0)+r}_setColor(e){let t=this._getIndex(e),n=e.target.color??e.target.value;this._ranges?.[t]&&(this._ranges[t].color=String(n)),this._ranges=structuredClone(this._ranges),this._handleChangeEvent()}_setNumber(e){let t=this._getIndex(e),n=e.target.value;this._ranges?.[t]&&(this._ranges[t].value=n),this._ranges=structuredClone(this._ranges.sort((e,t)=>(e?.value??0)-(t?.value??0))),this._handleChangeEvent()}_removeRangeValue(e){let t=this._getIndex(e);this._ranges?.splice(t,1),this._ranges=structuredClone(this._ranges),this._handleChangeEvent()}_addRangeValue(){let e=u(this._ranges?.map(e=>e.color)??[]),t=this._extrapolateNewValue(this._ranges?.map(e=>e.value??0)??[]);this._ranges?.push({color:e,value:t}),this._ranges=structuredClone(this._ranges),this._handleChangeEvent()}renderRangeValues(){let t=(t,r,i,o)=>a`
+import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrashOutline-DXZpJx7f.js";import{t as r}from"./embed-CBu7iQRx.js";import{t as i}from"./is-same-option-value-Di-A7Wmg.js";import{t as a}from"./option-interaction-controller-BslAXAHF.js";import{t as o}from"./item-option-base-CRUxNhJQ.js";import{html as s,property as c,queryAll as l,state as u,unsafeCSS as d}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-button.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/icon.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/number-field.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/text-field.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-picker.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-field.js";var f=(e,t=.1)=>{if(e.length<2)return`#AAAAAA`;let n=e.length,i=new r(e[n-2]).to(`oklab`),a=new r(e[n-1]).to(`oklab`),o=i.coords[0],s=a.coords[0],c=Math.min(1,Math.max(0,s+(s>o?1:-1)*t));return new r(`oklab`,[c,a.coords[1],a.coords[2]],a.alpha).to(`srgb`).toString({format:`hex`,precision:0})},p=`:host{--luzmo-swatch-size:14px}.luzmo-item-option{align-items:start;height:fit-content}.control-container{flex-grow:1;align-items:start}.color-range-line{align-items:center;display:flex}luzmo-color-field,luzmo-number-field{flex-grow:1}.color-range-lines-container,.color-range-lines{gap:var(--luzmo-item-option-color-range-ranges-gap,var(--color-ranges-gap));flex-direction:column;flex-grow:1;display:flex}.color-range-lines{width:100%}.extra-label{height:var(--item-option-component-height);align-items:center;display:flex}.color-range-percentage-value{padding-inline-start:var(--luzmo-item-option-color-range-color-swatch-to-percentage,var(--color-swatch-to-percentage));padding-inline-end:var(--luzmo-item-option-color-range-percentage-to-input-field,var(--percentage-to-input-field))}luzmo-color-picker{position:relative}luzmo-color-picker:not(:has(+.color-range-percentage-value)){padding-inline-end:var(--luzmo-item-option-color-range-color-swatch-to-input-field,var(--color-swatch-to-input-field))}:is(luzmo-number-field:has(+luzmo-action-button),luzmo-color-field:has(+luzmo-action-button)){padding-inline-end:var(--luzmo-item-option-color-range-input-field-to-button,var(--input-field-to-button))}luzmo-color-picker:before{box-sizing:border-box;content:"";top:var(--color-range-connector-top);left:var(--color-range-connector-left);height:var(--color-range-connector-height);width:var(--color-range-connector-width);background:var(--range-color);border:var(--luzmo-item-option-color-range-connector-border-width,var(--luzmo-border-width)) solid var(--luzmo-item-option-color-range-connector-border-color,var(--luzmo-border-color));z-index:-1;border-top:0;border-bottom:0;position:absolute}:host([reverse]) luzmo-color-picker:before{top:var(--color-range-reverse-connector-top)}:host(:not([reverse])) .color-range-lines:not(.edit-range-size) .color-range-line:last-child luzmo-color-picker:before,:host([reverse]) .color-range-lines:not(.edit-range-size) .color-range-line:first-child luzmo-color-picker:before{display:none}.color-range-add-value-container{height:var(--color-range-input-field-height);justify-content:start;align-items:center;display:flex}.color-range-add-value{box-sizing:border-box;width:var(--luzmo-item-option-color-range-add-value-width,var(--luzmo-swatch-size));height:var(--luzmo-item-option-color-range-add-value-height,var(--luzmo-swatch-size));border-width:var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width));border-style:solid;border-color:var(--luzmo-item-option-color-range-add-value-border-color,var(--luzmo-primary));border-radius:var(--luzmo-item-option-color-range-add-value-border-radius,50%);background-color:var(--luzmo-item-option-color-range-add-value-background-color,var(--luzmo-background-color));cursor:pointer;color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));justify-content:center;align-items:center;display:flex;position:relative}.color-range-add-value .plus-sign{width:100%;height:100%;position:absolute;top:0;left:0}.color-range-add-value .plus-sign:before{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));height:var(--add-color-range-plus-size);width:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value .plus-sign:after{content:" ";background-color:var(--luzmo-item-option-color-range-add-value-color,var(--luzmo-primary));width:var(--add-color-range-plus-size);height:var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width));left:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--add-color-range-plus-size)) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));top:calc((var(--luzmo-item-option-color-range-add-color-range-size,var(--add-color-range-size)) - var(--luzmo-item-option-color-range-add-color-range-plus-sign-border-width,var(--add-color-range-plus-sign-border-width))) / 2 - var(--luzmo-item-option-color-range-add-value-border-width,var(--luzmo-border-width)));z-index:1;display:block;position:absolute}.color-range-add-value:hover{background-color:var(--luzmo-item-option-color-range-add-value-background-color-hover,var(--luzmo-background-color-hover));color:var(--luzmo-item-option-color-range-add-value-color-hover,var(--luzmo-primary-hover))}.color-range-add-value[focused],.color-range-add-value:focus-visible{background-color:var(--luzmo-item-option-color-range-add-value-background-color-focus,var(--luzmo-background-color-focus));color:var(--luzmo-item-option-color-range-add-value-color-focus,var(--luzmo-primary-focus));outline:none}.color-range-add-value[focused]:after,.color-range-add-value:focus-visible:after{content:"";inset:calc(var(--luzmo-item-option-color-range-add-value-focus-indicator-gap,var(--add-value-focus-indicator-gap)) * -2);background-color:var(--luzmo-item-option-color-range-add-value-focus-indicator-background-color,var(--luzmo-background-color));border-width:var(--luzmo-item-option-color-range-add-value-focus-indicator-width,var(--add-value-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color,var(--luzmo-item-option-color-range-add-value-focus-indicator-color,var(--add-value-focus-indicator-color)));border-radius:var(--luzmo-item-option-color-range-add-value-focus-indicator-border-radius,var(--add-value-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;z-index:-1;position:absolute}:host{--luzmo-swatch-size:var(--color-range-swatch-size);--color-range-swatch-size:16px;--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--color-range-connector-width:.25rem;--color-range-connector-height:calc(var(--color-range-input-field-height) + var(--color-ranges-gap) - var(--color-range-swatch-size) + var(--color-range-connector-width));--color-range-connector-top:calc(var(--color-range-swatch-size) - (var(--color-range-connector-width) / 2));--color-range-reverse-connector-top:calc(-1 * var(--color-range-connector-height) + (var(--color-range-connector-width) / 2));--color-range-connector-left:calc((var(--color-range-swatch-size) - var(--color-range-connector-width)) / 2);--color-range-input-field-height:var(--luzmo-component-height);--add-color-range-size:var(--color-range-swatch-size);--add-color-range-plus-size:8px;--add-color-range-plus-sign-border-width:2px;--add-value-focus-indicator-border-radius:50%;--add-value-focus-indicator-gap:3px;--add-value-focus-indicator-width:1px;--add-value-focus-indicator-color:var(--luzmo-primary);--color-swatch-to-percentage:var(--luzmo-spacing-4);--color-swatch-to-input-field:var(--luzmo-spacing-4);--percentage-to-input-field:var(--luzmo-spacing-4);--input-field-to-button:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1))}:host([size=s]){--color-range-swatch-size:14px;--color-range-input-field-height:var(--luzmo-component-height-s);--color-ranges-gap:var(--luzmo-spacing-2);--add-color-range-plus-size:6px;--add-color-range-plus-sign-border-width:2px;--color-swatch-to-percentage:var(--luzmo-spacing-3);--color-swatch-to-input-field:var(--luzmo-spacing-3);--percentage-to-input-field:var(--luzmo-spacing-3);--input-field-to-button:var(--luzmo-spacing-2)}:host([size=l]){--color-range-swatch-size:18px;--color-range-input-field-height:var(--luzmo-component-height-l);--color-ranges-gap:calc(var(--luzmo-spacing-2) + var(--luzmo-spacing-1));--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-3)}:host([size=xl]){--color-range-swatch-size:20px;--color-range-input-field-height:var(--luzmo-component-height-xl);--color-ranges-gap:var(--luzmo-spacing-3);--add-color-range-plus-size:10px;--color-swatch-to-percentage:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--color-swatch-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--percentage-to-input-field:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--input-field-to-button:var(--luzmo-spacing-4)}`,m=class extends o{constructor(...e){super(...e),this.disabled=!1,this.percentage=!1,this.noAlphaChannel=!1,this.editRangeSize=!1,this.noValues=!1,this.minimumRangeSize=2,this.negativeInfinityValue=!1,this.readOnlyColorPicker=!1,this.reverse=!1,this.debounce=100,this.liveInteractions=!1,this._interaction=new a(this,i),this._ranges=[]}static{this.styles=[super.styles,d(p)]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._ranges=typeof this.parseValue==`function`?this.parseValue(this.value??this.default??[]):this.value??this.default??[]),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction()),this.negativeInfinityValue&&(this._ranges=[{color:this._ranges[0].color,value:-1/0},...this._ranges.slice(1)])}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_clearDebounce(){clearTimeout(this.debounceTimeout),this.debounceTimeout=void 0}_emitLegacy(){this.debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(this._ranges):this._ranges}}))}endInteraction(){for(let e of this._colorPickers??[])e.endInteraction?.();this._interaction.endAll()}_emitLive(e){let t=typeof this.toValue==`function`?this.toValue(this._ranges):this._ranges;this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:e?{value:t,interaction:e}:{value:t}}))}_handleInteractionStart(e){this.liveInteractions&&this._interaction.start(e.currentTarget,e.detail,this._ranges[this._getIndex(e)]?.color)}_finalizeBeforeStructureChange(){this.liveInteractions&&this.endInteraction()}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_handleChangeEvent(e=this,t){this.liveInteractions?this._interaction.update(e??this,this._ranges,e=>this._emitLive(e),t):(this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>this._emitLegacy(),this.debounce??200))}_getIndex(e){let t=[...this.colorRangeLines].indexOf((e?.target)?.closest(`.color-range-line`));return this.reverse&&(t=(this._ranges?.length??0)-1-t),t}_extrapolateNewValue(e){if(e.length<2)return 0;let t=e.at(-1),n=e.at(-2),r=(t??0)-(n??0);return(t??0)+r}_setColor(e){let t=this._getIndex(e),n=e.target.color??e.target.value;this._ranges=structuredClone(this._ranges),this._ranges?.[t]&&(this._ranges[t].color=String(n)),this._handleChangeEvent(e.currentTarget,String(n))}_setNumber(e){let t=this._getIndex(e),n=e.target.value,r=this._ranges.map((e,r)=>r===t?{...e,value:n}:e);r.some((e,t)=>t>0&&(e.value??0)<(r[t-1].value??0))&&this._finalizeBeforeStructureChange(),this._ranges=structuredClone(this._ranges),this._ranges?.[t]&&(this._ranges[t].value=n),this._ranges=this._ranges.sort((e,t)=>(e?.value??0)-(t?.value??0)),this._handleChangeEvent()}_removeRangeValue(e){let t=this._getIndex(e);this._finalizeBeforeStructureChange(),this._ranges=structuredClone(this._ranges),this._ranges?.splice(t,1),this._handleChangeEvent()}_addRangeValue(){this._finalizeBeforeStructureChange();let e=f(this._ranges?.map(e=>e.color)??[]),t=this._extrapolateNewValue(this._ranges?.map(e=>e.value??0)??[]);this._ranges=[...structuredClone(this._ranges??[]),{color:e,value:t}],this._handleChangeEvent()}renderRangeValues(){let t=(t,r,i,a)=>s`
         <div class="color-range-line" style="--range-color: ${t}">
           <luzmo-color-picker
             .color=${t}
@@ -8,31 +8,34 @@ import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrash
             ?no-alpha-channel=${this.noAlphaChannel}
             ?read-only=${this.readOnlyColorPicker}
             @change=${this._setColor}
+            @luzmo-interaction-start=${this._handleInteractionStart}
+            @luzmo-interaction-end=${this._handleInteractionEnd}
+            @luzmo-interaction-cancel=${this._handleInteractionCancel}
           ></luzmo-color-picker>
-          ${this.percentage?a`
+          ${this.percentage?s`
                   <div class="color-range-percentage-value">%</div>
-                `:a`
+                `:s`
                   
                 `}
-          ${this.noValues?a` <luzmo-color-field
+          ${this.noValues?s` <luzmo-color-field
                 .value=${t}
                 .size=${this.size}
                 .debounce=${this.debounce}
                 ?no-alpha-channel=${this.noAlphaChannel}
                 ?disabled=${this.disabled}
                 @change=${this._setColor}
-              ></luzmo-color-field>`:i?a` <luzmo-text-field
-                  .value=${`< `+(o??0)}
+              ></luzmo-color-field>`:i?s` <luzmo-text-field
+                  .value=${`< `+(a??0)}
                   .size=${this.size}
                   readonly
-                ></luzmo-text-field>`:a` <luzmo-number-field
+                ></luzmo-text-field>`:s` <luzmo-number-field
                   .value=${r??0}
                   .size=${this.size}
                   .debounce=${this.debounce}
                   ?disabled=${this.disabled}
                   @change=${this._setNumber}
                 ></luzmo-number-field>`}
-          ${this.editRangeSize&&!this.disabled&&!i&&(this._ranges?.length??0)>this.minimumRangeSize?a`<luzmo-action-button
+          ${this.editRangeSize&&!this.disabled&&!i&&(this._ranges?.length??0)>this.minimumRangeSize?s`<luzmo-action-button
                 quiet
                 .size=${this.size}
                 .label=${e(`Remove color stop`,{desc:`Aria label for remove color stop button`})}
@@ -43,13 +46,13 @@ import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrash
                   .size=${this.size}
                   .icon=${n}
                 ></luzmo-icon>
-              </luzmo-action-button>`:a`
+              </luzmo-action-button>`:s`
                   
                 `}
         </div>
-      `,r=this._ranges??this.default??[];this.reverse&&(r=[...r].reverse());let i=r.map(({color:e,value:n},i)=>t(e,n,i===0&&this.negativeInfinityValue,i===0&&this.negativeInfinityValue?r[1]?.value:void 0));return a`
+      `,r=this._ranges??this.default??[];this.reverse&&(r=[...r].reverse());let i=r.map(({color:e,value:n},i)=>t(e,n,i===0&&this.negativeInfinityValue,i===0&&this.negativeInfinityValue?r[1]?.value:void 0));return s`
       <div id="luzmo-item-option-control" class="color-range-lines-container" role="group" aria-label=${this.label||e(`Color range`,{desc:`Accessible label for color range control`})}>
-        ${this.editRangeSize&&!this.disabled&&this.reverse?a`<div class="color-range-add-value-container">
+        ${this.editRangeSize&&!this.disabled&&this.reverse?s`<div class="color-range-add-value-container">
               <button
                 class="color-range-add-value"
                 aria-label=${e(`Add color stop`,{desc:`Aria label for add color stop button`})}
@@ -57,7 +60,7 @@ import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrash
               >
                 <div class="plus-sign"></div>
               </button>
-            </div>`:a`
+            </div>`:s`
                 
               `}
         <div
@@ -65,7 +68,7 @@ import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrash
         >
           ${i}
         </div>
-        ${this.editRangeSize&&!this.disabled&&!this.reverse?a`<div class="color-range-add-value-container">
+        ${this.editRangeSize&&!this.disabled&&!this.reverse?s`<div class="color-range-add-value-container">
               <button
                 class="color-range-add-value"
                 aria-label=${e(`Add color stop`,{desc:`Aria label for add color stop button`})}
@@ -73,8 +76,8 @@ import{i as e,r as t}from"./version-BW4Ixl63.js";import{t as n}from"./luzmoTrash
               >
                 <div class="plus-sign"></div>
               </button>
-            </div>`:a`
+            </div>`:s`
                 
               `}
       </div>
-    `}renderController(){return this.renderRangeValues()}};t([o({type:Array,reflect:!0})],f.prototype,`value`,void 0),t([o({type:Array,reflect:!0})],f.prototype,`default`,void 0),t([o({type:Boolean,reflect:!0})],f.prototype,`disabled`,void 0),t([o({type:Boolean})],f.prototype,`percentage`,void 0),t([o({type:Boolean,attribute:`no-alpha-channel`})],f.prototype,`noAlphaChannel`,void 0),t([o({type:Boolean,attribute:`edit-range-size`})],f.prototype,`editRangeSize`,void 0),t([o({type:Boolean,attribute:`no-values`})],f.prototype,`noValues`,void 0),t([o({type:Number,reflect:!0,attribute:`minimum-range-size`})],f.prototype,`minimumRangeSize`,void 0),t([o({type:Boolean,reflect:!0,attribute:`negative-infinity-value`})],f.prototype,`negativeInfinityValue`,void 0),t([o({type:Boolean,attribute:`read-only-color-picker`})],f.prototype,`readOnlyColorPicker`,void 0),t([o({type:Boolean})],f.prototype,`reverse`,void 0),t([o({type:Number,reflect:!0})],f.prototype,`debounce`,void 0),t([o()],f.prototype,`parseValue`,void 0),t([o()],f.prototype,`toValue`,void 0),t([s(`.color-range-line`)],f.prototype,`colorRangeLines`,void 0),t([c()],f.prototype,`_ranges`,void 0),customElements.get(`luzmo-item-option-color-range`)||customElements.define(`luzmo-item-option-color-range`,f);export{f as LuzmoItemOptionColorRange};
+    `}renderController(){return this.renderRangeValues()}};t([c({type:Array,reflect:!0})],m.prototype,`value`,void 0),t([c({type:Array,reflect:!0})],m.prototype,`default`,void 0),t([c({type:Boolean,reflect:!0})],m.prototype,`disabled`,void 0),t([c({type:Boolean})],m.prototype,`percentage`,void 0),t([c({type:Boolean,attribute:`no-alpha-channel`})],m.prototype,`noAlphaChannel`,void 0),t([c({type:Boolean,attribute:`edit-range-size`})],m.prototype,`editRangeSize`,void 0),t([c({type:Boolean,attribute:`no-values`})],m.prototype,`noValues`,void 0),t([c({type:Number,reflect:!0,attribute:`minimum-range-size`})],m.prototype,`minimumRangeSize`,void 0),t([c({type:Boolean,reflect:!0,attribute:`negative-infinity-value`})],m.prototype,`negativeInfinityValue`,void 0),t([c({type:Boolean,attribute:`read-only-color-picker`})],m.prototype,`readOnlyColorPicker`,void 0),t([c({type:Boolean})],m.prototype,`reverse`,void 0),t([c({type:Number,reflect:!0})],m.prototype,`debounce`,void 0),t([c({type:Boolean,reflect:!0,attribute:`live-interactions`})],m.prototype,`liveInteractions`,void 0),t([c()],m.prototype,`parseValue`,void 0),t([c()],m.prototype,`toValue`,void 0),t([l(`.color-range-line`)],m.prototype,`colorRangeLines`,void 0),t([l(`luzmo-color-picker`)],m.prototype,`_colorPickers`,void 0),t([u()],m.prototype,`_ranges`,void 0),customElements.get(`luzmo-item-option-color-range`)||customElements.define(`luzmo-item-option-color-range`,m);export{m as LuzmoItemOptionColorRange};

package/standalone/chunks/item-option-guidelines-Cop8rM8y.js

@@ -0,0 +1,120 @@
+
+import{a as e,i as t,n,r}from"./version-BW4Ixl63.js";import{t as i}from"./localized-decorator-DJVBmJVH.js";import{t as a}from"./luzmoTrashOutline-DXZpJx7f.js";import{t as o}from"./luzmoPlus-Dyrrz0v8.js";import{n as s,r as c,t as l}from"./luzmoBorderDotted-CWXwQ_Hm.js";import"./chart-helpers-DsIGsaDc.js";import{t as u}from"./is-same-option-value-Di-A7Wmg.js";import{t as d}from"./option-interaction-controller-BslAXAHF.js";import{t as f}from"./item-option-base-CRUxNhJQ.js";import{a as p,c as m,i as h,l as g,n as _,o as v,r as y,s as b,u as x}from"./item-option-panel-CzSKFCVl.js";import{html as S,nothing as C,property as w,queryAll as T,repeat as E,state as ee,unsafeCSS as D}from"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/lit.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-button.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/button.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/icon.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/menu.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/action-group.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/number-field.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/picker.js";import"https://cdn.jsdelivr.net/npm/@luzmo/lucero@2.6.1/standalone/color-picker.js";var O=new Set(m),k=new Set(g),A=new Set(x),j={solid:`0`,dotted:`1,2`,dashed:`3,3`},M=e=>typeof e==`object`&&!!e&&!Array.isArray(e),N=e=>{if(typeof e==`number`&&Number.isFinite(e))return e;if(typeof e==`string`&&e.trim()!==``){let t=Number(e);return Number.isFinite(t)?t:void 0}},P=e=>typeof e==`string`&&O.has(e),F=e=>{let t=(e??[]).filter(P);return t.length>0?t:[..._]},I=e=>e===`dark-edit`?y:h,L=e=>structuredClone(e),R=e=>{if(!M(e))return{...v};let t=typeof e.type==`string`?e.type.trim().toLowerCase():``,n=k.has(t)?t:j[t]??v.type,r=(typeof e.width==`number`?String(e.width):typeof e.width==`string`?e.width.trim():``).replace(/px$/i,``);return{type:n,width:A.has(r)?r:v.width}},z=e=>{if(!M(e))return;let t=typeof e.type==`string`?e.type.trim().toLowerCase():``;if(!P(t))return;let n=typeof e.color==`string`&&e.color.trim()!==``?e.color.trim():h;return t===`value`?{type:t,color:n,value:N(e.value)??0}:{type:t,color:n}},B=e=>{let t=Array.isArray(e)?{lines:e}:e;if(!M(t)||!(Array.isArray(t.lines)||M(t.lines)))return;let n=Array.isArray(t.lines)?t.lines:[t.lines],r=n.map(z).filter(e=>e!==void 0);if(!(n.length>0&&r.length===0))return{lines:r,style:R(t.style)}},V=(e,t)=>e===`value`?{type:e,color:t,value:0}:{type:e,color:t},H=(e,t,n)=>{let r=F(t)[0],i=V(r,n);if(!e)return{lines:[i],style:{...v}};let a=L(e);return a.lines.push(i),a},U=(e,t)=>{let n=L(e);return n.lines.splice(t,1),n},W=(e,t,n)=>{let r=L(e),i=r.lines[t];return i&&(r.lines[t]=V(n,i.color)),r},G=(e,t,n)=>{let r=L(e);return r.lines[t]&&(r.lines[t].color=n),r},K=(e,t,n)=>{let r=L(e);return r.lines[t]&&(r.lines[t].value=n),r},q=(e,t)=>{let n=L(e);return n.style.type=t,n},J=(e,t)=>{let n=L(e);return n.style.width=t,n},Y=`:host{display:block;container-type:inline-size}.luzmo-item-option{align-items:start;height:fit-content}.control-container{flex-grow:1;align-items:start}.guidelines{gap:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));flex-direction:column;inline-size:100%;display:flex}.guideline-rows{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));flex-direction:column;display:flex}.guideline-row{align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));grid-template-columns:auto minmax(0,max-content) minmax(6rem,1fr) auto;display:grid}.guideline-value{inline-size:100%}@container (width<=20rem){.guideline-row{grid-template-columns:auto minmax(0,1fr) auto}.guideline-value{grid-column:2}.guideline-value-spacer{display:none}}.guideline-value-spacer{min-inline-size:0;min-block-size:var(--luzmo-component-height)}.guidelines-add{justify-content:flex-end;display:flex}.guideline-shared{gap:var(--luzmo-item-option-guidelines-rows-gap,var(--item-option-guidelines-rows-gap));border-block-start:var(--luzmo-border-width) solid var(--luzmo-border-color);flex-direction:column;padding-block-start:var(--luzmo-item-option-guidelines-shared-gap,var(--item-option-guidelines-shared-gap));display:flex}.guideline-shared-row{justify-content:space-between;align-items:center;gap:var(--luzmo-item-option-guidelines-row-gap,var(--item-option-guidelines-row-gap));flex-wrap:wrap;display:flex}.guideline-shared-label{flex-shrink:0}.guideline-width{min-inline-size:8rem}:host{--item-option-guidelines-rows-gap:var(--luzmo-spacing-2);--item-option-guidelines-row-gap:var(--luzmo-spacing-2);--item-option-guidelines-shared-gap:var(--luzmo-spacing-3)}:host([size=s]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-1);--item-option-guidelines-row-gap:var(--luzmo-spacing-1);--item-option-guidelines-shared-gap:var(--luzmo-spacing-2)}:host([size=l]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-3);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}:host([size=xl]){--item-option-guidelines-rows-gap:var(--luzmo-spacing-4);--item-option-guidelines-row-gap:var(--luzmo-spacing-3);--item-option-guidelines-shared-gap:var(--luzmo-spacing-4)}`,X=0,Z=6,Q=10**-6,te={maximumFractionDigits:Z},ne=n(f),$=class extends ne{constructor(...e){super(...e),this.lineTypes=[],this.lineTypeLabels={},this.defaultColor=I(),this.debounce=200,this.liveInteractions=!1,this._interaction=new d(this,u),this._lineIds=[],this._lineIdCounter=0,this._styleLabelId=`luzmo-item-option-guidelines-style-${++X}`,this._widthLabelId=`luzmo-item-option-guidelines-width-${X}`}static get styles(){return[...super.styles,D(Y)]}willUpdate(e){super.willUpdate(e),e.has(`value`)&&(this._clearDebounce(),this._guidelines=B(this.value),this._lineIds=(this._guidelines?.lines??[]).map((e,t)=>this._lineIds[t]??this._createLineId())),e.has(`liveInteractions`)&&(this.liveInteractions?this._clearDebounce():this.endInteraction())}disconnectedCallback(){super.disconnectedCallback(),this._clearDebounce()}_createLineId(){return`${this._styleLabelId}-line-${++this._lineIdCounter}`}_clearDebounce(){clearTimeout(this._debounceTimeout),this._debounceTimeout=void 0}endInteraction(){for(let e of this._colorPickers??[])e.endInteraction?.();this._interaction.endAll()}_handleInteractionStart(e,t){this.liveInteractions&&this._interaction.start(t.currentTarget,t.detail,this._guidelines?.lines[e]?.color)}_finalizeBeforeStructureChange(){this.liveInteractions&&this.endInteraction()}_handleInteractionEnd(e){this._interaction.end(e.currentTarget,e.detail)}_handleInteractionCancel(e){this._interaction.cancel(e.currentTarget,e.detail)}_emit(e,t=!1,n=this,r){let i=t=>{this._debounceTimeout=void 0,this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:t?{value:e,interaction:t}:{value:e}}))};this._clearDebounce(),this.liveInteractions?this._interaction.update(n,e,i,r):t||this.debounce<=0?i():this._debounceTimeout=setTimeout(i,this.debounce)}_commit(e,t=!1,n,r){this._guidelines=e,this._emit(e,t,n,r)}_allowedTypes(){return F(this.lineTypes)}_typeLabel(e){if(this.lineTypeLabels[e])return this.lineTypeLabels[e];switch(e){case`value`:return t(`Value`,{id:`item-option-guidelines-type-value`,desc:`Guideline type: manual numeric value`});case`average`:return t(`Average`,{id:`item-option-guidelines-type-average`,desc:`Guideline type: average of the plotted data`});case`median`:return t(`Median`,{id:`item-option-guidelines-type-median`,desc:`Guideline type: median of the plotted data`});case`average open`:return t(`Average open`,{id:`item-option-guidelines-type-average-open`,desc:`Guideline type: average of open values`});case`average close`:return t(`Average close`,{id:`item-option-guidelines-type-average-close`,desc:`Guideline type: average of close values`})}}_typeValues(){return Object.fromEntries(this._allowedTypes().map(e=>[e,this._typeLabel(e)]))}_widthValues(){return{1:t(`Thin`,{id:`item-option-guidelines-width-thin`,desc:`Guideline width: thin`}),2:t(`Medium`,{id:`item-option-guidelines-width-medium`,desc:`Guideline width: medium`}),3:t(`Thick`,{id:`item-option-guidelines-width-thick`,desc:`Guideline width: thick`})}}_styleOptions(){return[{key:`0`,icon:c,label:t(`Solid`,{id:`item-option-guidelines-style-solid`,desc:`Guideline line style: solid`})},{key:`1,2`,icon:l,label:t(`Dotted`,{id:`item-option-guidelines-style-dotted`,desc:`Guideline line style: dotted`})},{key:`3,3`,icon:s,label:t(`Dashed`,{id:`item-option-guidelines-style-dashed`,desc:`Guideline line style: dashed`})}]}_handleAdd(){this.disabled||(this._finalizeBeforeStructureChange(),this._lineIds=[...this._lineIds,this._createLineId()],this._commit(H(this._guidelines,this.lineTypes,this.defaultColor),!0))}_handleRemove(e){!this.disabled&&this._guidelines&&(this._finalizeBeforeStructureChange(),this._lineIds=this._lineIds.filter((t,n)=>n!==e),this._commit(U(this._guidelines,e),!0))}_handleTypeChange(e,t){!this.disabled&&this._guidelines&&P(t.detail)&&this._commit(W(this._guidelines,e,t.detail),!0)}_handleColorChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.color;typeof n==`string`&&this._commit(G(this._guidelines,e,n),!1,t.currentTarget??void 0,n)}_handleValueChange(e,t){if(this.disabled||!this._guidelines)return;let n=t.target.value;typeof n==`number`&&Number.isFinite(n)&&this._commit(K(this._guidelines,e,n))}_handleStyleChange(e){if(this.disabled||!this._guidelines)return;let t=e.target.selected?.[0];(t===`0`||t===`1,2`||t===`3,3`)&&this._commit(q(this._guidelines,t),!0)}_handleWidthChange(e){if(this.disabled||!this._guidelines)return;let t=e.detail,n=e.target.value,r=t===`1`||t===`2`||t===`3`?t:n;(r===`1`||r===`2`||r===`3`)&&this._commit(J(this._guidelines,r),!0)}_lineKey(e){return this._lineIds[e]}_renderLine(n,r){let i=r+1,o=t(e`Guideline ${i} color`,{id:`item-option-guidelines-color`,desc:`Accessible name for one guideline color picker`}),s=t(e`Guideline ${i} type`,{id:`item-option-guidelines-type`,desc:`Accessible name for one guideline type picker`}),c=t(e`Guideline ${i} value`,{id:`item-option-guidelines-value`,desc:`Accessible name for one manual guideline value`}),l=t(e`Remove guideline ${i}`,{id:`item-option-guidelines-remove`,desc:`Aria label for removing one guideline row`});return S`
+      <div class="guideline-row">
+        <luzmo-color-picker
+          class="guideline-color"
+          .color=${n.color}
+          .size=${this.size}
+          rounding="full"
+          shape="circle"
+          .label=${o}
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleColorChange(r,e)}
+          @luzmo-interaction-start=${e=>this._handleInteractionStart(r,e)}
+          @luzmo-interaction-end=${this._handleInteractionEnd}
+          @luzmo-interaction-cancel=${this._handleInteractionCancel}
+        ></luzmo-color-picker>
+        <luzmo-picker
+          class="guideline-type"
+          .label=${s}
+          .value=${n.type}
+          .size=${this.size}
+          variant="highlight"
+          ?disabled=${this.disabled}
+          @change=${e=>this._handleTypeChange(r,e)}
+        >
+          ${Object.entries(this._typeValues()).map(([e,t])=>S`
+              <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+            `)}
+        </luzmo-picker>
+        ${n.type===`value`?S`
+                <luzmo-number-field
+                  class="guideline-value"
+                  .value=${n.value??0}
+                  .size=${this.size}
+                  .step=${Q}
+                  .formatOptions=${te}
+                  .label=${c}
+                  ?disabled=${this.disabled}
+                  @change=${e=>this._handleValueChange(r,e)}
+                ></luzmo-number-field>
+              `:S`
+                <div class="guideline-value-spacer"></div>
+              `}
+        <luzmo-action-button
+          class="guideline-remove"
+          quiet
+          .size=${this.size}
+          .label=${l}
+          ?disabled=${this.disabled}
+          @click=${()=>this._handleRemove(r)}
+        >
+          <luzmo-icon slot="icon" .size=${this.size} .icon=${a}></luzmo-icon>
+        </luzmo-action-button>
+      </div>
+    `}_renderSharedStyle(e){return S`
+      <div class="guideline-shared">
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._styleLabelId}>
+            ${t(`Style`,{id:`item-option-guidelines-style-label`,desc:`Label for shared guideline dash style`})}
+          </span>
+          <luzmo-action-group
+            class="guideline-style"
+            compact
+            quiet
+            emphasized
+            selects="single"
+            .size=${this.size}
+            .selected=${[e.style.type]}
+            aria-labelledby=${this._styleLabelId}
+            ?disabled=${this.disabled}
+            @change=${this._handleStyleChange}
+          >
+            ${this._styleOptions().map(e=>S`
+                <luzmo-action-button value=${e.key} ?disabled=${this.disabled} .label=${e.label}>
+                  <luzmo-icon slot="icon" .size=${this.size} .icon=${e.icon}></luzmo-icon>
+                </luzmo-action-button>
+              `)}
+          </luzmo-action-group>
+        </div>
+        <div class="guideline-shared-row">
+          <span class="guideline-shared-label" id=${this._widthLabelId}>
+            ${t(`Width`,{id:`item-option-guidelines-width-label`,desc:`Label for shared guideline width`})}
+          </span>
+          <luzmo-picker
+            class="guideline-width"
+            aria-labelledby=${this._widthLabelId}
+            .value=${e.style.width}
+            .size=${this.size}
+            variant="highlight"
+            ?disabled=${this.disabled}
+            @change=${this._handleWidthChange}
+          >
+            ${Object.entries(this._widthValues()).map(([e,t])=>S`
+                <luzmo-menu-item value=${e}>${t}</luzmo-menu-item>
+              `)}
+          </luzmo-picker>
+        </div>
+      </div>
+    `}renderController(){let e=this._guidelines?.lines??[],n=this.label||t(`Guidelines`,{id:`item-option-guidelines-group`,desc:`Accessible name for the guidelines editor`});return S`
+      <div id="luzmo-item-option-control" class="guidelines" role="group" aria-label=${n}>
+        ${e.length>0?S`
+                <div class="guideline-rows">
+                  ${E(e,(e,t)=>this._lineKey(t),(e,t)=>this._renderLine(e,t))}
+                </div>
+              `:C}
+        <div class="guidelines-add">
+          <luzmo-button
+            class="add-guideline"
+            treatment="outline"
+            .size=${this.size}
+            ?disabled=${this.disabled}
+            @click=${this._handleAdd}
+          >
+            <luzmo-icon slot="icon" .icon=${o} .size=${this.size}></luzmo-icon>
+            ${t(`Add guideline`,{id:`item-option-guidelines-add`,desc:`Button that adds a chart guideline`})}
+          </luzmo-button>
+        </div>
+        ${this._guidelines&&e.length>0?this._renderSharedStyle(this._guidelines):C}
+      </div>
+    `}};r([w({attribute:!1})],$.prototype,`value`,void 0),r([w({attribute:!1})],$.prototype,`lineTypes`,void 0),r([w({attribute:!1})],$.prototype,`lineTypeLabels`,void 0),r([w({type:String,reflect:!0,attribute:`default-color`})],$.prototype,`defaultColor`,void 0),r([w({type:Number,reflect:!0})],$.prototype,`debounce`,void 0),r([w({type:Boolean,reflect:!0,attribute:`live-interactions`})],$.prototype,`liveInteractions`,void 0),r([T(`luzmo-color-picker`)],$.prototype,`_colorPickers`,void 0),r([ee()],$.prototype,`_guidelines`,void 0),$=r([i()],$),typeof customElements<`u`&&!customElements.get(`luzmo-item-option-guidelines`)&&customElements.define(`luzmo-item-option-guidelines`,$);export{_ as CARTESIAN_GUIDELINE_LINE_TYPES,y as DEFAULT_GUIDELINE_COLOR_DARK,h as DEFAULT_GUIDELINE_COLOR_LIGHT,p as DEFAULT_GUIDELINE_DEBOUNCE,v as DEFAULT_GUIDELINE_STYLE,b as DEFAULT_NUMERIC_GUIDELINE_VALUE,m as GUIDELINE_LINE_TYPES,g as GUIDELINE_STYLE_TYPES,x as GUIDELINE_WIDTHS,$ as LuzmoItemOptionGuidelines};