@luzmo/analytics-components-kit 1.0.1-alpha.5 → 1.0.1-alpha.51

package/components/droppable-slot/droppable-slot.d.ts

@@ -1,11 +1,12 @@
-import { Placement } from '@floating-ui/dom';
+import { ItemType, SlotName, VizItemSlots } from '@luzmo/dashboard-contents-types';
+import { Placement } from '@luzmo/lucero';
 import '@luzmo/lucero/tooltip';
-import { LuzmoElement } from '@luzmo/lucero/utils';
 import { PropertyValues } from 'lit';
+import { LuzmoElement } from '../../utils/base';
 import './../slot-menu';
 declare const LuzmoDroppableSlot_base: typeof LuzmoElement & {
-    new (...args: any[]): import("@luzmo/lucero").SizedElementInterface;
-    prototype: import("@luzmo/lucero").SizedElementInterface;
+    new (...args: any[]): import("../../utils/base/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/base/sized-mixin").SizedElementInterface;
 };
 /**
  * @element luzmo-droppable-slot
@@ -16,33 +17,59 @@ export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
     private _loadSlotsConfig;
     private _itemTypeLoaded?;
     private _slotsConfig?;
-    itemType?: string;
-    slotName?: string;
+    itemType?: ItemType;
+    slotName?: SlotName;
     slotConfiguration: any;
-    slotContents: any;
+    slotsContents: VizItemSlots;
     label?: string;
     language: string;
+    dragBoundary?: string;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
     /**
      * The type of config interaction
      */
-    menu: 'default' | 'popup' | 'draggable' | 'event-only';
+    menu: 'default' | 'draggable' | 'event-only';
     /**
      * Placement of the slot menu. Only relevant for 'popup' and 'draggable' menu type
      */
     placement: Placement;
-    hideDelete?: string;
-    hideConfiguration?: string;
-    private _droppableSlotLabelElement;
+    hideDelete?: boolean;
+    hideConfiguration?: boolean;
+    private _slotMenuElement;
+    private _overlayElement;
+    private _slotContents;
+    private readonly _store;
+    private _currentSlotContents;
+    private _lastFetchedDatasetId;
+    private _linkedDatasetsIds;
+    constructor();
     private changedSlotContents;
     private _cleanupDroppable;
-    private _currentSlotContents;
     disconnectedCallback(): void;
     private emptySlotContents;
-    protected willUpdate(_changedProperties: PropertyValues): void;
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    protected updated(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private _processSlotsContents;
+    protected firstUpdated(): void;
+    /**
+     * Handle overlay open event - reset slot menu position
+     */
+    private _onOverlayClosed;
+    private _onOverlayOpened;
     private _onSlotMenuChanges;
-    private createFullLabel;
+    private get _fullLabel();
     droppableSlotMarkup(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1> | undefined;
 }

package/components/droppable-slot/index.cjs

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,53 +17,70 @@
  * 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 f=require("../get-css-variable-DLiZYZEi.cjs"),y=require("../task-HFsHfTra.cjs"),m=require("../luzmo-icons-BrtBl3E5.cjs");require("../index-CayjvyyX.cjs");const r=require("../property-Su1Q6aME.cjs"),C=require("../sized-mixin-PyCYpyQq-sKzDjc75.cjs"),S=require("../localize-DbobqcKs.cjs"),k=require("../query-D5qWDopr.cjs");require("../slot-menu/index.cjs");const _=":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family))}.droppable-slot[filled]{cursor:pointer;border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color))}.droppable-slot{color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));gap:var(--luzmo-spacing-5);border-radius:var(--luzmo-border-radius);height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height));cursor:move}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));flex-grow:1;margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled )}:host([accept-drag]){--droppable-slot-filled-background-color: var(--luzmo-color-positive);--droppable-slot-filled-color: white;--droppable-slot-filled-border-color: var(--luzmo-color-positive-down);--droppable-slot-controls-background-color: var(--luzmo-color-positive-down);--droppable-slot-controls-color: white;--droppable-slot-background-color: var(--luzmo-color-positive);--droppable-slot-font-color: white}:host{--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var(--luzmo-component-height-s);--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var(--luzmo-component-height-l);--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var(--luzmo-component-height-xl);--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}";var w=Object.defineProperty,i=(v,t,o,l)=>{for(var e=void 0,s=v.length-1,n;s>=0;s--)(n=v[s])&&(e=n(t,o,e)||e);return e&&w(t,o,e),e};const h=class h extends C.m(r.I,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this._loadSlotsConfig=new y.h(this,{task:async([t])=>{if(t&&t!==this._itemTypeLoaded){const o=Object.assign({"./item-slots-configs/area-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../area-chart-slots.config-BLxiYX05.cjs")),"./item-slots-configs/bar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bar-chart-slots.config-Jx1PveTM.cjs")),"./item-slots-configs/donut-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../donut-chart-slots.config-DIp-24lO.cjs"))});if(o[`./item-slots-configs/${t}-slots.config.ts`]){const l=await o[`./item-slots-configs/${t}-slots.config.ts`]();this._slotsConfig=(l==null?void 0:l.default)??{}}return this._slotsConfig}},args:()=>[this.itemType,this.language]}),this.slotConfiguration={},this.slotContents=[],this.language="en",this.menu="default",this.placement="bottom-end",this.changedSlotContents=t=>{this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:t}}))},this._currentSlotContents=[]}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDroppable()}emptySlotContents(t){t.preventDefault(),t.stopPropagation(),this.slotContents=[],this.changedSlotContents([])}willUpdate(t){t.has("slotContents")&&(this._currentSlotContents=structuredClone(this.slotContents))}firstUpdated(t){this._cleanupDroppable||(this._cleanupDroppable=f.dropTargetForElements({element:this,onDrop:o=>{var n,p,d,c;const l={...(n=o.source)==null?void 0:n.data},e={...(l==null?void 0:l.label)??{en:"Untitled"}},s=l==null?void 0:l.type;if(s==="datetime"&&!l.level&&(l.level=l.lowestLevel??(l.subtype==="date"?5:9)),s==="datetime"&&((d=(p=o==null?void 0:o.source)==null?void 0:p.element)!=null&&d.hasAttribute("sublevel"))){const u=["(Yr)","(Qtr)","(Mth)","(Wk)","(Date)","(Hr)","(Min)","(Sec)","(Msec)"],b=(l==null?void 0:l.level)??1,g=Object.keys(e);for(const z of g)e[z]=`${e[z]} ${u[b-1]}`;l.label=e}this.slotContents=(c=this.slotConfiguration)!=null&&c.canAcceptMultipleColumns?[...this.slotContents??[],l]:[l],this.removeAttribute("accept-drag"),this.changedSlotContents(this.slotContents)},canDrop:({source:o})=>{var e,s,n,p,d,c,u,b,g;if(!["LUZMO-DRAGGABLE-DATA-ITEM-LEVEL","LUZMO-DRAGGABLE-DATA-ITEM"].includes((e=o.element)==null?void 0:e.tagName))return!1;const l=((n=(s=this.slotConfiguration)==null?void 0:s.acceptableColumnTypes)==null?void 0:n.length)>0?this.slotConfiguration.acceptableColumnTypes:["numeric","hierarchy","datetime"];return(p=o==null?void 0:o.data)!=null&&p.type&&!l.includes((d=o==null?void 0:o.data)==null?void 0:d.type)?!1:!((c=o==null?void 0:o.data)!=null&&c.subtype&&((b=(u=this.slotConfiguration)==null?void 0:u.acceptableColumnSubtypes)==null?void 0:b.length)>0&&!this.slotConfiguration.acceptableColumnSubtypes.includes((g=o==null?void 0:o.data)==null?void 0:g.subtype))},getDropEffect:()=>"link",onDragEnter:()=>{this.setAttribute("accept-drag","")},onDragLeave:()=>{this.removeAttribute("accept-drag")}}))}updated(){this.createFullLabel()}_onSlotMenuChanges(t){var o;t.preventDefault(),t.stopPropagation(),this.slotContents.length===((o=t.detail.slotContents)==null?void 0:o.length)?(this._currentSlotContents=t.detail.slotContents,this.createFullLabel(),this.changedSlotContents(this._currentSlotContents)):(this.slotContents=t.detail.slotContents,this.changedSlotContents(this.slotContents))}createFullLabel(){var l,e,s,n,p,d,c;let t="";((l=this._currentSlotContents)==null?void 0:l.length)===1?t=S.localize((s=(e=this._currentSlotContents)==null?void 0:e[0])==null?void 0:s.label,this.language)??"Untitled":((n=this._currentSlotContents)==null?void 0:n.length)>1&&(t=`${this._currentSlotContents.length} items`);let o="";this.label?o=this.label:(p=this.slotConfiguration)!=null&&p.label&&(o=this.slotConfiguration.label),o=o||"Untitled",((d=this._currentSlotContents)==null?void 0:d.length)>0&&(o+=((c=this._currentSlotContents)==null?void 0:c.length)>1?`: ${this._currentSlotContents.length} items`:`: ${t}`),this._droppableSlotLabelElement&&(this._droppableSlotLabelElement.textContent=o)}droppableSlotMarkup(){var t,o,l,e;return r.x`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../get-css-variable-DLiZYZEi.cjs"),g=require("../index-DAoFunRy.cjs"),x=require("../localized-decorator-DIXYZ3RL.cjs"),u=require("../set-locale-DCPlazsZ.cjs"),S=require("../task-CwmAXlv0.cjs"),f=require("../luzmo-icons-DonyjSXg.cjs");require("../index-CYeQkVeJ.cjs");const z=require("../index-DpHum3lw.cjs"),q=require("../localize-r7ALOUy_.cjs"),a=require("../property-Cu4Q1hS4.cjs"),P=require("../state-fyl3IYMu.cjs"),C=require("../query-D5qWDopr.cjs"),D=require("../focusable-DAGGGYyz.cjs"),k=require("../sized-mixin-j_7aJM4b.cjs");require("../slot-menu/index.cjs");/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class L{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,e=!1){const o=e||!Object.is(t,this.o);this.o=t,o&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[e,{disposer:o}]of this.subscriptions)e(this.o,o)},t!==void 0&&(this.value=t)}addCallback(t,e,o){if(!o)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:e});const{disposer:l}=this.subscriptions.get(t);t(this.value,l)}clearCallbacks(){this.subscriptions.clear()}}/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */class w extends Event{constructor(t,e){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=e}}class $ extends L{constructor(t,e,o){var l,i;super(e.context!==void 0?e.initialValue:o),this.onContextRequest=r=>{if(r.context!==this.context)return;const n=r.contextTarget??r.composedPath()[0];n!==this.host&&(r.stopPropagation(),this.addCallback(r.callback,n,r.subscribe))},this.onProviderRequest=r=>{if(r.context!==this.context||(r.contextTarget??r.composedPath()[0])===this.host)return;const n=new Set;for(const[s,{consumerHost:p}]of this.subscriptions)n.has(s)||(n.add(s),p.dispatchEvent(new g.s(this.context,p,s,!0)));r.stopPropagation()},this.host=t,e.context!==void 0?this.context=e.context:this.context=e,this.attachListeners(),(i=(l=this.host).addController)==null||i.call(l,this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new w(this.context,this.host))}}class E{constructor(){this.slotContents=g.r([]),this.slotsContents=g.r([]),this.periodOverPeriodEnabled=g.r(!1),this._popEnabledChartTypes=["area-chart","bar-chart","combination-chart","column-chart","line-chart"],this.activeSlotContents=g.i(()=>this.slotContents.get()[this.activeIndex.get()]),this.activeIndex=g.r(0)}isArrayColumnType(t){return new Set(["array[numeric]","array[spatial]","array[datetime]","array[hierarchy]"]).has(t)}setPeriodOverPeriodEnabled(t){var n,s;const e=this.slotsContents.get()??[],o=((n=e.find(p=>["y-axis","x-axis"].includes(p.name)))==null?void 0:n.content)??[],l=(o==null?void 0:o[0])??null,i=((s=e.find(p=>p.name==="measure"))==null?void 0:s.content)??[],r=l&&this._popEnabledChartTypes.includes(t)&&l.type==="datetime"&&!this.isArrayColumnType(l.type)&&!l.datetimeDisplayMode&&l.level!==4&&i.length>0;return this.periodOverPeriodEnabled.set(r),r}setContents(t,e){if(this.slotContents.set(t),this.activeIndex.get()>=t.length&&this.activeIndex.set(t.length>0?t.length-1:0),e){const o=structuredClone(this.slotsContents.get())??[],l=o.find(i=>i.name===e);l&&(l.content=t),this.setFullContents(o)}}setFullContents(t){this.slotsContents.set(t)}updateActive(t){t>=0&&t<this.slotContents.get().length&&this.activeIndex.set(t)}updateContent(t,e=this.activeIndex.get()){if(e<0||e>=this.slotContents.get().length)return;const o=[...this.slotContents.get()];o[e]=structuredClone(t),this.slotContents.set(o)}removeContent(t){if(t<0||t>=this.slotContents.get().length)return;const e=this.slotContents.get().filter((o,l)=>l!==t);this.slotContents.set(e),this.activeIndex.get()>=e.length&&this.activeIndex.set(e.length>0?e.length-1:0)}}const T=":host{font-family:var(--luzmo-droppable-slot-font-family, var(--luzmo-font-family));--slot-height: var( --luzmo-droppable-slot-height, var(--droppable-slot-height) )}.droppable-slot-wrapper{position:relative;width:var(--slot-height);min-width:var(--slot-height);height:auto;overflow:visible}.droppable-slot[filled]{border:var(--luzmo-droppable-slot-filled-border-width, var(--droppable-slot-filled-border-width)) var(--luzmo-droppable-slot-filled-border-style, var(--droppable-slot-filled-border-style)) var(--luzmo-droppable-slot-filled-border-color, var(--droppable-slot-filled-border-color));background-color:var(--luzmo-droppable-slot-filled-background-color, var(--droppable-slot-filled-background-color));color:var(--luzmo-droppable-slot-filled-color, var(--droppable-slot-filled-color));padding-right:0;gap:var(--luzmo-spacing-5)}.droppable-slot[filled]>*:not(luzmo-overlay){cursor:pointer}.droppable-slot{background-color:var(--luzmo-droppable-slot-background-color, var(--droppable-slot-background-color));color:var(--luzmo-droppable-slot-font-color, var(--droppable-slot-font-color));border:var(--luzmo-droppable-slot-border-width, var(--droppable-slot-border-width)) var(--luzmo-droppable-slot-border-style, var(--droppable-slot-border-style)) var(--luzmo-droppable-slot-border-color, var(--droppable-slot-border-color));display:flex;justify-content:space-between;align-items:center;padding-left:var(--luzmo-droppable-slot-edge-to-label, var(--droppable-slot-edge-to-label));padding-right:var(--luzmo-droppable-slot-label-to-controls, var(--droppable-slot-label-to-controls));border-radius:var(--luzmo-droppable-slot-border-radius, var(--droppable-slot-border-radius));height:var(--luzmo-droppable-slot-height, var(--droppable-slot-height))}:host([accept-drag]) .droppable-slot{background-color:var(--luzmo-droppable-slot-accept-drag-background-color, var(--droppable-slot-accept-drag-background-color));color:var(--luzmo-droppable-slot-accept-drag-font-color, var(--droppable-slot-accept-drag-font-color));border-color:var(--luzmo-droppable-slot-accept-drag-border-color, var(--droppable-slot-accept-drag-border-color));animation:dropelementpulse 1s infinite ease-in-out}:host([accept-drag]) .controls{background-color:var(--luzmo-droppable-slot-accept-drag-controls-background-color, var(--droppable-slot-accept-drag-controls-background-color));color:var(--luzmo-droppable-slot-accept-drag-controls-color, var(--droppable-slot-accept-drag-controls-color))}@keyframes dropelementpulse{0%{box-shadow:0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color)),0 0 0 0 var(--luzmo-droppable-slot-pulse-color, var(--droppable-slot-pulse-color))}to{box-shadow:0 0 0 1rem transparent,0 0 0 1rem transparent}}:host([disabled]) .droppable-slot{background-color:var(--luzmo-droppable-slot-background-color-disabled, var(--droppable-slot-background-color-disabled));color:var(--luzmo-droppable-slot-color-disabled, var(--droppable-slot-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25;font-size:12px}.drag-handle-icon{opacity:.5;font-size:12px}.droppable-slot-label{font-size:var(--luzmo-droppable-slot-label-font-size, var(--droppable-slot-label-font-size));flex-grow:1;margin-right:var(--luzmo-droppable-slot-text-to-controls, var(--droppable-slot-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-droppable-slot-controls-gap, var(--droppable-slot-controls-gap));background-color:var(--luzmo-droppable-slot-controls-background-color, var(--droppable-slot-controls-background-color));color:var(--luzmo-droppable-slot-controls-color, var(--droppable-slot-controls-color));margin-right:var(--luzmo-droppable-slot-controls-to-edge, var(--droppable-slot-controls-to-edge));padding:0 var(--luzmo-droppable-slot-controls-horizontal-padding, var(--droppable-slot-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-droppable-slot-controls-control-horizontal-padding, var(--droppable-slot-controls-control-horizontal-padding))}.droppable-slot.rotate{position:absolute;top:0;left:50%;transform-origin:center;max-width:15rem;transform:translate(-50%) rotate(-90deg)}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-droppable-slot-overlay-vertical-gap, var(--droppable-slot-overlay-vertical-gap)) 0}luzmo-slot-menu[placement=left],luzmo-slot-menu[placement=right],luzmo-slot-menu[placement=left-start],luzmo-slot-menu[placement=right-start],luzmo-slot-menu[placement=left-end],luzmo-slot-menu[placement=right-end]{margin:0 var(--luzmo-droppable-slot-overlay-horizontal-gap, var(--droppable-slot-overlay-horizontal-gap))}:host{--droppable-slot-border-width: var(--luzmo-border-width);--droppable-slot-border-style: dashed;--droppable-slot-border-color: var(--luzmo-border-color);--droppable-slot-background-color: transparent;--droppable-slot-accept-drag-background-color: var(--luzmo-positive-color);--droppable-slot-accept-drag-color: white;--droppable-slot-accept-drag-border-color: var(--luzmo-positive-color-down);--droppable-slot-accept-drag-font-color: white;--droppable-slot-font-color: var(--luzmo-font-color);--droppable-slot-controls-background-color: var(--luzmo-primary-down);--droppable-slot-controls-color: var(--luzmo-primary-inverse-color);--droppable-slot-accept-drag-controls-background-color: var( --luzmo-positive-color-down );--droppable-slot-accept-drag-controls-color: white;--droppable-slot-text-to-controls: var(--luzmo-spacing-3);--droppable-slot-controls-to-edge: 0;--droppable-slot-controls-gap: var(--luzmo-spacing-2);--droppable-slot-controls-horizontal-padding: var(--luzmo-spacing-2);--droppable-slot-controls-control-horizontal-padding: var(--luzmo-spacing-3);--droppable-slot-filled-background-color: var(--luzmo-primary);--droppable-slot-filled-color: var(--luzmo-primary-inverse-color);--droppable-slot-filled-border-width: var(--luzmo-border-width);--droppable-slot-filled-border-style: solid;--droppable-slot-filled-border-color: var(--luzmo-primary-down);--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-edge-to-label: var(--luzmo-spacing-5);--droppable-slot-label-to-controls: var(--luzmo-spacing-5);--droppable-slot-color-disabled: var(--luzmo-color-disabled);--droppable-slot-background-color-disabled: var( --luzmo-background-color-disabled );--droppable-slot-pulse-color: var(--luzmo-secondary-outline);--droppable-slot-border-radius: var(--luzmo-border-radius)}:host{--droppable-slot-height: var(--luzmo-component-height);--droppable-slot-label-font-size: var(--luzmo-font-size);--droppable-slot-icon-type-font-size: var(--luzmo-font-size);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--droppable-slot-height: var(--luzmo-component-height-s);--droppable-slot-label-font-size: var(--luzmo-font-size-s);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-s);--droppable-slot-horizontal-padding: var(--luzmo-spacing-4);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-4);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--droppable-slot-height: var(--luzmo-component-height-l);--droppable-slot-label-font-size: var(--luzmo-font-size-l);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-l);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--droppable-slot-height: var(--luzmo-component-height-xl);--droppable-slot-label-font-size: var(--luzmo-font-size-xl);--droppable-slot-icon-type-font-size: var(--luzmo-font-size-xl);--droppable-slot-horizontal-padding: var(--luzmo-spacing-5);--droppable-slot-overlay-horizontal-gap: var(--luzmo-spacing-5);--droppable-slot-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}",y={Category:()=>u.msg("Category",{desc:"Category label"}),Measure:()=>u.msg("Measure",{desc:"Measure label"}),Legend:()=>u.msg("Legend",{desc:"Legend label"}),"Y-Axis":()=>u.msg("Y-Axis",{desc:"Y-Axis label"}),"X-Axis":()=>u.msg("X-Axis",{desc:"X-Axis label"}),"Group by":()=>u.msg("Group by",{desc:"Group by label"})};var O=Object.defineProperty,I=Object.getOwnPropertyDescriptor,d=(h,t,e,o)=>{for(var l=o>1?void 0:o?I(t,e):t,i=h.length-1,r;i>=0;i--)(r=h[i])&&(l=(o?r(t,e,l):r(l))||l);return o&&l&&O(t,e,l),l};exports.LuzmoDroppableSlot=class extends k.SizedMixin(D.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this._loadSlotsConfig=new S.h(this,{task:async([t])=>{if(t&&t!==this._itemTypeLoaded){const e=Object.assign({"../../item-definitions/area-chart/area-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../area-chart-slots.config-Dx_ysVZK.cjs")),"../../item-definitions/bar-chart/bar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bar-chart-slots.config-c_9ABPOI.cjs")),"../../item-definitions/box-plot/box-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../box-plot-slots.config-K-1CiWO-.cjs")),"../../item-definitions/bubble-chart/bubble-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bubble-chart-slots.config-BwSwgleO.cjs")),"../../item-definitions/bullet-chart/bullet-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bullet-chart-slots.config-DQarxMR7.cjs")),"../../item-definitions/choropleth-map/choropleth-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../choropleth-map-slots.config-CFERs0ca.cjs")),"../../item-definitions/circle-pack-chart/circle-pack-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../circle-pack-chart-slots.config-B18aqdH1.cjs")),"../../item-definitions/circular-gauge/circular-gauge-slots.config.ts":()=>Promise.resolve().then(()=>require("../circular-gauge-slots.config-Cd-nkNPm.cjs")),"../../item-definitions/column-chart/column-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../column-chart-slots.config-C0nGjkmv.cjs")),"../../item-definitions/combination-chart/combination-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../combination-chart-slots.config-CY07Q5Hw.cjs")),"../../item-definitions/conditional-number/conditional-number-slots.config.ts":()=>Promise.resolve().then(()=>require("../conditional-number-slots.config-CD5ZwXuY.cjs")),"../../item-definitions/date-filter/date-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../date-filter-slots.config-CrA5ijD3.cjs")),"../../item-definitions/donut-chart/donut-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../donut-chart-slots.config-DBowIZNO.cjs")),"../../item-definitions/dropdown-filter/dropdown-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../dropdown-filter-slots.config-0wn6pMvi.cjs")),"../../item-definitions/evolution-number/evolution-number-slots.config.ts":()=>Promise.resolve().then(()=>require("../evolution-number-slots.config-CNNVp6vR.cjs")),"../../item-definitions/funnel-chart/funnel-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../funnel-chart-slots.config-GKBCY9xN.cjs")),"../../item-definitions/heat-map/heat-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../heat-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/heat-table/heat-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../heat-table-slots.config-GGX3BCh1.cjs")),"../../item-definitions/hexbin-map/hexbin-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../hexbin-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/image/image-slots.config.ts":()=>Promise.resolve().then(()=>require("../image-slots.config-mPXMR1CE.cjs")),"../../item-definitions/line-chart/line-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../line-chart-slots.config-Dx_ysVZK.cjs")),"../../item-definitions/marker-map/marker-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../marker-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/ohlc-chart/ohlc-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../ohlc-chart-slots.config-DMomcHMV.cjs")),"../../item-definitions/parallel-coordinates-plot/parallel-coordinates-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../parallel-coordinates-plot-slots.config--fk40ZDu.cjs")),"../../item-definitions/pivot-table/pivot-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../pivot-table-slots.config-45V_Gdm7.cjs")),"../../item-definitions/pyramid-chart/pyramid-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../pyramid-chart-slots.config-D5F0WX2d.cjs")),"../../item-definitions/radar-chart/radar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../radar-chart-slots.config-BEigR_Ml.cjs")),"../../item-definitions/regular-table/regular-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../regular-table-slots.config-RLnMgOXn.cjs")),"../../item-definitions/route-map/route-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../route-map-slots.config-DsVJBR3D.cjs")),"../../item-definitions/sankey-diagram/sankey-diagram-slots.config.ts":()=>Promise.resolve().then(()=>require("../sankey-diagram-slots.config-CiyYElLX.cjs")),"../../item-definitions/scatter-plot/scatter-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../scatter-plot-slots.config-47cB5_RC.cjs")),"../../item-definitions/search-filter/search-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../search-filter-slots.config-DeHkvc2Q.cjs")),"../../item-definitions/slicer-filter/slicer-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../slicer-filter-slots.config-V7hURjKI.cjs")),"../../item-definitions/slider-filter/slider-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../slider-filter-slots.config-B--K9cpP.cjs")),"../../item-definitions/speedometer-chart/speedometer-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../speedometer-chart-slots.config-Cd-nkNPm.cjs")),"../../item-definitions/spike-map/spike-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../spike-map-slots.config-BM5-Dlub.cjs")),"../../item-definitions/strip-plot/strip-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../strip-plot-slots.config-DDUlLO8K.cjs")),"../../item-definitions/sunburst-chart/sunburst-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../sunburst-chart-slots.config-B18aqdH1.cjs")),"../../item-definitions/symbol-map/symbol-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../symbol-map-slots.config-Dm_FRGHA.cjs")),"../../item-definitions/text/text-slots.config.ts":()=>Promise.resolve().then(()=>require("../text-slots.config-BMBEkf0O.cjs")),"../../item-definitions/treemap-chart/treemap-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../treemap-chart-slots.config-C3bnHCyy.cjs")),"../../item-definitions/venn-diagram/venn-diagram-slots.config.ts":()=>Promise.resolve().then(()=>require("../venn-diagram-slots.config-GytlZGbF.cjs")),"../../item-definitions/video/video-slots.config.ts":()=>Promise.resolve().then(()=>require("../video-slots.config-mPXMR1CE.cjs")),"../../item-definitions/wordcloud-chart/wordcloud-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../wordcloud-chart-slots.config-D7CiYopX.cjs"))}),o=`../../item-definitions/${t}/${t}-slots.config.ts`;if(e[o]){const l=await e[o]();this._itemTypeLoaded=t,this._slotsConfig=(l==null?void 0:l.default)??{}}return this._slotsConfig}},args:()=>[this.itemType,this.language]}),this.slotConfiguration={},this.slotsContents=[],this.language="en",this.apiUrl="https://api.luzmo.com",this.authKey="",this.authToken="",this.menu="default",this.placement="bottom-end",this._slotContents=[],this._store=new E,this._currentSlotContents=[],this._lastFetchedDatasetId=null,this._linkedDatasetsIds=[],this.changedSlotContents=(t,e=[])=>{this._store.setContents(t,this.slotName),this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:t,linkedDatasetsIds:e}}))},new $(this,{context:g.slotContext,initialValue:this._store})}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDroppable()}emptySlotContents(t){t.preventDefault(),t.stopPropagation(),this._slotContents=[],this.changedSlotContents([])}willUpdate(t){t.has("slotsContents")&&this._processSlotsContents(),t.has("language")&&this.language!==u.getLocale()&&([...u.targetLocales].includes(this.language??"en")||this.language==="en")&&u.setLocale(this.language)}_processSlotsContents(){var t,e;this._store.setFullContents(this.slotsContents),this._slotContents=((e=(t=this.slotsContents)==null?void 0:t.find(o=>o.name===this.slotName))==null?void 0:e.content)??[],this._currentSlotContents=[...this._slotContents],this.slotName==="measure"&&this._store.setPeriodOverPeriodEnabled(this.itemType),this._store.setContents(this._slotContents)}firstUpdated(){this._cleanupDroppable||(this._cleanupDroppable=_.dropTargetForElements({element:this,onDrop:async t=>{var r,n,s,p;const e={...(r=t.source)==null?void 0:r.data},o={...(e==null?void 0:e.label)??{en:"Untitled"}},l=e==null?void 0:e.type;if(l==="datetime"&&!e.level&&(e.level=e.lowestLevel??(e.subtype==="date"?5:9)),l==="datetime"&&((s=(n=t==null?void 0:t.source)==null?void 0:n.element)!=null&&s.hasAttribute("sublevel"))){const c=["(Yr)","(Qtr)","(Mth)","(Wk)","(Date)","(Hr)","(Min)","(Sec)","(Msec)"],m=(e==null?void 0:e.level)??1,b=Object.keys(o);for(const v of b)o[v]=`${o[v]} ${c[m-1]}`;e.label=o}const{securable_id:i}=e;i&&i!==this._lastFetchedDatasetId&&(this._lastFetchedDatasetId=i,await z.dataBroker.fetchDatasetsRecursive([i]),this._linkedDatasetsIds=z.dataBroker.getLinkedDatasetsIds(i)),this._slotContents=(p=this.slotConfiguration)!=null&&p.canAcceptMultipleDataItems?[...this._slotContents??[],e]:[e],this.removeAttribute("accept-drag"),this.changedSlotContents(this._slotContents,this._linkedDatasetsIds)},canDrop:({source:t})=>{var o,l,i,r,n,s,p,c,m,b,v;if(!["LUZMO-DRAGGABLE-DATA-ITEM-LEVEL","LUZMO-DRAGGABLE-DATA-ITEM"].includes((o=t.element)==null?void 0:o.tagName)||!((l=this.slotConfiguration)!=null&&l.canAcceptFormula)&&((i=t==null?void 0:t.data)!=null&&i.formulaId))return!1;const e=((n=(r=this.slotConfiguration)==null?void 0:r.acceptableDataItemTypes)==null?void 0:n.length)>0?this.slotConfiguration.acceptableDataItemTypes:["datetime","hierarchy","numeric","array[datetime]","array[numeric]","array[hierarchy]"];return(s=t==null?void 0:t.data)!=null&&s.type&&!e.includes((p=t==null?void 0:t.data)==null?void 0:p.type)?!1:!((c=t==null?void 0:t.data)!=null&&c.subtype&&((b=(m=this.slotConfiguration)==null?void 0:m.acceptableColumnSubtypes)==null?void 0:b.length)>0&&!this.slotConfiguration.acceptableColumnSubtypes.includes((v=t==null?void 0:t.data)==null?void 0:v.subtype))},getDropEffect:()=>"move",onDragEnter:()=>{this.setAttribute("accept-drag",""),this.classList.add("pulse")},onDragLeave:()=>{this.removeAttribute("accept-drag"),this.classList.remove("pulse")}}))}_onOverlayClosed(t){const e=t.overlay;this._slotMenuElement&&e===this._overlayElement&&(setTimeout(()=>{this._slotMenuElement.resetPosition()},500),this.dispatchEvent(new CustomEvent("slot-menu-inactive",{bubbles:!0,composed:!0})))}_onOverlayOpened(t){var o,l,i,r;const e=t.overlay;if(this._slotMenuElement&&e===this._overlayElement){const n=((l=(o=this._store.activeIndex).get)==null?void 0:l.call(o))??0,s=((i=this._slotContents)==null?void 0:i[n])??((r=this._slotContents)==null?void 0:r[0]);if(!s)return;const p=(s==null?void 0:s.column)??(s==null?void 0:s.columnId),c=(s==null?void 0:s.set)??(s==null?void 0:s.datasetId);if(!p||!c)return;this.dispatchEvent(new CustomEvent("slot-menu-active",{bubbles:!0,composed:!0,detail:{securableId:c}})),setTimeout(()=>{this.dispatchEvent(new CustomEvent("slot-menu-highlight",{bubbles:!0,composed:!0,detail:{columnId:p,securableId:c,level:(s==null?void 0:s.level)??0}}))})}}_onSlotMenuChanges(t){var o;t.preventDefault(),t.stopPropagation();const e=t.detail.linkedDatasetsIds;this._slotContents.length===((o=t.detail.slotContents)==null?void 0:o.length)?(this._currentSlotContents=t.detail.slotContents,this.changedSlotContents(this._currentSlotContents,e)):(this._slotContents=t.detail.slotContents,this.changedSlotContents(this._slotContents,e))}get _fullLabel(){var l,i,r,n,s,p,c,m,b;let t="";const e=y[(l=this.slotConfiguration)==null?void 0:l.label]?y[(i=this.slotConfiguration)==null?void 0:i.label]():(r=this.slotConfiguration)==null?void 0:r.label;((n=this._currentSlotContents)==null?void 0:n.length)===1?t=q.localize((p=(s=this._currentSlotContents)==null?void 0:s[0])==null?void 0:p.label,this.language)??"Untitled":((c=this._currentSlotContents)==null?void 0:c.length)>1&&(t=`${this._currentSlotContents.length} items`);let o=this.label||e||"Untitled";return((m=this._currentSlotContents)==null?void 0:m.length)>0&&(o+=((b=this._currentSlotContents)==null?void 0:b.length)>1?`: ${this._currentSlotContents.length} items`:`: ${t}`),o}droppableSlotMarkup(){var e,o,l,i,r,n,s,p,c;const t=a.x`
       <div
-        class="droppable-slot"
-        ?filled=${((t=this.slotContents)==null?void 0:t.length)>0}
         id="trigger"
+        class="droppable-slot ${(e=this.slotConfiguration)!=null&&e.rotate?"rotate":""}"
+        ?filled=${((o=this._slotContents)==null?void 0:o.length)>0}
       >
-        <div class="droppable-slot-label"></div>
-        ${((o=this.slotContents)==null?void 0:o.length)>0&&!(this.hideConfiguration&&this.hideDelete)?r.x`<div class="controls">
-              ${this.hideConfiguration?"":r.x`<div>
-                    ${m.O2(m.M1)}
+        <div class="droppable-slot-label">${this._fullLabel}</div>
+        ${((l=this._slotContents)==null?void 0:l.length)>0&&!(this.hideConfiguration&&this.hideDelete)?a.x`<div class="controls">
+              ${this.hideConfiguration?"":a.x`<div>
+                    ${f.y3(f.M1)}
                     <luzmo-tooltip
                       self-managed
-                      placement="top"
+                      placement=${(i=this.slotConfiguration)!=null&&i.rotate?"right":"top"}
                       size=${this.size}
                     >
                       edit
                     </luzmo-tooltip>
                   </div> `}
-              ${this.hideDelete?"":r.x`<div @click=${this.emptySlotContents}>
-                    ${m.O2(m.v1)}
+              ${this.hideDelete?"":a.x`<div @click=${this.emptySlotContents}>
+                    ${f.y3(f.C1)}
                     <luzmo-tooltip
                       self-managed
-                      placement="top"
+                      placement=${(r=this.slotConfiguration)!=null&&r.rotate?"right":"top"}
                       size=${this.size}
                     >
                       Delete
                     </luzmo-tooltip>
                   </div>`}
             </div>`:""}
-        ${((l=this.slotContents)==null?void 0:l.length)>0?r.x`<luzmo-overlay
+        ${((n=this._slotContents)==null?void 0:n.length)>0?a.x`<luzmo-overlay
               trigger="trigger@click"
               .placement=${this.placement}
+              offset=${(s=this.slotConfiguration)!=null&&s.rotate?"-100":"-20"}
+              @luzmo-closed=${this._onOverlayClosed}
+              @luzmo-opened=${this._onOverlayOpened}
             >
               <luzmo-slot-menu
                 language=${this.language}
                 content-language=${this.language}
-                slot-type=${(e=this.slotConfiguration)==null?void 0:e.type}
-                .slotContents=${this._currentSlotContents}
-                variant="popup"
+                drag-boundary=${this.dragBoundary}
+                slot-type=${(p=this.slotConfiguration)==null?void 0:p.type}
+                slot-name=${this.slotName}
+                item-type=${this.itemType}
+                slot-contents=${this._slotContents}
+                variant=${this.menu==="draggable"?"draggable":"popup"}
                 .size=${this.size}
+                api-url=${this.apiUrl}
+                auth-key=${this.authKey}
+                auth-token=${this.authToken}
                 @slot-contents-changed=${this._onSlotMenuChanges}
               ></luzmo-slot-menu>
             </luzmo-overlay>`:""}
       </div>
-    `}render(){return this._loadSlotsConfig.render({pending:()=>r.x`<p>Loading...</p>`,complete:t=>{if(this.slotName&&this.itemType&&t){const o=t.find(l=>l.name===this.slotName);o&&(this.slotConfiguration=o)}return this.droppableSlotMarkup()},error:t=>r.x`
+    `;return(c=this.slotConfiguration)!=null&&c.rotate?a.x`<div class="droppable-slot-wrapper">${t}</div>`:t}render(){return this._loadSlotsConfig.render({pending:()=>a.x`<p>Loading...</p>`,complete:t=>{if(this.slotName&&this.itemType&&t){const e=t.find(o=>o.name===this.slotName);e&&!this.slotConfiguration&&(this.slotConfiguration=e)}return this.droppableSlotMarkup()},error:t=>a.x`
         <div>
           Could not load droppable slot: '${this.slotName}' of chart
           '${this.itemType}': ${t}.
         </div>
-      `})}};h.styles=r.r(_);let a=h;i([r.n({type:String,reflect:!0,attribute:"item-type"})],a.prototype,"itemType");i([r.n({type:String,reflect:!0,attribute:"slot-name"})],a.prototype,"slotName");i([r.n({type:Object})],a.prototype,"slotConfiguration");i([r.n({type:Object})],a.prototype,"slotContents");i([r.n({type:String,reflect:!0})],a.prototype,"label");i([r.n({type:String,reflect:!0})],a.prototype,"language");i([r.n({type:String,reflect:!0})],a.prototype,"menu");i([r.n({type:String,reflect:!0})],a.prototype,"placement");i([r.n({type:Boolean,reflect:!0,attribute:"hide-delete"})],a.prototype,"hideDelete");i([r.n({type:Boolean,reflect:!0,attribute:"hide-configuration"})],a.prototype,"hideConfiguration");i([k.e(".droppable-slot-label")],a.prototype,"_droppableSlotLabelElement");customElements.get("luzmo-droppable-slot")||customElements.define("luzmo-droppable-slot",a);exports.LuzmoDroppableSlot=a;
+      `})}};exports.LuzmoDroppableSlot.styles=a.r(T);d([a.n({type:String,reflect:!0,attribute:"item-type"})],exports.LuzmoDroppableSlot.prototype,"itemType",2);d([a.n({type:String,reflect:!0,attribute:"slot-name"})],exports.LuzmoDroppableSlot.prototype,"slotName",2);d([a.n({type:Object})],exports.LuzmoDroppableSlot.prototype,"slotConfiguration",2);d([a.n({type:Object})],exports.LuzmoDroppableSlot.prototype,"slotsContents",2);d([a.n({type:String,reflect:!0})],exports.LuzmoDroppableSlot.prototype,"label",2);d([a.n({type:String,reflect:!0})],exports.LuzmoDroppableSlot.prototype,"language",2);d([a.n({type:String,reflect:!0,attribute:"drag-boundary"})],exports.LuzmoDroppableSlot.prototype,"dragBoundary",2);d([a.n({type:String,attribute:"api-url",reflect:!0})],exports.LuzmoDroppableSlot.prototype,"apiUrl",2);d([a.n({type:String,attribute:"auth-key",reflect:!0})],exports.LuzmoDroppableSlot.prototype,"authKey",2);d([a.n({type:String,attribute:"auth-token",reflect:!0})],exports.LuzmoDroppableSlot.prototype,"authToken",2);d([a.n({type:String,reflect:!0})],exports.LuzmoDroppableSlot.prototype,"menu",2);d([a.n({type:String,reflect:!0})],exports.LuzmoDroppableSlot.prototype,"placement",2);d([a.n({type:Boolean,reflect:!0,attribute:"hide-delete"})],exports.LuzmoDroppableSlot.prototype,"hideDelete",2);d([a.n({type:Boolean,reflect:!0,attribute:"hide-configuration"})],exports.LuzmoDroppableSlot.prototype,"hideConfiguration",2);d([C.e("luzmo-slot-menu")],exports.LuzmoDroppableSlot.prototype,"_slotMenuElement",2);d([C.e("luzmo-overlay")],exports.LuzmoDroppableSlot.prototype,"_overlayElement",2);d([P.r()],exports.LuzmoDroppableSlot.prototype,"_slotContents",2);exports.LuzmoDroppableSlot=d([x.localized()],exports.LuzmoDroppableSlot);customElements.get("luzmo-droppable-slot")||customElements.define("luzmo-droppable-slot",exports.LuzmoDroppableSlot);