@luzmo/analytics-components-kit 1.0.1-alpha.40 → 1.0.1-alpha.42

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

@@ -0,0 +1,145 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../set-locale-Cam8nRIW.cjs"),v=require("../localized-decorator-SOrjcPab.cjs"),C=require("../task-qPJdeXO1.cjs"),u=require("../luzmo-icons-CP__dRRM.cjs");require("../index-C2PPSv8E.cjs");require("../index-j8UKjHqY.cjs");require("../index-CUvucmA0.cjs");require("../index-CNA9joKT.cjs");require("../index-CYeQkVeJ.cjs");const f=require("../calculate-data-item-icon-C_3QUGmB.cjs"),z=require("../localize-r7ALOUy_.cjs"),n=require("../property-BCb4Kybn.cjs"),y=require("../state-BxZEcclm.cjs"),S=require("../focusable-BTJYY_Mf.cjs"),b=require("../sized-mixin-BNtmplgF.cjs");require("../display-settings/index.cjs");require("../slot-menu/index.cjs");const _=":host{font-family:var(--luzmo-slot-contents-picker-font-family, var(--luzmo-font-family))}.container{width:fit-content;display:flex;flex-direction:column;gap:var(--luzmo-slot-contents-picker-gap, var(--slot-contents-picker-gap, var(--luzmo-spacing-5)))}.select-container{display:flex;align-items:center}:host([stretch]) .container{width:100%}:host([stretch]) .select-container{width:100%}:host([stretch]) luzmo-select{flex-grow:1}.extra-data-item-button-container{display:flex;align-items:center;justify-content:center}.slot-contents-picker-label{font-size:var(--luzmo-slot-contents-picker-label-font-size, var(--slot-contents-picker-label-font-size));flex-grow:1;margin-right:var(--luzmo-slot-contents-picker-text-to-controls, var(--slot-contents-picker-text-to-controls));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{height:100%;display:flex;align-items:center;gap:var(--luzmo-slot-contents-picker-controls-gap, var(--slot-contents-picker-controls-gap));background-color:var(--luzmo-slot-contents-picker-controls-background-color, var(--slot-contents-picker-controls-background-color));color:var(--luzmo-slot-contents-picker-controls-color, var(--slot-contents-picker-controls-color));margin-right:var(--luzmo-slot-contents-picker-controls-to-edge, var(--slot-contents-picker-controls-to-edge));padding:0 var(--luzmo-slot-contents-picker-controls-horizontal-padding, var(--slot-contents-picker-controls-horizontal-padding))}.controls div{cursor:pointer;height:100%;display:flex;align-items:center;padding:0 var(--luzmo-slot-contents-picker-controls-control-horizontal-padding, var(--slot-contents-picker-controls-control-horizontal-padding))}luzmo-slot-menu[placement=bottom],luzmo-slot-menu[placement=top],luzmo-slot-menu[placement=bottom-start],luzmo-slot-menu[placement=top-start],luzmo-slot-menu[placement=bottom-end],luzmo-slot-menu[placement=top-end]{margin:var(--luzmo-slot-contents-picker-overlay-vertical-gap, var(--slot-contents-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-slot-contents-picker-overlay-horizontal-gap, var(--slot-contents-picker-overlay-horizontal-gap))}:host{--slot-contents-picker-border-width: var(--luzmo-border-width);--slot-contents-picker-border-style: dashed;--slot-contents-picker-border-color: var(--luzmo-border-color);--slot-contents-picker-accept-drag-controls-background-color: transparent;--slot-contents-picker-font-color: var(--luzmo-font-color);--slot-contents-picker-controls-background-color: transparent;--slot-contents-picker-text-to-controls: var(--luzmo-spacing-3);--slot-contents-picker-controls-to-edge: 0;--slot-contents-picker-controls-gap: var(--luzmo-spacing-2);--slot-contents-picker-controls-horizontal-padding: var(--luzmo-spacing-2);--slot-contents-picker-controls-control-horizontal-padding: var( --luzmo-spacing-3 );--slot-contents-picker-label-font-size: var(--luzmo-font-size)}:host{--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-4);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-4);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=s]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-4);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-4);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-4)}:host([size=l]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-5);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-5);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-5)}:host([size=xl]){--slot-contents-picker-horizontal-padding: var(--luzmo-spacing-5);--slot-contents-picker-overlay-horizontal-gap: var(--luzmo-spacing-5);--slot-contents-picker-overlay-vertical-gap: var(--luzmo-spacing-5)}:host{box-sizing:border-box}";var k=Object.defineProperty,P=Object.getOwnPropertyDescriptor,a=(p,t,e,s)=>{for(var o=s>1?void 0:s?P(t,e):t,r=p.length-1,c;r>=0;r--)(c=p[r])&&(o=(s?c(t,e,o):c(o))||o);return s&&o&&k(t,e,o),o};exports.LuzmoSlotContentsPicker=class extends b.SizedMixin(S.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this._loadSlotsConfig=new C.h(this,{task:async([t])=>{if(t&&t!==this._itemTypeLoaded){const e=Object.assign({"../../item-definitions/area-chart/area-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../area-chart-slots.config-Dx_ysVZK.cjs")),"../../item-definitions/bar-chart/bar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bar-chart-slots.config-c_9ABPOI.cjs")),"../../item-definitions/box-plot/box-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../box-plot-slots.config-K-1CiWO-.cjs")),"../../item-definitions/bubble-chart/bubble-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bubble-chart-slots.config-BwSwgleO.cjs")),"../../item-definitions/bullet-chart/bullet-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../bullet-chart-slots.config-DQarxMR7.cjs")),"../../item-definitions/choropleth-map/choropleth-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../choropleth-map-slots.config-CFERs0ca.cjs")),"../../item-definitions/circle-pack-chart/circle-pack-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../circle-pack-chart-slots.config-B18aqdH1.cjs")),"../../item-definitions/circular-gauge/circular-gauge-slots.config.ts":()=>Promise.resolve().then(()=>require("../circular-gauge-slots.config-Cd-nkNPm.cjs")),"../../item-definitions/column-chart/column-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../column-chart-slots.config-C0nGjkmv.cjs")),"../../item-definitions/combination-chart/combination-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../combination-chart-slots.config-CY07Q5Hw.cjs")),"../../item-definitions/conditional-number/conditional-number-slots.config.ts":()=>Promise.resolve().then(()=>require("../conditional-number-slots.config-CD5ZwXuY.cjs")),"../../item-definitions/date-filter/date-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../date-filter-slots.config-CrA5ijD3.cjs")),"../../item-definitions/donut-chart/donut-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../donut-chart-slots.config-DBowIZNO.cjs")),"../../item-definitions/dropdown-filter/dropdown-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../dropdown-filter-slots.config-0wn6pMvi.cjs")),"../../item-definitions/evolution-number/evolution-number-slots.config.ts":()=>Promise.resolve().then(()=>require("../evolution-number-slots.config-CNNVp6vR.cjs")),"../../item-definitions/funnel-chart/funnel-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../funnel-chart-slots.config-GKBCY9xN.cjs")),"../../item-definitions/heat-map/heat-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../heat-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/heat-table/heat-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../heat-table-slots.config-GGX3BCh1.cjs")),"../../item-definitions/hexbin-map/hexbin-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../hexbin-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/image/image-slots.config.ts":()=>Promise.resolve().then(()=>require("../image-slots.config-mPXMR1CE.cjs")),"../../item-definitions/line-chart/line-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../line-chart-slots.config-Dx_ysVZK.cjs")),"../../item-definitions/marker-map/marker-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../marker-map-slots.config-D7cSAVdX.cjs")),"../../item-definitions/ohlc-chart/ohlc-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../ohlc-chart-slots.config-DMomcHMV.cjs")),"../../item-definitions/parallel-coordinates-plot/parallel-coordinates-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../parallel-coordinates-plot-slots.config--fk40ZDu.cjs")),"../../item-definitions/pivot-table/pivot-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../pivot-table-slots.config-45V_Gdm7.cjs")),"../../item-definitions/pyramid-chart/pyramid-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../pyramid-chart-slots.config-D5F0WX2d.cjs")),"../../item-definitions/radar-chart/radar-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../radar-chart-slots.config-BEigR_Ml.cjs")),"../../item-definitions/regular-table/regular-table-slots.config.ts":()=>Promise.resolve().then(()=>require("../regular-table-slots.config-RLnMgOXn.cjs")),"../../item-definitions/route-map/route-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../route-map-slots.config-DsVJBR3D.cjs")),"../../item-definitions/sankey-diagram/sankey-diagram-slots.config.ts":()=>Promise.resolve().then(()=>require("../sankey-diagram-slots.config-CiyYElLX.cjs")),"../../item-definitions/scatter-plot/scatter-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../scatter-plot-slots.config-47cB5_RC.cjs")),"../../item-definitions/search-filter/search-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../search-filter-slots.config-DeHkvc2Q.cjs")),"../../item-definitions/slicer-filter/slicer-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../slicer-filter-slots.config-V7hURjKI.cjs")),"../../item-definitions/slider-filter/slider-filter-slots.config.ts":()=>Promise.resolve().then(()=>require("../slider-filter-slots.config-B--K9cpP.cjs")),"../../item-definitions/speedometer-chart/speedometer-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../speedometer-chart-slots.config-Cd-nkNPm.cjs")),"../../item-definitions/spike-map/spike-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../spike-map-slots.config-BM5-Dlub.cjs")),"../../item-definitions/strip-plot/strip-plot-slots.config.ts":()=>Promise.resolve().then(()=>require("../strip-plot-slots.config-DDUlLO8K.cjs")),"../../item-definitions/sunburst-chart/sunburst-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../sunburst-chart-slots.config-B18aqdH1.cjs")),"../../item-definitions/symbol-map/symbol-map-slots.config.ts":()=>Promise.resolve().then(()=>require("../symbol-map-slots.config-Dm_FRGHA.cjs")),"../../item-definitions/text/text-slots.config.ts":()=>Promise.resolve().then(()=>require("../text-slots.config-BMBEkf0O.cjs")),"../../item-definitions/treemap-chart/treemap-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../treemap-chart-slots.config-C3bnHCyy.cjs")),"../../item-definitions/venn-diagram/venn-diagram-slots.config.ts":()=>Promise.resolve().then(()=>require("../venn-diagram-slots.config-GytlZGbF.cjs")),"../../item-definitions/video/video-slots.config.ts":()=>Promise.resolve().then(()=>require("../video-slots.config-mPXMR1CE.cjs")),"../../item-definitions/wordcloud-chart/wordcloud-chart-slots.config.ts":()=>Promise.resolve().then(()=>require("../wordcloud-chart-slots.config-D7CiYopX.cjs"))});if(e[`../../item-definitions/${t}/${t}-slots.config.ts`]){const s=await e[`../../item-definitions/${t}/${t}-slots.config.ts`]();this._slotsConfig=(s==null?void 0:s.default)??{}}return this._slotsConfig}},args:()=>[this.itemType,this.language]}),this.slotConfiguration={},this.slotContents=[],this.language="en",this.disabled=!1,this.menu="default",this.hasLabel=!1,this.selects="multiple",this.icons="only-menu",this.datasetsDataItems=[],this.placement="bottom-end",this.hideDelete=!0,this._hasExtraEmptySelects=!1,this._currentSlotContents=[],this._selectOptions=[],this._slotContentOptions=[],this.stretch=!1,this._changedSlotContents=t=>{this.dispatchEvent(new CustomEvent("slot-contents-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{slotContents:t}}))}}_emptySlotContents(t){typeof t!="number"?(this.slotContents=[],this._currentSlotContents=[],this._changedSlotContents([])):(this._currentSlotContents=this._currentSlotContents.filter((s,o)=>o!==t),this._changedSlotContents(this._currentSlotContents))}willUpdate(t){const e=t.has("slotContents"),s=t.has("datasetsDataItems"),o=t.has("language");e&&(this._currentSlotContents=structuredClone(this.slotContents)),s&&(this._selectOptions=this._createSelectOptions(),this._slotContentOptions=this._createSlotContentOptions()),o&&this.language!==h.getLocale()&&([...h.targetLocales].includes(this.language??"en")||this.language==="en")&&h.setLocale(this.language)}_onSlotMenuChanges(t){var e;t.preventDefault(),t.stopPropagation(),this.slotContents.length===((e=t.detail.slotContents)==null?void 0:e.length)?(this._currentSlotContents=t.detail.slotContents,this._changedSlotContents(this._currentSlotContents)):(this.slotContents=t.detail.slotContents,this._changedSlotContents(this.slotContents))}_setSlotContentAtIndex(t,e){var o,r,c,i,l,d;const s=(r=(o=t==null?void 0:t.detail)==null?void 0:o.value)==null?void 0:r[0];e>=this._currentSlotContents.length&&this._removeEmptySelect();for(let m=this._currentSlotContents.length;m<=e;m++)this._currentSlotContents[m]||this._currentSlotContents.push({});if(s&&!(s===((c=this._currentSlotContents[e])==null?void 0:c.columnId)||s===((i=this._currentSlotContents[e])==null?void 0:i.column)||s===((l=this._currentSlotContents[e])==null?void 0:l.formulaId)||s===((d=this._currentSlotContents[e])==null?void 0:d.formula))){const m=this._slotContentOptions.find(g=>g.columnId===s||g.formulaId===s);m&&(this._currentSlotContents[e]=structuredClone(m))}this.slotContents=structuredClone(this._currentSlotContents.filter(m=>m.columnId||m.formulaId||m.column||m.formula)),this._changedSlotContents(this.slotContents)}_setSlotContents(t){var s,o;let e=t.detail.value;(s=this.slotConfiguration)!=null&&s.canAcceptMultipleDataItems&&e.length>1||(e=e.slice(0,1)),this._currentSlotContents=((o=this._currentSlotContents)==null?void 0:o.filter(r=>e.includes(r.columnId??r.formulaId)))??[],e.forEach(r=>{if(this._currentSlotContents.some(i=>i.columnId===r||i.formulaId===r))return;const c=this._slotContentOptions.find(i=>i.columnId===r||i.formulaId===r);c&&this._currentSlotContents.push(structuredClone(c))}),this.slotContents=structuredClone(this._currentSlotContents),this._changedSlotContents(this._currentSlotContents)}_createSlotContentOptions(){var e,s;const t=[];for(const o of this.datasetsDataItems??[]){const r=(o==null?void 0:o.columns)??[],c=(o==null?void 0:o.formulas)??[];for(const i of r)if((((e=this.slotConfiguration)==null?void 0:e.acceptableDataItemTypes)??["hierarchy","numeric","datetime","array[hierarchy]","array[numeric]","array[datetime]"]).includes(i.type)){const l=structuredClone(i);l.columnId=i.id,l.datasetId=o.id,l.label=i.name,delete l.name,delete l.id,t.push(l)}if((s=this.slotConfiguration)!=null&&s.canAcceptFormula)for(const i of c){const l=structuredClone(i);l.formulaId=i.id,l.datasetId=o.id,l.label=i.name,delete l.name,delete l.id,t.push(l)}}return t}_createSelectOptions(){var e,s;const t=[];for(const o of this.datasetsDataItems??[]){const r=(o==null?void 0:o.columns)??[],c=(o==null?void 0:o.formulas)??[];for(const i of r)(((e=this.slotConfiguration)==null?void 0:e.acceptableDataItemTypes)??["hierarchy","numeric","datetime","array[hierarchy]","array[numeric]","array[datetime]"]).includes(i.type)&&t.push({value:i.id,label:z.localize((i==null?void 0:i.name)??{},this.language),icon:f.calculateDataItemIcon(i,this.size)});if((s=this.slotConfiguration)!=null&&s.canAcceptFormula)for(const i of c)t.push({value:i.id,label:z.localize((i==null?void 0:i.name)??{},this.language),icon:f.calculateDataItemIcon(i,this.size)})}return t}_renderFieldLabel(){return n.x`<luzmo-field-label for="data-item" size=${this.size}
+      >${this.label??h.msg("Select...")}
+    </luzmo-field-label>`}_removeEmptySelect(){this._hasExtraEmptySelects=!1}_addDataItem(){this._hasExtraEmptySelects=!0}_renderExtraDataItemButton(){return n.x`<div class="extra-data-item-button-container">
+      <luzmo-action-button
+        size="xs"
+        @click=${this._addDataItem}
+        ?disabled=${this._hasExtraEmptySelects}
+      >
+        ${u.y3(u.u1)}
+      </luzmo-action-button>
+      <luzmo-tooltip self-managed placement="top" size=${this.size}>
+        Add data item
+      </luzmo-tooltip>
+    </div>`}_renderSingleSelect(){const t=this._renderFieldLabel(),e=this._currentSlotContents.map((s,o)=>{var r,c,i,l;return n.x` <div class="select-container">
+          ${this.hasLabel&&o===0?t:""}
+          ${this._renderSelectMenu(o)}
+          ${((r=this.slotContents)==null?void 0:r.length)>0&&!(this.hideConfiguration&&this.hideDelete)?n.x`<div class="controls">
+                ${this.hideConfiguration?"":n.x`<luzmo-action-button
+                      .size=${this.size}
+                      quiet
+                      id=${`trigger-${o}`}
+                    >
+                      ${u.y3(u.M1)}
+                      <luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        edit
+                      </luzmo-tooltip>
+                    </luzmo-action-button>`}
+                ${this.hideDelete?"":n.x`<div
+                      @click=${this._emptySlotContents.bind(this,o)}
+                    >
+                      ${u.y3(u.C1)}
+                      <luzmo-tooltip
+                        self-managed
+                        placement="top"
+                        size=${this.size}
+                      >
+                        Delete
+                      </luzmo-tooltip>
+                    </div>`}
+              </div>`:""}
+          ${((c=this.slotContents)==null?void 0:c.length)>0?n.x`<luzmo-overlay
+                trigger=${`trigger-${o}@click`}
+                .placement=${this.placement}
+              >
+                <luzmo-slot-menu
+                  language=${this.language}
+                  content-language=${this.language}
+                  slot-type=${(i=this.slotConfiguration)==null?void 0:i.type}
+                  .slotContents=${this._currentSlotContents}
+                  .slotIndex=${(l=this.slotConfiguration)!=null&&l.canAcceptMultipleDataItems?o:void 0}
+                  variant="popup"
+                  .size=${this.size}
+                  @slot-contents-changed=${this._onSlotMenuChanges}
+                ></luzmo-slot-menu>
+              </luzmo-overlay>`:""}
+        </div>`});return this._hasExtraEmptySelects&&e.push(n.x`<div class="select-container">
+          ${this._renderSelectMenu(this._currentSlotContents.length)}
+          <div class="controls">
+            <luzmo-action-button
+              .size=${this.size}
+              quiet
+              @click=${this._removeEmptySelect}
+            >
+              ${u.y3(u.C1)}
+              <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                Delete
+              </luzmo-tooltip>
+            </luzmo-action-button>
+          </div>
+        </div>`),e.push(this._renderExtraDataItemButton()),e}_renderMultipleSelect(){var e,s,o;const t=this._renderFieldLabel();return n.x`<div class="select-container">
+      ${this.hasLabel?t:""} ${this._renderSelectMenu()}
+      ${((e=this.slotContents)==null?void 0:e.length)>0&&!(this.hideConfiguration&&this.hideDelete)?n.x`<div class="controls">
+            ${this.hideConfiguration?"":n.x`<luzmo-action-button .size=${this.size} quiet id="trigger">
+                  ${u.y3(u.M1)}
+                  <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                    edit
+                  </luzmo-tooltip>
+                </luzmo-action-button>`}
+            ${this.hideDelete?"":n.x`<div @click=${this._emptySlotContents}>
+                  ${u.y3(u.C1)}
+                  <luzmo-tooltip self-managed placement="top" size=${this.size}>
+                    Delete
+                  </luzmo-tooltip>
+                </div>`}
+          </div>`:""}
+      ${((s=this.slotContents)==null?void 0:s.length)>0?n.x`<luzmo-overlay
+            trigger="trigger@click"
+            .placement=${this.placement}
+          >
+            <luzmo-slot-menu
+              language=${this.language}
+              content-language=${this.language}
+              slot-type=${(o=this.slotConfiguration)==null?void 0:o.type}
+              .slotContents=${this._currentSlotContents}
+              variant="popup"
+              .size=${this.size}
+              @slot-contents-changed=${this._onSlotMenuChanges}
+            ></luzmo-slot-menu>
+          </luzmo-overlay>`:""}
+    </div>`}_renderSelectMenu(t){var s,o;let e;return t&&t>=this._currentSlotContents.length?e=[]:(e=(s=this._currentSlotContents)==null?void 0:s.map(r=>r.columnId??r.formulaId??r.column??r.formula),this.selects==="single"&&(e==null?void 0:e.length)>0&&(e=[e[t??0]])),n.x`<luzmo-select
+      label="Select..."
+      id="expression"
+      size=${this.size}
+      variant="highlight"
+      .language=${this.language}
+      placement="bottom-start"
+      ?disabled=${this.disabled}
+      .options=${this._selectOptions}
+      .value=${e}
+      selects=${this.selects==="multiple"&&((o=this.slotConfiguration)!=null&&o.canAcceptMultipleDataItems)?"multiple":"single"}
+      @change=${r=>this.selects==="single"?this._setSlotContentAtIndex(r,t??0):this._setSlotContents(r)}
+    >
+    </luzmo-select>`}_slotContentsPickerMarkup(){return n.x`
+      <div class="container">
+        ${this.selects==="multiple"?this._renderMultipleSelect():this._renderSingleSelect()}
+      </div>
+    `}render(){return this._loadSlotsConfig.render({pending:()=>n.x`<p>Loading...</p>`,complete:t=>{if(this.slotName&&this.itemType&&t){const e=t.find(s=>s.name===this.slotName);e&&(this.slotConfiguration=e)}return this._slotContentsPickerMarkup()},error:t=>n.x`
+        <div>
+          Could not load slot-contents-picker: '${this.slotName}' of chart
+          '${this.itemType}': ${t}.
+        </div>
+      `})}};exports.LuzmoSlotContentsPicker.styles=n.r(_);a([n.n({type:String,reflect:!0,attribute:"item-type"})],exports.LuzmoSlotContentsPicker.prototype,"itemType",2);a([n.n({type:String,reflect:!0,attribute:"slot-name"})],exports.LuzmoSlotContentsPicker.prototype,"slotName",2);a([n.n({type:Object})],exports.LuzmoSlotContentsPicker.prototype,"slotConfiguration",2);a([n.n({type:Object})],exports.LuzmoSlotContentsPicker.prototype,"slotContents",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"language",2);a([n.n({type:Boolean,attribute:"disabled",reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"disabled",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"menu",2);a([n.n({type:Boolean,attribute:"has-label",reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"hasLabel",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"label",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"selects",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"icons",2);a([n.n({type:String,attribute:"placeholder",reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"placeholder",2);a([n.n({type:Array,reflect:!1})],exports.LuzmoSlotContentsPicker.prototype,"datasetsDataItems",2);a([n.n({type:String,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"placement",2);a([n.n({type:Boolean,reflect:!0,attribute:"hide-delete"})],exports.LuzmoSlotContentsPicker.prototype,"hideDelete",2);a([n.n({type:Boolean,reflect:!0,attribute:"hide-configuration"})],exports.LuzmoSlotContentsPicker.prototype,"hideConfiguration",2);a([y.r()],exports.LuzmoSlotContentsPicker.prototype,"_hasExtraEmptySelects",2);a([n.n({type:Boolean,reflect:!0})],exports.LuzmoSlotContentsPicker.prototype,"stretch",2);exports.LuzmoSlotContentsPicker=a([v.localized()],exports.LuzmoSlotContentsPicker);customElements.get("luzmo-slot-contents-picker")||customElements.define("luzmo-slot-contents-picker",exports.LuzmoSlotContentsPicker);

package/components/slot-contents-picker/index.d.ts

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