@luzmo/analytics-components-kit 1.0.1-alpha.50 → 1.0.1-alpha.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/components/display-settings/display-settings.d.ts +1 -0
  2. package/components/display-settings/index.cjs +1 -1
  3. package/components/display-settings/index.js +1 -1
  4. package/components/display-settings-numeric/helpers/constants.d.ts +1 -0
  5. package/components/display-settings-numeric/index.cjs +16 -10
  6. package/components/display-settings-numeric/index.js +52 -34
  7. package/components/draggable-data-item/draggable-data-item.d.ts +0 -1
  8. package/components/draggable-data-item/index.cjs +5 -8
  9. package/components/draggable-data-item/index.js +32 -38
  10. package/components/draggable-data-item-level/draggable-data-item-level.d.ts +1 -1
  11. package/components/draggable-data-item-level/index.cjs +6 -6
  12. package/components/draggable-data-item-level/index.js +106 -113
  13. package/components/droppable-slot/droppable-slot.d.ts +6 -1
  14. package/components/droppable-slot/index.cjs +14 -12
  15. package/components/droppable-slot/index.js +186 -160
  16. package/components/filter-item/index.cjs +1 -1
  17. package/components/filter-item/index.js +1 -1
  18. package/components/filter-value-picker-hierarchy/index.cjs +1 -1
  19. package/components/filter-value-picker-hierarchy/index.js +1 -1
  20. package/components/filter-value-picker-numeric/index.cjs +1 -1
  21. package/components/filter-value-picker-numeric/index.js +1 -1
  22. package/components/{index-DAoFunRy.cjs → index-3X8Iuo7y.cjs} +11 -11
  23. package/components/{index-Delpl7qa.js → index-Cyo2hwg7.js} +1 -1
  24. package/components/{index-eBsINoH9.cjs → index-DpHum3lw.cjs} +1 -1
  25. package/components/{index-Ct7UvUif.js → index-fmbD10nN.js} +123 -109
  26. package/components/index.cjs +1 -1
  27. package/components/index.js +1 -1
  28. package/components/slot-contents-picker/index.cjs +1 -1
  29. package/components/slot-contents-picker/index.js +1 -1
  30. package/components/slot-menu/index.cjs +11 -11
  31. package/components/slot-menu/index.js +186 -171
  32. package/components/slot-menu/slot-menu.d.ts +5 -1
  33. package/components/slot-menu-list/index.cjs +1 -1
  34. package/components/slot-menu-list/index.js +19 -16
  35. package/components/slot-menu-list/slot-menu-list.d.ts +1 -0
  36. package/custom-elements.json +29 -43
  37. package/item-definitions/box-plot/box-plot-options.config.d.ts +1 -1
  38. package/item-definitions/choropleth-map/choropleth-map-options.config.d.ts +1 -1
  39. package/item-definitions/hexbin-map/hexbin-map-options.config.d.ts +1 -1
  40. package/item-definitions/route-map/route-map-options.config.d.ts +1 -1
  41. package/item-definitions/spike-map/spike-map-options.config.d.ts +1 -1
  42. package/package.json +1 -1
  43. package/utils/data-broker/index.d.ts +1 -1
package/components/draggable-data-item-level/index.cjs CHANGED
@@ -17,20 +17,20 @@
17
17
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18
18
  * SOFTWARE.
19
19
  * */
20
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../get-css-variable-DLiZYZEi.cjs"),z=require("../luzmo-icons-DonyjSXg.cjs");require("../index-DSQyBS9Z.cjs");require("../index-CYeQkVeJ.cjs");const r=require("../property-Cu4Q1hS4.cjs"),V=require("../focusable-DAGGGYyz.cjs"),O=require("../sized-mixin-j_7aJM4b.cjs"),f=require("../calculate-data-item-icon-Dn-9Kd0U.cjs"),R=require("../localize-r7ALOUy_.cjs"),M=":host{font-family:var(--luzmo-draggable-data-item-level-font-family, var(--luzmo-font-family));color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color))}.draggable-data-item-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-draggable-data-item-level-background-color, var(--draggable-data-item-level-background-color));display:flex;justify-content:space-between;align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));border-radius:var(--luzmo-draggable-data-item-level-border-radius, var(--draggable-data-item-level-border-radius));border-width:var(--luzmo-draggable-data-item-level-border-width, var(--draggable-data-item-level-border-width));border-style:var(--luzmo-draggable-data-item-level-border-style, var(--draggable-data-item-level-border-style));border-color:var(--luzmo-draggable-data-item-level-border-color, var(--draggable-data-item-level-border-color));height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}.draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-background-color-hover, var(--draggable-data-item-level-background-color-hover));color:var(--luzmo-draggable-data-item-level-font-color-hover, var(--draggable-data-item-level-font-color-hover));border-color:var(--luzmo-draggable-data-item-level-border-color-hover, var(--draggable-data-item-level-border-color-hover))}.draggable-data-item-level .data-label{font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([sublevel]) .draggable-data-item-level{height:var(--luzmo-draggable-data-item-level-sublevel-height, var(--draggable-data-item-level-sublevel-height));background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color, var(--draggable-data-item-level-sublevel-background-color));border-color:var(--luzmo-draggable-data-item-level-sublevel-border-color, var(--draggable-data-item-level-sublevel-border-color));margin-inline-start:var(--luzmo-draggable-data-item-level-sublevel-margin-inline-start, var(--draggable-data-item-level-sublevel-margin-inline-start))}:host([sublevel]) .draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-hover, var(--draggable-data-item-level-sublevel-background-color-hover))}:host([sublevel]) .draggable-data-item-level .drag-handle-icon{width:var(--luzmo-draggable-data-item-level-sublevel-drag-handle-width, var(--draggable-data-item-level-sublevel-drag-handle-width));text-align:center}:host([disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-background-color-disabled, var(--draggable-data-item-level-background-color-disabled));color:var(--luzmo-draggable-data-item-level-color-disabled, var(--draggable-data-item-level-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25}:host([sublevel][disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-disabled, var(--draggable-data-item-level-sublevel-background-color-disabled))}.drag-handle-icon{opacity:.6;font-size:var(--luzmo-draggable-data-item-level-drag-handle-size, var(--luzmo-draggable-data-item-level-drag-handle-size));width:var(--luzmo-draggable-data-item-level-drag-handle-width, var(--luzmo-draggable-data-item-level-drag-handle-width));text-align:center}.data-icon-type{width:var(--luzmo-draggable-data-item-level-data-icon-width, var(--luzmo-draggable-data-item-level-data-icon-width));text-align:center;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:70%;width:auto;font-size:.75em;line-height:1}.data-label{flex-grow:1}.data-description{height:100%;display:flex;align-items:center;background-color:transparent;outline:none;border:none;color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color));font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size))}:host([variant=highlight]){--draggable-data-item-level-background-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-border-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-background-color-hover: var( --luzmo-background-color-highlight-hover );--draggable-data-item-level-font-color-hover: var(--luzmo-font-color-hover);--draggable-data-item-level-border-color-hover: var( --luzmo-background-color-highlight-hover )}:host{--draggable-data-item-level-height: var(--luzmo-component-height);--draggable-data-item-level-label-font-size: var(--luzmo-font-size);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-width: var(--luzmo-border-width);--draggable-data-item-level-border-style: solid;--draggable-data-item-level-border-color: var(--luzmo-border-color-hover);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-4);--draggable-data-item-level-font-color: var(--luzmo-font-color);--draggable-data-item-level-color-disabled: var(--luzmo-color-disabled);--draggable-data-item-level-background-color-disabled: var( --luzmo-background-color-disabled );--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-s);--luzmo-draggable-data-item-level-drag-handle-width: var( --draggable-data-item-level-icon-type-size );--luzmo-draggable-data-item-level-data-icon-width: calc( var(--draggable-data-item-level-icon-type-size) + var(--luzmo-spacing-3) );--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-s);--draggable-data-item-level-sublevel-border-color: transparent;--draggable-data-item-level-sublevel-background-color: transparent;--draggable-data-item-level-sublevel-background-color-disabled: transparent;--draggable-data-item-level-sublevel-margin-inline-start: calc( var(--draggable-data-item-level-gap) + var(--luzmo-draggable-data-item-level-drag-handle-width) );--luzmo-draggable-data-item-level-sublevel-drag-handle-width: var( --luzmo-draggable-data-item-level-data-icon-width );--draggable-data-item-level-sublevel-background-color-hover: rgba( var(--luzmo-border-color-rgb), .05 )}:host([hide-type-icon]){--draggable-data-item-level-sublevel-margin-inline-start: var( --draggable-data-item-level-gap )}:host(.highlighted) .draggable-data-item-level{background-color:var(--luzmo-primary);color:var(--luzmo-primary-inverse-color);border-color:var(--luzmo-primary)}:host([size=s]){--draggable-data-item-level-height: var(--luzmo-component-height-s);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-s);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-s);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-4);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-3);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-xs);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-xs)}:host([size=l]){--draggable-data-item-level-height: var(--luzmo-component-height-l);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-l);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-l);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-l);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size)}:host([size=xl]){--draggable-data-item-level-height: var(--luzmo-component-height-xl);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-xl);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-xl);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-xl);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-l);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-l)}:host{box-sizing:border-box}",B=a=>{var b,c,m,u,h,w,I,x,D,S,C,E,$,_,q,L,P;const d=a.source.element;let e="";(u=(m=(c=(b=a.source)==null?void 0:b.element)==null?void 0:c.renderRoot)==null?void 0:m.querySelector(".data-label"))!=null&&u.textContent&&(e=(I=(w=(h=a.source)==null?void 0:h.element)==null?void 0:w.renderRoot)==null?void 0:I.querySelector(".data-label").textContent),e||(e=R.localize((D=(x=a==null?void 0:a.source)==null?void 0:x.data)==null?void 0:D.label,(C=(S=a==null?void 0:a.source)==null?void 0:S.element)==null?void 0:C.language),e=e||"Untitled");const s=($=(E=a==null?void 0:a.source)==null?void 0:E.data)==null?void 0:$.type,t=(q=(_=a==null?void 0:a.source)==null?void 0:_.data)==null?void 0:q.subtype,i=f.calculateDataItemIcon({type:s,subtype:t},d.size),l={};[["borderColor","--luzmo-draggable-data-item-level-border-color","--draggable-data-item-level-border-color"],["backgroundColor","--luzmo-draggable-data-item-level-background-color","--draggable-data-item-level-background-color"],["color","--luzmo-draggable-data-item-level-font-color","--draggable-data-item-level-font-color"],["fontSize","--luzmo-draggable-data-item-level-label-font-size","--draggable-data-item-level-label-font-size"],["height","--luzmo-draggable-data-item-level-height","--draggable-data-item-level-height"],["borderRadius","--luzmo-draggable-data-item-level-border-radius","--draggable-data-item-level-border-radius"],["fontFamily","--luzmo-draggable-data-item-level-font-family","--luzmo-font-family"],["horizontalPadding","--luzmo-draggable-data-item-level-horizontal-padding","--draggable-data-item-level-horizontal-padding"],["gap","--luzmo-draggable-data-item-level-gap","--draggable-data-item-level-gap"]].forEach(([p,T,j])=>{const H=y.getCssVariableValue(d,T)||y.getCssVariableValue(d,j);l[p]=H});const v=document.createElement("div"),g=document.createElement("div");if(v.innerHTML=e,!((P=(L=a==null?void 0:a.source)==null?void 0:L.element)!=null&&P.sublevel)){const p=document.createElement("luzmo-icon");p.icon=i,g.append(p)}return g.append(v),Object.assign(g.style,{display:"flex",alignItems:"center",height:l.height,border:`1px solid ${l.borderColor}`,backgroundColor:l.backgroundColor,borderRadius:l.borderRadius,fontFamily:l.fontFamily,fontSize:l.fontSize,color:l.color,padding:`0 ${l.horizontalPadding}`,gap:l.gap}),g};var F=Object.defineProperty,n=(a,d,e,s)=>{for(var t=void 0,i=a.length-1,l;i>=0;i--)(l=a[i])&&(t=l(d,e,t)||t);return t&&F(d,e,t),t};const k=class k extends O.SizedMixin(V.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this.linkedDatasetsIds=[],this._handleHighlight=d=>{var g,b,c,m,u,h;const e=d.detail??{},{id:s,level:t}=e,i=((g=this.data)==null?void 0:g.columnId)??((b=this.data)==null?void 0:b.column)??((c=this.data)==null?void 0:c.formulaId)??((m=this.data)==null?void 0:m.formula)??((u=this.data)==null?void 0:u.id),l=((h=this.data)==null?void 0:h.level)??0,v=i===s&&l===(t??0);if(this.classList.toggle("highlighted",v),v)try{this.scrollIntoView({block:"nearest"})}catch{this.scrollIntoView(!0)}},this._clearHighlight=()=>{this.classList.remove("highlighted")},this.dataItemLevelDropped=d=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:d,linkedDatasetsIds:this.linkedDatasetsIds}}))},this.dataItemLevelDragStarted=()=>{this.dispatchEvent(new CustomEvent("data-item-drag-started",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:this.data,linkedDatasetsIds:this.linkedDatasetsIds}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable(),window.removeEventListener("slot-menu-highlight",this._handleHighlight),window.removeEventListener("slot-menu-highlight-clear",this._clearHighlight)}connectedCallback(){super.connectedCallback(),window.addEventListener("slot-menu-highlight",this._handleHighlight),window.addEventListener("slot-menu-highlight-clear",this._clearHighlight)}firstUpdated(d){this._cleanupDraggable=y.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5",this.dataItemLevelDragStarted()},onDrop:()=>{this.style.opacity="1",this.dataItemLevelDropped(this.data)},getInitialData:()=>{const e={...this.data};return this.label&&this.language&&!this.sublevel&&(e.label={},e.label[this.language]=this.label),this.description&&this.language&&(e.description={},e.description[this.language]=this.description),{...e,linkedDatasetsIds:this.linkedDatasetsIds}},onGenerateDragPreview:e=>{const s=e.nativeSetDragImage;y.setCustomNativeDragPreview({render({container:t}){const i=B(e);t.append(i)},nativeSetDragImage:s})}})}render(){var t,i,l,v,g,b,c,m,u,h;const d=this.label??((i=(t=this.data)==null?void 0:t.label)==null?void 0:i[this.language])??((g=(l=this.data)==null?void 0:l.label)==null?void 0:g[Object.keys((v=this.data)==null?void 0:v.label)[0]])??"Untitled",e=this.description??((c=(b=this.data)==null?void 0:b.description)==null?void 0:c[this.language])??((h=(m=this.data)==null?void 0:m.description)==null?void 0:h[Object.keys((u=this.data)==null?void 0:u.description)[0]]),s=this.secondaryIconType?f.calculateDataItemSecondaryIcon(this.secondaryIconType,this.size):void 0;return r.x`
20
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("../get-css-variable-DLiZYZEi.cjs"),z=require("../luzmo-icons-DonyjSXg.cjs");require("../index-DSQyBS9Z.cjs");require("../index-CYeQkVeJ.cjs");const r=require("../property-Cu4Q1hS4.cjs"),T=require("../focusable-DAGGGYyz.cjs"),j=require("../sized-mixin-j_7aJM4b.cjs"),I=require("../calculate-data-item-icon-Dn-9Kd0U.cjs"),R=require("../localize-r7ALOUy_.cjs"),B=":host{font-family:var(--luzmo-draggable-data-item-level-font-family, var(--luzmo-font-family));color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color))}.draggable-data-item-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-draggable-data-item-level-background-color, var(--draggable-data-item-level-background-color));display:flex;justify-content:space-between;align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));border-radius:var(--luzmo-draggable-data-item-level-border-radius, var(--draggable-data-item-level-border-radius));border-width:var(--luzmo-draggable-data-item-level-border-width, var(--draggable-data-item-level-border-width));border-style:var(--luzmo-draggable-data-item-level-border-style, var(--draggable-data-item-level-border-style));border-color:var(--luzmo-draggable-data-item-level-border-color, var(--draggable-data-item-level-border-color));height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}.draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-background-color-hover, var(--draggable-data-item-level-background-color-hover));color:var(--luzmo-draggable-data-item-level-font-color-hover, var(--draggable-data-item-level-font-color-hover));border-color:var(--luzmo-draggable-data-item-level-border-color-hover, var(--draggable-data-item-level-border-color-hover))}.draggable-data-item-level .data-label{font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([sublevel]) .draggable-data-item-level{height:var(--luzmo-draggable-data-item-level-sublevel-height, var(--draggable-data-item-level-sublevel-height));background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color, var(--draggable-data-item-level-sublevel-background-color));border-color:var(--luzmo-draggable-data-item-level-sublevel-border-color, var(--draggable-data-item-level-sublevel-border-color));margin-inline-start:var(--luzmo-draggable-data-item-level-sublevel-margin-inline-start, var(--draggable-data-item-level-sublevel-margin-inline-start))}:host([sublevel]) .draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-hover, var(--draggable-data-item-level-sublevel-background-color-hover))}:host([sublevel]) .draggable-data-item-level .drag-handle-icon{width:var(--luzmo-draggable-data-item-level-sublevel-drag-handle-width, var(--draggable-data-item-level-sublevel-drag-handle-width));text-align:center}:host([disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-background-color-disabled, var(--draggable-data-item-level-background-color-disabled));color:var(--luzmo-draggable-data-item-level-color-disabled, var(--draggable-data-item-level-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25}:host([sublevel][disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-disabled, var(--draggable-data-item-level-sublevel-background-color-disabled))}.drag-handle-icon{opacity:.6;font-size:var(--luzmo-draggable-data-item-level-drag-handle-size, var(--luzmo-draggable-data-item-level-drag-handle-size));width:var(--luzmo-draggable-data-item-level-drag-handle-width, var(--luzmo-draggable-data-item-level-drag-handle-width));text-align:center}.data-icon-type{width:var(--luzmo-draggable-data-item-level-data-icon-width, var(--luzmo-draggable-data-item-level-data-icon-width));text-align:center;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:70%;width:auto;font-size:.75em;line-height:1}.data-label{flex-grow:1}.data-description{height:100%;display:flex;align-items:center;background-color:transparent;outline:none;border:none;color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color));font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size))}:host([variant=highlight]){--draggable-data-item-level-background-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-border-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-background-color-hover: var( --luzmo-background-color-highlight-hover );--draggable-data-item-level-font-color-hover: var(--luzmo-font-color-hover);--draggable-data-item-level-border-color-hover: var( --luzmo-background-color-highlight-hover )}:host{--draggable-data-item-level-height: var(--luzmo-component-height);--draggable-data-item-level-label-font-size: var(--luzmo-font-size);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-width: var(--luzmo-border-width);--draggable-data-item-level-border-style: solid;--draggable-data-item-level-border-color: var(--luzmo-border-color-hover);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-4);--draggable-data-item-level-font-color: var(--luzmo-font-color);--draggable-data-item-level-color-disabled: var(--luzmo-color-disabled);--draggable-data-item-level-background-color-disabled: var( --luzmo-background-color-disabled );--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-s);--luzmo-draggable-data-item-level-drag-handle-width: var( --draggable-data-item-level-icon-type-size );--luzmo-draggable-data-item-level-data-icon-width: calc( var(--draggable-data-item-level-icon-type-size) + var(--luzmo-spacing-3) );--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-s);--draggable-data-item-level-sublevel-border-color: transparent;--draggable-data-item-level-sublevel-background-color: transparent;--draggable-data-item-level-sublevel-background-color-disabled: transparent;--draggable-data-item-level-sublevel-margin-inline-start: calc( var(--draggable-data-item-level-gap) + var(--luzmo-draggable-data-item-level-drag-handle-width) );--luzmo-draggable-data-item-level-sublevel-drag-handle-width: var( --luzmo-draggable-data-item-level-data-icon-width );--draggable-data-item-level-sublevel-background-color-hover: rgba( var(--luzmo-border-color-rgb), .05 )}:host([hide-type-icon]){--draggable-data-item-level-sublevel-margin-inline-start: var( --draggable-data-item-level-gap )}:host(.highlighted) .draggable-data-item-level{background-color:var(--luzmo-primary);color:var(--luzmo-primary-inverse-color);border-color:var(--luzmo-primary)}:host([size=s]){--draggable-data-item-level-height: var(--luzmo-component-height-s);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-s);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-s);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-4);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-3);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-xs);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-xs)}:host([size=l]){--draggable-data-item-level-height: var(--luzmo-component-height-l);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-l);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-l);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-l);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size)}:host([size=xl]){--draggable-data-item-level-height: var(--luzmo-component-height-xl);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-xl);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-xl);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-xl);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-l);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-l)}:host{box-sizing:border-box}",M=a=>{var b,c,m,u,h,p,y,k,C,D,S,_,E,H,$,q,L;const o=a.source.element;let e="";(u=(m=(c=(b=a.source)==null?void 0:b.element)==null?void 0:c.renderRoot)==null?void 0:m.querySelector(".data-label"))!=null&&u.textContent&&(e=(y=(p=(h=a.source)==null?void 0:h.element)==null?void 0:p.renderRoot)==null?void 0:y.querySelector(".data-label").textContent),e||(e=R.localize((C=(k=a==null?void 0:a.source)==null?void 0:k.data)==null?void 0:C.label,(S=(D=a==null?void 0:a.source)==null?void 0:D.element)==null?void 0:S.language),e=e||"Untitled");const n=(E=(_=a==null?void 0:a.source)==null?void 0:_.data)==null?void 0:E.type,t=($=(H=a==null?void 0:a.source)==null?void 0:H.data)==null?void 0:$.subtype,d=I.calculateDataItemIcon({type:n,subtype:t},o.size),l={};[["borderColor","--luzmo-draggable-data-item-level-border-color","--draggable-data-item-level-border-color"],["backgroundColor","--luzmo-draggable-data-item-level-background-color","--draggable-data-item-level-background-color"],["color","--luzmo-draggable-data-item-level-font-color","--draggable-data-item-level-font-color"],["fontSize","--luzmo-draggable-data-item-level-label-font-size","--draggable-data-item-level-label-font-size"],["height","--luzmo-draggable-data-item-level-height","--draggable-data-item-level-height"],["borderRadius","--luzmo-draggable-data-item-level-border-radius","--draggable-data-item-level-border-radius"],["fontFamily","--luzmo-draggable-data-item-level-font-family","--luzmo-font-family"],["horizontalPadding","--luzmo-draggable-data-item-level-horizontal-padding","--draggable-data-item-level-horizontal-padding"],["gap","--luzmo-draggable-data-item-level-gap","--draggable-data-item-level-gap"]].forEach(([f,P,V])=>{const O=w.getCssVariableValue(o,P)||w.getCssVariableValue(o,V);l[f]=O});const s=document.createElement("div"),g=document.createElement("div");if(s.innerHTML=e,!((L=(q=a==null?void 0:a.source)==null?void 0:q.element)!=null&&L.sublevel)){const f=document.createElement("luzmo-icon");f.icon=d,g.append(f)}return g.append(s),Object.assign(g.style,{display:"flex",alignItems:"center",height:l.height,border:`1px solid ${l.borderColor}`,backgroundColor:l.backgroundColor,borderRadius:l.borderRadius,fontFamily:l.fontFamily,fontSize:l.fontSize,color:l.color,padding:`0 ${l.horizontalPadding}`,gap:l.gap}),g};var F=Object.defineProperty,v=(a,o,e,n)=>{for(var t=void 0,d=a.length-1,l;d>=0;d--)(l=a[d])&&(t=l(o,e,t)||t);return t&&F(o,e,t),t};const x=class x extends j.SizedMixin(T.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.language="en",this.data={},this._isCurrentlyHighlighted=!1,this._handleHighlight=o=>{var g,b,c,m,u,h;const e=o.detail??{},{columnId:n,level:t}=e,d=((g=this.data)==null?void 0:g.columnId)??((b=this.data)==null?void 0:b.column)??((c=this.data)==null?void 0:c.formulaId)??((m=this.data)==null?void 0:m.formula)??((u=this.data)==null?void 0:u.id),l=((h=this.data)==null?void 0:h.level)??0,s=d===n&&l===(t??0);if(this.classList.toggle("highlighted",s),s&&!this._isCurrentlyHighlighted){this._isCurrentlyHighlighted=!0;const p=this.getBoundingClientRect(),y=window.innerHeight||document.documentElement.clientHeight;if(p.top<0||p.bottom>y)try{this.scrollIntoView({block:"center"})}catch{this.scrollIntoView(!0)}}else!s&&this._isCurrentlyHighlighted&&(this._isCurrentlyHighlighted=!1)},this._clearHighlight=()=>{this.classList.remove("highlighted"),this._isCurrentlyHighlighted=!1},this.dataItemLevelDropped=o=>{this.dispatchEvent(new CustomEvent("data-item-dropped",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:o}}))},this.dataItemLevelDragStarted=()=>{this.dispatchEvent(new CustomEvent("data-item-drag-started",{bubbles:!0,composed:!0,cancelable:!0,detail:{data:this.data}}))}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupDraggable&&(this._cleanupDraggable(),this._cleanupDraggable=void 0),window.removeEventListener("slot-menu-highlight",this._handleHighlight),window.removeEventListener("slot-menu-inactive",this._clearHighlight)}connectedCallback(){super.connectedCallback(),window.addEventListener("slot-menu-highlight",this._handleHighlight),window.addEventListener("slot-menu-inactive",this._clearHighlight)}firstUpdated(o){this._cleanupDraggable=w.draggable({element:this,canDrag:()=>!this.disabled,onDragStart:()=>{this.style.opacity="0.5",this.dataItemLevelDragStarted()},onDrop:()=>{this.style.opacity="1",this.dataItemLevelDropped(this.data)},getInitialData:()=>{const e={...this.data};return this.label&&this.language&&!this.sublevel&&(e.label={},e.label[this.language]=this.label),this.description&&this.language&&(e.description={},e.description[this.language]=this.description),e},onGenerateDragPreview:e=>{const n=e.nativeSetDragImage;w.setCustomNativeDragPreview({render({container:t}){const d=M(e);t.append(d)},nativeSetDragImage:n})}})}render(){var t,d,l,s,g,b,c,m,u,h;const o=this.label??((d=(t=this.data)==null?void 0:t.label)==null?void 0:d[this.language])??((g=(l=this.data)==null?void 0:l.label)==null?void 0:g[Object.keys((s=this.data)==null?void 0:s.label)[0]])??"Untitled",e=this.description??((c=(b=this.data)==null?void 0:b.description)==null?void 0:c[this.language])??((h=(m=this.data)==null?void 0:m.description)==null?void 0:h[Object.keys((u=this.data)==null?void 0:u.description)[0]]),n=this.secondaryIconType?I.calculateDataItemSecondaryIcon(this.secondaryIconType,this.size):void 0;return r.x`
21
21
  <div class="draggable-data-item-level">
22
22
  <div class="drag-handle-icon">
23
23
  ${this.sublevel?z.y3(z.b0):z.y3(z.W)}
24
24
  </div>
25
25
  ${this.sublevel||this.hideTypeIcon?"":r.x`<div class="data-icon-type">
26
26
  <div class=${this.secondaryIconType?"with-secondary-icon":""}>
27
- ${z.y3(f.calculateDataItemIcon(this.data,this.size))}
27
+ ${z.y3(I.calculateDataItemIcon(this.data,this.size))}
28
28
  </div>
29
- ${s?r.x`<div class="secondary-icon">
30
- ${z.y3(s)}
29
+ ${n?r.x`<div class="secondary-icon">
30
+ ${z.y3(n)}
31
31
  </div>`:""}
32
32
  </div>`}
33
- <div class="data-label">${d}</div>
33
+ <div class="data-label">${o}</div>
34
34
  ${!this.sublevel&&e?r.x`<button class="data-description">
35
35
  ${z.y3(z.p1)}
36
36
  <luzmo-tooltip self-managed placement="top" size=${this.size}>
@@ -38,4 +38,4 @@
38
38
  </luzmo-tooltip>
39
39
  </button>`:""}
40
40
  </div>
41
- `}};k.styles=r.r(M);let o=k;n([r.n({type:String,reflect:!0})],o.prototype,"variant");n([r.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],o.prototype,"hideTypeIcon");n([r.n({type:Boolean,reflect:!0})],o.prototype,"sublevel");n([r.n({type:String,reflect:!0})],o.prototype,"language");n([r.n({type:Boolean,reflect:!0})],o.prototype,"disabled");n([r.n({type:String,reflect:!0})],o.prototype,"label");n([r.n({type:String,reflect:!0})],o.prototype,"description");n([r.n({type:String,reflect:!0,attribute:"secondary-icon-type"})],o.prototype,"secondaryIconType");n([r.n({type:Object})],o.prototype,"data");n([r.n({type:Array,attribute:"linked-datasets-ids",reflect:!0})],o.prototype,"linkedDatasetsIds");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",o);exports.LuzmoDraggableDataItemLevel=o;
41
+ `}};x.styles=r.r(B);let i=x;v([r.n({type:String,reflect:!0})],i.prototype,"variant");v([r.n({type:Boolean,reflect:!0,attribute:"hide-type-icon"})],i.prototype,"hideTypeIcon");v([r.n({type:Boolean,reflect:!0})],i.prototype,"sublevel");v([r.n({type:String,reflect:!0})],i.prototype,"language");v([r.n({type:Boolean,reflect:!0})],i.prototype,"disabled");v([r.n({type:String,reflect:!0})],i.prototype,"label");v([r.n({type:String,reflect:!0})],i.prototype,"description");v([r.n({type:String,reflect:!0,attribute:"secondary-icon-type"})],i.prototype,"secondaryIconType");v([r.n({type:Object})],i.prototype,"data");customElements.get("luzmo-draggable-data-item-level")||customElements.define("luzmo-draggable-data-item-level",i);exports.LuzmoDraggableDataItemLevel=i;
package/components/draggable-data-item-level/index.js CHANGED
@@ -17,33 +17,33 @@
17
17
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18
18
  * SOFTWARE.
19
19
  * */
20
- import { g as P, d as V, s as B } from "../get-css-variable-YlLiVgo8.js";
21
- import { a8 as z, ad as F, ae as q, af as A } from "../luzmo-icons-CVeTZ59u.js";
20
+ import { g as P, d as B, s as U } from "../get-css-variable-YlLiVgo8.js";
21
+ import { a8 as p, ad as F, ae as q, af as M } from "../luzmo-icons-CVeTZ59u.js";
22
22
  import "../index-BC1LV3vH.js";
23
23
  import "../index-BmshD32H.js";
24
- import { r as M, x as f, n as g } from "../property-DCzt3DR1.js";
24
+ import { r as A, x, n as m } from "../property-DCzt3DR1.js";
25
25
  import { L as G } from "../focusable-BbymtxWI.js";
26
26
  import { S as N } from "../sized-mixin-BGzkX2g1.js";
27
- import { c as T, a as W } from "../calculate-data-item-icon-Dpvf1aLI.js";
27
+ import { c as O, a as W } from "../calculate-data-item-icon-Dpvf1aLI.js";
28
28
  import { l as J } from "../localize-BX7q0S0M.js";
29
- const U = () => {
29
+ const j = () => {
30
30
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
31
31
  const e = document.createElement("style");
32
32
  e.setAttribute("data-luzmo-vars", ""), e.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-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(e);
33
33
  }
34
34
  };
35
- U();
35
+ j();
36
36
  const K = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family, var(--luzmo-font-family));color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color))}.draggable-data-item-level{transition:background-color var(--luzmo-animation-duration);background-color:var(--luzmo-draggable-data-item-level-background-color, var(--draggable-data-item-level-background-color));display:flex;justify-content:space-between;align-items:center;padding:0 var(--luzmo-draggable-data-item-level-horizontal-padding, var(--draggable-data-item-level-horizontal-padding));gap:var(--luzmo-draggable-data-item-level-gap, var(--draggable-data-item-level-gap));border-radius:var(--luzmo-draggable-data-item-level-border-radius, var(--draggable-data-item-level-border-radius));border-width:var(--luzmo-draggable-data-item-level-border-width, var(--draggable-data-item-level-border-width));border-style:var(--luzmo-draggable-data-item-level-border-style, var(--draggable-data-item-level-border-style));border-color:var(--luzmo-draggable-data-item-level-border-color, var(--draggable-data-item-level-border-color));height:var(--luzmo-draggable-data-item-level-height, var(--draggable-data-item-level-height));cursor:move}.draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-background-color-hover, var(--draggable-data-item-level-background-color-hover));color:var(--luzmo-draggable-data-item-level-font-color-hover, var(--draggable-data-item-level-font-color-hover));border-color:var(--luzmo-draggable-data-item-level-border-color-hover, var(--draggable-data-item-level-border-color-hover))}.draggable-data-item-level .data-label{font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([sublevel]) .draggable-data-item-level{height:var(--luzmo-draggable-data-item-level-sublevel-height, var(--draggable-data-item-level-sublevel-height));background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color, var(--draggable-data-item-level-sublevel-background-color));border-color:var(--luzmo-draggable-data-item-level-sublevel-border-color, var(--draggable-data-item-level-sublevel-border-color));margin-inline-start:var(--luzmo-draggable-data-item-level-sublevel-margin-inline-start, var(--draggable-data-item-level-sublevel-margin-inline-start))}:host([sublevel]) .draggable-data-item-level:hover{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-hover, var(--draggable-data-item-level-sublevel-background-color-hover))}:host([sublevel]) .draggable-data-item-level .drag-handle-icon{width:var(--luzmo-draggable-data-item-level-sublevel-drag-handle-width, var(--draggable-data-item-level-sublevel-drag-handle-width));text-align:center}:host([disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-background-color-disabled, var(--draggable-data-item-level-background-color-disabled));color:var(--luzmo-draggable-data-item-level-color-disabled, var(--draggable-data-item-level-color-disabled));cursor:not-allowed}:host([disabled]) .drag-handle-icon{opacity:.25}:host([sublevel][disabled]) .draggable-data-item-level{background-color:var(--luzmo-draggable-data-item-level-sublevel-background-color-disabled, var(--draggable-data-item-level-sublevel-background-color-disabled))}.drag-handle-icon{opacity:.6;font-size:var(--luzmo-draggable-data-item-level-drag-handle-size, var(--luzmo-draggable-data-item-level-drag-handle-size));width:var(--luzmo-draggable-data-item-level-drag-handle-width, var(--luzmo-draggable-data-item-level-drag-handle-width));text-align:center}.data-icon-type{width:var(--luzmo-draggable-data-item-level-data-icon-width, var(--luzmo-draggable-data-item-level-data-icon-width));text-align:center;position:relative}.with-secondary-icon{clip-path:polygon(0 0,60% 0,65% 60%,100% 65%,100% 100%,0 100%)}.secondary-icon{position:absolute;bottom:45%;left:70%;width:auto;font-size:.75em;line-height:1}.data-label{flex-grow:1}.data-description{height:100%;display:flex;align-items:center;background-color:transparent;outline:none;border:none;color:var(--luzmo-draggable-data-item-level-font-color, var(--draggable-data-item-level-font-color));font-size:var(--luzmo-draggable-data-item-level-label-font-size, var(--draggable-data-item-level-label-font-size))}:host([variant=highlight]){--draggable-data-item-level-background-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-border-color: var( --luzmo-background-color-highlight );--draggable-data-item-level-background-color-hover: var( --luzmo-background-color-highlight-hover );--draggable-data-item-level-font-color-hover: var(--luzmo-font-color-hover);--draggable-data-item-level-border-color-hover: var( --luzmo-background-color-highlight-hover )}:host{--draggable-data-item-level-height: var(--luzmo-component-height);--draggable-data-item-level-label-font-size: var(--luzmo-font-size);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-width: var(--luzmo-border-width);--draggable-data-item-level-border-style: solid;--draggable-data-item-level-border-color: var(--luzmo-border-color-hover);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-4);--draggable-data-item-level-font-color: var(--luzmo-font-color);--draggable-data-item-level-color-disabled: var(--luzmo-color-disabled);--draggable-data-item-level-background-color-disabled: var( --luzmo-background-color-disabled );--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-s);--luzmo-draggable-data-item-level-drag-handle-width: var( --draggable-data-item-level-icon-type-size );--luzmo-draggable-data-item-level-data-icon-width: calc( var(--draggable-data-item-level-icon-type-size) + var(--luzmo-spacing-3) );--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-s);--draggable-data-item-level-sublevel-border-color: transparent;--draggable-data-item-level-sublevel-background-color: transparent;--draggable-data-item-level-sublevel-background-color-disabled: transparent;--draggable-data-item-level-sublevel-margin-inline-start: calc( var(--draggable-data-item-level-gap) + var(--luzmo-draggable-data-item-level-drag-handle-width) );--luzmo-draggable-data-item-level-sublevel-drag-handle-width: var( --luzmo-draggable-data-item-level-data-icon-width );--draggable-data-item-level-sublevel-background-color-hover: rgba( var(--luzmo-border-color-rgb), .05 )}:host([hide-type-icon]){--draggable-data-item-level-sublevel-margin-inline-start: var( --draggable-data-item-level-gap )}:host(.highlighted) .draggable-data-item-level{background-color:var(--luzmo-primary);color:var(--luzmo-primary-inverse-color);border-color:var(--luzmo-primary)}:host([size=s]){--draggable-data-item-level-height: var(--luzmo-component-height-s);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-s);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-s);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-4);--draggable-data-item-level-border-radius: var(--luzmo-border-radius);--draggable-data-item-level-gap: var(--luzmo-spacing-3);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-xs);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-xs)}:host([size=l]){--draggable-data-item-level-height: var(--luzmo-component-height-l);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-l);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-l);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-l);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size)}:host([size=xl]){--draggable-data-item-level-height: var(--luzmo-component-height-xl);--draggable-data-item-level-label-font-size: var(--luzmo-font-size-xl);--draggable-data-item-level-icon-type-size: var(--luzmo-font-size-xl);--draggable-data-item-level-horizontal-padding: var(--luzmo-spacing-5);--draggable-data-item-level-border-radius: var(--luzmo-border-radius-xl);--draggable-data-item-level-gap: var(--luzmo-spacing-5);--draggable-data-item-level-sublevel-height: var(--luzmo-component-height-l);--luzmo-draggable-data-item-level-drag-handle-size: var(--luzmo-font-size-l)}:host{box-sizing:border-box}", Q = (e) => {
37
- var c, u, b, v, h, x, k, w, I, S, D, C, E, $, _, L, H;
37
+ var c, u, b, v, h, z, f, w, C, S, I, _, D, E, H, $, L;
38
38
  const t = e.source.element;
39
- let a = "";
40
- (v = (b = (u = (c = e.source) == null ? void 0 : c.element) == null ? void 0 : u.renderRoot) == null ? void 0 : b.querySelector(".data-label")) != null && v.textContent && (a = (k = (x = (h = e.source) == null ? void 0 : h.element) == null ? void 0 : x.renderRoot) == null ? void 0 : k.querySelector(
39
+ let l = "";
40
+ (v = (b = (u = (c = e.source) == null ? void 0 : c.element) == null ? void 0 : u.renderRoot) == null ? void 0 : b.querySelector(".data-label")) != null && v.textContent && (l = (f = (z = (h = e.source) == null ? void 0 : h.element) == null ? void 0 : z.renderRoot) == null ? void 0 : f.querySelector(
41
41
  ".data-label"
42
- ).textContent), a || (a = J(
43
- (I = (w = e == null ? void 0 : e.source) == null ? void 0 : w.data) == null ? void 0 : I.label,
44
- (D = (S = e == null ? void 0 : e.source) == null ? void 0 : S.element) == null ? void 0 : D.language
45
- ), a = a || "Untitled");
46
- const m = (E = (C = e == null ? void 0 : e.source) == null ? void 0 : C.data) == null ? void 0 : E.type, o = (_ = ($ = e == null ? void 0 : e.source) == null ? void 0 : $.data) == null ? void 0 : _.subtype, d = T({ type: m, subtype: o }, t.size), l = {};
42
+ ).textContent), l || (l = J(
43
+ (C = (w = e == null ? void 0 : e.source) == null ? void 0 : w.data) == null ? void 0 : C.label,
44
+ (I = (S = e == null ? void 0 : e.source) == null ? void 0 : S.element) == null ? void 0 : I.language
45
+ ), l = l || "Untitled");
46
+ const g = (D = (_ = e == null ? void 0 : e.source) == null ? void 0 : _.data) == null ? void 0 : D.type, o = (H = (E = e == null ? void 0 : e.source) == null ? void 0 : E.data) == null ? void 0 : H.subtype, r = O({ type: g, subtype: o }, t.size), a = {};
47
47
  [
48
48
  [
49
49
  "borderColor",
@@ -90,50 +90,54 @@ const K = ":host{font-family:var(--luzmo-draggable-data-item-level-font-family,
90
90
  "--luzmo-draggable-data-item-level-gap",
91
91
  "--draggable-data-item-level-gap"
92
92
  ]
93
- ].forEach(([p, j, O]) => {
94
- const R = P(t, j) || P(t, O);
95
- l[p] = R;
93
+ ].forEach(([y, R, T]) => {
94
+ const V = P(t, R) || P(t, T);
95
+ a[y] = V;
96
96
  });
97
- const s = document.createElement("div"), i = document.createElement("div");
98
- if (s.innerHTML = a, !((H = (L = e == null ? void 0 : e.source) == null ? void 0 : L.element) != null && H.sublevel)) {
99
- const p = document.createElement("luzmo-icon");
100
- p.icon = d, i.append(p);
97
+ const n = document.createElement("div"), d = document.createElement("div");
98
+ if (n.innerHTML = l, !((L = ($ = e == null ? void 0 : e.source) == null ? void 0 : $.element) != null && L.sublevel)) {
99
+ const y = document.createElement("luzmo-icon");
100
+ y.icon = r, d.append(y);
101
101
  }
102
- return i.append(s), Object.assign(i.style, {
102
+ return d.append(n), Object.assign(d.style, {
103
103
  display: "flex",
104
104
  alignItems: "center",
105
- height: l.height,
106
- border: `1px solid ${l.borderColor}`,
107
- backgroundColor: l.backgroundColor,
108
- borderRadius: l.borderRadius,
109
- fontFamily: l.fontFamily,
110
- fontSize: l.fontSize,
111
- color: l.color,
112
- padding: `0 ${l.horizontalPadding}`,
113
- gap: l.gap
114
- }), i;
105
+ height: a.height,
106
+ border: `1px solid ${a.borderColor}`,
107
+ backgroundColor: a.backgroundColor,
108
+ borderRadius: a.borderRadius,
109
+ fontFamily: a.fontFamily,
110
+ fontSize: a.fontSize,
111
+ color: a.color,
112
+ padding: `0 ${a.horizontalPadding}`,
113
+ gap: a.gap
114
+ }), d;
115
115
  };
116
- var X = Object.defineProperty, n = (e, t, a, m) => {
117
- for (var o = void 0, d = e.length - 1, l; d >= 0; d--)
118
- (l = e[d]) && (o = l(t, a, o) || o);
119
- return o && X(t, a, o), o;
116
+ var X = Object.defineProperty, s = (e, t, l, g) => {
117
+ for (var o = void 0, r = e.length - 1, a; r >= 0; r--)
118
+ (a = e[r]) && (o = a(t, l, o) || o);
119
+ return o && X(t, l, o), o;
120
120
  };
121
- const y = class y extends N(G, {
121
+ const k = class k extends N(G, {
122
122
  validSizes: ["s", "m", "l", "xl"],
123
123
  noDefaultSize: !0
124
124
  }) {
125
125
  constructor() {
126
- super(...arguments), this.language = "en", this.data = {}, this.linkedDatasetsIds = [], this._handleHighlight = (t) => {
127
- var i, c, u, b, v, h;
128
- const a = t.detail ?? {}, { id: m, level: o } = a, d = ((i = this.data) == null ? void 0 : i.columnId) ?? ((c = this.data) == null ? void 0 : c.column) ?? ((u = this.data) == null ? void 0 : u.formulaId) ?? ((b = this.data) == null ? void 0 : b.formula) ?? ((v = this.data) == null ? void 0 : v.id), l = ((h = this.data) == null ? void 0 : h.level) ?? 0, s = d === m && l === (o ?? 0);
129
- if (this.classList.toggle("highlighted", s), s)
130
- try {
131
- this.scrollIntoView({ block: "nearest" });
132
- } catch {
133
- this.scrollIntoView(!0);
134
- }
126
+ super(...arguments), this.language = "en", this.data = {}, this._isCurrentlyHighlighted = !1, this._handleHighlight = (t) => {
127
+ var d, c, u, b, v, h;
128
+ const l = t.detail ?? {}, { columnId: g, level: o } = l, r = ((d = this.data) == null ? void 0 : d.columnId) ?? ((c = this.data) == null ? void 0 : c.column) ?? ((u = this.data) == null ? void 0 : u.formulaId) ?? ((b = this.data) == null ? void 0 : b.formula) ?? ((v = this.data) == null ? void 0 : v.id), a = ((h = this.data) == null ? void 0 : h.level) ?? 0, n = r === g && a === (o ?? 0);
129
+ if (this.classList.toggle("highlighted", n), n && !this._isCurrentlyHighlighted) {
130
+ this._isCurrentlyHighlighted = !0;
131
+ const z = this.getBoundingClientRect(), f = window.innerHeight || document.documentElement.clientHeight;
132
+ if (z.top < 0 || z.bottom > f)
133
+ try {
134
+ this.scrollIntoView({ block: "center" });
135
+ } catch {
136
+ this.scrollIntoView(!0);
137
+ }
138
+ } else !n && this._isCurrentlyHighlighted && (this._isCurrentlyHighlighted = !1);
135
139
  }, this._clearHighlight = () => {
136
- this.classList.remove("highlighted");
140
+ this.classList.remove("highlighted"), this._isCurrentlyHighlighted = !1;
137
141
  }, this.dataItemLevelDropped = (t) => {
138
142
  this.dispatchEvent(
139
143
  new CustomEvent("data-item-dropped", {
@@ -141,8 +145,7 @@ const y = class y extends N(G, {
141
145
  composed: !0,
142
146
  cancelable: !0,
143
147
  detail: {
144
- data: t,
145
- linkedDatasetsIds: this.linkedDatasetsIds
148
+ data: t
146
149
  }
147
150
  })
148
151
  );
@@ -153,24 +156,20 @@ const y = class y extends N(G, {
153
156
  composed: !0,
154
157
  cancelable: !0,
155
158
  detail: {
156
- data: this.data,
157
- linkedDatasetsIds: this.linkedDatasetsIds
159
+ data: this.data
158
160
  }
159
161
  })
160
162
  );
161
163
  };
162
164
  }
163
165
  disconnectedCallback() {
164
- super.disconnectedCallback(), this._cleanupDraggable(), window.removeEventListener("slot-menu-highlight", this._handleHighlight), window.removeEventListener(
165
- "slot-menu-highlight-clear",
166
- this._clearHighlight
167
- );
166
+ super.disconnectedCallback(), this._cleanupDraggable && (this._cleanupDraggable(), this._cleanupDraggable = void 0), window.removeEventListener("slot-menu-highlight", this._handleHighlight), window.removeEventListener("slot-menu-inactive", this._clearHighlight);
168
167
  }
169
168
  connectedCallback() {
170
- super.connectedCallback(), window.addEventListener("slot-menu-highlight", this._handleHighlight), window.addEventListener("slot-menu-highlight-clear", this._clearHighlight);
169
+ super.connectedCallback(), window.addEventListener("slot-menu-highlight", this._handleHighlight), window.addEventListener("slot-menu-inactive", this._clearHighlight);
171
170
  }
172
171
  firstUpdated(t) {
173
- this._cleanupDraggable = V({
172
+ this._cleanupDraggable = B({
174
173
  element: this,
175
174
  canDrag: () => !this.disabled,
176
175
  onDragStart: () => {
@@ -180,87 +179,81 @@ const y = class y extends N(G, {
180
179
  this.style.opacity = "1", this.dataItemLevelDropped(this.data);
181
180
  },
182
181
  getInitialData: () => {
183
- const a = { ...this.data };
184
- return this.label && this.language && !this.sublevel && (a.label = {}, a.label[this.language] = this.label), this.description && this.language && (a.description = {}, a.description[this.language] = this.description), {
185
- ...a,
186
- linkedDatasetsIds: this.linkedDatasetsIds
187
- };
182
+ const l = { ...this.data };
183
+ return this.label && this.language && !this.sublevel && (l.label = {}, l.label[this.language] = this.label), this.description && this.language && (l.description = {}, l.description[this.language] = this.description), l;
188
184
  },
189
- onGenerateDragPreview: (a) => {
190
- const m = a.nativeSetDragImage;
191
- B({
185
+ onGenerateDragPreview: (l) => {
186
+ const g = l.nativeSetDragImage;
187
+ U({
192
188
  render({ container: o }) {
193
- const d = Q(a);
194
- o.append(d);
189
+ const r = Q(l);
190
+ o.append(r);
195
191
  },
196
- nativeSetDragImage: m
192
+ nativeSetDragImage: g
197
193
  });
198
194
  }
199
195
  });
200
196
  }
201
197
  render() {
202
- var o, d, l, s, i, c, u, b, v, h;
203
- const t = this.label ?? ((d = (o = this.data) == null ? void 0 : o.label) == null ? void 0 : d[this.language]) ?? ((i = (l = this.data) == null ? void 0 : l.label) == null ? void 0 : i[Object.keys((s = this.data) == null ? void 0 : s.label)[0]]) ?? "Untitled", a = this.description ?? ((u = (c = this.data) == null ? void 0 : c.description) == null ? void 0 : u[this.language]) ?? ((h = (b = this.data) == null ? void 0 : b.description) == null ? void 0 : h[Object.keys((v = this.data) == null ? void 0 : v.description)[0]]), m = this.secondaryIconType ? W(this.secondaryIconType, this.size) : void 0;
204
- return f`
198
+ var o, r, a, n, d, c, u, b, v, h;
199
+ const t = this.label ?? ((r = (o = this.data) == null ? void 0 : o.label) == null ? void 0 : r[this.language]) ?? ((d = (a = this.data) == null ? void 0 : a.label) == null ? void 0 : d[Object.keys((n = this.data) == null ? void 0 : n.label)[0]]) ?? "Untitled", l = this.description ?? ((u = (c = this.data) == null ? void 0 : c.description) == null ? void 0 : u[this.language]) ?? ((h = (b = this.data) == null ? void 0 : b.description) == null ? void 0 : h[Object.keys((v = this.data) == null ? void 0 : v.description)[0]]), g = this.secondaryIconType ? W(this.secondaryIconType, this.size) : void 0;
200
+ return x`
205
201
  <div class="draggable-data-item-level">
206
202
  <div class="drag-handle-icon">
207
- ${this.sublevel ? z(F) : z(q)}
203
+ ${this.sublevel ? p(F) : p(q)}
208
204
  </div>
209
- ${this.sublevel || this.hideTypeIcon ? "" : f`<div class="data-icon-type">
205
+ ${this.sublevel || this.hideTypeIcon ? "" : x`<div class="data-icon-type">
210
206
  <div class=${this.secondaryIconType ? "with-secondary-icon" : ""}>
211
- ${z(T(this.data, this.size))}
207
+ ${p(O(this.data, this.size))}
212
208
  </div>
213
- ${m ? f`<div class="secondary-icon">
214
- ${z(m)}
209
+ ${g ? x`<div class="secondary-icon">
210
+ ${p(g)}
215
211
  </div>` : ""}
216
212
  </div>`}
217
213
  <div class="data-label">${t}</div>
218
- ${!this.sublevel && a ? f`<button class="data-description">
219
- ${z(A)}
214
+ ${!this.sublevel && l ? x`<button class="data-description">
215
+ ${p(M)}
220
216
  <luzmo-tooltip self-managed placement="top" size=${this.size}>
221
- ${a}
217
+ ${l}
222
218
  </luzmo-tooltip>
223
219
  </button>` : ""}
224
220
  </div>
225
221
  `;
226
222
  }
227
223
  };
228
- y.styles = M(K);
229
- let r = y;
230
- n([
231
- g({ type: String, reflect: !0 })
232
- ], r.prototype, "variant");
233
- n([
234
- g({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
235
- ], r.prototype, "hideTypeIcon");
236
- n([
237
- g({ type: Boolean, reflect: !0 })
238
- ], r.prototype, "sublevel");
239
- n([
240
- g({ type: String, reflect: !0 })
241
- ], r.prototype, "language");
242
- n([
243
- g({ type: Boolean, reflect: !0 })
244
- ], r.prototype, "disabled");
245
- n([
246
- g({ type: String, reflect: !0 })
247
- ], r.prototype, "label");
248
- n([
249
- g({ type: String, reflect: !0 })
250
- ], r.prototype, "description");
251
- n([
252
- g({ type: String, reflect: !0, attribute: "secondary-icon-type" })
253
- ], r.prototype, "secondaryIconType");
254
- n([
255
- g({ type: Object })
256
- ], r.prototype, "data");
257
- n([
258
- g({ type: Array, attribute: "linked-datasets-ids", reflect: !0 })
259
- ], r.prototype, "linkedDatasetsIds");
224
+ k.styles = A(K);
225
+ let i = k;
226
+ s([
227
+ m({ type: String, reflect: !0 })
228
+ ], i.prototype, "variant");
229
+ s([
230
+ m({ type: Boolean, reflect: !0, attribute: "hide-type-icon" })
231
+ ], i.prototype, "hideTypeIcon");
232
+ s([
233
+ m({ type: Boolean, reflect: !0 })
234
+ ], i.prototype, "sublevel");
235
+ s([
236
+ m({ type: String, reflect: !0 })
237
+ ], i.prototype, "language");
238
+ s([
239
+ m({ type: Boolean, reflect: !0 })
240
+ ], i.prototype, "disabled");
241
+ s([
242
+ m({ type: String, reflect: !0 })
243
+ ], i.prototype, "label");
244
+ s([
245
+ m({ type: String, reflect: !0 })
246
+ ], i.prototype, "description");
247
+ s([
248
+ m({ type: String, reflect: !0, attribute: "secondary-icon-type" })
249
+ ], i.prototype, "secondaryIconType");
250
+ s([
251
+ m({ type: Object })
252
+ ], i.prototype, "data");
260
253
  customElements.get("luzmo-draggable-data-item-level") || customElements.define(
261
254
  "luzmo-draggable-data-item-level",
262
- r
255
+ i
263
256
  );
264
257
  export {
265
- r as LuzmoDraggableDataItemLevel
258
+ i as LuzmoDraggableDataItemLevel
266
259
  };
package/components/droppable-slot/droppable-slot.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { Placement } from '@floating-ui/dom';
2
1
  import { ItemType, SlotName, VizItemSlots } from '@luzmo/dashboard-contents-types';
2
+ import { Placement } from '@luzmo/lucero';
3
3
  import '@luzmo/lucero/tooltip';
4
4
  import { PropertyValues } from 'lit';
5
5
  import { LuzmoElement } from '../../utils/base';
@@ -49,10 +49,15 @@ export declare class LuzmoDroppableSlot extends LuzmoDroppableSlot_base {
49
49
  hideDelete?: boolean;
50
50
  hideConfiguration?: boolean;
51
51
  private _slotMenuElement;
52
+ private _overlayElement;
52
53
  private _slotContents;
53
54
  private readonly _store;
54
55
  private _currentSlotContents;
56
+ private _lastFetchedDatasetId;
57
+ private _linkedDatasetsIds;
55
58
  constructor();
59
+ private _attachDroppable;
60
+ connectedCallback(): void;
56
61
  private changedSlotContents;
57
62
  private _cleanupDroppable;
58
63
  disconnectedCallback(): void;