@luzmo/analytics-components-kit 1.0.1-alpha.4 → 1.0.1-alpha.6

package/components/droppable-slot/index.cjs

@@ -0,0 +1,69 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 f=require("../get-css-variable-DLiZYZEi.cjs"),y=require("../task-CgK9ztaw.cjs"),m=require("@luzmo/icons");require("../index-DC2Pby0z.cjs");const r=require("../property-ChsOQ1Yj.cjs"),C=require("../sized-mixin-BxMraZLS-w9I35lP7.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 x=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&&x(t,o,e),e};const h=class h extends C.m(r.kt,{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`
+      <div
+        class="droppable-slot"
+        ?filled=${((t=this.slotContents)==null?void 0:t.length)>0}
+        id="trigger"
+      >
+        <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.luzmoIcon(m.luzmoCog)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      edit
+                    </luzmo-tooltip>
+                  </div> `}
+              ${this.hideDelete?"":r.x`<div @click=${this.emptySlotContents}>
+                    ${m.luzmoIcon(m.luzmoTrash)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      Delete
+                    </luzmo-tooltip>
+                  </div>`}
+            </div>`:""}
+        ${((l=this.slotContents)==null?void 0:l.length)>0?r.x`<luzmo-overlay
+              trigger="trigger@click"
+              .placement=${this.placement}
+            >
+              <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"
+                .size=${this.size}
+                @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`
+        <div>
+          Could not load droppable slot: '${this.slotName}' of chart
+          '${this.itemType}': ${t}.
+        </div>
+      `})}};h.styles=r.r$1(_);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;

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

@@ -0,0 +1,7 @@
+import { LuzmoDroppableSlot } from './droppable-slot';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-droppable-slot': LuzmoDroppableSlot;
+    }
+}
+export { LuzmoDroppableSlot } from './droppable-slot';

package/components/droppable-slot/index.js

@@ -0,0 +1,255 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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.
+ * */
+import { d as C } from "../get-css-variable-Bhbr-Kr1.js";
+import { h as x } from "../task-DYLITx7R.js";
+import { luzmoIcon as v, luzmoCog as k, luzmoTrash as S } from "@luzmo/icons";
+import "../index-Ci0Pe5UA.js";
+import { k as w, a as _, x as u, n as i } from "../property-CXJD1jOW.js";
+import { m as $ } from "../sized-mixin-BxMraZLS-Dc6r-Wg4.js";
+import { l as D } from "../localize-B6AsX_Zv.js";
+import { e as E } from "../query-Ddbd72Um.js";
+import "../slot-menu/index.js";
+const y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const m = document.createElement("style");
+    m.setAttribute("data-luzmo-vars", ""), m.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-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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(m);
+  }
+};
+y();
+const L = ":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 A = Object.defineProperty, n = (m, l, o, t) => {
+  for (var e = void 0, a = m.length - 1, s; a >= 0; a--)
+    (s = m[a]) && (e = s(l, o, e) || e);
+  return e && A(l, o, e), e;
+};
+const h = class h extends $(w, {
+  validSizes: ["s", "m", "l", "xl"],
+  noDefaultSize: !0
+}) {
+  constructor() {
+    super(...arguments), this._loadSlotsConfig = new x(this, {
+      task: async ([l]) => {
+        if (l && l !== this._itemTypeLoaded) {
+          const o = /* @__PURE__ */ Object.assign({
+            "./item-slots-configs/area-chart-slots.config.ts": () => import("../area-chart-slots.config-C0c2ZzBh.js"),
+            "./item-slots-configs/bar-chart-slots.config.ts": () => import("../bar-chart-slots.config-GSSL7XVA.js"),
+            "./item-slots-configs/donut-chart-slots.config.ts": () => import("../donut-chart-slots.config-BEwhfq27.js")
+          });
+          if (o[`./item-slots-configs/${l}-slots.config.ts`]) {
+            const t = await o[`./item-slots-configs/${l}-slots.config.ts`]();
+            this._slotsConfig = (t == null ? void 0 : t.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 = (l) => {
+      this.dispatchEvent(
+        new CustomEvent("slot-contents-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            slotContents: l
+          }
+        })
+      );
+    }, this._currentSlotContents = [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cleanupDroppable();
+  }
+  emptySlotContents(l) {
+    l.preventDefault(), l.stopPropagation(), this.slotContents = [], this.changedSlotContents([]);
+  }
+  willUpdate(l) {
+    l.has("slotContents") && (this._currentSlotContents = structuredClone(this.slotContents));
+  }
+  firstUpdated(l) {
+    this._cleanupDroppable || (this._cleanupDroppable = C({
+      element: this,
+      onDrop: (o) => {
+        var s, p, d, c;
+        const t = { ...(s = o.source) == null ? void 0 : s.data }, e = {
+          ...(t == null ? void 0 : t.label) ?? { en: "Untitled" }
+        }, a = t == null ? void 0 : t.type;
+        if (a === "datetime" && !t.level && (t.level = t.lowestLevel ?? (t.subtype === "date" ? 5 : 9)), a === "datetime" && ((d = (p = o == null ? void 0 : o.source) == null ? void 0 : p.element) != null && d.hasAttribute("sublevel"))) {
+          const b = [
+            "(Yr)",
+            "(Qtr)",
+            "(Mth)",
+            "(Wk)",
+            "(Date)",
+            "(Hr)",
+            "(Min)",
+            "(Sec)",
+            "(Msec)"
+          ], g = (t == null ? void 0 : t.level) ?? 1, z = Object.keys(e);
+          for (const f of z)
+            e[f] = `${e[f]} ${b[g - 1]}`;
+          t.label = e;
+        }
+        this.slotContents = (c = this.slotConfiguration) != null && c.canAcceptMultipleColumns ? [...this.slotContents ?? [], t] : [t], this.removeAttribute("accept-drag"), this.changedSlotContents(this.slotContents);
+      },
+      canDrop: ({ source: o }) => {
+        var e, a, s, p, d, c, b, g, z;
+        if (![
+          "LUZMO-DRAGGABLE-DATA-ITEM-LEVEL",
+          "LUZMO-DRAGGABLE-DATA-ITEM"
+        ].includes((e = o.element) == null ? void 0 : e.tagName))
+          return !1;
+        const t = ((s = (a = this.slotConfiguration) == null ? void 0 : a.acceptableColumnTypes) == null ? void 0 : s.length) > 0 ? this.slotConfiguration.acceptableColumnTypes : ["numeric", "hierarchy", "datetime"];
+        return (p = o == null ? void 0 : o.data) != null && p.type && !t.includes((d = o == null ? void 0 : o.data) == null ? void 0 : d.type) ? !1 : !((c = o == null ? void 0 : o.data) != null && c.subtype && ((g = (b = this.slotConfiguration) == null ? void 0 : b.acceptableColumnSubtypes) == null ? void 0 : g.length) > 0 && !this.slotConfiguration.acceptableColumnSubtypes.includes(
+          (z = o == null ? void 0 : o.data) == null ? void 0 : z.subtype
+        ));
+      },
+      getDropEffect: () => "link",
+      onDragEnter: () => {
+        this.setAttribute("accept-drag", "");
+      },
+      onDragLeave: () => {
+        this.removeAttribute("accept-drag");
+      }
+    }));
+  }
+  updated() {
+    this.createFullLabel();
+  }
+  _onSlotMenuChanges(l) {
+    var o;
+    l.preventDefault(), l.stopPropagation(), this.slotContents.length === ((o = l.detail.slotContents) == null ? void 0 : o.length) ? (this._currentSlotContents = l.detail.slotContents, this.createFullLabel(), this.changedSlotContents(this._currentSlotContents)) : (this.slotContents = l.detail.slotContents, this.changedSlotContents(this.slotContents));
+  }
+  // we update the label outside the lit render method to not lose focus when typing in the display settings bc of rerender
+  // we use a copy of slotContents '_currentSlotContents' to not trigger a rerender when the slotContents change from the slot-menu
+  createFullLabel() {
+    var t, e, a, s, p, d, c;
+    let l = "";
+    ((t = this._currentSlotContents) == null ? void 0 : t.length) === 1 ? l = D((a = (e = this._currentSlotContents) == null ? void 0 : e[0]) == null ? void 0 : a.label, this.language) ?? "Untitled" : ((s = this._currentSlotContents) == null ? void 0 : s.length) > 1 && (l = `${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` : `: ${l}`), this._droppableSlotLabelElement && (this._droppableSlotLabelElement.textContent = o);
+  }
+  droppableSlotMarkup() {
+    var l, o, t, e;
+    return u`
+      <div
+        class="droppable-slot"
+        ?filled=${((l = this.slotContents) == null ? void 0 : l.length) > 0}
+        id="trigger"
+      >
+        <div class="droppable-slot-label"></div>
+        ${((o = this.slotContents) == null ? void 0 : o.length) > 0 && !(this.hideConfiguration && this.hideDelete) ? u`<div class="controls">
+              ${this.hideConfiguration ? "" : u`<div>
+                    ${v(k)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      edit
+                    </luzmo-tooltip>
+                  </div> `}
+              ${this.hideDelete ? "" : u`<div @click=${this.emptySlotContents}>
+                    ${v(S)}
+                    <luzmo-tooltip
+                      self-managed
+                      placement="top"
+                      size=${this.size}
+                    >
+                      Delete
+                    </luzmo-tooltip>
+                  </div>`}
+            </div>` : ""}
+        ${((t = this.slotContents) == null ? void 0 : t.length) > 0 ? u`<luzmo-overlay
+              trigger="trigger@click"
+              .placement=${this.placement}
+            >
+              <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"
+                .size=${this.size}
+                @slot-contents-changed=${this._onSlotMenuChanges}
+              ></luzmo-slot-menu>
+            </luzmo-overlay>` : ""}
+      </div>
+    `;
+  }
+  render() {
+    return this._loadSlotsConfig.render({
+      pending: () => u`<p>Loading...</p>`,
+      complete: (l) => {
+        if (this.slotName && this.itemType && l) {
+          const o = l.find(
+            (t) => t.name === this.slotName
+          );
+          o && (this.slotConfiguration = o);
+        }
+        return this.droppableSlotMarkup();
+      },
+      error: (l) => u`
+        <div>
+          Could not load droppable slot: '${this.slotName}' of chart
+          '${this.itemType}': ${l}.
+        </div>
+      `
+    });
+  }
+};
+h.styles = _(L);
+let r = h;
+n([
+  i({ type: String, reflect: !0, attribute: "item-type" })
+], r.prototype, "itemType");
+n([
+  i({ type: String, reflect: !0, attribute: "slot-name" })
+], r.prototype, "slotName");
+n([
+  i({ type: Object })
+], r.prototype, "slotConfiguration");
+n([
+  i({ type: Object })
+], r.prototype, "slotContents");
+n([
+  i({ type: String, reflect: !0 })
+], r.prototype, "label");
+n([
+  i({ type: String, reflect: !0 })
+], r.prototype, "language");
+n([
+  i({ type: String, reflect: !0 })
+], r.prototype, "menu");
+n([
+  i({ type: String, reflect: !0 })
+], r.prototype, "placement");
+n([
+  i({ type: Boolean, reflect: !0, attribute: "hide-delete" })
+], r.prototype, "hideDelete");
+n([
+  i({ type: Boolean, reflect: !0, attribute: "hide-configuration" })
+], r.prototype, "hideConfiguration");
+n([
+  E(".droppable-slot-label")
+], r.prototype, "_droppableSlotLabelElement");
+customElements.get("luzmo-droppable-slot") || customElements.define("luzmo-droppable-slot", r);
+export {
+  r as LuzmoDroppableSlot
+};

package/components/droppable-slot/item-slots-configs/area-chart-slots.config.d.ts

@@ -0,0 +1,44 @@
+declare const _default: ({
+    name: string;
+    rotate: boolean;
+    label: string;
+    type: string;
+    options: {
+        isAggregationDisabled: boolean;
+        isBinningDisabled: boolean;
+        areDatetimeOptionsEnabled: boolean;
+        isCumulativeSumEnabled?: undefined;
+    };
+    isRequired: boolean;
+    canAcceptMultipleColumns?: undefined;
+    canAcceptFormula?: undefined;
+} | {
+    name: string;
+    rotate: boolean;
+    label: string;
+    type: string;
+    options: {
+        isCumulativeSumEnabled: boolean;
+        isAggregationDisabled?: undefined;
+        isBinningDisabled?: undefined;
+        areDatetimeOptionsEnabled?: undefined;
+    };
+    canAcceptMultipleColumns: boolean;
+    canAcceptFormula: boolean;
+    isRequired?: undefined;
+} | {
+    name: string;
+    rotate: boolean;
+    label: string;
+    options: {
+        areDatetimeOptionsEnabled: boolean;
+        isAggregationDisabled?: undefined;
+        isBinningDisabled?: undefined;
+        isCumulativeSumEnabled?: undefined;
+    };
+    type: string;
+    isRequired?: undefined;
+    canAcceptMultipleColumns?: undefined;
+    canAcceptFormula?: undefined;
+})[];
+export default _default;

package/components/droppable-slot/item-slots-configs/bar-chart-slots.config.d.ts

@@ -0,0 +1,24 @@
+declare const _default: ({
+    name: string;
+    label: string;
+    type: string;
+    rotate: boolean;
+    options: {
+        areDatetimeOptionsEnabled: boolean;
+        isCumulativeSumEnabled?: undefined;
+    };
+    canAcceptMultipleColumns?: undefined;
+    canAcceptFormula?: undefined;
+} | {
+    name: string;
+    label: string;
+    type: string;
+    rotate: boolean;
+    options: {
+        isCumulativeSumEnabled: boolean;
+        areDatetimeOptionsEnabled?: undefined;
+    };
+    canAcceptMultipleColumns: boolean;
+    canAcceptFormula: boolean;
+})[];
+export default _default;

package/components/droppable-slot/item-slots-configs/donut-chart-slots.config.d.ts

@@ -0,0 +1,20 @@
+declare const _default: ({
+    name: string;
+    rotate: boolean;
+    label: string;
+    type: string;
+    canAcceptMultipleColumns: boolean;
+    canAcceptFormula: boolean;
+    options?: undefined;
+} | {
+    name: string;
+    rotate: boolean;
+    label: string;
+    type: string;
+    options: {
+        areDatetimeOptionsEnabled: boolean;
+    };
+    canAcceptMultipleColumns?: undefined;
+    canAcceptFormula?: undefined;
+})[];
+export default _default;

package/components/edit-item/edit-item.d.ts

@@ -0,0 +1,50 @@
+import '@luzmo/lucero/accordion';
+import '@luzmo/lucero/divider';
+import { ElementSize, LuzmoElement } from '@luzmo/lucero/utils';
+import './../edit-option';
+/**
+ * @element luzmo-edit-item
+ */
+export declare class LuzmoEditItem extends LuzmoElement {
+    static styles: import("lit").CSSResult;
+    private _loadItemConfig;
+    /**
+     * The language in which to display the option configuration controls.
+     */
+    language: string;
+    /**
+     * The item type to load the configuration for. Leave empty if using a custom options configuration.
+     */
+    itemType: string;
+    /**
+     * The options of the item.
+     */
+    options?: any;
+    /**
+     * The slots of the item.
+     */
+    slots?: any;
+    /**
+     * The theme of the item.
+     */
+    theme?: any;
+    /**
+     * The size of the edit item component.
+     */
+    size: ElementSize;
+    /**
+     * The configuration of the options. Fill in manually if you want to use a custom configuration. Leave empty if using a default configuration and use 'item-type'.
+     */
+    optionsConfiguration: any;
+    /**
+     * The translations of the item options configuration.
+     */
+    translations: any;
+    private _itemTypeLoaded;
+    private _languageLoaded;
+    private renderAllGroups;
+    private renderGroup;
+    private renderOptionControl;
+    private renderDivider;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+}