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

package/components/slot-menu/index.cjs

@@ -17,38 +17,38 @@
  * 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"});require("@luzmo/lucero/divider");const v=require("lit"),O=require("../index-CXn67vdn.cjs"),U=require("@lit-labs/signals"),P=require("@lit/context"),w=require("@luzmo/icons"),x=require("../index-cfj52IbK.cjs"),M=require("../localize-r7ALOUy_.cjs"),s=require("lit/decorators.js"),A=require("lit/directives/guard.js"),R=require("../focusable-B3E_hQmm.cjs"),$=require("../sized-mixin-DcvJLFeo.cjs");require("../slot-menu-list/index.cjs");const X=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/i;function Y(d){return typeof d=="string"&&X.test(d)}function N({element:d,handle:t,boundary:l=document.documentElement,onDragStart:e,onDragEnd:r}){if(!d||!t)throw new Error("makeDraggable: element and handle are required");const a=d.ownerDocument??document;let i=-1,p=0,u=0,_=0,z=0,c=0,h=0,b=0,k=0;const S=m=>{if(m.pointerId!==i)return;const y=m.clientX-p,C=m.clientY-u,g=(l??document.documentElement).getBoundingClientRect();let f=_+y,I=z+C;f=Math.min(Math.max(f,g.left),g.right-c),I=Math.min(Math.max(I,g.top),g.bottom-h);const D=f-_,L=I-z,B=b+D,q=k+L;d.style.transform=`translate3d(${B}px, ${q}px, 0)`},E=m=>{m.pointerId===i&&(a.removeEventListener("pointermove",S),a.removeEventListener("pointerup",E),i=-1,r==null||r())},T=m=>{var C;if(m.button!==0)return;i=m.pointerId;const y=d.getBoundingClientRect();_=y.left,z=y.top,c=y.width,h=y.height,p=m.clientX,u=m.clientY;try{const g=(C=a.defaultView)==null?void 0:C.getComputedStyle(d);if(g){const f=new DOMMatrixReadOnly(g.transform);b=f.m41,k=f.m42}}catch{b=0,k=0}t.setPointerCapture(i),a.addEventListener("pointermove",S),a.addEventListener("pointerup",E),e==null||e()};return t.addEventListener("pointerdown",T),()=>{t.removeEventListener("pointerdown",T),a.removeEventListener("pointermove",S),a.removeEventListener("pointerup",E)}}const j=":host{font-family:var(--luzmo-slot-menu-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size, var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color, var(--luzmo-font-color));display:block;width:fit-content}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width, var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width, var(--slot-menu-list-max-width));background-color:var(--luzmo-slot-menu-list-background-color, var(--slot-menu-list-background-color));border-bottom-left-radius:var(--luzmo-slot-menu-list-border-radius, var(--slot-menu-list-border-radius))}.slot-contents-container{position:relative;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color, var(--luzmo-background-color));box-shadow:var(--luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal)) var(--luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical)) var(--luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur)) var(--luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color));border-top-left-radius:0}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width, var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding, var(--slot-menu-display-settings-vertical-padding)) var(--luzmo-slot-menu-display-settings-horizontal-padding, var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{overflow:hidden;border-top-left-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));--slot-menu-popup-filter: drop-shadow( var( --luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal) ) var( --luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical) ) var( --luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur) ) var( --luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color) ) );filter:var(--luzmo-slot-menu-popup-filter, var(--slot-menu-popup-filter))}.slot-menu-top-menu{display:flex;align-items:center;border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;width:fit-content}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color, var(--luzmo-background-color-highlight));cursor:move;width:fit-content;border:var(--luzmo-slot-menu-drag-handle-border-width, var(--slot-menu-drag-handle-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-drag-handle-size, var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover, var(--luzmo-background-color-highlight-hover))}.slot-content-action{display:flex;flex:0 1 auto;max-width:var(--luzmo-slot-menu-top-menu-label-max-width, var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color, var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color, var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-content-label-border-color, var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover, var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus, var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-content-action .slot-content-remove{flex:0 0 auto;cursor:pointer}.close{position:absolute;right:var(--luzmo-slot-menu-close-icon-right, var(--slot-menu-close-icon-right));cursor:pointer;top:calc(-2 * var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)));background-color:var(--luzmo-slot-menu-close-button-background-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size, var(--slot-menu-close-button-size));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-top-left-radius:0;border-top-right-radius:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding, var(--slot-menu-close-button-vertical-padding)) var(--luzmo-slot-menu-close-button-horizontal-padding, var(--slot-menu-close-button-horizontal-padding))}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover, var(--luzmo-background-color-highlight-hover))}: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-display-settings-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width: 12rem;--slot-menu-list-min-width: 8rem;--slot-menu-list-max-width: 12rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3);--slot-menu-drag-handle-size: var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-border-width: var(--luzmo-border-width) --slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-popup-shadow-horizontal: 0;--slot-menu-popup-shadow-vertical: 1px;--slot-menu-popup-shadow-blur: 4px;--slot-menu-popup-shadow-color: var(--luzmo-border-color);--slot-menu-popup-box-shadow: var(--slot-menu-popup-shadow-horizontal) var(--slot-menu-popup-shadow-vertical) var(--slot-menu-popup-shadow-blur) var(--slot-menu-popup-shadow-color);--slot-menu-close-icon-right: 1rem;--slot-menu-list-border-radius: var(--luzmo-border-radius)}: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-display-settings-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width: 10rem;--slot-menu-list-min-width: 6rem;--slot-menu-list-max-width: 10rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2);--slot-menu-drag-handle-size: var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}: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-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 14rem;--slot-menu-list-min-width: 9rem;--slot-menu-list-max-width: 14rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4);--slot-menu-drag-handle-size: var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size);--slot-menu-close-button-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}: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-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 16rem;--slot-menu-list-min-width: 10rem;--slot-menu-list-max-width: 16rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5);--slot-menu-drag-handle-size: var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-close-button-size: var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}";var K=Object.defineProperty,n=(d,t,l,e)=>{for(var r=void 0,a=d.length-1,i;a>=0;a--)(i=d[a])&&(r=i(t,l,r)||r);return r&&K(t,l,r),r};class o extends U.SignalWatcher($.SizedMixin(R.LuzmoElement,{validSizes:Object.values($.ElementSizes)})){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotType="numeric",this.variant="draggable",this._periodOverPeriodUiType=null,this.measureColumns=[],this.apiUrl="https://api.luzmo.com",this.authKey="",this.authToken="",this._slotContents=[],this._activeIndex=this.slotIndex??0,this._linkedDatasetsIds=[]}static get styles(){return[v.unsafeCSS(j)]}get _currentSlotContent(){return this._slotContents[this.slotIndex??this._activeIndex]??{}}get _currentLabel(){return M.localize(this._currentSlotContent.label,this.contentLanguage)??"Untitled"}connectedCallback(){const t={};this.apiUrl&&(t.apiUrl=this.apiUrl),this.authKey&&this.authToken&&(t.authKey=this.authKey,t.authToken=this.authToken),x.dataBroker.configure(t),super.connectedCallback(),this._attachDragHandle()}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDrag&&(this._cleanupDrag(),this._cleanupDrag=void 0)}_attachDragHandle(){if(this._cleanupDrag||this.variant!=="draggable"||this.noDrag)return;const t=this.renderRoot.querySelector(".drag-handle");if(!t)return;const l=this.dragBoundary?document.querySelector(this.dragBoundary):document.documentElement;this._cleanupDrag=N({element:this,handle:t,boundary:l})}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:[...this._slotContents],linkedDatasetsIds:[...this._linkedDatasetsIds]}}))}_sendCloseEvent(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,cancelable:!0}))}isArrayColumnType(t){return new Set(["array[numeric]","array[spatial]","array[datetime]","array[hierarchy]"]).has(t)}async willUpdate(){var l,e,r,a,i,p;const t=this.slotContents??((l=this._store)==null?void 0:l.slotContents.get())??[];if(t!==this._slotContents){this._slotContents=structuredClone(t);const{set:u,column:_}=this._currentSlotContent;if(u&&Y(u)&&u!==this._lastFetchedDatasetId){if(this._lastFetchedDatasetId=u,await x.dataBroker.fetchDatasetsRecursive([u]),!this.isConnected)return;this._linkedDatasetsIds=x.dataBroker.getLinkedDatasetsIds(u)}const z=x.dataBroker.getAvailableDatasets();this.measureColumns=z.map(c=>{var h;return{datasetId:c.id,datasetName:c.name,columns:(h=c.columns)==null?void 0:h.filter(b=>b.type==="numeric"&&b.id!==_)}}),((e=this._store)==null?void 0:e.activeIndex.get())!==this._activeIndex&&((r=this._store)==null||r.updateActive(this._activeIndex)),this.slotName==="measure"&&((a=this._store)==null||a.setPeriodOverPeriodCondition(this.itemType,this._currentSlotContent),this._currentSlotContent.subtype==="duration"&&this.isArrayColumnType(this._currentSlotContent.type)?this._periodOverPeriodUiType=null:(this._periodOverPeriodUiType=(i=this._store)==null?void 0:i.periodOverPeriodUiType.get(),(p=this._store)==null||p.linkedDataset.set(z.filter(h=>h.id===u))))}}updated(){var t;this.displaySettingsElement&&(this.displaySettingsElement.periodOverPeriodUiType=this._periodOverPeriodUiType,this.displaySettingsElement.measureColumns=this.measureColumns,this.displaySettingsElement.showRemoveButton=this.variant==="popup"&&(typeof this.slotIndex=="number"||((t=this._slotContents)==null?void 0:t.length)===1))}_handleSlotListChange(t){var p,u;this._slotContents=structuredClone(t.detail.slotContents);const l=t.detail.activeIndex;l!==this._activeIndex&&(this._activeIndex=l,(p=this._store)==null||p.updateActive(l));const e=this._slotContents[this._activeIndex],r=(e==null?void 0:e.column)??(e==null?void 0:e.columnId),a=(e==null?void 0:e.set)??(e==null?void 0:e.datasetId),i=e==null?void 0:e.formula;(r||i)&&a&&(this.dispatchEvent(new CustomEvent("slot-menu-active",{bubbles:!0,composed:!0,detail:{securableId:a}})),setTimeout(()=>{this.dispatchEvent(new CustomEvent("slot-menu-highlight",{bubbles:!0,composed:!0,detail:{columnId:r,securableId:a,level:(e==null?void 0:e.level)??0,formulaId:i}}))})),this._slotContents.length<=1&&this.requestUpdate(),(u=this._store)==null||u.setContents(this._slotContents,this.slotName),this._sendChangeEvent()}_handleSlotContentChange(t){var l;this._slotContents[this.slotIndex??this._activeIndex]=structuredClone(t.detail.slotContent),this.slotMenuListElement&&(this.slotMenuListElement.slotContents=this._slotContents),(l=this._store)==null||l.updateContent(t.detail.slotContent,this.slotIndex??this._activeIndex),this._sendChangeEvent()}removeSlotContent(t){var l;this._slotContents=this._slotContents.filter((e,r)=>r!==t),(l=this._store)==null||l.setContents(this._slotContents,this.slotName),this._slotContents.length===0&&this.dispatchEvent(new CustomEvent("slot-menu-inactive",{bubbles:!0,composed:!0})),this._sendChangeEvent(),this._sendCloseEvent(),this.requestUpdate()}close(){this._sendCloseEvent()}_removeActiveSlotContent(){this.removeSlotContent(this.slotIndex??this._activeIndex)}render(){var l,e,r;const t=`${this.slotType}-${((l=this._currentSlotContent)==null?void 0:l.type)??""}`;return v.html`<div class="slot-menu-top-menu">
-        ${this.variant==="draggable"?v.html`<div class="drag-handle">${w.luzmoIcon(w.luzmoArrows)}</div>`:""}
-        ${this._slotContents&&this._slotContents.length===1&&this.variant!=="popup"?v.html` <div class="slot-content-action">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/divider");const p=require("lit"),O=require("../index-BUal0r_D.cjs"),U=require("@lit-labs/signals"),P=require("@lit/context"),h=require("@luzmo/icons"),v=require("../index-D1Y5TRsH.cjs"),M=require("../localize-C4zNlrwK.cjs"),n=require("lit/decorators.js"),A=require("lit/directives/guard.js"),R=require("../focusable-QLh-LlNt.cjs"),T=require("../sized-mixin-DcvJLFeo.cjs");require("../slot-menu-list/index.cjs");const X=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000|ffffffff-ffff-ffff-ffff-ffffffffffff)$/i;function Y(u){return typeof u=="string"&&X.test(u)}function N({element:u,handle:t,boundary:s=document.documentElement,onDragStart:i,onDragEnd:a}){if(!u||!t)throw new Error("makeDraggable: element and handle are required");const l=u.ownerDocument??document;let r=-1,S=0,E=0,z=0,b=0,k=0,I=0,y=0,f=0;const C=d=>{if(d.pointerId!==r)return;const c=d.clientX-S,g=d.clientY-E,m=(s??document.documentElement).getBoundingClientRect();let _=z+c,x=b+g;_=Math.min(Math.max(_,m.left),m.right-k),x=Math.min(Math.max(x,m.top),m.bottom-I);const $=_-z,L=x-b,B=y+$,q=f+L;u.style.transform=`translate3d(${B}px, ${q}px, 0)`},w=d=>{d.pointerId===r&&(l.removeEventListener("pointermove",C),l.removeEventListener("pointerup",w),r=-1,a?.())},D=d=>{if(d.button!==0)return;r=d.pointerId;const c=u.getBoundingClientRect();z=c.left,b=c.top,k=c.width,I=c.height,S=d.clientX,E=d.clientY;try{const g=l.defaultView?.getComputedStyle(u);if(g){const m=new DOMMatrixReadOnly(g.transform);y=m.m41,f=m.m42}}catch{y=0,f=0}t.setPointerCapture(r),l.addEventListener("pointermove",C),l.addEventListener("pointerup",w),i?.()};return t.addEventListener("pointerdown",D),()=>{t.removeEventListener("pointerdown",D),l.removeEventListener("pointermove",C),l.removeEventListener("pointerup",w)}}const j=":host{font-family:var(--luzmo-slot-menu-font-family, var(--luzmo-font-family));font-size:var(--luzmo-slot-menu-font-size, var(--slot-menu-font-size));color:var(--luzmo-slot-menu-font-color, var(--luzmo-font-color));display:block;width:fit-content}luzmo-slot-menu-list{min-width:var(--luzmo-slot-menu-list-min-width, var(--slot-menu-list-min-width));max-width:var(--luzmo-slot-menu-list-max-width, var(--slot-menu-list-max-width));background-color:var(--luzmo-slot-menu-list-background-color, var(--slot-menu-list-background-color));border-bottom-left-radius:var(--luzmo-slot-menu-list-border-radius, var(--slot-menu-list-border-radius))}.slot-contents-container{position:relative;border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));background:var(--luzmo-slot-menu-background-color, var(--luzmo-background-color));box-shadow:var(--luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal)) var(--luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical)) var(--luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur)) var(--luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color));border-top-left-radius:0}.slot-contents-container .inner-container{display:flex}.slot-contents-container .inner-container luzmo-display-settings{min-width:var(--luzmo-slot-menu-display-settings-min-width, var(--slot-menu-display-settings-min-width));padding:var(--luzmo-slot-menu-display-settings-vertical-padding, var(--slot-menu-display-settings-vertical-padding)) var(--luzmo-slot-menu-display-settings-horizontal-padding, var(--slot-menu-display-settings-horizontal-padding))}:host([variant=popup]) .slot-contents-container{overflow:hidden;border-top-left-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));--slot-menu-popup-filter: drop-shadow( var( --luzmo-slot-menu-popup-shadow-horizontal, var(--slot-menu-popup-shadow-horizontal) ) var( --luzmo-slot-menu-popup-shadow-vertical, var(--slot-menu-popup-shadow-vertical) ) var( --luzmo-slot-menu-popup-shadow-blur, var(--slot-menu-popup-shadow-blur) ) var( --luzmo-slot-menu-popup-shadow-color, var(--slot-menu-popup-shadow-color) ) );filter:var(--luzmo-slot-menu-popup-filter, var(--slot-menu-popup-filter))}.slot-menu-top-menu{display:flex;align-items:center;border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden;width:fit-content}.drag-handle{background-color:var(--luzmo-slot-menu-drag-handle-background-color, var(--luzmo-background-color-highlight));cursor:move;width:fit-content;border:var(--luzmo-slot-menu-drag-handle-border-width, var(--slot-menu-drag-handle-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-drag-handle-size, var(--slot-menu-drag-handle-size));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.drag-handle:hover{background-color:var(--luzmo-slot-menu-drag-handle-background-color-hover, var(--luzmo-background-color-highlight-hover))}.slot-content-action{display:flex;flex:0 1 auto;max-width:var(--luzmo-slot-menu-top-menu-label-max-width, var(--slot-menu-top-menu-label-max-width));gap:var(--luzmo-slot-menu-label-to-icon-gap, var(--slot-menu-label-to-icon-gap));background-color:var(--luzmo-slot-menu-content-label-background-color, var(--luzmo-primary));color:var(--luzmo-slot-menu-content-label-color, var(--luzmo-primary-inverse-color));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-content-label-border-color, var(--luzmo-primary));padding:var(--luzmo-slot-menu-drag-handle-vertical-padding, var(--slot-menu-drag-handle-vertical-padding)) var(--luzmo-slot-menu-drag-handle-horizontal-padding, var(--slot-menu-drag-handle-horizontal-padding))}.slot-content-action:hover{background-color:var(--luzmo-slot-menu-content-label-background-color-hover, var(--luzmo-primary-hover))}.slot-content-action:focus{background-color:var(--luzmo-slot-menu-content-label-background-color-focus, var(--luzmo-primary-focus))}.slot-content-action .slot-content-label{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-content-action .slot-content-remove{flex:0 0 auto;cursor:pointer}.close{position:absolute;right:var(--luzmo-slot-menu-close-icon-right, var(--slot-menu-close-icon-right));cursor:pointer;top:calc(-2 * var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)));background-color:var(--luzmo-slot-menu-close-button-background-color, var(--luzmo-background-color-highlight));font-size:var(--luzmo-slot-menu-close-button-size, var(--slot-menu-close-button-size));border:var(--luzmo-slot-menu-border-width, var(--luzmo-border-width)) solid var(--luzmo-slot-menu-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-slot-menu-border-radius, var(--luzmo-border-radius));border-top-left-radius:0;border-top-right-radius:0;padding:var(--luzmo-slot-menu-close-button-vertical-padding, var(--slot-menu-close-button-vertical-padding)) var(--luzmo-slot-menu-close-button-horizontal-padding, var(--slot-menu-close-button-horizontal-padding))}.close:hover{background-color:var(--luzmo-slot-menu-close-button-background-color-hover, var(--luzmo-background-color-highlight-hover))}: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-display-settings-horizontal-padding: var(--luzmo-spacing-5);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-4);--slot-menu-top-menu-label-max-width: 12rem;--slot-menu-list-min-width: 8rem;--slot-menu-list-max-width: 12rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-3);--slot-menu-drag-handle-size: var(--luzmo-font-size);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-border-width: var(--luzmo-border-width) --slot-menu-close-button-size: var(--luzmo-font-size-s);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-popup-shadow-horizontal: 0;--slot-menu-popup-shadow-vertical: 1px;--slot-menu-popup-shadow-blur: 4px;--slot-menu-popup-shadow-color: var(--luzmo-border-color);--slot-menu-popup-box-shadow: var(--slot-menu-popup-shadow-horizontal) var(--slot-menu-popup-shadow-vertical) var(--slot-menu-popup-shadow-blur) var(--slot-menu-popup-shadow-color);--slot-menu-close-icon-right: 1rem;--slot-menu-list-border-radius: var(--luzmo-border-radius)}: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-display-settings-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-3);--slot-menu-top-menu-label-max-width: 10rem;--slot-menu-list-min-width: 6rem;--slot-menu-list-max-width: 10rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-2);--slot-menu-drag-handle-size: var(--luzmo-font-size-s);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-2);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size-xs);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-2);--slot-menu-close-button-horizontal-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) )}: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-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 14rem;--slot-menu-list-min-width: 9rem;--slot-menu-list-max-width: 14rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-4);--slot-menu-drag-handle-size: var(--luzmo-font-size-l);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-3);--slot-menu-close-button-size: var(--luzmo-font-size);--slot-menu-close-button-vertical-padding: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}: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-display-settings-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--slot-menu-display-settings-vertical-padding: var(--luzmo-spacing-5);--slot-menu-top-menu-label-max-width: 16rem;--slot-menu-list-min-width: 10rem;--slot-menu-list-max-width: 16rem;--slot-menu-label-to-icon-gap: var(--luzmo-spacing-5);--slot-menu-drag-handle-size: var(--luzmo-font-size-xl);--slot-menu-drag-handle-vertical-padding: var(--luzmo-spacing-3);--slot-menu-drag-handle-horizontal-padding: var(--luzmo-spacing-4);--slot-menu-close-button-size: var(--luzmo-font-size-l);--slot-menu-close-button-vertical-padding: var(--luzmo-spacing-3);--slot-menu-close-button-horizontal-padding: var(--luzmo-spacing-3)}";var K=Object.defineProperty,o=(u,t,s,i)=>{for(var a=void 0,l=u.length-1,r;l>=0;l--)(r=u[l])&&(a=r(t,s,a)||a);return a&&K(t,s,a),a};class e extends U.SignalWatcher(T.SizedMixin(R.LuzmoElement,{validSizes:Object.values(T.ElementSizes)})){constructor(){super(...arguments),this.language="en",this.contentLanguage="en",this.slotType="numeric",this.variant="draggable",this._periodOverPeriodUiType=null,this.measureColumns=[],this.apiUrl="https://api.luzmo.com",this.authKey="",this.authToken="",this._slotContents=[],this._activeIndex=this.slotIndex??0,this._linkedDatasetsIds=[]}static get styles(){return[p.unsafeCSS(j)]}get _currentSlotContent(){return this._slotContents[this.slotIndex??this._activeIndex]??{}}get _currentLabel(){return M.localize(this._currentSlotContent.label,this.contentLanguage)??"Untitled"}connectedCallback(){const t={};this.apiUrl&&(t.apiUrl=this.apiUrl),this.authKey&&this.authToken&&(t.authKey=this.authKey,t.authToken=this.authToken),v.dataBroker.configure(t),super.connectedCallback(),this._attachDragHandle()}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDrag&&(this._cleanupDrag(),this._cleanupDrag=void 0)}_attachDragHandle(){if(this._cleanupDrag||this.variant!=="draggable"||this.noDrag)return;const t=this.renderRoot.querySelector(".drag-handle");if(!t)return;const s=this.dragBoundary?document.querySelector(this.dragBoundary):document.documentElement;this._cleanupDrag=N({element:this,handle:t,boundary:s})}_sendChangeEvent(){this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:[...this._slotContents],linkedDatasetsIds:[...this._linkedDatasetsIds]}}))}_sendCloseEvent(){this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,cancelable:!0}))}isArrayColumnType(t){return new Set(["array[numeric]","array[spatial]","array[datetime]","array[hierarchy]"]).has(t)}async willUpdate(){const t=this.slotContents??this._store?.slotContents.get()??[];if(t!==this._slotContents){this._slotContents=structuredClone(t);const{set:s,column:i}=this._currentSlotContent;if(s&&Y(s)&&s!==this._lastFetchedDatasetId){if(this._lastFetchedDatasetId=s,await v.dataBroker.fetchDatasetsRecursive([s]),!this.isConnected)return;this._linkedDatasetsIds=v.dataBroker.getLinkedDatasetsIds(s)}const a=v.dataBroker.getAvailableDatasets();this.measureColumns=a.map(l=>({datasetId:l.id,datasetName:l.name,columns:l.columns?.filter(r=>r.type==="numeric"&&r.id!==i)})),this._store?.activeIndex.get()!==this._activeIndex&&this._store?.updateActive(this._activeIndex),this.slotName==="measure"&&(this._store?.setPeriodOverPeriodCondition(this.itemType,this._currentSlotContent),this._currentSlotContent.subtype==="duration"&&this.isArrayColumnType(this._currentSlotContent.type)?this._periodOverPeriodUiType=null:(this._periodOverPeriodUiType=this._store?.periodOverPeriodUiType.get(),this._store?.linkedDataset.set(a.filter(r=>r.id===s))))}}updated(){this.displaySettingsElement&&(this.displaySettingsElement.periodOverPeriodUiType=this._periodOverPeriodUiType,this.displaySettingsElement.measureColumns=this.measureColumns,this.displaySettingsElement.showRemoveButton=this.variant==="popup"&&(typeof this.slotIndex=="number"||this._slotContents?.length===1))}_handleSlotListChange(t){this._slotContents=structuredClone(t.detail.slotContents);const s=t.detail.activeIndex;s!==this._activeIndex&&(this._activeIndex=s,this._store?.updateActive(s));const i=this._slotContents[this._activeIndex],a=i?.column??i?.columnId,l=i?.set??i?.datasetId,r=i?.formula;(a||r)&&l&&(this.dispatchEvent(new CustomEvent("slot-menu-active",{bubbles:!0,composed:!0,detail:{securableId:l}})),setTimeout(()=>{this.dispatchEvent(new CustomEvent("slot-menu-highlight",{bubbles:!0,composed:!0,detail:{columnId:a,securableId:l,level:i?.level??0,formulaId:r}}))})),this._slotContents.length<=1&&this.requestUpdate(),this._store?.setContents(this._slotContents,this.slotName),this._sendChangeEvent()}_handleSlotContentChange(t){this._slotContents[this.slotIndex??this._activeIndex]=structuredClone(t.detail.slotContent),this.slotMenuListElement&&(this.slotMenuListElement.slotContents=this._slotContents),this._store?.updateContent(t.detail.slotContent,this.slotIndex??this._activeIndex),this._sendChangeEvent()}removeSlotContent(t){this._slotContents=this._slotContents.filter((s,i)=>i!==t),this._store?.setContents(this._slotContents,this.slotName),this._slotContents.length===0&&this.dispatchEvent(new CustomEvent("slot-menu-inactive",{bubbles:!0,composed:!0})),this._sendChangeEvent(),this._sendCloseEvent(),this.requestUpdate()}close(){this._sendCloseEvent()}_removeActiveSlotContent(){this.removeSlotContent(this.slotIndex??this._activeIndex)}render(){const t=`${this.slotType}-${this._currentSlotContent?.type??""}`;return p.html`<div class="slot-menu-top-menu">
+        ${this.variant==="draggable"?p.html`<div class="drag-handle">${h.luzmoIcon(h.luzmoArrows)}</div>`:""}
+        ${this._slotContents&&this._slotContents.length===1&&this.variant!=="popup"?p.html` <div class="slot-content-action">
               <div class="slot-content-label">${this._currentLabel}</div>
               <div
                 class="slot-content-remove"
                 @click=${this.removeSlotContent.bind(this,0)}
               >
-                ${w.luzmoIcon(w.luzmoTrashOutline)}
+                ${h.luzmoIcon(h.luzmoTrashOutline)}
               </div>
             </div>`:""}
       </div>
       <div
-        class="slot-contents-container ${((e=this._slotContents)==null?void 0:e.length)>1?"multiple":""}"
+        class="slot-contents-container ${this._slotContents?.length>1?"multiple":""}"
       >
-        ${this.variant==="popup"?"":v.html`<div class="close" @click=${this.close}>
-              ${w.luzmoIcon(w.luzmoClose16)}
+        ${this.variant==="popup"?"":p.html`<div class="close" @click=${this.close}>
+              ${h.luzmoIcon(h.luzmoClose)}
             </div>`}
         <div class="inner-container">
-          ${((r=this._slotContents)==null?void 0:r.length)>1&&typeof this.slotIndex!="number"?v.html`<luzmo-slot-menu-list
+          ${this._slotContents?.length>1&&typeof this.slotIndex!="number"?p.html`<luzmo-slot-menu-list
                 .slotContents=${this._slotContents}
                 .contentLanguage=${this.contentLanguage}
                 .activeIndex=${this.slotIndex??this._activeIndex}
                 @slot-list-changed=${this._handleSlotListChange}
               ></luzmo-slot-menu-list>`:""}
-          ${A.guard([this.variant,this.language,this.contentLanguage,this._periodOverPeriodUiType,t],()=>{var a;return v.html`<luzmo-display-settings
+          ${A.guard([this.variant,this.language,this.contentLanguage,this._periodOverPeriodUiType,t],()=>p.html`<luzmo-display-settings
                 .size=${this.size}
                 .language=${this.language}
                 .contentLanguage=${this.contentLanguage}
                 .slotType=${this.slotType}
                 .measureColumns=${this.measureColumns}
-                .showRemoveButton=${this.variant==="popup"&&(typeof this.slotIndex=="number"||((a=this._slotContents)==null?void 0:a.length)===1)}
+                .showRemoveButton=${this.variant==="popup"&&(typeof this.slotIndex=="number"||this._slotContents?.length===1)}
                 .slotContent=${this._currentSlotContent}
                 .areGrandTotalsEnabled=${this.areGrandTotalsEnabled}
                 .areDatetimeOptionsEnabled=${this.areDatetimeOptionsEnabled}
@@ -57,6 +57,6 @@
                 .isCumulativeSumEnabled=${this.isCumulativeSumEnabled}
                 @slot-content-changed=${this._handleSlotContentChange}
                 @remove-slot-content=${this._removeActiveSlotContent}
-              ></luzmo-display-settings>`})}
+              ></luzmo-display-settings>`)}
         </div>
-      </div>`}firstUpdated(){this._attachDragHandle()}resetPosition(){this.style.transform=""}}n([s.property({type:String,reflect:!0})],o.prototype,"language");n([s.property({type:String,attribute:"content-language",reflect:!0})],o.prototype,"contentLanguage");n([s.property({type:String,attribute:"slot-type",reflect:!0})],o.prototype,"slotType");n([s.property({type:String,attribute:"slot-name",reflect:!0})],o.prototype,"slotName");n([s.property({type:String,attribute:"item-type",reflect:!0})],o.prototype,"itemType");n([s.property({type:Boolean,attribute:"no-drag",reflect:!0})],o.prototype,"noDrag");n([s.property({type:Boolean,attribute:"no-close",reflect:!0})],o.prototype,"noClose");n([s.property({type:String,reflect:!0})],o.prototype,"variant");n([s.property({type:Boolean,attribute:"no-top-menu-label",reflect:!0})],o.prototype,"noTopMenuLabel");n([P.consume({context:O.slotContext,subscribe:!0})],o.prototype,"_store");n([s.property({type:String,attribute:"drag-boundary",reflect:!1})],o.prototype,"dragBoundary");n([s.property({type:Boolean})],o.prototype,"areGrandTotalsEnabled");n([s.property({type:Boolean})],o.prototype,"areDatetimeOptionsEnabled");n([s.property({type:Boolean})],o.prototype,"isBinningDisabled");n([s.property({type:Boolean})],o.prototype,"isAggregationDisabled");n([s.property({type:Boolean})],o.prototype,"isCumulativeSumEnabled");n([s.property({type:Array,reflect:!1,attribute:"slot-contents"})],o.prototype,"slotContents");n([s.state()],o.prototype,"_periodOverPeriodUiType");n([s.state()],o.prototype,"measureColumns");n([s.property({type:Number,reflect:!1,attribute:"slot-index"})],o.prototype,"slotIndex");n([s.query("luzmo-display-settings")],o.prototype,"displaySettingsElement");n([s.query("luzmo-slot-menu-list")],o.prototype,"slotMenuListElement");n([s.property({type:String,attribute:"api-url",reflect:!0})],o.prototype,"apiUrl");n([s.property({type:String,attribute:"auth-key",reflect:!0})],o.prototype,"authKey");n([s.property({type:String,attribute:"auth-token",reflect:!0})],o.prototype,"authToken");n([s.state()],o.prototype,"_slotContents");customElements.get("luzmo-slot-menu")||customElements.define("luzmo-slot-menu",o);exports.LuzmoSlotMenu=o;
+      </div>`}firstUpdated(){this._attachDragHandle()}resetPosition(){this.style.transform=""}}o([n.property({type:String,reflect:!0})],e.prototype,"language");o([n.property({type:String,attribute:"content-language",reflect:!0})],e.prototype,"contentLanguage");o([n.property({type:String,attribute:"slot-type",reflect:!0})],e.prototype,"slotType");o([n.property({type:String,attribute:"slot-name",reflect:!0})],e.prototype,"slotName");o([n.property({type:String,attribute:"item-type",reflect:!0})],e.prototype,"itemType");o([n.property({type:Boolean,attribute:"no-drag",reflect:!0})],e.prototype,"noDrag");o([n.property({type:Boolean,attribute:"no-close",reflect:!0})],e.prototype,"noClose");o([n.property({type:String,reflect:!0})],e.prototype,"variant");o([n.property({type:Boolean,attribute:"no-top-menu-label",reflect:!0})],e.prototype,"noTopMenuLabel");o([P.consume({context:O.slotContext,subscribe:!0})],e.prototype,"_store");o([n.property({type:String,attribute:"drag-boundary",reflect:!1})],e.prototype,"dragBoundary");o([n.property({type:Boolean})],e.prototype,"areGrandTotalsEnabled");o([n.property({type:Boolean})],e.prototype,"areDatetimeOptionsEnabled");o([n.property({type:Boolean})],e.prototype,"isBinningDisabled");o([n.property({type:Boolean})],e.prototype,"isAggregationDisabled");o([n.property({type:Boolean})],e.prototype,"isCumulativeSumEnabled");o([n.property({type:Array,reflect:!1,attribute:"slot-contents"})],e.prototype,"slotContents");o([n.state()],e.prototype,"_periodOverPeriodUiType");o([n.state()],e.prototype,"measureColumns");o([n.property({type:Number,reflect:!1,attribute:"slot-index"})],e.prototype,"slotIndex");o([n.query("luzmo-display-settings")],e.prototype,"displaySettingsElement");o([n.query("luzmo-slot-menu-list")],e.prototype,"slotMenuListElement");o([n.property({type:String,attribute:"api-url",reflect:!0})],e.prototype,"apiUrl");o([n.property({type:String,attribute:"auth-key",reflect:!0})],e.prototype,"authKey");o([n.property({type:String,attribute:"auth-token",reflect:!0})],e.prototype,"authToken");o([n.state()],e.prototype,"_slotContents");customElements.get("luzmo-slot-menu")||customElements.define("luzmo-slot-menu",e);exports.LuzmoSlotMenu=e;