@luzmo/analytics-components-kit 1.0.1-alpha.86 → 1.0.1-alpha.89

package/components/slot-menu-list/index.cjs

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("lit"),v=require("../get-css-variable-DLiZYZEi.cjs"),k=require("@luzmo/icons"),P=require("../localize-r7ALOUy_.cjs"),z=require("lit/decorators.js"),j=require("../focusable-B3E_hQmm.cjs"),w=require("../sized-mixin-DcvJLFeo.cjs");var D={large:700};function F(l){l.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:D.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function S(l,t){var o=Object.keys(l);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(l);t&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(l,s).enumerable})),o.push.apply(o,e)}return o}function _(l){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?S(Object(o),!0).forEach(function(e){v._defineProperty(l,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(o)):S(Object(o)).forEach(function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(o,e))})}return l}var L={top:function(t,o){return Math.abs(o.y-t.top)},right:function(t,o){return Math.abs(t.right-o.x)},bottom:function(t,o){return Math.abs(t.bottom-o.y)},left:function(t,o){return Math.abs(o.x-t.left)}},O=Symbol("closestEdge");function $(l,t){var o,e,s=t.element,u=t.input,n=t.allowedEdges,i={x:u.clientX,y:u.clientY},r=s.getBoundingClientRect(),a=n.map(function(c){return{edge:c,value:L[c](r,i)}}),d=(o=(e=a.sort(function(c,h){return c.value-h.value})[0])===null||e===void 0?void 0:e.edge)!==null&&o!==void 0?o:null;return _(_({},l),{},v._defineProperty({},O,d))}function C(l){var t;return(t=l[O])!==null&&t!==void 0?t:null}const M=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer;border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var q=Object.defineProperty,f=(l,t,o,e)=>{for(var s=void 0,u=l.length-1,n;u>=0;u--)(n=l[u])&&(s=n(t,o,s)||s);return s&&q(t,o,s),s};class p extends w.SizedMixin(j.LuzmoElement,{validSizes:Object.values(w.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const o=this._sendChangeEvent.bind(this),e=this,s=v.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:n}){v.setCustomNativeDragPreview({nativeSetDragImage:n,render({container:i}){var d;const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([c,h,y])=>{const m=v.getCssVariableValue(t,h)||v.getCssVariableValue(t,y);a[c]=m}),r.textContent=((d=t.querySelector("[data-task-content]"))==null?void 0:d.textContent)??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),i.append(r)}})},getInitialData(){var r;const n=t.parentElement;let i=0;return n&&(i=[...((r=n.parentElement)==null?void 0:r.children)??[]].indexOf(n)),{index:i}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const u=v.dropTargetForElements({element:t,canDrop({source:n}){var i;return n.element===t?!1:(i=n==null?void 0:n.element)==null?void 0:i.classList.contains("draggable-slot-content")},getData(n){return $({},{element:t,input:n.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:n}){const i=C(n.data);if(!i)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDrag({self:n}){var a,d,c;const i=C(n.data);if(!i){(a=t.nextElementSibling)==null||a.remove();return}if(((d=t.nextElementSibling)==null?void 0:d.getAttribute("data-edge"))===i)return;(c=t.nextElementSibling)==null||c.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDragLeave(){var n;(n=t.nextElementSibling)==null||n.remove()},onDrop({self:n,source:i}){var d,c,h,y;(d=t.nextElementSibling)==null||d.remove();const r=C(n.data),a=n.element.parentElement;if(typeof i.data.index=="number"&&a){let m=[...((c=a.parentElement)==null?void 0:c.children)??[]].indexOf(a);r==="bottom"&&i.data.index>=m&&m<(((y=(h=a==null?void 0:a.parentElement)==null?void 0:h.children)==null?void 0:y.length)??0)-1?m+=1:r==="top"&&m>i.data.index&&(m-=1);const g=e.activeIndex,b=i.data.index,x=m,I=e.slotContents[b];e.slotContents.splice(b,1),e.slotContents.splice(x,0,I),b===g?e.activeIndex=x:b<g&&x>=g?e.activeIndex=g-1:b>g&&x<=g&&(e.activeIndex=g+1)}r&&(F(i.element),e.requestUpdate(),o())}});this._cleanupFns.push(u)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[E.unsafeCSS(M)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((o,e)=>e!==t),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){const t=this.slotContents.map((o,e)=>{const s=P.localize(o.label,this.contentLanguage);return E.html`<li class=${e===this.activeIndex?"active":""}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("lit"),g=require("../get-css-variable-COd1d84B.cjs"),y=require("@luzmo/icons"),S=require("../localize-C4zNlrwK.cjs"),h=require("lit/decorators.js"),_=require("../focusable-QLh-LlNt.cjs"),x=require("../sized-mixin-DcvJLFeo.cjs");var O={large:700};function I(n){n.animate([{backgroundColor:"var(--ds-background-selected, #E9F2FF)"},{}],{duration:O.large,easing:"cubic-bezier(0.25, 0.1, 0.25, 1.0)",iterations:1})}function E(n,t){var o=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);t&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable})),o.push.apply(o,e)}return o}function C(n){for(var t=1;t<arguments.length;t++){var o=arguments[t]!=null?arguments[t]:{};t%2?E(Object(o),!0).forEach(function(e){g._defineProperty(n,e,o[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(o,e))})}return n}var P={top:function(t,o){return Math.abs(o.y-t.top)},right:function(t,o){return Math.abs(t.right-o.x)},bottom:function(t,o){return Math.abs(t.bottom-o.y)},left:function(t,o){return Math.abs(o.x-t.left)}},k=Symbol("closestEdge");function j(n,t){var o,e,s=t.element,m=t.input,l=t.allowedEdges,i={x:m.clientX,y:m.clientY},r=s.getBoundingClientRect(),a=l.map(function(c){return{edge:c,value:P[c](r,i)}}),d=(o=(e=a.sort(function(c,u){return c.value-u.value})[0])===null||e===void 0?void 0:e.edge)!==null&&o!==void 0?o:null;return C(C({},n),{},g._defineProperty({},k,d))}function f(n){var t;return(t=n[k])!==null&&t!==void 0?t:null}const D=':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';var F=Object.defineProperty,b=(n,t,o,e)=>{for(var s=void 0,m=n.length-1,l;m>=0;m--)(l=n[m])&&(s=l(t,o,s)||s);return s&&F(t,o,s),s};class v extends x.SizedMixin(_.LuzmoElement,{validSizes:Object.values(x.ElementSizes)}){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotContents=[],this.activeIndex=0,this._sendChangeEvent=()=>{this.dispatchEvent(new CustomEvent("slot-list-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:structuredClone(this.slotContents),activeIndex:this.activeIndex}}))},this._cleanupFns=[],this._attachAll=()=>{[...this._draggableSlotContentElements].forEach(t=>{const o=this._sendChangeEvent.bind(this),e=this,s=g.draggable({element:t,onGenerateDragPreview({nativeSetDragImage:l}){g.setCustomNativeDragPreview({nativeSetDragImage:l,render({container:i}){const r=document.createElement("div");r.classList.add("drag-preview");const a={};[["borderColor","--luzmo-slot-menu-list-border-color","--luzmo-border-color"],["backgroundColor","--luzmo-slot-menu-list-background-color","--luzmo-background-color"],["color","--luzmo-slot-menu-list-font-color","--slot-menu-list-font-color"],["fontSize","--luzmo-slot-menu-list-font-size","--slot-menu-list-font-size"],["horizontalPadding","--luzmo-slot-menu-list-item-horizontal-padding","--slot-menu-list-item-horizontal-padding"],["verticalPadding","--luzmo-slot-menu-list-item-vertical-padding","--slot-menu-list-item-vertical-padding"],["borderRadius","--luzmo-slot-menu-list-border-radius","--luzmo-border-radius"],["fontFamily","--luzmo-slot-menu-list-font-family","--luzmo-font-family"]].forEach(([d,c,u])=>{const p=g.getCssVariableValue(t,c)||g.getCssVariableValue(t,u);a[d]=p}),r.textContent=t.querySelector("[data-task-content]")?.textContent??t.textContent,Object.assign(r.style,{border:`1px solid ${a.borderColor}`,backgroundColor:a.backgroundColor,borderRadius:a.borderRadius,fontFamily:a.fontFamily,fontSize:a.fontSize,color:a.color,paddingInline:`${a.horizontalPadding}`,paddingBlock:`${a.verticalPadding}`}),i.append(r)}})},getInitialData(){const l=t.parentElement;let i=0;return l&&(i=[...l.parentElement?.children??[]].indexOf(l)),{index:i}},onDragStart(){t.style.opacity="0.5"},onDrop(){t.style.opacity="1"}});this._cleanupFns.push(s);const m=g.dropTargetForElements({element:t,canDrop({source:l}){return l.element===t?!1:l?.element?.classList.contains("draggable-slot-content")},getData(l){return j({},{element:t,input:l.input,allowedEdges:["top","bottom"]})},getIsSticky(){return!0},onDragEnter({self:l}){const i=f(l.data);if(!i)return;const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDrag({self:l}){const i=f(l.data);if(!i){t.nextElementSibling?.remove();return}if(t.nextElementSibling?.getAttribute("data-edge")===i)return;t.nextElementSibling?.remove();const r=document.createElement("div");r.classList.add("drop-indicator"),r.dataset.edge=i,t.after(r)},onDragLeave(){t.nextElementSibling?.remove()},onDrop({self:l,source:i}){t.nextElementSibling?.remove();const r=f(l.data),a=l.element.parentElement;if(typeof i.data.index=="number"&&a){let d=[...a.parentElement?.children??[]].indexOf(a);r==="bottom"&&i.data.index>=d&&d<(a?.parentElement?.children?.length??0)-1?d+=1:r==="top"&&d>i.data.index&&(d-=1);const c=e.activeIndex,u=i.data.index,p=d,w=e.slotContents[u];e.slotContents.splice(u,1),e.slotContents.splice(p,0,w),u===c?e.activeIndex=p:u<c&&p>=c?e.activeIndex=c-1:u>c&&p<=c&&(e.activeIndex=c+1)}r&&(I(i.element),e.requestUpdate(),o())}});this._cleanupFns.push(m)})},this._detachAll=()=>{this._cleanupFns.forEach(t=>t()),this._cleanupFns=[]}}static get styles(){return[z.unsafeCSS(D)]}willUpdate(){this._detachAll()}updated(){this._attachAll()}disconnectedCallback(){super.disconnectedCallback(),this._detachAll()}setActiveIndex(t){this.activeIndex=t,this._sendChangeEvent()}removeSlotContent(t){this.slotContents=this.slotContents.filter((o,e)=>e!==t),this.activeIndex=this.slotContents.length===0?0:Math.min(this.activeIndex,this.slotContents.length-1),this._sendChangeEvent()}render(){const t=this.slotContents.map((o,e)=>{const s=S.localize(o.label??{},this.contentLanguage);return z.html`<li class=${e===this.activeIndex?"active":""}>
           <div class="draggable-slot-content">
             <div
               class="draggable-slot-content-label"
@@ -29,7 +29,7 @@
               class="draggable-slot-content-remove"
               @click=${this.removeSlotContent.bind(this,e)}
             >
-              ${k.luzmoIcon(k.luzmoTrashOutline)}
+              ${y.luzmoIcon(y.luzmoTrashOutline)}
             </div>
           </div>
-        </li>`});return E.html`<div>${t}</div>`}}f([z.property({type:String,reflect:!0})],p.prototype,"language");f([z.property({type:String,attribute:"content-language",reflect:!0})],p.prototype,"contentLanguage");f([z.queryAll(".draggable-slot-content")],p.prototype,"_draggableSlotContentElements");f([z.property()],p.prototype,"slotContents");f([z.property({type:Number})],p.prototype,"activeIndex");customElements.get("luzmo-slot-menu-list")||customElements.define("luzmo-slot-menu-list",p);exports.LuzmoSlotMenuList=p;
+        </li>`});return z.html`<div>${t}</div>`}}b([h.property({type:String,reflect:!0})],v.prototype,"language");b([h.property({type:String,attribute:"content-language",reflect:!0})],v.prototype,"contentLanguage");b([h.queryAll(".draggable-slot-content")],v.prototype,"_draggableSlotContentElements");b([h.property()],v.prototype,"slotContents");b([h.property({type:Number})],v.prototype,"activeIndex");customElements.get("luzmo-slot-menu-list")||customElements.define("luzmo-slot-menu-list",v);exports.LuzmoSlotMenuList=v;

package/components/slot-menu-list/index.js

@@ -17,27 +17,27 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { unsafeCSS as I, html as w } from "lit";
-import { _ as S, d as P, a as F, s as j, g as k } from "../get-css-variable-YlLiVgo8.js";
-import { luzmoIcon as D, luzmoTrashOutline as L } from "@luzmo/icons";
-import { l as $ } from "../localize-BX7q0S0M.js";
-import { property as x, queryAll as A } from "lit/decorators.js";
-import { L as M } from "../focusable-DCIFkpiW.js";
-import { S as T, E as q } from "../sized-mixin-cJbo3PKR.js";
+import { unsafeCSS as C, html as b } from "lit";
+import { _ as E, d as S, a as O, s as _, g as f } from "../get-css-variable-CdwF98oh.js";
+import { luzmoIcon as I, luzmoTrashOutline as P } from "@luzmo/icons";
+import { l as F } from "../localize-CcDpq940.js";
+import { property as v, queryAll as j } from "lit/decorators.js";
+import { L as D } from "../focusable-BS2pbY7w.js";
+import { S as L, E as $ } from "../sized-mixin-cJbo3PKR.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
     o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
   }
 })();
-var R = {
+var A = {
   large: 700
 };
-function U(r) {
-  r.animate([{
+function M(l) {
+  l.animate([{
     backgroundColor: "var(--ds-background-selected, #E9F2FF)"
   }, {}], {
-    duration: R.large,
+    duration: A.large,
     /**
      * This is equivalent to the browser default, but we are making it
      * explicit to avoid relying on implicit behavior.
@@ -49,28 +49,28 @@ function U(r) {
     iterations: 1
   });
 }
-function E(r, o) {
-  var t = Object.keys(r);
+function x(l, o) {
+  var t = Object.keys(l);
   if (Object.getOwnPropertySymbols) {
-    var e = Object.getOwnPropertySymbols(r);
+    var e = Object.getOwnPropertySymbols(l);
     o && (e = e.filter(function(s) {
-      return Object.getOwnPropertyDescriptor(r, s).enumerable;
+      return Object.getOwnPropertyDescriptor(l, s).enumerable;
     })), t.push.apply(t, e);
   }
   return t;
 }
-function C(r) {
+function y(l) {
   for (var o = 1; o < arguments.length; o++) {
     var t = arguments[o] != null ? arguments[o] : {};
-    o % 2 ? E(Object(t), !0).forEach(function(e) {
-      S(r, e, t[e]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(t)) : E(Object(t)).forEach(function(e) {
-      Object.defineProperty(r, e, Object.getOwnPropertyDescriptor(t, e));
+    o % 2 ? x(Object(t), !0).forEach(function(e) {
+      E(l, e, t[e]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(l, Object.getOwnPropertyDescriptors(t)) : x(Object(t)).forEach(function(e) {
+      Object.defineProperty(l, e, Object.getOwnPropertyDescriptor(t, e));
     });
   }
-  return r;
+  return l;
 }
-var B = {
+var T = {
   top: function(o, t) {
     return Math.abs(t.y - o.top);
   },
@@ -83,33 +83,33 @@ var B = {
   left: function(o, t) {
     return Math.abs(t.x - o.left);
   }
-}, O = Symbol("closestEdge");
-function N(r, o) {
-  var t, e, s = o.element, d = o.input, l = o.allowedEdges, n = {
-    x: d.clientX,
-    y: d.clientY
-  }, i = s.getBoundingClientRect(), a = l.map(function(c) {
+}, w = Symbol("closestEdge");
+function q(l, o) {
+  var t, e, s = o.element, m = o.input, r = o.allowedEdges, n = {
+    x: m.clientX,
+    y: m.clientY
+  }, i = s.getBoundingClientRect(), a = r.map(function(c) {
     return {
       edge: c,
-      value: B[c](i, n)
+      value: T[c](i, n)
     };
-  }), u = (t = (e = a.sort(function(c, p) {
-    return c.value - p.value;
+  }), u = (t = (e = a.sort(function(c, d) {
+    return c.value - d.value;
   })[0]) === null || e === void 0 ? void 0 : e.edge) !== null && t !== void 0 ? t : null;
-  return C(C({}, r), {}, S({}, O, u));
+  return y(y({}, l), {}, E({}, w, u));
 }
-function y(r) {
+function h(l) {
   var o;
-  return (o = r[O]) !== null && o !== void 0 ? o : null;
+  return (o = l[w]) !== null && o !== void 0 ? o : null;
 }
-const V = ':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer;border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';
-var G = Object.defineProperty, h = (r, o, t, e) => {
-  for (var s = void 0, d = r.length - 1, l; d >= 0; d--)
-    (l = r[d]) && (s = l(o, t, s) || s);
-  return s && G(o, t, s), s;
+const R = ':host{font-family:var(--luzmo-slot-menu-list-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-list-font-size, var(--slot-menu-list-font-size));color:var(--luzmo-slot-menu-listfont-color, var(--luzmo-font-color))}:host{margin:0;padding:0;list-style:none;max-height:var(--luzmo-slot-menu-list-max-height, var(--slot-menu-list-max-height));overflow-y:auto;border-right:var(--luzmo-slot-menu-list-border-right-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-list-border-right-color, var(--luzmo-border-color))}:host li{position:relative;cursor:pointer}:host li:hover{background-color:var(--luzmo-slot-menu-list-background-color-hover, var(--slot-menu-list-background-color-hover))}:host li{border-bottom:var(--luzmo-slot-menu-list-border-bottom-width, var(--slot-menu-list-border-bottom-width)) solid var(--luzmo-slot-menu-list-border-bottom-color, var(--slot-menu-list-border-bottom-color))}:host .active{background-color:var(--luzmo-slot-menu-list-active-background-color, var(--slot-menu-list-active-background-color));color:var(--luzmo-slot-menu-list-active-color, var(--slot-menu-list-active-color))}:host .active:hover{background-color:var(--luzmo-slot-menu-list-active-background-color-hover, var(--slot-menu-list-active-background-color-hover))}.drop-indicator{position:absolute;left:0;right:0;height:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height));background-color:var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color))}.drop-indicator:before{content:"";display:block;width:100%;border:var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)) solid var(--luzmo-slot-menu-list-drop-indicator-color, var(--slot-menu-list-drop-indicator-color));border-radius:50%;position:absolute;background:var(--luzmo-slot-menu-list-drop-indicator-background, var(--luzmo-background-color));left:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));top:calc(-.5 * (var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size)) + var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height))));height:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size));width:var(--luzmo-slot-menu-list-drop-indicator-circle-size, var(--slot-menu-list-drop-indicator-circle-size))}.drop-indicator[data-edge=top]{top:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.drop-indicator[data-edge=bottom]{bottom:calc(-.5 * var(--luzmo-slot-menu-list-drop-indicator-height, var(--slot-menu-list-drop-indicator-height)))}.draggable-slot-content{display:flex;justify-content:space-between;gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));align-items:center}.draggable-slot-content .draggable-slot-content-label,.draggable-slot-content .draggable-slot-content-remove{padding-block-start:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding));padding-block-end:var(--luzmo-slot-menu-list-item-vertical-padding, var(--slot-menu-list-item-vertical-padding))}.draggable-slot-content .draggable-slot-content-label{padding-inline-start:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draggable-slot-content .draggable-slot-content-remove{padding-inline-end:var(--luzmo-slot-menu-list-item-horizontal-padding, var(--slot-menu-list-item-horizontal-padding));flex:0 0 auto}:host{--slot-menu-list-active-background-color: var(--luzmo-primary);--slot-menu-list-active-background-color-hover: var(--luzmo-primary-hover);--slot-menu-list-active-color: var(--luzmo-primary-inverse-color);--slot-menu-list-background-color-hover: var(--luzmo-background-color-hover);--slot-menu-list-drop-indicator-color: var(--luzmo-font-color-down);--slot-menu-list-drop-indicator-height: 2px;--slot-menu-list-drop-indicator-circle-size: 4px;--slot-menu-list-border-bottom-width: 0px;--slot-menu-list-border-bottom-color: transparent;--slot-menu-list-max-height: calc(var(--luzmo-component-height) * 4)}:host{--slot-menu-display-settings-min-width: 19rem;--slot-menu-min-height: calc(var(--luzmo-component-height) * 2);--slot-menu-font-size: var(--luzmo-font-size);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3)}:host([size=s]){--slot-menu-display-settings-min-width: 16rem;--slot-menu-min-height: calc(var(--luzmo-component-height-s) * 2);--slot-menu-font-size: var(--luzmo-font-size-s);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2)}:host([size=l]){--slot-menu-display-settings-min-width: 23rem;--slot-menu-min-height: calc(var(--luzmo-component-height-l) * 2);--slot-menu-font-size: var(--luzmo-font-size-l);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-3);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4)}:host([size=xl]){--slot-menu-display-settings-min-width: 26rem;--slot-menu-min-height: calc(var(--luzmo-component-height-xl) * 2);--slot-menu-font-size: var(--luzmo-font-size-xl);--slot-menu-list-item-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-list-item-vertical-padding: var(--luzmo-spacing-4);--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5)}';
+var U = Object.defineProperty, z = (l, o, t, e) => {
+  for (var s = void 0, m = l.length - 1, r; m >= 0; m--)
+    (r = l[m]) && (s = r(o, t, s) || s);
+  return s && U(o, t, s), s;
 };
-class z extends T(M, {
-  validSizes: Object.values(q)
+class p extends L(D, {
+  validSizes: Object.values($)
 }) {
   constructor() {
     super(...arguments), this.language = "en", this.contentLanguage = "en", this.slotContents = [], this.activeIndex = 0, this._sendChangeEvent = () => {
@@ -126,13 +126,12 @@ class z extends T(M, {
       );
     }, this._cleanupFns = [], this._attachAll = () => {
       [...this._draggableSlotContentElements].forEach((o) => {
-        const t = this._sendChangeEvent.bind(this), e = this, s = P({
+        const t = this._sendChangeEvent.bind(this), e = this, s = S({
           element: o,
-          onGenerateDragPreview({ nativeSetDragImage: l }) {
-            j({
-              nativeSetDragImage: l,
+          onGenerateDragPreview({ nativeSetDragImage: r }) {
+            _({
+              nativeSetDragImage: r,
               render({ container: n }) {
-                var u;
                 const i = document.createElement("div");
                 i.classList.add("drag-preview");
                 const a = {};
@@ -177,10 +176,10 @@ class z extends T(M, {
                     "--luzmo-slot-menu-list-font-family",
                     "--luzmo-font-family"
                   ]
-                ].forEach(([c, p, b]) => {
-                  const m = k(o, p) || k(o, b);
-                  a[c] = m;
-                }), i.textContent = ((u = o.querySelector("[data-task-content]")) == null ? void 0 : u.textContent) ?? // worst case fallback if we set up our data-* up wrong
+                ].forEach(([u, c, d]) => {
+                  const g = f(o, c) || f(o, d);
+                  a[u] = g;
+                }), i.textContent = o.querySelector("[data-task-content]")?.textContent ?? // worst case fallback if we set up our data-* up wrong
                 o.textContent, Object.assign(i.style, {
                   border: `1px solid ${a.borderColor}`,
                   backgroundColor: a.backgroundColor,
@@ -195,11 +194,10 @@ class z extends T(M, {
             });
           },
           getInitialData() {
-            var i;
-            const l = o.parentElement;
+            const r = o.parentElement;
             let n = 0;
-            return l && (n = [...((i = l.parentElement) == null ? void 0 : i.children) ?? []].indexOf(
-              l
+            return r && (n = [...r.parentElement?.children ?? []].indexOf(
+              r
             )), {
               index: n
             };
@@ -212,18 +210,17 @@ class z extends T(M, {
           }
         });
         this._cleanupFns.push(s);
-        const d = F({
+        const m = O({
           element: o,
-          canDrop({ source: l }) {
-            var n;
-            return l.element === o ? !1 : (n = l == null ? void 0 : l.element) == null ? void 0 : n.classList.contains("draggable-slot-content");
+          canDrop({ source: r }) {
+            return r.element === o ? !1 : r?.element?.classList.contains("draggable-slot-content");
           },
-          getData(l) {
-            return N(
+          getData(r) {
+            return q(
               {},
               {
                 element: o,
-                input: l.input,
+                input: r.input,
                 allowedEdges: ["top", "bottom"]
               }
             );
@@ -231,53 +228,50 @@ class z extends T(M, {
           getIsSticky() {
             return !0;
           },
-          onDragEnter({ self: l }) {
-            const n = y(l.data);
+          onDragEnter({ self: r }) {
+            const n = h(r.data);
             if (!n)
               return;
             const i = document.createElement("div");
             i.classList.add("drop-indicator"), i.dataset.edge = n, o.after(i);
           },
-          onDrag({ self: l }) {
-            var a, u, c;
-            const n = y(l.data);
+          onDrag({ self: r }) {
+            const n = h(r.data);
             if (!n) {
-              (a = o.nextElementSibling) == null || a.remove();
+              o.nextElementSibling?.remove();
               return;
             }
-            if (((u = o.nextElementSibling) == null ? void 0 : u.getAttribute("data-edge")) === n)
+            if (o.nextElementSibling?.getAttribute("data-edge") === n)
               return;
-            (c = o.nextElementSibling) == null || c.remove();
+            o.nextElementSibling?.remove();
             const i = document.createElement("div");
             i.classList.add("drop-indicator"), i.dataset.edge = n, o.after(i);
           },
           onDragLeave() {
-            var l;
-            (l = o.nextElementSibling) == null || l.remove();
+            o.nextElementSibling?.remove();
           },
-          onDrop({ self: l, source: n }) {
-            var u, c, p, b;
-            (u = o.nextElementSibling) == null || u.remove();
-            const i = y(l.data), a = l.element.parentElement;
+          onDrop({ self: r, source: n }) {
+            o.nextElementSibling?.remove();
+            const i = h(r.data), a = r.element.parentElement;
             if (typeof n.data.index == "number" && a) {
-              let m = [...((c = a.parentElement) == null ? void 0 : c.children) ?? []].indexOf(
+              let u = [...a.parentElement?.children ?? []].indexOf(
                 a
               );
-              i === "bottom" && n.data.index >= m && m < (((b = (p = a == null ? void 0 : a.parentElement) == null ? void 0 : p.children) == null ? void 0 : b.length) ?? 0) - 1 ? m += 1 : i === "top" && m > n.data.index && (m -= 1);
-              const g = e.activeIndex, v = n.data.index, f = m, _ = e.slotContents[v];
-              e.slotContents.splice(v, 1), e.slotContents.splice(f, 0, _), v === g ? e.activeIndex = f : v < g && f >= g ? e.activeIndex = g - 1 : v > g && f <= g && (e.activeIndex = g + 1);
+              i === "bottom" && n.data.index >= u && u < (a?.parentElement?.children?.length ?? 0) - 1 ? u += 1 : i === "top" && u > n.data.index && (u -= 1);
+              const c = e.activeIndex, d = n.data.index, g = u, k = e.slotContents[d];
+              e.slotContents.splice(d, 1), e.slotContents.splice(g, 0, k), d === c ? e.activeIndex = g : d < c && g >= c ? e.activeIndex = c - 1 : d > c && g <= c && (e.activeIndex = c + 1);
             }
-            i && (U(n.element), e.requestUpdate(), t());
+            i && (M(n.element), e.requestUpdate(), t());
           }
         });
-        this._cleanupFns.push(d);
+        this._cleanupFns.push(m);
       });
     }, this._detachAll = () => {
       this._cleanupFns.forEach((o) => o()), this._cleanupFns = [];
     };
   }
   static get styles() {
-    return [I(V)];
+    return [C(R)];
   }
   willUpdate() {
     this._detachAll();
@@ -299,8 +293,8 @@ class z extends T(M, {
   render() {
     const o = this.slotContents.map(
       (t, e) => {
-        const s = $(t.label, this.contentLanguage);
-        return w`<li class=${e === this.activeIndex ? "active" : ""}>
+        const s = F(t.label ?? {}, this.contentLanguage);
+        return b`<li class=${e === this.activeIndex ? "active" : ""}>
           <div class="draggable-slot-content">
             <div
               class="draggable-slot-content-label"
@@ -312,31 +306,31 @@ class z extends T(M, {
               class="draggable-slot-content-remove"
               @click=${this.removeSlotContent.bind(this, e)}
             >
-              ${D(L)}
+              ${I(P)}
             </div>
           </div>
         </li>`;
       }
     );
-    return w`<div>${o}</div>`;
+    return b`<div>${o}</div>`;
   }
 }
-h([
-  x({ type: String, reflect: !0 })
-], z.prototype, "language");
-h([
-  x({ type: String, attribute: "content-language", reflect: !0 })
-], z.prototype, "contentLanguage");
-h([
-  A(".draggable-slot-content")
-], z.prototype, "_draggableSlotContentElements");
-h([
-  x()
-], z.prototype, "slotContents");
-h([
-  x({ type: Number })
-], z.prototype, "activeIndex");
-customElements.get("luzmo-slot-menu-list") || customElements.define("luzmo-slot-menu-list", z);
+z([
+  v({ type: String, reflect: !0 })
+], p.prototype, "language");
+z([
+  v({ type: String, attribute: "content-language", reflect: !0 })
+], p.prototype, "contentLanguage");
+z([
+  j(".draggable-slot-content")
+], p.prototype, "_draggableSlotContentElements");
+z([
+  v()
+], p.prototype, "slotContents");
+z([
+  v({ type: Number })
+], p.prototype, "activeIndex");
+customElements.get("luzmo-slot-menu-list") || customElements.define("luzmo-slot-menu-list", p);
 export {
-  z as LuzmoSlotMenuList
+  p as LuzmoSlotMenuList
 };

package/components/slot-menu-list/slot-menu-list.d.ts

@@ -1,4 +1,5 @@
 import { CSSResultArray, TemplateResult } from 'lit';
+import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
 import { LuzmoElement } from '../../utils/base';
 declare const LuzmoSlotMenuList_base: typeof LuzmoElement & {
     new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
@@ -18,7 +19,7 @@ export declare class LuzmoSlotMenuList extends LuzmoSlotMenuList_base {
      */
     contentLanguage: string;
     _draggableSlotContentElements: HTMLElement[];
-    slotContents: any;
+    slotContents: GenericSlotContent[];
     activeIndex: number;
     private _sendChangeEvent;
     private _cleanupFns;

package/components/speedometer-chart-options.config-B4ceg_qI.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./helpers-9I0oLoUB.cjs"),u=e=>e?.find(a=>a?.name==="target")?.content?.length===0&&e?.find(a=>a?.name==="measure")?.content?.length>0,o=[{color:"#ff0000",value:0},{color:"#ffa500",value:25},{color:"#ffff00",value:50},{color:"#008000",value:75},{color:"#006400",value:100}],i=[{key:"general",type:"group",open:!0,children:[{key:"display.title",control:{type:"switch",label:"Title",default:!1}},{key:"display.meterValue",control:{type:"switch",label:"Value",default:!0}},{key:"display.meterLabel",control:{type:"switch",label:"Label",default:!0}},{key:"display.ticks",control:{type:"switch",label:"Ticks",default:!0}},{key:"degrees",control:{type:"slider",label:"Arc size",default:230,min:180,max:360,step:1}},{key:"arcWidth",control:{type:"slider",label:"Gauge width",default:.08,min:.02,max:.7,step:.01}},{type:"divider"},{key:"manualValues.display",control:{type:"picker",label:"Ticks display",default:"absolute",enum:["absolute","percentage"]}},{key:"manualValues.mode",control:{type:"picker",label:"Range type",default:"relative",enum:["relative","absolute"],toOptions:({options:e,value:a})=>{const n=e?.manualValues?.mode??"relative",l={...e,manualValues:{...e.manualValues,mode:a}};return a==="absolute"&&n==="relative"&&l.manualValues?.ranges&&l.manualValues?.target?l.manualValues.ranges=l.manualValues.ranges.map(t=>({...t,val:t.val*l.manualValues.target/100})):a==="relative"&&n==="absolute"&&l.manualValues?.ranges?.length&&(l.manualValues.target=l.manualValues.ranges.at(-1)?.val,l.manualValues.ranges=l.manualValues.ranges.map(t=>({...t,value:t.val*100/l.manualValues.target}))),l}}},{key:"manualValues.target",control:{type:"number-field",label:"Manual target",placeholder:"Target value",minWidthInputField:"150px"},visibleIf:({options:e,slots:a})=>e?.manualValues?.mode!=="absolute"&&u(a)},{key:"manualValues.ranges",control:{type:"color-range",editRangeSize:!0,minimumRangeSize:2,percentage:({options:e})=>e?.manualValues?.mode!=="absolute",noAlphaChannel:!0,hideLabel:!0,label:"Color ranges",default:()=>structuredClone(o),parseValue:e=>e?.map(a=>({color:a?.color,value:a?.value??a?.val})),toValue:e=>e?.map(a=>({color:a?.color,val:a?.value}))}}]},{key:"marker",type:"group",open:!1,children:[{key:"marker.type",control:{type:"picker",label:"Marker type",default:"innerBand",enum:["needle","line","inside","outside","centerBand","innerBand"]}},{key:"marker.color",control:{type:"color-picker",label:"Marker color",default:({theme:e})=>r.getThemeAxisColor(e),extraLabel:({options:e,theme:a})=>r.getThemeAxisColorResetLabel(e,a,"axis.y.color"),extraLabelHasClickAction:({options:e,theme:a})=>r.getThemeAxisColorExtraLabelHasClickAction(e,a,"axis.y.color"),extraLabelClickAction:({options:e,theme:a})=>r.getThemeBorderColorExtraLabelClickAction(e,a,"axis.y.color")},visibleIf:({options:e})=>e?.marker?.type&&e?.marker?.type!=="innerBand"},{key:"marker.centerBandWidth",control:{type:"slider",label:"Marker width",default:.34,min:.1,max:1,step:.01},visibleIf:({options:e})=>e?.marker?.type&&e?.marker?.type==="centerBand"},{key:"marker.lineWidth",control:{type:"slider",label:"Line width",default:2,min:1,max:10,step:1},visibleIf:({options:e})=>e?.marker?.type&&e?.marker?.type==="line"},{key:"marker.arrowSize",control:{type:"slider",label:"Arrow size",default:.05,min:.05,max:.2,step:.01},visibleIf:({options:e})=>e?.marker?.type&&["inside","outside"].includes(e?.marker?.type)}]}];exports.default=i;