@luzmo/analytics-components-kit 1.0.9-beta.11 → 1.0.9-beta.12

package/components/{item-slot-drop-panel-CFerKcdH.cjs → item-slot-drop-panel-CdCEWBGb.cjs}

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-require("./tokens-BWMfo_w4.cjs");const e=require("./base-BmvsQ-s1.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./localized-mixin-Bt25Frg1.cjs"),r=require("./slots-config-Cd4xAG4H.cjs");require("./item-slot-drop-DrJRtG7b.cjs");let i=require("lit"),a=require("lit/decorators.js"),o=require("@lit/localize"),s=require("lit/directives/if-defined.js"),c=require("@lit/task"),l=require("lit/directives/style-map.js");var u=`auto`;function d(e){let t={};return e.forEach((e,n)=>{t[e]={column:1,row:n+1,align:`center`,justify:`center`,rotate:!1}}),{grid:{columns:1,rows:e.length,columnSizes:[`1fr`],rowSizes:e.map(()=>u),gap:`0`},slots:t}}var f={"area-chart":()=>Promise.resolve().then(()=>require("./area-chart-positioning.config-CoCdjr2E.cjs")),"bar-chart":()=>Promise.resolve().then(()=>require("./bar-chart-positioning.config-fsB82756.cjs")),"box-plot":()=>Promise.resolve().then(()=>require("./box-plot-positioning.config-BMfGGDfe.cjs")),"bubble-chart":()=>Promise.resolve().then(()=>require("./bubble-chart-positioning.config-C9MmTtTX.cjs")),"bullet-chart":()=>Promise.resolve().then(()=>require("./bullet-chart-positioning.config-BwHPM5ui.cjs")),"choropleth-map":()=>Promise.resolve().then(()=>require("./choropleth-map-positioning.config-C0m6zzD3.cjs")),"circle-pack-chart":()=>Promise.resolve().then(()=>require("./circle-pack-chart-positioning.config-BAFFQSHe.cjs")),"circular-gauge":()=>Promise.resolve().then(()=>require("./circular-gauge-positioning.config-BfWAjAY2.cjs")),"column-chart":()=>Promise.resolve().then(()=>require("./column-chart-positioning.config-xgRuA_l5.cjs")),"combination-chart":()=>Promise.resolve().then(()=>require("./combination-chart-positioning.config-D0TU4hge.cjs")),"conditional-number":()=>Promise.resolve().then(()=>require("./conditional-number-positioning.config-B_yISWne.cjs")),"date-comparison-filter":()=>Promise.resolve().then(()=>require("./date-comparison-filter-positioning.config-DZI9jN5L.cjs")),"date-filter":()=>Promise.resolve().then(()=>require("./date-filter-positioning.config-CtEFg3RO.cjs")),"donut-chart":()=>Promise.resolve().then(()=>require("./donut-chart-positioning.config-DQb53kWI.cjs")),"dropdown-filter":()=>Promise.resolve().then(()=>require("./dropdown-filter-positioning.config-Ck97Moc_.cjs")),"evolution-number":()=>Promise.resolve().then(()=>require("./evolution-number-positioning.config-BzBsGcD4.cjs")),"funnel-chart":()=>Promise.resolve().then(()=>require("./funnel-chart-positioning.config-DleNZIG-.cjs")),"heat-map":()=>Promise.resolve().then(()=>require("./heat-map-positioning.config-DCB3Eagz.cjs")),"heat-table":()=>Promise.resolve().then(()=>require("./heat-table-positioning.config-Dnu133l4.cjs")),"hexbin-map":()=>Promise.resolve().then(()=>require("./hexbin-map-positioning.config-IqRt8f29.cjs")),"line-chart":()=>Promise.resolve().then(()=>require("./line-chart-positioning.config-DX5mLAP7.cjs")),"marker-map":()=>Promise.resolve().then(()=>require("./marker-map-positioning.config-C0V5LZG-.cjs")),"ohlc-chart":()=>Promise.resolve().then(()=>require("./ohlc-chart-positioning.config-Bu1_IBVK.cjs")),"parallel-coordinates-plot":()=>Promise.resolve().then(()=>require("./parallel-coordinates-plot-positioning.config-EJz1XA1k.cjs")),"pivot-table":()=>Promise.resolve().then(()=>require("./pivot-table-positioning.config-CMzGb-BR.cjs")),"pyramid-chart":()=>Promise.resolve().then(()=>require("./pyramid-chart-positioning.config-CrU2vKM-.cjs")),"radar-chart":()=>Promise.resolve().then(()=>require("./radar-chart-positioning.config-BEzqTXyr.cjs")),"regular-table":()=>Promise.resolve().then(()=>require("./regular-table-positioning.config-CXabhyJu.cjs")),"route-map":()=>Promise.resolve().then(()=>require("./route-map-positioning.config-BgjizdWh.cjs")),"sankey-diagram":()=>Promise.resolve().then(()=>require("./sankey-diagram-positioning.config-vccTz1pG.cjs")),"scatter-plot":()=>Promise.resolve().then(()=>require("./scatter-plot-positioning.config-D7uFFBVZ.cjs")),"search-filter":()=>Promise.resolve().then(()=>require("./search-filter-positioning.config-BvwxJS-1.cjs")),"slicer-filter":()=>Promise.resolve().then(()=>require("./slicer-filter-positioning.config-D1kR4xly.cjs")),"slider-filter":()=>Promise.resolve().then(()=>require("./slider-filter-positioning.config-a7tK-5va.cjs")),"speedometer-chart":()=>Promise.resolve().then(()=>require("./speedometer-chart-positioning.config-fa90zZdb.cjs")),"spike-map":()=>Promise.resolve().then(()=>require("./spike-map-positioning.config-DrxdeFsj.cjs")),"strip-plot":()=>Promise.resolve().then(()=>require("./strip-plot-positioning.config-Bx_fqmEj.cjs")),"sunburst-chart":()=>Promise.resolve().then(()=>require("./sunburst-chart-positioning.config-D-GRWmyF.cjs")),"symbol-map":()=>Promise.resolve().then(()=>require("./symbol-map-positioning.config-B0sLlLzK.cjs")),"treemap-chart":()=>Promise.resolve().then(()=>require("./treemap-chart-positioning.config-CO05Gv7X.cjs")),"venn-diagram":()=>Promise.resolve().then(()=>require("./venn-diagram-positioning.config-DKXWVaUI.cjs")),"wordcloud-chart":()=>Promise.resolve().then(()=>require("./wordcloud-chart-positioning.config-CgbB_SI0.cjs"))},p=e=>`${e.replaceAll(/-([a-z])/g,(e,t)=>t.toUpperCase())}PositioningConfig`,m=async e=>{try{let t=f[e];return t?(await t())[p(e)]??null:null}catch{return null}},h=e=>e?m(e):Promise.resolve(null),g=`:host{font-size:var(--luzmo-item-slot-drop-panel-font-size,var(--luzmo-font-size));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2));display:block}:host([size=s]){font-size:var(--luzmo-item-slot-drop-panel-font-size-s,var(--luzmo-font-size-s));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-3);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-3);--luzmo-slot-cell-padding-inline-max:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-block-max:var(--luzmo-spacing-5)}:host([size=l]){font-size:var(--luzmo-item-slot-drop-panel-font-size-l,var(--luzmo-font-size-l));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1))}:host([size=xl]){font-size:var(--luzmo-item-slot-drop-panel-font-size-xl,var(--luzmo-font-size-xl));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))}.slots-panel{align-items:var(--luzmo-item-slot-drop-panel-align,center);gap:var(--luzmo-item-slot-drop-panel-gap,var(--luzmo-spacing-4));flex-direction:column;display:flex}.slots-panel luzmo-item-slot-drop{flex:0 auto;min-width:0;max-width:100%}:host([grows]) .slots-panel luzmo-item-slot-drop{width:100%}.slots-grid{box-sizing:border-box;container:slots-grid/size}.slots-grid luzmo-item-slot-drop{height:var(--luzmo-item-slot-drop-height,var(--item-slot-drop-height));display:block}.slots-grid luzmo-item-slot-drop[rotate]{height:auto}.slot-cell{box-sizing:border-box;min-width:0;min-height:0;padding-inline:var(--luzmo-slot-cell-padding-inline-min);padding-block:var(--luzmo-slot-cell-padding-block-min);justify-content:center;align-items:center;display:flex}@container slots-grid (width>=320px){.slot-cell{padding-inline:calc((var(--luzmo-slot-cell-padding-inline-min) + var(--luzmo-slot-cell-padding-inline-max)) / 2)}}@container slots-grid (width>=640px){.slot-cell{padding-inline:var(--luzmo-slot-cell-padding-inline-max)}}@container slots-grid (height>=240px){.slot-cell{padding-block:calc((var(--luzmo-slot-cell-padding-block-min) + var(--luzmo-slot-cell-padding-block-max)) / 2)}}@container slots-grid (height>=480px){.slot-cell{padding-block:var(--luzmo-slot-cell-padding-block-max)}}:host([positioned]){width:100%;height:100%;min-width:var(--luzmo-item-slot-drop-panel-min-width,150px);min-height:var(--luzmo-item-slot-drop-panel-min-height,150px)}`,_,v=(_=class extends n.t(e.n(e.i,{validSizes:[`s`,`m`,`l`,`xl`],noDefaultSize:!0})){constructor(...e){super(...e),this._loadSlotsConfig=new c.Task(this,{task:async([e,t])=>{if(e&&e!==this._itemTypeLoaded){this._itemTypeLoaded=e;let n=await r.t(e);return this._slotsConfig=n??[],this._positioningConfig=t?await h(e):null,this._slotsConfig}return this._slotsConfig},args:()=>[this.itemType,this.positioned,this.language]}),this._slotsConfig=[],this._positioningConfig=null,this.contentLanguage=`en`,this.slotsContents=[],this.positioned=!1,this.slotMenuPlacement=`bottom-end`,this.hideDelete=!0,this.hideConfiguration=!1,this.constraintMode=`auto`,this.slotMenuMode=`default`,this.apiUrl=`https://api.luzmo.com`,this.authKey=``,this.authToken=``,this._currentSlotsContents=[],this._createSlotChangeHandler=e=>t=>{t.stopPropagation();let n=t.detail.slotContents??[],r=t.detail.linkedDatasetsIds??[],i=this._applySlotConstraints(e,n,r);if(i===null){t.preventDefault();return}this._currentSlotsContents=i,this.slotsContents=structuredClone(i),this.dispatchEvent(new CustomEvent(`luzmo-slots-contents-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotsContents:i,linkedDatasetsIds:r}}))}}willUpdate(e){super.willUpdate(e),e.has(`slotsContents`)&&(this._currentSlotsContents=structuredClone(this.slotsContents??[])),e.has(`positioned`)&&this.itemType&&(this._itemTypeLoaded=void 0)}_getDatasetIdFromContent(e){return e?.set??e?.datasetId}_isDatasetLinked(e,t,n){if(t.size===0||t.has(e))return!0;for(let e of t)if(n.includes(e))return!0;for(let e of n)if(t.has(e))return!0;return!1}_applySlotConstraints(e,t,n=[]){let r=this.slotsConfiguration??this._slotsConfig,i=structuredClone(this._currentSlotsContents),a=structuredClone(this._currentSlotsContents),o=[];if(t.length>0){let r=new Set;for(let e of this._currentSlotsContents)for(let t of e.content??[]){let e=this._getDatasetIdFromContent(t);e&&r.add(e)}let i=t[t.length-1],s=this._getDatasetIdFromContent(i);if(s&&!this._isDatasetLinked(s,r,n)){for(let t of a)t.name!==e&&t.content.length>0&&(o.push({type:`clearSlotsWhenUnlinkedDataset`,affectedSlotName:t.name,triggeredBySlotName:e}),t.content=[]);(this._currentSlotsContents.find(t=>t.name===e)?.content?.length??0)>0&&o.push({type:`clearSlotsWhenUnlinkedDataset`,affectedSlotName:e,triggeredBySlotName:e}),t=[i]}}let s=a.findIndex(t=>t.name===e);s===-1?a.push({name:e,content:t}):a[s].content=t;for(let n of r){if(n.keepOnlyFirstWhenOtherSlotFilled?.includes(e)&&t.length>0){let t=a.findIndex(e=>e.name===n.name);t!==-1&&a[t].content.length>1&&(o.push({type:`keepOnlyFirstWhenOtherSlotFilled`,affectedSlotName:n.name,triggeredBySlotName:e}),a[t].content=[a[t].content[0]])}if(n.clearWhenOtherSlotHasMultipleItems?.includes(e)&&t.length>1){let t=a.findIndex(e=>e.name===n.name);t!==-1&&a[t].content.length>0&&(o.push({type:`clearWhenOtherSlotHasMultipleItems`,affectedSlotName:n.name,triggeredBySlotName:e}),a[t].content=[])}}if(this.constraintMode===`event-only`&&o.length>0){let n={triggerSlotName:e,proposedTriggerContents:t,originalSlotsContents:i,proposedSlotsContents:a,constraints:o};return this.dispatchEvent(new CustomEvent(`luzmo-slot-constraint-triggered`,{detail:n,bubbles:!0,composed:!0})),null}return a}_getPositioningConfig(){return this.positioningConfiguration??this._positioningConfig}_renderSlot(e,t){let n=this._createSlotChangeHandler(e.name),r=this.positioned?t?.rotate??!1:!1;return i.html`
+require("./tokens-BWMfo_w4.cjs");const e=require("./base-BdkFbMZR.cjs"),t=require("./decorate-DCJt-2rt.cjs"),n=require("./localized-mixin-DceE4W-d.cjs"),r=require("./slots-config-Cd4xAG4H.cjs");require("./item-slot-drop-B7JmgKMJ.cjs");let i=require("lit"),a=require("lit/decorators.js"),o=require("@lit/localize"),s=require("lit/directives/if-defined.js"),c=require("@lit/task"),l=require("lit/directives/style-map.js");var u=`auto`;function d(e){let t={};return e.forEach((e,n)=>{t[e]={column:1,row:n+1,align:`center`,justify:`center`,rotate:!1}}),{grid:{columns:1,rows:e.length,columnSizes:[`1fr`],rowSizes:e.map(()=>u),gap:`0`},slots:t}}var f={"area-chart":()=>Promise.resolve().then(()=>require("./area-chart-positioning.config-DWLy-uS1.cjs")),"bar-chart":()=>Promise.resolve().then(()=>require("./bar-chart-positioning.config-B3U1-22D.cjs")),"box-plot":()=>Promise.resolve().then(()=>require("./box-plot-positioning.config-lfqDTCdY.cjs")),"bubble-chart":()=>Promise.resolve().then(()=>require("./bubble-chart-positioning.config-DVBuVeSs.cjs")),"bullet-chart":()=>Promise.resolve().then(()=>require("./bullet-chart-positioning.config-CtlmKdzp.cjs")),"choropleth-map":()=>Promise.resolve().then(()=>require("./choropleth-map-positioning.config-ahRkoZNv.cjs")),"circle-pack-chart":()=>Promise.resolve().then(()=>require("./circle-pack-chart-positioning.config-CS1dbWgR.cjs")),"circular-gauge":()=>Promise.resolve().then(()=>require("./circular-gauge-positioning.config-BeLsxbow.cjs")),"column-chart":()=>Promise.resolve().then(()=>require("./column-chart-positioning.config-CLZuZiVa.cjs")),"combination-chart":()=>Promise.resolve().then(()=>require("./combination-chart-positioning.config-DKNRMoZN.cjs")),"conditional-number":()=>Promise.resolve().then(()=>require("./conditional-number-positioning.config-HXcO-Ej5.cjs")),"date-comparison-filter":()=>Promise.resolve().then(()=>require("./date-comparison-filter-positioning.config-DZI9jN5L.cjs")),"date-filter":()=>Promise.resolve().then(()=>require("./date-filter-positioning.config-CtEFg3RO.cjs")),"donut-chart":()=>Promise.resolve().then(()=>require("./donut-chart-positioning.config-xwoqdu-c.cjs")),"dropdown-filter":()=>Promise.resolve().then(()=>require("./dropdown-filter-positioning.config-Ck97Moc_.cjs")),"evolution-number":()=>Promise.resolve().then(()=>require("./evolution-number-positioning.config-CfcajD4B.cjs")),"funnel-chart":()=>Promise.resolve().then(()=>require("./funnel-chart-positioning.config-2mR2EyN4.cjs")),"heat-map":()=>Promise.resolve().then(()=>require("./heat-map-positioning.config-CwcQrF53.cjs")),"heat-table":()=>Promise.resolve().then(()=>require("./heat-table-positioning.config-D8UNVnTk.cjs")),"hexbin-map":()=>Promise.resolve().then(()=>require("./hexbin-map-positioning.config-Dn-bgQZ8.cjs")),"line-chart":()=>Promise.resolve().then(()=>require("./line-chart-positioning.config-DaDYXk9Z.cjs")),"marker-map":()=>Promise.resolve().then(()=>require("./marker-map-positioning.config-BGDRklk5.cjs")),"ohlc-chart":()=>Promise.resolve().then(()=>require("./ohlc-chart-positioning.config-CHJbhqWA.cjs")),"parallel-coordinates-plot":()=>Promise.resolve().then(()=>require("./parallel-coordinates-plot-positioning.config-CnyUP9E-.cjs")),"pivot-table":()=>Promise.resolve().then(()=>require("./pivot-table-positioning.config-BvD825Uc.cjs")),"pyramid-chart":()=>Promise.resolve().then(()=>require("./pyramid-chart-positioning.config-DKd65Pdf.cjs")),"radar-chart":()=>Promise.resolve().then(()=>require("./radar-chart-positioning.config-oPyZCdrF.cjs")),"regular-table":()=>Promise.resolve().then(()=>require("./regular-table-positioning.config-CXabhyJu.cjs")),"route-map":()=>Promise.resolve().then(()=>require("./route-map-positioning.config-BCOVbseo.cjs")),"sankey-diagram":()=>Promise.resolve().then(()=>require("./sankey-diagram-positioning.config-Da0e_DAS.cjs")),"scatter-plot":()=>Promise.resolve().then(()=>require("./scatter-plot-positioning.config-vR2_9XYh.cjs")),"search-filter":()=>Promise.resolve().then(()=>require("./search-filter-positioning.config-BvwxJS-1.cjs")),"slicer-filter":()=>Promise.resolve().then(()=>require("./slicer-filter-positioning.config-Byf9Q8gT.cjs")),"slider-filter":()=>Promise.resolve().then(()=>require("./slider-filter-positioning.config-a7tK-5va.cjs")),"speedometer-chart":()=>Promise.resolve().then(()=>require("./speedometer-chart-positioning.config-DfnWIx7U.cjs")),"spike-map":()=>Promise.resolve().then(()=>require("./spike-map-positioning.config-DPbVWLF7.cjs")),"strip-plot":()=>Promise.resolve().then(()=>require("./strip-plot-positioning.config-Czz4B-U5.cjs")),"sunburst-chart":()=>Promise.resolve().then(()=>require("./sunburst-chart-positioning.config-g8eXAhP4.cjs")),"symbol-map":()=>Promise.resolve().then(()=>require("./symbol-map-positioning.config-Be2wvwUD.cjs")),"treemap-chart":()=>Promise.resolve().then(()=>require("./treemap-chart-positioning.config-CvMw2lMe.cjs")),"venn-diagram":()=>Promise.resolve().then(()=>require("./venn-diagram-positioning.config-CJbmXy8r.cjs")),"wordcloud-chart":()=>Promise.resolve().then(()=>require("./wordcloud-chart-positioning.config-BYz4mqOF.cjs"))},p=e=>`${e.replaceAll(/-([a-z])/g,(e,t)=>t.toUpperCase())}PositioningConfig`,m=async e=>{try{let t=f[e];return t?(await t())[p(e)]??null:null}catch{return null}},h=e=>e?m(e):Promise.resolve(null),g=`:host{font-size:var(--luzmo-item-slot-drop-panel-font-size,var(--luzmo-font-size));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-2));display:block}:host([size=s]){font-size:var(--luzmo-item-slot-drop-panel-font-size-s,var(--luzmo-font-size-s));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-3);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-3);--luzmo-slot-cell-padding-inline-max:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-block-max:var(--luzmo-spacing-5)}:host([size=l]){font-size:var(--luzmo-item-slot-drop-panel-font-size-l,var(--luzmo-font-size-l));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-4);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-1))}:host([size=xl]){font-size:var(--luzmo-item-slot-drop-panel-font-size-xl,var(--luzmo-font-size-xl));--luzmo-slot-cell-padding-inline-min:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-block-min:var(--luzmo-spacing-5);--luzmo-slot-cell-padding-inline-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2));--luzmo-slot-cell-padding-block-max:calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2))}.slots-panel{align-items:var(--luzmo-item-slot-drop-panel-align,center);gap:var(--luzmo-item-slot-drop-panel-gap,var(--luzmo-spacing-4));flex-direction:column;display:flex}.slots-panel luzmo-item-slot-drop{flex:0 auto;min-width:0;max-width:100%}:host([grows]) .slots-panel luzmo-item-slot-drop{width:100%}.slots-grid{box-sizing:border-box;container:slots-grid/size}.slots-grid luzmo-item-slot-drop{height:var(--luzmo-item-slot-drop-height,var(--item-slot-drop-height));display:block}.slots-grid luzmo-item-slot-drop[rotate]{height:auto}.slot-cell{box-sizing:border-box;min-width:0;min-height:0;padding-inline:var(--luzmo-slot-cell-padding-inline-min);padding-block:var(--luzmo-slot-cell-padding-block-min);justify-content:center;align-items:center;display:flex}@container slots-grid (width>=320px){.slot-cell{padding-inline:calc((var(--luzmo-slot-cell-padding-inline-min) + var(--luzmo-slot-cell-padding-inline-max)) / 2)}}@container slots-grid (width>=640px){.slot-cell{padding-inline:var(--luzmo-slot-cell-padding-inline-max)}}@container slots-grid (height>=240px){.slot-cell{padding-block:calc((var(--luzmo-slot-cell-padding-block-min) + var(--luzmo-slot-cell-padding-block-max)) / 2)}}@container slots-grid (height>=480px){.slot-cell{padding-block:var(--luzmo-slot-cell-padding-block-max)}}:host([positioned]){width:100%;height:100%;min-width:var(--luzmo-item-slot-drop-panel-min-width,150px);min-height:var(--luzmo-item-slot-drop-panel-min-height,150px)}`,_,v=(_=class extends n.t(e.n(e.i,{validSizes:[`s`,`m`,`l`,`xl`],noDefaultSize:!0})){constructor(...e){super(...e),this._loadSlotsConfig=new c.Task(this,{task:async([e,t])=>{if(e&&e!==this._itemTypeLoaded){this._itemTypeLoaded=e;let n=await r.t(e);return this._slotsConfig=n??[],this._positioningConfig=t?await h(e):null,this._slotsConfig}return this._slotsConfig},args:()=>[this.itemType,this.positioned,this.language]}),this._slotsConfig=[],this._positioningConfig=null,this.contentLanguage=`en`,this.slotsContents=[],this.positioned=!1,this.slotMenuPlacement=`bottom-end`,this.hideDelete=!0,this.hideConfiguration=!1,this.constraintMode=`auto`,this.slotMenuMode=`default`,this.apiUrl=`https://api.luzmo.com`,this.authKey=``,this.authToken=``,this._currentSlotsContents=[],this._createSlotChangeHandler=e=>t=>{t.stopPropagation();let n=t.detail.slotContents??[],r=t.detail.linkedDatasetsIds??[],i=this._applySlotConstraints(e,n,r);if(i===null){t.preventDefault();return}this._currentSlotsContents=i,this.slotsContents=structuredClone(i),this.dispatchEvent(new CustomEvent(`luzmo-slots-contents-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{slotsContents:i,linkedDatasetsIds:r}}))}}willUpdate(e){super.willUpdate(e),e.has(`slotsContents`)&&(this._currentSlotsContents=structuredClone(this.slotsContents??[])),e.has(`positioned`)&&this.itemType&&(this._itemTypeLoaded=void 0)}_getDatasetIdFromContent(e){return e?.set??e?.datasetId}_isDatasetLinked(e,t,n){if(t.size===0||t.has(e))return!0;for(let e of t)if(n.includes(e))return!0;for(let e of n)if(t.has(e))return!0;return!1}_applySlotConstraints(e,t,n=[]){let r=this.slotsConfiguration??this._slotsConfig,i=structuredClone(this._currentSlotsContents),a=structuredClone(this._currentSlotsContents),o=[];if(t.length>0){let r=new Set;for(let e of this._currentSlotsContents)for(let t of e.content??[]){let e=this._getDatasetIdFromContent(t);e&&r.add(e)}let i=t[t.length-1],s=this._getDatasetIdFromContent(i);if(s&&!this._isDatasetLinked(s,r,n)){for(let t of a)t.name!==e&&t.content.length>0&&(o.push({type:`clearSlotsWhenUnlinkedDataset`,affectedSlotName:t.name,triggeredBySlotName:e}),t.content=[]);(this._currentSlotsContents.find(t=>t.name===e)?.content?.length??0)>0&&o.push({type:`clearSlotsWhenUnlinkedDataset`,affectedSlotName:e,triggeredBySlotName:e}),t=[i]}}let s=a.findIndex(t=>t.name===e);s===-1?a.push({name:e,content:t}):a[s].content=t;for(let n of r){if(n.keepOnlyFirstWhenOtherSlotFilled?.includes(e)&&t.length>0){let t=a.findIndex(e=>e.name===n.name);t!==-1&&a[t].content.length>1&&(o.push({type:`keepOnlyFirstWhenOtherSlotFilled`,affectedSlotName:n.name,triggeredBySlotName:e}),a[t].content=[a[t].content[0]])}if(n.clearWhenOtherSlotHasMultipleItems?.includes(e)&&t.length>1){let t=a.findIndex(e=>e.name===n.name);t!==-1&&a[t].content.length>0&&(o.push({type:`clearWhenOtherSlotHasMultipleItems`,affectedSlotName:n.name,triggeredBySlotName:e}),a[t].content=[])}}if(this.constraintMode===`event-only`&&o.length>0){let n={triggerSlotName:e,proposedTriggerContents:t,originalSlotsContents:i,proposedSlotsContents:a,constraints:o};return this.dispatchEvent(new CustomEvent(`luzmo-slot-constraint-triggered`,{detail:n,bubbles:!0,composed:!0})),null}return a}_getPositioningConfig(){return this.positioningConfiguration??this._positioningConfig}_renderSlot(e,t){let n=this._createSlotChangeHandler(e.name),r=this.positioned?t?.rotate??!1:!1;return i.html`
       <luzmo-item-slot-drop
         part="item-slot-drop"
         item-type=${(0,s.ifDefined)(this.itemType)}

package/components/item-slot-picker/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-slot-picker-aqePvZ9B.cjs");Object.defineProperty(exports,"LuzmoItemSlotPicker",{enumerable:!0,get:function(){return e.t}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-slot-picker-BvrK1U4h.cjs");Object.defineProperty(exports,"LuzmoItemSlotPicker",{enumerable:!0,get:function(){return e.t}});

package/components/item-slot-picker/index.js

@@ -17,5 +17,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { t as e } from "../item-slot-picker-BdfYcBKT.js";
+import { t as e } from "../item-slot-picker-BiHy7QX1.js";
 export { e as LuzmoItemSlotPicker };

package/components/item-slot-picker/item-slot-picker.d.ts

@@ -1,7 +1,9 @@
 import { Placement } from '@floating-ui/dom';
 import { SlotConfig, SlotName, VizItemType } from '@luzmo/dashboard-contents-types';
 import '@luzmo/lucero/action-button';
+import '@luzmo/lucero/button';
 import '@luzmo/lucero/field-label';
+import '@luzmo/lucero/icon';
 import '@luzmo/lucero/overlay';
 import '@luzmo/lucero/tooltip';
 import { PropertyValues } from 'lit';
@@ -112,7 +114,7 @@ export declare class LuzmoItemSlotPicker extends LuzmoItemSlotPicker_base {
      */
     hideConfiguration?: boolean;
     /**
-     * Whether to hide the clear button op a select
+     * Whether to hide the delete button
      * @default false
      */
     hideClear: boolean;
@@ -134,12 +136,16 @@ export declare class LuzmoItemSlotPicker extends LuzmoItemSlotPicker_base {
     private _hasAvailableDataFields;
     private _addDataField;
     private _renderExtraDataFieldButton;
+    private get _oneSizeSmaller();
+    private _renderControls;
     private _renderSingleSelect;
     private _renderMultipleSelect;
     private _renderMultipleSelectionControl;
     private _getSelectValueForSlotContent;
     private _getFilteredDatasetsDataFields;
-    private _clearCalculation;
+    private _removeSlotContentAt;
+    private _removeAllSlotContents;
+    private _focusRowAfterRemoval;
     private _renderCalculation;
     private _renderSelectMenu;
     private _handleSelectChange;

package/components/{item-slot-picker-BdfYcBKT.js → item-slot-picker-BiHy7QX1.js}

@@ -18,33 +18,35 @@
  * SOFTWARE.
  * */
 import "./tokens-Ov1pCR4Y.js";
-import { i as e, n as t } from "./base-CrpOMVeU.js";
+import { i as e, n as t } from "./base-Cvcpdy0h.js";
 import { t as n } from "./decorate-DyMgX_Uh.js";
-import { t as r } from "./localized-mixin-CYMFnS-n.js";
+import { t as r } from "./localized-mixin-BLUbrY_Z.js";
 import { t as i } from "./slots-config-GlSNH7Gr.js";
-import { n as a } from "./display-settings-BsCKV9ae.js";
+import { n as a } from "./display-settings-MnSyqIog.js";
 import { i as o, n as s } from "./ad-hoc-slot-content-hSlT62VS.js";
 import { n as c, t as l } from "./default-acceptable-data-field-types-DFOFWWnT.js";
-import { n as u } from "./slot-menu-Dw53Y-iu.js";
-import { n as d } from "./slot-menu-list-5NsRo9XD.js";
-import "./data-fields-select-BOwoWq0j.js";
-import { luzmoClose12 as f, luzmoCog as p, luzmoIcon as m, luzmoPlus as h } from "@luzmo/icons";
-import "@luzmo/lucero/overlay";
-import { html as g, unsafeCSS as _ } from "lit";
-import { property as v, state as y } from "lit/decorators.js";
-import { localized as b, msg as x } from "@lit/localize";
+import { n as u } from "./slot-menu-BAtOYWxs.js";
+import { n as d } from "./slot-menu-list-DoRLtT2d.js";
+import "./data-fields-select-BKoQMwZd.js";
+import { luzmoClose12 as f, luzmoCog as p, luzmoIcon as m, luzmoPlus as h, luzmoTrashOutline as g } from "@luzmo/icons";
 import "@luzmo/lucero/action-button";
+import "@luzmo/lucero/button";
+import "@luzmo/lucero/icon";
+import "@luzmo/lucero/overlay";
 import "@luzmo/lucero/tooltip";
+import { html as _, unsafeCSS as v } from "lit";
+import { property as y, state as b } from "lit/decorators.js";
+import { localized as x, msg as S } from "@lit/localize";
 import "@luzmo/lucero/field-label";
-import { ifDefined as S } from "lit/directives/if-defined.js";
-import { ContextProvider as C } from "@lit/context";
-import { Task as w } from "@lit/task";
+import { ifDefined as C } from "lit/directives/if-defined.js";
+import { ContextProvider as w } from "@lit/context";
+import { Task as T } from "@lit/task";
 //#region src/components/item-slot-picker/item-slot-picker.module.scss?inline
-var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot-picker-font-family,var(--luzmo-font-family))}.container{gap:var(--luzmo-item-slot-picker-gap,var(--item-slot-picker-gap,var(--luzmo-spacing-5)));flex-direction:column;width:-moz-fit-content;width:fit-content;display:flex}.select-container{flex-direction:column;display:flex}.select-container .select-controls{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));flex-direction:row;flex:auto;display:flex}luzmo-data-fields-select{flex-grow:var(--luzmo-item-slot-picker-data-fields-select-flex-grow,var(--item-slot-picker-data-fields-select-flex-grow))}.calculation-control{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));flex:auto;min-width:0;display:flex}.calculation-label{align-items:center;gap:var(--luzmo-spacing-3);flex:auto;min-width:0;display:inline-flex}.calculation-label-icon{flex:none;display:inline-flex}.calculations-list{gap:var(--luzmo-item-slot-picker-gap,var(--item-slot-picker-gap,var(--luzmo-spacing-5)));flex-direction:column;flex:auto;min-width:0;display:flex}:host([grows]){--item-slot-picker-data-fields-select-flex-grow:1}:host([grows]) .container{width:100%}:host([grows]) .select-container{flex:auto}.extra-data-field-button-container{justify-content:center;align-items:center;display:flex}.item-slot-picker-label{font-size:var(--luzmo-item-slot-picker-label-font-size,var(--item-slot-picker-label-font-size));margin-right:var(--luzmo-item-slot-picker-text-to-controls,var(--item-slot-picker-text-to-controls));text-overflow:ellipsis;white-space:nowrap;flex-grow:1;overflow:hidden}.controls{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));background-color:var(--luzmo-item-slot-picker-controls-background-color,var(--item-slot-picker-controls-background-color));height:100%;color:var(--luzmo-item-slot-picker-controls-color,var(--item-slot-picker-controls-color));margin-right:var(--luzmo-item-slot-picker-controls-to-edge,var(--item-slot-picker-controls-to-edge));padding:0 var(--luzmo-item-slot-picker-controls-horizontal-padding,var(--item-slot-picker-controls-horizontal-padding));display:flex}.controls div{cursor:pointer;height:100%;padding:0 var(--luzmo-item-slot-picker-controls-control-horizontal-padding,var(--item-slot-picker-controls-control-horizontal-padding));align-items:center;display:flex}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-item-slot-picker-overlay-vertical-gap,var(--item-slot-picker-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-item-slot-picker-overlay-horizontal-gap,var(--item-slot-picker-overlay-horizontal-gap))}:host{--item-slot-picker-border-width:var(--luzmo-border-width);--item-slot-picker-border-style:dashed;--item-slot-picker-border-color:var(--luzmo-border-color);--item-slot-picker-accept-drag-controls-background-color:transparent;--item-slot-picker-font-color:var(--luzmo-font-color);--item-slot-picker-controls-background-color:transparent;--item-slot-picker-text-to-controls:var(--luzmo-spacing-3);--item-slot-picker-controls-to-edge:0;--item-slot-picker-controls-gap:var(--luzmo-spacing-2);--item-slot-picker-controls-horizontal-padding:var(--luzmo-spacing-2);--item-slot-picker-controls-control-horizontal-padding:var(--luzmo-spacing-3);--item-slot-picker-label-font-size:var(--luzmo-font-size);--item-slot-picker-horizontal-padding:var(--luzmo-spacing-4);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-4);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-4)}:host([size=s]){--item-slot-picker-horizontal-padding:var(--luzmo-spacing-4);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-4);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-4)}:host([size=l]),:host([size=xl]){--item-slot-picker-horizontal-padding:var(--luzmo-spacing-5);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-5);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-5)}:host{box-sizing:border-box}", E, D = (e) => {
+var E = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot-picker-font-family,var(--luzmo-font-family))}.container{gap:var(--luzmo-item-slot-picker-gap,var(--item-slot-picker-gap,var(--luzmo-spacing-3)));flex-direction:column;width:-moz-fit-content;width:fit-content;display:flex}.select-container{flex-direction:column;display:flex}.select-container .select-controls{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));flex-direction:row;flex:auto;display:flex}luzmo-data-fields-select{flex-grow:var(--luzmo-item-slot-picker-data-fields-select-flex-grow,var(--item-slot-picker-data-fields-select-flex-grow))}.calculation-control{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));flex:auto;min-width:0;display:flex}.calculation-label{align-items:center;gap:var(--luzmo-spacing-3);flex:auto;min-width:0;display:inline-flex}.calculation-label-icon{flex:none;display:inline-flex}.calculations-list{gap:var(--luzmo-item-slot-picker-gap,var(--item-slot-picker-gap,var(--luzmo-spacing-3)));flex-direction:column;flex:auto;min-width:0;display:flex}:host([grows]){--item-slot-picker-data-fields-select-flex-grow:1}:host([grows]) .container{width:100%}:host([grows]) .select-container{flex:auto}.extra-data-field-button-container{justify-content:flex-start;align-items:center;display:flex}.item-slot-picker-label{font-size:var(--luzmo-item-slot-picker-label-font-size,var(--item-slot-picker-label-font-size));margin-right:var(--luzmo-item-slot-picker-text-to-controls,var(--item-slot-picker-text-to-controls));text-overflow:ellipsis;white-space:nowrap;flex-grow:1;overflow:hidden}.controls{align-items:center;gap:var(--luzmo-item-slot-picker-controls-gap,var(--item-slot-picker-controls-gap));background-color:var(--luzmo-item-slot-picker-controls-background-color,var(--item-slot-picker-controls-background-color));height:100%;color:var(--luzmo-item-slot-picker-controls-color,var(--item-slot-picker-controls-color));margin-right:var(--luzmo-item-slot-picker-controls-to-edge,var(--item-slot-picker-controls-to-edge));padding:0 var(--luzmo-item-slot-picker-controls-horizontal-padding,var(--item-slot-picker-controls-horizontal-padding));display:flex}.controls div{cursor:pointer;height:100%;padding:0 var(--luzmo-item-slot-picker-controls-control-horizontal-padding,var(--item-slot-picker-controls-control-horizontal-padding));align-items:center;display:flex}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-item-slot-picker-overlay-vertical-gap,var(--item-slot-picker-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-item-slot-picker-overlay-horizontal-gap,var(--item-slot-picker-overlay-horizontal-gap))}:host{--item-slot-picker-border-width:var(--luzmo-border-width);--item-slot-picker-border-style:dashed;--item-slot-picker-border-color:var(--luzmo-border-color);--item-slot-picker-accept-drag-controls-background-color:transparent;--item-slot-picker-font-color:var(--luzmo-font-color);--item-slot-picker-controls-background-color:transparent;--item-slot-picker-text-to-controls:var(--luzmo-spacing-3);--item-slot-picker-controls-to-edge:0;--item-slot-picker-controls-gap:0;--item-slot-picker-controls-horizontal-padding:0;--item-slot-picker-controls-control-horizontal-padding:var(--luzmo-spacing-3);--item-slot-picker-label-font-size:var(--luzmo-font-size);--item-slot-picker-horizontal-padding:var(--luzmo-spacing-4);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-4);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-4)}:host([size=s]){--item-slot-picker-horizontal-padding:var(--luzmo-spacing-4);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-4);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-4)}:host([size=l]),:host([size=xl]){--item-slot-picker-horizontal-padding:var(--luzmo-spacing-5);--item-slot-picker-overlay-horizontal-gap:var(--luzmo-spacing-5);--item-slot-picker-overlay-vertical-gap:var(--luzmo-spacing-5)}:host{box-sizing:border-box}", D, O = (e) => {
 	if ("columnId" in e && e.columnId) return e.columnId;
 	if ("formulaId" in e && e.formulaId) return e.formulaId;
 	if ("formula" in e && e.formula) return e.formula;
-}, O = (e) => s(e), k = "::level::", A = (e, t) => `${e}${k}${t}`, j = (E = class extends r(t(e, {
+}, k = (e) => s(e), A = "::level::", j = (e, t) => `${e}${A}${t}`, M = (D = class extends r(t(e, {
 	validSizes: [
 		"s",
 		"m",
@@ -57,7 +59,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 		return "formula" in e && typeof e.formula == "string";
 	}
 	constructor() {
-		super(), this._loadSlotsConfig = new w(this, {
+		super(), this._loadSlotsConfig = new T(this, {
 			task: async ([e]) => {
 				if (!e) return this._slotsConfig;
 				if (e !== this._itemTypeLoaded) {
@@ -79,7 +81,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 				}
 			});
 			return this.dispatchEvent(n), n;
-		}, new C(this, {
+		}, new w(this, {
 			context: a,
 			initialValue: this._store
 		});
@@ -95,13 +97,13 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 		t >= this._currentSlotContents.length && this._removeEmptySelect();
 		for (let e = this._currentSlotContents.length; e <= t; e++) this._currentSlotContents[e] || this._currentSlotContents.push({});
 		if (n.length > 0) {
-			let e = n[0], r = D(e), i = this._currentSlotContents[t], a = O(i), o = i?.level, s = e.level;
+			let e = n[0], r = O(e), i = this._currentSlotContents[t], a = k(i), o = i?.level, s = e.level;
 			if (r && (r !== a || o !== s)) {
 				let n = typeof e.level == "number";
 				this._currentSlotContents[t] = c(e, n);
 			}
 		} else r && this._currentSlotContents.splice(t, 1);
-		this.slotContents = structuredClone(this._currentSlotContents.filter((e) => !!O(e))), this._changedSlotContents(this.slotContents);
+		this.slotContents = structuredClone(this._currentSlotContents.filter((e) => !!k(e))), this._changedSlotContents(this.slotContents);
 	}
 	_setSlotContents(e) {
 		let t = e.detail.dataFields ?? [], n = this._currentSlotContents.filter((e) => o(e, this.slotConfiguration));
@@ -126,8 +128,8 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 		}), this._currentSlotContents = [...n, ...this._currentSlotContents], this.slotContents = structuredClone(this._currentSlotContents), this._changedSlotContents(this._currentSlotContents);
 	}
 	_renderFieldLabel() {
-		return g`<luzmo-field-label for="data-fields" size=${this.size}
-      >${this.label ?? x("Select...")}
+		return _`<luzmo-field-label for="data-fields" size=${this.size}
+      >${this.label ?? S("Select...")}
     </luzmo-field-label>`;
 	}
 	_removeEmptySelect() {
@@ -180,7 +182,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 	_getFirstAvailableDataField() {
 		let e = this._getAcceptableDataFields(), t = new Set(this._currentSlotContents.map((e) => e.columnId ?? e.formulaId ?? e.column ?? e.formula));
 		return e.find((e) => {
-			let n = D(e);
+			let n = O(e);
 			return n ? !t.has(n) : !1;
 		});
 	}
@@ -195,50 +197,73 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 		} else this._hasExtraEmptySelects = !0;
 	}
 	_renderExtraDataFieldButton() {
-		return this._hasAvailableDataFields() ? g`<div class="extra-data-field-button-container">
-      <luzmo-action-button
-        size="xs"
-        .label=${x("Add data field", { desc: "Aria label for add data field button" })}
+		return this._hasAvailableDataFields() ? _`<div class="extra-data-field-button-container">
+      <luzmo-button
+        variant="neutral"
+        treatment="fill"
+        .size=${this._oneSizeSmaller}
+        .label=${S("Add data field", { desc: "Aria label for add data field button" })}
         @click=${this._addDataField}
         ?disabled=${this._hasExtraEmptySelects || this.disabled}
       >
-        ${m(h)}
-      </luzmo-action-button>
-      <luzmo-tooltip self-managed placement="top" size=${this.size}>
-        Add data field
-      </luzmo-tooltip>
-    </div>` : g`
+        <luzmo-icon slot="icon" .icon=${h} .size=${this._oneSizeSmaller}></luzmo-icon>
+        ${S("Add", {
+			id: "item-slot-picker-add",
+			desc: "Add data field button label"
+		})}
+      </luzmo-button>
+    </div>` : _`
         
       `;
+	}
+	get _oneSizeSmaller() {
+		return {
+			s: "xs",
+			m: "s",
+			l: "m",
+			xl: "l"
+		}[this.size] ?? "s";
+	}
+	_renderControls(e, t) {
+		return this.hideConfiguration && this.hideClear ? "" : _`<div class="controls">
+      ${this.hideConfiguration ? "" : _`<luzmo-action-button
+            .size=${this.size}
+            quiet
+            id=${e}
+            .label=${S("Edit", { desc: "Edit action label" })}
+            ?disabled=${this.disabled}
+          >
+            ${m(p)}
+            <luzmo-tooltip self-managed placement="top" size=${this.size}>
+              ${S("Edit", { desc: "Edit action label" })}
+            </luzmo-tooltip>
+          </luzmo-action-button>`}
+      ${this.hideClear ? "" : _`<luzmo-action-button
+            class="delete-button"
+            .size=${this.size}
+            quiet
+            .label=${S("Delete", { desc: "Delete action label" })}
+            ?disabled=${this.disabled}
+            @click=${t}
+          >
+            ${m(g)}
+            <luzmo-tooltip self-managed placement="top" size=${this.size}>
+              ${S("Delete", { desc: "Delete action label" })}
+            </luzmo-tooltip>
+          </luzmo-action-button>`}
+    </div>`;
 	}
 	_renderSingleSelect() {
 		let e = this._renderFieldLabel(), t = this._currentSlotContents.length > 0;
-		if (!t && !this._hasExtraEmptySelects) return g`<div class="select-container">
+		if (!t && !this._hasExtraEmptySelects) return _`<div class="select-container">
         ${this.hasLabel ? e : ""} ${this._renderSelectMenu(0)}
       </div>`;
-		let n = this._currentSlotContents.map((t, n) => g` <div class="select-container">
+		let n = this._currentSlotContents.map((t, n) => _` <div class="select-container">
           ${this.hasLabel && n === 0 ? e : ""}
           <div class="select-controls">
             ${this._renderSelectMenu(n)}
-            ${this.slotContents?.length > 0 && !this.hideConfiguration ? g`<div class="controls">
-                  <luzmo-action-button
-                    .size=${this.size}
-                    quiet
-                    id=${`trigger-${n}`}
-                    .label=${x("Edit", { desc: "Edit action label" })}
-                    ?disabled=${this.disabled}
-                  >
-                    ${m(p)}
-                    <luzmo-tooltip
-                      self-managed
-                      placement="top"
-                      size=${this.size}
-                    >
-                      edit
-                    </luzmo-tooltip>
-                  </luzmo-action-button>
-                </div>` : ""}
-            ${this.slotContents?.length > 0 ? g`<luzmo-overlay
+            ${this.slotContents?.length > 0 ? this._renderControls(`trigger-${n}`, () => this._removeSlotContentAt(n)) : ""}
+            ${this.slotContents?.length > 0 ? _`<luzmo-overlay
                   trigger=${`trigger-${n}@click`}
                   .placement=${this.slotMenuPlacement}
                 >
@@ -246,11 +271,11 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
                     language=${this.language}
                     content-language=${this.contentLanguage}
                     slot-type=${this.slotConfiguration?.type}
-                    slot-name=${S(this.slotName)}
-                    item-type=${S(this.itemType)}
-                    api-url=${S(this.apiUrl)}
-                    auth-key=${S(this.authKey)}
-                    auth-token=${S(this.authToken)}
+                    slot-name=${C(this.slotName)}
+                    item-type=${C(this.itemType)}
+                    api-url=${C(this.apiUrl)}
+                    auth-key=${C(this.authKey)}
+                    auth-token=${C(this.authToken)}
                     .datasetsDataFields=${this.datasetsDataFields}
                     .areGrandTotalsEnabled=${this.slotConfiguration?.options?.areGrandTotalsEnabled}
                     .areDatetimeOptionsEnabled=${this.slotConfiguration?.options?.areDatetimeOptionsEnabled}
@@ -265,32 +290,19 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
                 </luzmo-overlay>` : ""}
           </div>
         </div>`);
-		return this._hasExtraEmptySelects && n.push(g`<div class="select-container">
+		return this._hasExtraEmptySelects && n.push(_`<div class="select-container">
           ${this._renderSelectMenu(this._currentSlotContents.length)}
         </div>`), t && this.slotConfiguration?.canAcceptMultipleDataFields && n.push(this._renderExtraDataFieldButton()), n;
 	}
 	_renderMultipleSelect() {
 		let e = this._renderFieldLabel();
-		return g`<div class="select-container">
+		return _`<div class="select-container">
       ${this.hasLabel ? e : ""}
 
       <div class="select-controls">
         ${this._renderMultipleSelectionControl()}
-        ${this.slotContents?.length > 0 && !this.hideConfiguration ? g`<div class="controls">
-              <luzmo-action-button
-                .size=${this.size}
-                quiet
-                id="trigger"
-                .label=${x("Edit", { desc: "Edit action label" })}
-                ?disabled=${this.disabled}
-              >
-                ${m(p)}
-                <luzmo-tooltip self-managed placement="top" size=${this.size}>
-                  edit
-                </luzmo-tooltip>
-              </luzmo-action-button>
-            </div>` : ""}
-        ${this.slotContents?.length > 0 ? g`<luzmo-overlay
+        ${this.slotContents?.length > 0 ? this._renderControls("trigger", () => this._removeAllSlotContents()) : ""}
+        ${this.slotContents?.length > 0 ? _`<luzmo-overlay
               trigger="trigger@click"
               .placement=${this.slotMenuPlacement}
             >
@@ -298,11 +310,11 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
                 language=${this.language}
                 content-language=${this.contentLanguage}
                 slot-type=${this.slotConfiguration?.type}
-                slot-name=${S(this.slotName)}
-                item-type=${S(this.itemType)}
-                api-url=${S(this.apiUrl)}
-                auth-key=${S(this.authKey)}
-                auth-token=${S(this.authToken)}
+                slot-name=${C(this.slotName)}
+                item-type=${C(this.itemType)}
+                api-url=${C(this.apiUrl)}
+                auth-key=${C(this.authKey)}
+                auth-token=${C(this.authToken)}
                 .datasetsDataFields=${this.datasetsDataFields}
                 .areGrandTotalsEnabled=${this.slotConfiguration?.options?.areGrandTotalsEnabled}
                 .areDatetimeOptionsEnabled=${this.slotConfiguration?.options?.areDatetimeOptionsEnabled}
@@ -322,19 +334,19 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 			content: e,
 			index: t
 		})).filter(({ content: e }) => o(e, this.slotConfiguration));
-		return e.length === 0 ? this._renderSelectMenu() : g`<div class="calculations-list">
-        ${e.map(({ content: e, index: t }) => this._renderCalculation(e, t))}
+		return e.length === 0 ? this._renderSelectMenu() : _`<div class="calculations-list">
+        ${e.map(({ content: e, index: t }) => this._renderCalculation(e, t, this._currentSlotContents.length > 1))}
       </div>
       ${e.length < this._currentSlotContents.length ? this._renderSelectMenu(void 0, !0) : ""}`;
 	}
 	_getSelectValueForSlotContent(e, t) {
-		let n = O(e);
+		let n = k(e);
 		if (!n) return;
 		let r = e.columnId, i = e.level;
 		if (!r || typeof i != "number" || Number.isNaN(i)) return n;
 		let a;
 		for (let e of t) if (a = e.columns?.find((e) => e.id === r), a) break;
-		return a && (Array.isArray(a.hierarchyLevels) && a.hierarchyLevels.length > 2 && a.hierarchy_enabled === !0 && i >= 1 || (a.type === "datetime" || a.type === "array[datetime]") && typeof a.lowestLevel == "number" && i !== a.lowestLevel) ? A(r, i) : n;
+		return a && (Array.isArray(a.hierarchyLevels) && a.hierarchyLevels.length > 2 && a.hierarchy_enabled === !0 && i >= 1 || (a.type === "datetime" || a.type === "array[datetime]") && typeof a.lowestLevel == "number" && i !== a.lowestLevel) ? j(r, i) : n;
 	}
 	_getFilteredDatasetsDataFields() {
 		let e = this.slotConfiguration?.acceptableDataFieldTypes?.length ? this.slotConfiguration.acceptableDataFieldTypes : l;
@@ -344,18 +356,28 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 			formulas: this.slotConfiguration?.canAcceptFormula ? t.formulas ?? [] : []
 		}));
 	}
-	_clearCalculation(e) {
-		this._currentSlotContents.splice(e, 1), this.slotContents = structuredClone(this._currentSlotContents), this._store?.setContents(this.slotContents, this.slotName), this._changedSlotContents(this.slotContents);
+	_removeSlotContentAt(e) {
+		let t = this.matches(":focus-within");
+		this._currentSlotContents.splice(e, 1), this.slotContents = structuredClone(this._currentSlotContents), this._store?.setContents(this.slotContents, this.slotName), this._changedSlotContents(this.slotContents), t && this._focusRowAfterRemoval(e);
+	}
+	_removeAllSlotContents() {
+		let e = this.matches(":focus-within");
+		this._currentSlotContents = [], this.slotContents = [], this._store?.setContents(this.slotContents, this.slotName), this._changedSlotContents(this.slotContents), e && this._focusRowAfterRemoval(0);
+	}
+	async _focusRowAfterRemoval(e) {
+		await this.updateComplete;
+		let t = [...this.shadowRoot?.querySelectorAll(".container > .select-container") ?? []], n = t[Math.min(e, t.length - 1)]?.querySelector("luzmo-data-fields-select, luzmo-action-button");
+		await n?.updateComplete, n?.focus();
 	}
-	_renderCalculation(e, t) {
-		return g`<div class="calculation-control">
+	_renderCalculation(e, t, n = !1) {
+		return _`<div class="calculation-control">
       ${d(e)}
-      ${this.hideClear ? "" : g`<luzmo-action-button
+      ${this.hideClear || !n ? "" : _`<luzmo-action-button
             quiet
             .size=${this.size}
-            .label=${x("Clear calculation", { desc: "Clear an ad-hoc slot calculation and return to column selection" })}
+            .label=${S("Clear calculation", { desc: "Clear an ad-hoc slot calculation and return to column selection" })}
             ?disabled=${this.disabled}
-            @click=${() => this._clearCalculation(t)}
+            @click=${() => this._removeSlotContentAt(t)}
           >
             ${m(f)}
           </luzmo-action-button>`}
@@ -370,19 +392,18 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 			let t = i[e ?? 0];
 			i = t ? [t] : [];
 		}
-		return g`<luzmo-data-fields-select
+		return _`<luzmo-data-fields-select
       .language=${this.language}
       .contentLanguage=${this.contentLanguage}
       .size=${this.size}
       .icons=${this.icons}
-      .placeholder=${this.placeholder ?? x("Select...")}
+      .placeholder=${this.placeholder ?? S("Add a data field...", { desc: "Placeholder for an empty data field select" })}
       .placement=${this.placement}
       .search=${this.search}
       ?disabled=${this.disabled}
       allow-empty
       .datasetsDataFields=${a}
       .value=${i}
-      ?clearable=${!this.hideClear}
       .selects=${this.selects === "multiple" && this.slotConfiguration?.canAcceptMultipleDataFields ? "multiple" : "single"}
       data-index=${e ?? 0}
       @luzmo-data-fields-selected=${this._handleSelectChange}
@@ -396,7 +417,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 		} else this._setSlotContents(e);
 	}
 	_itemSlotPickerMarkup() {
-		return g`
+		return _`
       <div class="container">
         ${this.selects === "multiple" ? this._renderMultipleSelect() : this._renderSingleSelect()}
       </div>
@@ -404,7 +425,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 	}
 	render() {
 		return this._loadSlotsConfig.render({
-			pending: () => g`
+			pending: () => _`
           <p>Loading...</p>
         `,
 			complete: (e) => {
@@ -414,7 +435,7 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
 				}
 				return this._itemSlotPickerMarkup();
 			},
-			error: (e) => g`
+			error: (e) => _`
         <div>
           Could not load item-slot-picker: '${this.slotName}' of chart
           '${this.itemType}': ${e}.
@@ -422,82 +443,82 @@ var T = ":host{--luzmo-select-inline-size:100%;font-family:var(--luzmo-item-slot
       `
 		});
 	}
-}, E.styles = _(T), E);
+}, D.styles = v(E), D);
 //#endregion
 //#region src/components/item-slot-picker/index.ts
-n([v({
+n([y({
 	type: String,
 	attribute: "api-url",
 	reflect: !0
-})], j.prototype, "apiUrl", void 0), n([v({
+})], M.prototype, "apiUrl", void 0), n([y({
 	type: String,
 	attribute: "auth-key",
 	reflect: !0
-})], j.prototype, "authKey", void 0), n([v({
+})], M.prototype, "authKey", void 0), n([y({
 	type: String,
 	attribute: "auth-token",
 	reflect: !0
-})], j.prototype, "authToken", void 0), n([v({
+})], M.prototype, "authToken", void 0), n([y({
 	type: String,
 	reflect: !0,
 	attribute: "item-type"
-})], j.prototype, "itemType", void 0), n([v({
+})], M.prototype, "itemType", void 0), n([y({
 	type: String,
 	reflect: !0,
 	attribute: "slot-name"
-})], j.prototype, "slotName", void 0), n([v({ type: Object })], j.prototype, "slotConfiguration", void 0), n([v({ type: Array })], j.prototype, "slotContents", void 0), n([v({
+})], M.prototype, "slotName", void 0), n([y({ type: Object })], M.prototype, "slotConfiguration", void 0), n([y({ type: Array })], M.prototype, "slotContents", void 0), n([y({
 	type: String,
 	attribute: "content-language",
 	reflect: !0
-})], j.prototype, "contentLanguage", void 0), n([v({
+})], M.prototype, "contentLanguage", void 0), n([y({
 	type: Boolean,
 	attribute: "disabled",
 	reflect: !0
-})], j.prototype, "disabled", void 0), n([v({
+})], M.prototype, "disabled", void 0), n([y({
 	type: Boolean,
 	attribute: "grows",
 	reflect: !0
-})], j.prototype, "grows", void 0), n([v({
+})], M.prototype, "grows", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "menu", void 0), n([v({
+})], M.prototype, "menu", void 0), n([y({
 	type: Boolean,
 	attribute: "has-label",
 	reflect: !0
-})], j.prototype, "hasLabel", void 0), n([v({
+})], M.prototype, "hasLabel", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "label", void 0), n([v({
+})], M.prototype, "label", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "selects", void 0), n([v({
+})], M.prototype, "selects", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "search", void 0), n([v({
+})], M.prototype, "search", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "icons", void 0), n([v({
+})], M.prototype, "icons", void 0), n([y({
 	type: String,
 	attribute: "placeholder",
 	reflect: !0
-})], j.prototype, "placeholder", void 0), n([v({
+})], M.prototype, "placeholder", void 0), n([y({
 	type: Array,
 	reflect: !1
-})], j.prototype, "datasetsDataFields", void 0), n([v({
+})], M.prototype, "datasetsDataFields", void 0), n([y({
 	type: String,
 	reflect: !0
-})], j.prototype, "placement", void 0), n([v({
+})], M.prototype, "placement", void 0), n([y({
 	type: String,
 	reflect: !0,
 	attribute: "slot-menu-placement"
-})], j.prototype, "slotMenuPlacement", void 0), n([v({
+})], M.prototype, "slotMenuPlacement", void 0), n([y({
 	type: Boolean,
 	reflect: !0,
 	attribute: "hide-configuration"
-})], j.prototype, "hideConfiguration", void 0), n([v({
+})], M.prototype, "hideConfiguration", void 0), n([y({
 	type: Boolean,
 	reflect: !0,
 	attribute: "hide-clear"
-})], j.prototype, "hideClear", void 0), n([y()], j.prototype, "_hasExtraEmptySelects", void 0), j = n([b()], j), customElements.get("luzmo-item-slot-picker") || customElements.define("luzmo-item-slot-picker", j);
+})], M.prototype, "hideClear", void 0), n([b()], M.prototype, "_hasExtraEmptySelects", void 0), M = n([x()], M), customElements.get("luzmo-item-slot-picker") || customElements.define("luzmo-item-slot-picker", M);
 //#endregion
-export { j as t };
+export { M as t };