@luzmo/analytics-components-kit 1.0.1-alpha.84 → 1.0.1-alpha.86

package/components/index.js

@@ -17,240 +17,61 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { LuzmoAiChatMessageAssistant as G } from "./ai-chat-message-assistant/index.js";
-import { LuzmoAiChatMessageUser as R } from "./ai-chat-message-user/index.js";
-import { LuzmoAiChatMessagesContainer as V } from "./ai-chat-messages-container/index.js";
-import { LuzmoDatasetSelectorList as q } from "./dataset-selector-list/index.js";
-import { luzmoIcon as m, luzmoTable as b, luzmoPlus as h, luzmoClose16 as g } from "@luzmo/icons";
-import "@luzmo/lucero/overlay";
-import "@luzmo/lucero/popover";
-import "@luzmo/lucero/tooltip";
-import { l as z } from "./localize-BX7q0S0M.js";
-import { g as y } from "./set-locale-B-Tz2sdI.js";
-import { LitElement as f, unsafeCSS as v, html as c, nothing as w } from "lit";
-import { property as s, state as x } from "lit/decorators.js";
-import { repeat as k } from "lit/directives/repeat.js";
-import { L as W } from "./index-Do7O9azB.js";
-import { LuzmoDisplaySettingsBinning as Q } from "./display-settings-binning/index.js";
-import { LuzmoDisplaySettingsDatetime as Y } from "./display-settings-datetime/index.js";
-import { LuzmoDisplaySettingsGrandTotals as ee } from "./display-settings-grand-totals/index.js";
-import { LuzmoDisplaySettingsNumeric as oe } from "./display-settings-numeric/index.js";
-import { LuzmoDisplaySettingsPeriodOverPeriod as ae } from "./display-settings-period-over-period/index.js";
-import { LuzmoDraggableDataItem as ie } from "./draggable-data-item/index.js";
-import { LuzmoDraggableDataItemLevel as ce } from "./draggable-data-item-level/index.js";
-import { LuzmoDroppableSlot as ne } from "./droppable-slot/index.js";
-import { LuzmoEditItem as me } from "./edit-item/index.js";
-import { L as be } from "./index-CdIUfo-L.js";
-import { LuzmoEditOptionActionButtonGroup as ge } from "./edit-option-action-button-group/index.js";
-import { LuzmoEditOptionColorPalettePicker as ye } from "./edit-option-color-palette-picker/index.js";
-import { LuzmoEditOptionColorPicker as ve } from "./edit-option-color-picker/index.js";
-import { LuzmoEditOptionColorRange as xe } from "./edit-option-color-range/index.js";
-import { LuzmoEditOptionMultiLangField as Ce } from "./edit-option-multi-language-field/index.js";
-import { LuzmoEditOptionNumberField as De } from "./edit-option-number-field/index.js";
-import { LuzmoEditOptionPicker as Pe } from "./edit-option-picker/index.js";
-import { LuzmoEditOptionPositionPicker as Oe } from "./edit-option-position-picker/index.js";
-import { LuzmoEditOptionPositionsNumberField as Ee } from "./edit-option-positions-number-field/index.js";
-import { LuzmoEditOptionRadioButtonGroup as Me } from "./edit-option-radio-button-group/index.js";
-import { LuzmoEditOptionSlider as Ae } from "./edit-option-slider/index.js";
-import { LuzmoEditOptionSwitch as Ie } from "./edit-option-switch/index.js";
-import { LuzmoEditOptionTextField as Ge } from "./edit-option-text-field/index.js";
-import { LuzmoFilterDataItemPicker as Re } from "./filter-data-item-picker/index.js";
-import { L as Ve } from "./index-PMDgRSzR.js";
-import { LuzmoFilterItem as qe } from "./filter-item/index.js";
-import { LuzmoFilterValuePicker as We } from "./filter-value-picker/index.js";
-import { LuzmoFilterValuePickerDatetime as Qe } from "./filter-value-picker-datetime/index.js";
-import { LuzmoFilterValuePickerHierarchy as Ye } from "./filter-value-picker-hierarchy/index.js";
-import { LuzmoFilterValuePickerNumeric as et } from "./filter-value-picker-numeric/index.js";
-import { LuzmoGrid as ot, LuzmoGridItemActionsMenu as rt } from "./grid/index.js";
-import { LuzmoSlotContentsPicker as lt } from "./slot-contents-picker/index.js";
-import { LuzmoSlotMenu as st } from "./slot-menu/index.js";
-import { LuzmoSlotMenuList as pt } from "./slot-menu-list/index.js";
-import { P as ut } from "./types-RxAJdtVT.js";
-import { d as dt } from "./decompose-numeric-format-BuZcjH2k.js";
-import { f as ht } from "./en-BOTjhwEc.js";
-import { switchItem as zt } from "./utils.js";
-import { g as ft, s as vt } from "./index-CgnTl6Sc.js";
+import { LuzmoAiChatMessageAssistant as p } from "./ai-chat-message-assistant/index.js";
+import { LuzmoAiChatMessageUser as u } from "./ai-chat-message-user/index.js";
+import { LuzmoAiChatMessagesContainer as n } from "./ai-chat-messages-container/index.js";
+import { LuzmoAiInteractionTextarea as s } from "./ai-interaction-textarea/index.js";
+import { LuzmoDatasetIcon as h } from "./dataset-icon/index.js";
+import { LuzmoDatasetSelectorList as z } from "./dataset-selector-list/index.js";
+import { LuzmoDatasetSelectorRow as f } from "./dataset-selector-row/index.js";
+import { L as C } from "./index-Do7O9azB.js";
+import { LuzmoDisplaySettingsBinning as v } from "./display-settings-binning/index.js";
+import { LuzmoDisplaySettingsDatetime as S } from "./display-settings-datetime/index.js";
+import { LuzmoDisplaySettingsGrandTotals as F } from "./display-settings-grand-totals/index.js";
+import { LuzmoDisplaySettingsNumeric as w } from "./display-settings-numeric/index.js";
+import { LuzmoDisplaySettingsPeriodOverPeriod as E } from "./display-settings-period-over-period/index.js";
+import { LuzmoDraggableDataItem as B } from "./draggable-data-item/index.js";
+import { LuzmoDraggableDataItemLevel as A } from "./draggable-data-item-level/index.js";
+import { LuzmoDroppableSlot as H } from "./droppable-slot/index.js";
+import { LuzmoEditItem as R } from "./edit-item/index.js";
+import { L as V } from "./index-CdIUfo-L.js";
+import { LuzmoEditOptionActionButtonGroup as W } from "./edit-option-action-button-group/index.js";
+import { LuzmoEditOptionColorPalettePicker as j } from "./edit-option-color-palette-picker/index.js";
+import { LuzmoEditOptionColorPicker as K } from "./edit-option-color-picker/index.js";
+import { LuzmoEditOptionColorRange as X } from "./edit-option-color-range/index.js";
+import { LuzmoEditOptionMultiLangField as Z } from "./edit-option-multi-language-field/index.js";
+import { LuzmoEditOptionNumberField as $ } from "./edit-option-number-field/index.js";
+import { LuzmoEditOptionPicker as oe } from "./edit-option-picker/index.js";
+import { LuzmoEditOptionPositionPicker as te } from "./edit-option-position-picker/index.js";
+import { LuzmoEditOptionPositionsNumberField as ae } from "./edit-option-positions-number-field/index.js";
+import { LuzmoEditOptionRadioButtonGroup as pe } from "./edit-option-radio-button-group/index.js";
+import { LuzmoEditOptionSlider as ue } from "./edit-option-slider/index.js";
+import { LuzmoEditOptionSwitch as ne } from "./edit-option-switch/index.js";
+import { LuzmoEditOptionTextField as se } from "./edit-option-text-field/index.js";
+import { LuzmoFilterDataItemPicker as he } from "./filter-data-item-picker/index.js";
+import { L as ze } from "./index-PMDgRSzR.js";
+import { LuzmoFilterItem as fe } from "./filter-item/index.js";
+import { LuzmoFilterValuePicker as Ce } from "./filter-value-picker/index.js";
+import { LuzmoFilterValuePickerDatetime as ve } from "./filter-value-picker-datetime/index.js";
+import { LuzmoFilterValuePickerHierarchy as Se } from "./filter-value-picker-hierarchy/index.js";
+import { LuzmoFilterValuePickerNumeric as Fe } from "./filter-value-picker-numeric/index.js";
+import { LuzmoGrid as we, LuzmoGridItemActionsMenu as Me } from "./grid/index.js";
+import { LuzmoSlotContentsPicker as Oe } from "./slot-contents-picker/index.js";
+import { LuzmoSlotMenu as Te } from "./slot-menu/index.js";
+import { LuzmoSlotMenuList as Ge } from "./slot-menu-list/index.js";
+import { P as Ie } from "./types-RxAJdtVT.js";
+import { d as Ne } from "./decompose-numeric-format-BuZcjH2k.js";
+import { f as Ue } from "./en-BOTjhwEc.js";
+import { l as qe } from "./localize-BX7q0S0M.js";
+import { switchItem as Je } from "./utils.js";
+import { g as Qe, s as Xe } from "./index-CgnTl6Sc.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const e = document.createElement("style");
     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-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--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);
   }
 })();
-const C = ":host{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--luzmo-dataset-selector-row-gap, var(--dataset-selector-row-gap));min-height:var(--luzmo-dataset-selector-row-min-height, var(--dataset-selector-row-min-height));flex-wrap:wrap;font-size:var(--luzmo-dataset-selector-row-font-size, var(--dataset-selector-row-font-size));color:var(--luzmo-dataset-selector-row-color, var(--dataset-selector-row-color));font-family:var(--luzmo-dataset-selector-row-font-family, var(--dataset-selector-row-font-family))}:host .add-dataset-button{display:inline-flex;align-items:center;gap:var(--luzmo-dataset-selector-row-button-gap, var(--dataset-selector-row-button-gap));min-width:var(--luzmo-dataset-selector-row-button-min-width, var(--dataset-selector-row-button-min-width));height:var(--luzmo-dataset-selector-row-button-height, var(--dataset-selector-row-button-height));border-radius:var(--luzmo-dataset-selector-row-button-border-radius, var(--dataset-selector-row-button-border-radius));border:1px solid var(--luzmo-dataset-selector-row-button-border-color, var(--dataset-selector-row-button-border-color));background-color:var(--luzmo-dataset-selector-row-button-background, var(--dataset-selector-row-button-background));color:var(--luzmo-dataset-selector-row-button-color, var(--dataset-selector-row-button-color));padding:var(--luzmo-dataset-selector-row-button-padding, var(--dataset-selector-row-button-padding));cursor:pointer;font-size:inherit;font-family:inherit;outline:none;justify-content:center;transition:all .15s ease}:host .add-dataset-button:hover{background-color:var(--luzmo-dataset-selector-row-button-hover-background, var(--dataset-selector-row-button-hover-background));border-color:var(--luzmo-dataset-selector-row-button-hover-border-color, var(--dataset-selector-row-button-hover-border-color))}:host .add-dataset-button:focus{outline:none}:host .add-dataset-button svg{font-size:var(--luzmo-dataset-selector-row-button-icon-size, var(--dataset-selector-row-button-icon-size));color:var(--luzmo-dataset-selector-row-button-icon-color, var(--dataset-selector-row-button-icon-color))}:host .add-dataset-button.icon-only{padding:var(--luzmo-dataset-selector-row-button-icon-only-padding, var(--dataset-selector-row-button-icon-only-padding))}:host .removable-pill{box-sizing:border-box;display:flex;flex-direction:row;max-width:var(--luzmo-dataset-selector-row-pill-max-width, var(--dataset-selector-row-pill-max-width));height:var(--luzmo-dataset-selector-row-pill-height, var(--dataset-selector-row-pill-height));padding:var(--luzmo-dataset-selector-row-pill-padding, var(--dataset-selector-row-pill-padding));gap:var(--luzmo-dataset-selector-row-pill-gap, var(--dataset-selector-row-pill-gap));border-radius:var(--luzmo-dataset-selector-row-pill-border-radius, var(--dataset-selector-row-pill-border-radius));border:1px solid var(--luzmo-dataset-selector-row-pill-border-color, var(--dataset-selector-row-pill-border-color));background-color:var(--luzmo-dataset-selector-row-pill-background, var(--dataset-selector-row-pill-background));align-items:center;cursor:pointer;transition:all .15s ease}:host .removable-pill:hover{background-color:var(--luzmo-dataset-selector-row-pill-hover-background, var(--dataset-selector-row-pill-hover-background));border-color:var(--luzmo-dataset-selector-row-pill-hover-border-color, var(--dataset-selector-row-pill-hover-border-color))}:host .removable-pill:hover .dataset-icon{display:none}:host .removable-pill:hover .close-icon{display:inline-block;color:var(--luzmo-dataset-selector-row-pill-close-color, var(--dataset-selector-row-pill-close-color))}:host .removable-pill .close-icon{width:var(--luzmo-dataset-selector-row-pill-close-size, var(--dataset-selector-row-pill-close-size));display:none;flex-shrink:0}:host .removable-pill .dataset-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--luzmo-dataset-selector-row-pill-icon-size, var(--dataset-selector-row-pill-icon-size));height:var(--luzmo-dataset-selector-row-pill-icon-size, var(--dataset-selector-row-pill-icon-size))}:host .removable-pill .dataset-icon luzmo-icon{display:flex}:host .removable-pill .dataset-icon-img{width:var(--luzmo-dataset-selector-row-pill-icon-size, var(--dataset-selector-row-pill-icon-size));height:var(--luzmo-dataset-selector-row-pill-icon-size, var(--dataset-selector-row-pill-icon-size));object-fit:contain}:host .removable-pill .dataset-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;line-height:var(--luzmo-dataset-selector-row-pill-text-line-height, var(--dataset-selector-row-pill-text-line-height))}:host luzmo-popover{width:var(--luzmo-dataset-selector-row-popover-width, var(--dataset-selector-row-popover-width));height:var(--luzmo-dataset-selector-row-popover-height, var(--dataset-selector-row-popover-height))}:host{--dataset-selector-row-gap: var(--luzmo-spacing-2);--dataset-selector-row-min-height: 1.75rem;--dataset-selector-row-font-size: .75rem;--dataset-selector-row-color: var(--luzmo-font-color);--dataset-selector-row-font-family: var(--luzmo-font-family);--dataset-selector-row-button-gap: var(--luzmo-spacing-1);--dataset-selector-row-button-min-width: 1.75rem;--dataset-selector-row-button-height: 1.75rem;--dataset-selector-row-button-border-radius: .5rem;--dataset-selector-row-button-border-color: var(--luzmo-border-color);--dataset-selector-row-button-background: var(--luzmo-background-color-alt-1);--dataset-selector-row-button-color: var(--luzmo-font-color-tertiary, rgba(165, 165, 165, 1));--dataset-selector-row-button-padding: .25rem .375rem;--dataset-selector-row-button-icon-only-padding: .25rem;--dataset-selector-row-button-icon-size: .875rem;--dataset-selector-row-button-icon-color: var(--luzmo-font-color-tertiary);--dataset-selector-row-button-hover-background: var(--luzmo-background-color-highlight);--dataset-selector-row-button-hover-border-color: var(--luzmo-border-color-hover);--dataset-selector-row-button-focus-outline-color: var(--luzmo-primary);--dataset-selector-row-pill-max-width: 10rem;--dataset-selector-row-pill-height: 1.75rem;--dataset-selector-row-pill-padding: .125rem .5rem;--dataset-selector-row-pill-gap: var(--luzmo-spacing-2);--dataset-selector-row-pill-border-radius: .5rem;--dataset-selector-row-pill-border-color: var(--luzmo-border-color);--dataset-selector-row-pill-background: var(--luzmo-background-color-alt-1);--dataset-selector-row-pill-hover-background: var(--luzmo-background-color-highlight);--dataset-selector-row-pill-hover-border-color: var(--luzmo-border-color-hover);--dataset-selector-row-pill-icon-size: 1rem;--dataset-selector-row-pill-close-size: 1rem;--dataset-selector-row-pill-close-color: var(--luzmo-danger, #dc3545);--dataset-selector-row-pill-text-line-height: 1.2;--dataset-selector-row-popover-width: 23.75rem;--dataset-selector-row-popover-height: 15rem}";
-var S = Object.defineProperty, i = (u, e, t, r) => {
-  for (var o = void 0, l = u.length - 1, p; l >= 0; l--)
-    (p = u[l]) && (o = p(e, t, o) || o);
-  return o && S(e, t, o), o;
-};
-const n = class n extends f {
-  constructor() {
-    super(...arguments), this.selectedDatasets = [], this.buttonLabel = "Add dataset", this.authKey = "", this.authToken = "", this.apiUrl = "https://api.luzmo.com", this.appServer = "https://app.luzmo.com", this.flagOpendata = !1, this._overlayOpen = !1;
-  }
-  get _hasSelectedDatasets() {
-    return this.selectedDatasets.length > 0;
-  }
-  get _selectedDatasetIds() {
-    return new Set(this.selectedDatasets.map((e) => e.id));
-  }
-  _handleAddDatasetClick() {
-    this._overlayOpen = !this._overlayOpen;
-  }
-  _handleDatasetSelected(e) {
-    var o;
-    const t = e.detail;
-    if (!this._selectedDatasetIds.has(t.id)) {
-      const l = [...this.selectedDatasets, t];
-      this.selectedDatasets = l, this.dispatchEvent(
-        new CustomEvent("dataset-selected", {
-          detail: t,
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-    const r = (o = this.shadowRoot) == null ? void 0 : o.getElementById("add-dataset-button");
-    r && r.click(), this._overlayOpen = !1;
-  }
-  _handleDatasetRemoved(e) {
-    const t = this.selectedDatasets.filter((r) => r.id !== e.id);
-    this.selectedDatasets = t, this.dispatchEvent(
-      new CustomEvent("dataset-removed", {
-        detail: e,
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  _getDatasetName(e) {
-    const t = y();
-    return z(e.name, t) || e.id || "Unknown Dataset";
-  }
-  _renderDatasetIcon(e) {
-    var o, l, p;
-    const t = (l = (o = e.account) == null ? void 0 : o.plugin) == null ? void 0 : l.thumbnails, r = t && t.length > 0 ? (p = t[0]) == null ? void 0 : p.url : null;
-    if (r) {
-      const d = `${this.appServer}/${r}`;
-      return c`<img
-        src=${d}
-        alt=${this._getDatasetName(e)}
-        class="dataset-icon-img"
-      />`;
-    }
-    return c`${m(b)}`;
-  }
-  _renderAddButton() {
-    return c`
-      <button
-        id="add-dataset-button"
-        type="button"
-        class="add-dataset-button ${this._hasSelectedDatasets ? "icon-only" : ""}"
-        @click=${this._handleAddDatasetClick}
-      >
-        ${m(h)}
-        ${this._hasSelectedDatasets ? w : this.buttonLabel}
-      </button>
-    `;
-  }
-  _renderDatasetPill(e) {
-    return c`
-      <div class="removable-pill" @click=${this._createDatasetRemovedHandler(e)}>
-        <div class="dataset-icon">
-          ${this._renderDatasetIcon(e)}
-        </div>
-        <span class="close-icon">${m(g)}</span>
-        <span
-          class="dataset-name text-truncate"
-          title=${this._getDatasetName(e)}
-        >
-          ${this._getDatasetName(e)}
-        </span>
-        <luzmo-tooltip
-          self-managed
-          placement="top"
-          show-only-if-truncated
-          truncated-element-selector=".dataset-name"
-        >
-          ${this._getDatasetName(e)}
-        </luzmo-tooltip>
-      </div>
-    `;
-  }
-  _handleOverlayOpened() {
-    this._overlayOpen = !0, requestAnimationFrame(() => {
-      var r, o;
-      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("luzmo-dataset-selector-list"), t = (o = e == null ? void 0 : e.shadowRoot) == null ? void 0 : o.querySelector(".search-input");
-      t && t.focus();
-    });
-  }
-  _handleOverlayClosed() {
-    this._overlayOpen = !1;
-  }
-  _createDatasetRemovedHandler(e) {
-    return () => this._handleDatasetRemoved(e);
-  }
-  _renderOverlay() {
-    return c`
-      <luzmo-overlay
-        id="dataset-overlay"
-        trigger="add-dataset-button@click"
-        placement="top-start"
-        @luzmo-opened=${this._handleOverlayOpened}
-        @luzmo-closed=${this._handleOverlayClosed}
-      >
-        <luzmo-popover style="position: relative">
-            <luzmo-dataset-selector-list
-            .selectedDatasets=${this._selectedDatasetIds}
-            auth-key=${this.authKey}
-            auth-token=${this.authToken}
-            api-url=${this.apiUrl}
-            app-server=${this.appServer}
-            ?flag-opendata=${this.flagOpendata}
-            @dataset-selected=${this._handleDatasetSelected}
-            ></luzmo-dataset-selector-list>
-        </luzmo-popover>
-      </luzmo-overlay>
-    `;
-  }
-  render() {
-    return c`
-      ${this._renderAddButton()}
-      ${k(
-      this.selectedDatasets,
-      (e) => e.id,
-      (e) => this._renderDatasetPill(e)
-    )}
-      ${this._renderOverlay()}
-    `;
-  }
-};
-n.styles = v(C), n.tagName = "luzmo-dataset-selector-row";
-let a = n;
-i([
-  s({ type: Array })
-], a.prototype, "selectedDatasets");
-i([
-  s({ type: String, attribute: "button-label" })
-], a.prototype, "buttonLabel");
-i([
-  s({ type: String, attribute: "auth-key" })
-], a.prototype, "authKey");
-i([
-  s({ type: String, attribute: "auth-token" })
-], a.prototype, "authToken");
-i([
-  s({ type: String, attribute: "api-url" })
-], a.prototype, "apiUrl");
-i([
-  s({ type: String, attribute: "app-server" })
-], a.prototype, "appServer");
-i([
-  s({ type: Boolean, attribute: "flag-opendata" })
-], a.prototype, "flagOpendata");
-i([
-  x()
-], a.prototype, "_overlayOpen");
-customElements.get("luzmo-dataset-selector-row") || customElements.define("luzmo-dataset-selector-row", a);
-const B = [
+const r = [
   { key: "general", label: "General" },
   { key: "filters", label: "Filters" },
   { key: "bar-column", label: "Bar & Column Charts" },
@@ -263,7 +84,7 @@ const B = [
   { key: "hierarchical", label: "Hierarchical Charts" },
   { key: "special", label: "Special Charts" },
   { key: "financial", label: "Financial Charts" }
-], A = [
+], t = [
   { type: "area-chart", label: "Area Chart" },
   { type: "bar-chart", label: "Bar Chart" },
   { type: "box-plot", label: "Box Plot" },
@@ -308,7 +129,7 @@ const B = [
   { type: "treemap-chart", label: "Treemap Chart" },
   { type: "video", label: "Video" },
   { type: "wordcloud-chart", label: "Wordcloud Chart" }
-], T = [
+], l = [
   { item: "text", type: "text", label: "Text", group: "general" },
   { item: "image", type: "image", label: "Image", group: "general" },
   {
@@ -657,55 +478,57 @@ const B = [
   }
 ];
 export {
-  G as LuzmoAiChatMessageAssistant,
-  R as LuzmoAiChatMessageUser,
-  V as LuzmoAiChatMessagesContainer,
-  q as LuzmoDatasetSelectorList,
-  a as LuzmoDatasetSelectorRow,
-  W as LuzmoDisplaySettings,
-  Q as LuzmoDisplaySettingsBinning,
-  Y as LuzmoDisplaySettingsDatetime,
-  ee as LuzmoDisplaySettingsGrandTotals,
-  oe as LuzmoDisplaySettingsNumeric,
-  ae as LuzmoDisplaySettingsPeriodOverPeriod,
-  ie as LuzmoDraggableDataItem,
-  ce as LuzmoDraggableDataItemLevel,
-  ne as LuzmoDroppableSlot,
-  me as LuzmoEditItem,
-  be as LuzmoEditOption,
-  ge as LuzmoEditOptionActionButtonGroup,
-  ye as LuzmoEditOptionColorPalettePicker,
-  ve as LuzmoEditOptionColorPicker,
-  xe as LuzmoEditOptionColorRange,
-  Ce as LuzmoEditOptionMultiLangField,
-  De as LuzmoEditOptionNumberField,
-  Pe as LuzmoEditOptionPicker,
-  Oe as LuzmoEditOptionPositionPicker,
-  Ee as LuzmoEditOptionPositionsNumberField,
-  Me as LuzmoEditOptionRadioButtonGroup,
-  Ae as LuzmoEditOptionSlider,
-  Ie as LuzmoEditOptionSwitch,
-  Ge as LuzmoEditOptionTextField,
-  Re as LuzmoFilterDataItemPicker,
-  Ve as LuzmoFilterExpressionPicker,
-  qe as LuzmoFilterItem,
-  We as LuzmoFilterValuePicker,
-  Qe as LuzmoFilterValuePickerDatetime,
-  Ye as LuzmoFilterValuePickerHierarchy,
-  et as LuzmoFilterValuePickerNumeric,
-  ot as LuzmoGrid,
-  rt as LuzmoGridItemActionsMenu,
-  lt as LuzmoSlotContentsPicker,
-  st as LuzmoSlotMenu,
-  pt as LuzmoSlotMenuList,
-  ut as PeriodOverPeriodCondition,
-  dt as decomposeNumericFormat,
-  ht as formatter,
-  ft as getTheme,
-  B as itemGroups,
-  T as itemList,
-  A as itemTypes,
-  z as localize,
-  zt as switchItem,
-  vt as systemThemeIds
+  p as LuzmoAiChatMessageAssistant,
+  u as LuzmoAiChatMessageUser,
+  n as LuzmoAiChatMessagesContainer,
+  s as LuzmoAiInteractionTextarea,
+  h as LuzmoDatasetIcon,
+  z as LuzmoDatasetSelectorList,
+  f as LuzmoDatasetSelectorRow,
+  C as LuzmoDisplaySettings,
+  v as LuzmoDisplaySettingsBinning,
+  S as LuzmoDisplaySettingsDatetime,
+  F as LuzmoDisplaySettingsGrandTotals,
+  w as LuzmoDisplaySettingsNumeric,
+  E as LuzmoDisplaySettingsPeriodOverPeriod,
+  B as LuzmoDraggableDataItem,
+  A as LuzmoDraggableDataItemLevel,
+  H as LuzmoDroppableSlot,
+  R as LuzmoEditItem,
+  V as LuzmoEditOption,
+  W as LuzmoEditOptionActionButtonGroup,
+  j as LuzmoEditOptionColorPalettePicker,
+  K as LuzmoEditOptionColorPicker,
+  X as LuzmoEditOptionColorRange,
+  Z as LuzmoEditOptionMultiLangField,
+  $ as LuzmoEditOptionNumberField,
+  oe as LuzmoEditOptionPicker,
+  te as LuzmoEditOptionPositionPicker,
+  ae as LuzmoEditOptionPositionsNumberField,
+  pe as LuzmoEditOptionRadioButtonGroup,
+  ue as LuzmoEditOptionSlider,
+  ne as LuzmoEditOptionSwitch,
+  se as LuzmoEditOptionTextField,
+  he as LuzmoFilterDataItemPicker,
+  ze as LuzmoFilterExpressionPicker,
+  fe as LuzmoFilterItem,
+  Ce as LuzmoFilterValuePicker,
+  ve as LuzmoFilterValuePickerDatetime,
+  Se as LuzmoFilterValuePickerHierarchy,
+  Fe as LuzmoFilterValuePickerNumeric,
+  we as LuzmoGrid,
+  Me as LuzmoGridItemActionsMenu,
+  Oe as LuzmoSlotContentsPicker,
+  Te as LuzmoSlotMenu,
+  Ge as LuzmoSlotMenuList,
+  Ie as PeriodOverPeriodCondition,
+  Ne as decomposeNumericFormat,
+  Ue as formatter,
+  Qe as getTheme,
+  r as itemGroups,
+  l as itemList,
+  t as itemTypes,
+  qe as localize,
+  Je as switchItem,
+  Xe as systemThemeIds
 };

package/custom-elements.json

@@ -374,6 +374,17 @@
               "default": "false",
               "description": "When true, restricts results to public datasets (opendata parity)",
               "attribute": "flag-opendata"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, disables the entire component (sets opacity to 60% and prevents all interactions)",
+              "attribute": "disabled",
+              "reflects": true
             }
           ],
           "events": [
@@ -386,6 +397,15 @@
             }
           ],
           "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, disables the entire component (sets opacity to 60% and prevents all interactions)",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled"
+            },
             {
               "name": "placeholder",
               "type": {
@@ -470,6 +490,120 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/dataset-icon/dataset-icon.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "publicConnectors",
+          "type": {
+            "text": "[\n  'amazonathena',\n  'asana',\n  'bigquery',\n  'citybikes',\n  'clickhouse',\n  'demodataplugin',\n  'elasticsearch',\n  'exact',\n  'exactonline',\n  'exactonlinenl',\n  'google',\n  'googleanalytics',\n  'googleanalyticsv4',\n  'googledrive',\n  'hubspot',\n  'mailchimp',\n  'mariadb',\n  'mongodb',\n  'mysql',\n  'oracle',\n  'panoply',\n  'pipedrive',\n  'pipelinedb',\n  'postgresql',\n  'presto',\n  'redshift',\n  'salesforce',\n  'saphana',\n  'snowflake',\n  'sqlserver',\n  'stardog',\n  'synapse',\n  'teamleader',\n  'trino',\n  'typeform',\n  'zendesk'\n]"
+          },
+          "default": "[ 'amazonathena', 'asana', 'bigquery', 'citybikes', 'clickhouse', 'demodataplugin', 'elasticsearch', 'exact', 'exactonline', 'exactonlinenl', 'google', 'googleanalytics', 'googleanalyticsv4', 'googledrive', 'hubspot', 'mailchimp', 'mariadb', 'mongodb', 'mysql', 'oracle', 'panoply', 'pipedrive', 'pipelinedb', 'postgresql', 'presto', 'redshift', 'salesforce', 'saphana', 'snowflake', 'sqlserver', 'stardog', 'synapse', 'teamleader', 'trino', 'typeform', 'zendesk' ]",
+          "description": "Public connectors list - these are well-known connectors that may have CSS-based icons\nThis list should match the one from"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LuzmoDatasetIcon",
+          "members": [
+            {
+              "kind": "field",
+              "name": "tagName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "default": "'luzmo-dataset-icon'"
+            },
+            {
+              "kind": "field",
+              "name": "datasetInfo",
+              "type": {
+                "text": "DatasetIcon | undefined"
+              },
+              "description": "The dataset information containing subtype and thumbnail data",
+              "attribute": "dataset"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
+              },
+              "default": "'32px'",
+              "description": "The size of the icon",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "appUrl",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The base URL for the application (used for thumbnail URLs)",
+              "attribute": "app-url"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "dataset",
+              "type": {
+                "text": "DatasetIcon | undefined"
+              },
+              "description": "The dataset information containing subtype and thumbnail data",
+              "fieldName": "datasetInfo"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'16px' | '24px' | '32px' | '48px' | '64px'"
+              },
+              "default": "'32px'",
+              "description": "The size of the icon",
+              "fieldName": "size"
+            },
+            {
+              "name": "app-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The base URL for the application (used for thumbnail URLs)",
+              "fieldName": "appUrl"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "luzmo-dataset-icon",
+          "customElement": true,
+          "summary": "Displays an icon for a dataset based on its type, thumbnails, and connector"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "publicConnectors",
+          "declaration": {
+            "name": "publicConnectors",
+            "module": "src/components/dataset-icon/dataset-icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LuzmoDatasetIcon",
+          "declaration": {
+            "name": "LuzmoDatasetIcon",
+            "module": "src/components/dataset-icon/dataset-icon.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/dataset-selector-list/dataset-selector-list.ts",
@@ -886,6 +1020,17 @@
               "default": "false",
               "description": "When true, restricts results to public datasets (opendata parity)",
               "attribute": "flag-opendata"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, disables all interactions with the component",
+              "attribute": "disabled",
+              "reflects": true
             }
           ],
           "events": [
@@ -905,6 +1050,15 @@
             }
           ],
           "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "When true, disables all interactions with the component",
+              "name": "disabled",
+              "default": "false",
+              "fieldName": "disabled"
+            },
             {
               "name": "selectedDatasets",
               "type": {
@@ -2418,7 +2572,7 @@
               "kind": "field",
               "name": "itemType",
               "type": {
-                "text": "ItemType | undefined"
+                "text": "VizItemType | undefined"
               },
               "attribute": "item-type",
               "reflects": true
@@ -2584,7 +2738,7 @@
             {
               "name": "item-type",
               "type": {
-                "text": "ItemType | undefined"
+                "text": "VizItemType | undefined"
               },
               "fieldName": "itemType"
             },