@luzmo/analytics-components-kit 1.0.0

package/components/item-option-number-field-QXhNwvtx.js

@@ -0,0 +1,98 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { n as __decorate } from "./localized-mixin-BMNoUdF8.js";
+import { t as LuzmoItemOptionBase } from "./item-option-base-B7ouWFev.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+import "@luzmo/lucero/number-field";
+import { ifDefined } from "lit/directives/if-defined.js";
+var LuzmoItemOptionNumberField = class extends LuzmoItemOptionBase {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.step = 1, this.unit = !1, this.debounce = 200;
+	}
+	static {
+		this.styles = [super.styles];
+	}
+	_handleEvent() {
+		this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
+			this.dispatchEvent(new CustomEvent("luzmo-option-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { value: typeof this.toValue == "function" ? this.toValue(this.numberField.value) : this.numberField.value }
+			}));
+		}, this.debounce ?? 200);
+	}
+	renderController() {
+		let e = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, o = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
+		return html`
+      <luzmo-number-field
+        id="luzmo-item-option-control"
+        style="min-width: ${this.minWidthInputField ?? "auto"}"
+        value=${ifDefined(e ?? o)}
+        .label=${this.label}
+        .size=${this.size}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        .unit=${this.unit}
+        .debounce=${this.debounce}
+        placeholder=${ifDefined(this.placeholder)}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+        @input=${this._handleEvent}
+      >
+      </luzmo-number-field>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "disabled", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "min", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "max", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "default", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "value", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "placeholder", void 0), __decorate([property({
+	type: String,
+	reflect: !0,
+	attribute: "min-width-input-field"
+})], LuzmoItemOptionNumberField.prototype, "minWidthInputField", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "step", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "unit", void 0), __decorate([property({
+	type: Number,
+	reflect: !0
+})], LuzmoItemOptionNumberField.prototype, "debounce", void 0), __decorate([property()], LuzmoItemOptionNumberField.prototype, "parseValue", void 0), __decorate([property()], LuzmoItemOptionNumberField.prototype, "toValue", void 0), __decorate([query("luzmo-number-field")], LuzmoItemOptionNumberField.prototype, "numberField", void 0), customElements.get("luzmo-item-option-number-field") || customElements.define("luzmo-item-option-number-field", LuzmoItemOptionNumberField);
+export { LuzmoItemOptionNumberField as t };

package/components/item-option-panel/index.cjs

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../base-Cz3eNBHA.cjs`),require(`../focus-visible-3ACCHno4.cjs`),require(`../localized-mixin-FYdeD8xw.cjs`),require(`../set-locale-7H4YCP38.cjs`),require(`../data-broker-mFGFQfak.cjs`),require(`../item-option-B-jdD4az.cjs`);const e=require(`../item-option-panel-BQCvJgnH.cjs`);exports.LuzmoItemOptionPanel=e.t;

package/components/item-option-panel/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoItemOptionPanel } from './item-option-panel';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-panel': LuzmoItemOptionPanel;
+    }
+}
+export { LuzmoItemOptionPanel } from './item-option-panel';

package/components/item-option-panel/index.js

@@ -0,0 +1,33 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+(function() {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let 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-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--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);
+	}
+})();
+import "../base-BPca9j_g.js";
+import "../focus-visible-D1pJhWEh.js";
+import "../localized-mixin-BMNoUdF8.js";
+import "../set-locale-CoJL3mt9.js";
+import "../data-broker-Cq7Cgr4w.js";
+import "../item-option-DY0NLdz8.js";
+import { t as LuzmoItemOptionPanel } from "../item-option-panel-CitKdCTB.js";
+export { LuzmoItemOptionPanel };

package/components/item-option-panel/item-option-panel.d.ts

@@ -0,0 +1,77 @@
+import type { OptionsConfig, Slot, ThemeConfig, TranslationOverrides, TranslationsFile, VizItemType } from '@luzmo/dashboard-contents-types';
+import '@luzmo/lucero/accordion';
+import '@luzmo/lucero/divider';
+import { type TemplateResult } from 'lit';
+import { ElementSize, LuzmoElement } from '../../utils/base';
+import './../item-option';
+/**
+ * @customElement luzmo-item-option-panel
+ * @fires luzmo-options-changed - Announces that the `options` of the element have changed
+ */
+export declare class LuzmoItemOptionPanel extends LuzmoElement {
+    static styles: import("lit").CSSResult;
+    private _loadItemConfig;
+    /**
+     * The language in which to display the option configuration controls.
+     */
+    language: string;
+    /**
+     * The item type to load the configuration for. Leave empty if using a custom options configuration.
+     */
+    itemType: VizItemType;
+    /**
+     * The options of the item.
+     */
+    options?: Record<string, unknown>;
+    /**
+     * The slots of the item.
+     */
+    slots?: Slot[];
+    /**
+     * When using a custom options configuration, this is the configuration object.
+     */
+    customOptionsConfiguration?: OptionsConfig;
+    /**
+     * When using a custom translations configuration, this is the configuration object.
+     */
+    customTranslations?: TranslationOverrides | TranslationsFile;
+    /**
+     * The theme of the item.
+     */
+    theme?: ThemeConfig & Record<string, any>;
+    /**
+     * The size of the item option panel component.
+     */
+    size: ElementSize;
+    /**
+     * The API URL of the databroker
+     * @default https://api.luzmo.com
+     * @description The URL of the databroker API
+     */
+    apiUrl?: string;
+    /**
+     * The auth key of the databroker
+     */
+    authKey?: string;
+    /**
+     * The auth token of the databroker
+     */
+    authToken?: string;
+    private _itemTypeLoaded?;
+    private _languageLoaded?;
+    private _optionsConfiguration;
+    private _translations;
+    private _translationOverrides?;
+    private _groupTranslationOverrides?;
+    private _hasCustomTranslationsFile;
+    private _isCustomOptionsConfiguration;
+    private renderAllGroups;
+    private renderGroup;
+    private changedOptions;
+    private renderOptionControl;
+    private renderDivider;
+    render(): TemplateResult | TemplateResult<1> | undefined;
+    private _getOptionTranslation;
+    private _getTranslationsFile;
+    private _getTranslationOverrides;
+}

package/components/item-option-panel-BQCvJgnH.cjs

@@ -0,0 +1,67 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./base-Cz3eNBHA.cjs`),n=require(`./localized-mixin-FYdeD8xw.cjs`),r=require(`./item-option-B-jdD4az.cjs`);let i=require(`lit`),a=require(`lit/decorators.js`),o=require(`@lit/task`);require(`@luzmo/lucero/divider`),require(`@luzmo/lucero/accordion`);var s=`:host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2)))0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4))0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}`,c=class extends t.i{constructor(...e){super(...e),this._loadItemConfig=new o.Task(this,{task:async([e,t,n,i])=>{let a=this._getTranslationOverrides(i),o=this._getTranslationsFile(i),s=this._hasCustomTranslationsFile;if(this._translationOverrides=a??o?.options,this._groupTranslationOverrides=a,this._hasCustomTranslationsFile=!!o,n)return this._isCustomOptionsConfiguration=!0,this._optionsConfiguration=n,this._translations=o??{},this._itemTypeLoaded=void 0,this._languageLoaded=void 0,{config:this._optionsConfiguration};if(e){let n=e!==this._itemTypeLoaded,i=e!==this._itemTypeLoaded||t!==this._languageLoaded||!o&&s;n&&(this._optionsConfiguration=await r.i(e)??[],this._itemTypeLoaded=e),o?(this._translations=o,this._languageLoaded=t):i&&(this._translations=await r.r(e,t??`en`,!0)??{},this._languageLoaded=t),this._isCustomOptionsConfiguration=!1}else this._optionsConfiguration=[],this._translations=o??{};return{config:this._optionsConfiguration}},args:()=>[this.itemType,this.language,this.customOptionsConfiguration,this.customTranslations]}),this.language=`en`,this.options={},this.slots=[],this.size=`m`,this._optionsConfiguration=[],this._translations={},this._hasCustomTranslationsFile=!1,this.renderAllGroups=e=>{if(!Array.isArray(e))return i.html`
+        
+      `;let t=e?.map(e=>{if(e?.children)return this.renderGroup(e)});return e&&e.length>0?i.html`<luzmo-accordion
+          variant="highlight"
+          .size=${this.size}
+          density="compact"
+          allow-multiple
+          no-content-padding
+          header-case="uppercase"
+          >${t}</luzmo-accordion
+        >`:i.html`
+          
+        `},this.renderGroup=e=>typeof e?.visibleIf==`function`&&!e.visibleIf({options:this.options,slots:this.slots,theme:this.theme})?i.html`
+        
+      `:i.html`<luzmo-accordion-item label=${e.key?this._groupTranslationOverrides?.[e.key]?.label??this._translations.groups?.[e.key]?.label??e.label??e.key:e.label??``} ?open=${e.open}>
+      ${(e=>e?.map(e=>{if(typeof e?.visibleIf==`function`&&!e.visibleIf({options:this.options,slots:this.slots,theme:this.theme}))return i.html`
+            
+          `;if(e?.control&&e.key)return this.renderOptionControl(e.key);if(e?.type===`divider`)return this.renderDivider();if(e?.type===`group`)return i.html`<luzmo-accordion
+            variant="highlight-child"
+            .size=${this.size}
+            density="compact"
+            allow-multiple
+            no-content-padding
+            header-case="default"
+            >${this.renderGroup(e)}</luzmo-accordion
+          >`}))(e.children)}
+    </luzmo-accordion-item>`,this.changedOptions=e=>{let t=e?.detail?.options;this.options=e?.detail?.options,e.preventDefault(),e.stopPropagation(),this.dispatchEvent(new CustomEvent(`luzmo-options-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{options:t}}))},this.renderOptionControl=e=>{let t=this._isCustomOptionsConfiguration,n=t?r.n(e,this.customOptionsConfiguration??[],!0):void 0,a=t?this._getOptionTranslation(e):this._translationOverrides;return i.html`<luzmo-item-option
+      class="control"
+      .itemType=${t?void 0:this.itemType}
+      .optionKey=${e}
+      .options=${this.options}
+      .customOptionConfiguration=${n}
+      .customTranslations=${a}
+      .slots=${this.slots}
+      .theme=${this.theme}
+      .size=${this.size}
+      .language=${this.language}
+      .apiUrl=${this.apiUrl}
+      .authKey=${this.authKey}
+      .authToken=${this.authToken}
+      @luzmo-options-changed=${this.changedOptions}
+    ></luzmo-item-option>`},this.renderDivider=()=>i.html`
+      <luzmo-divider></luzmo-divider>
+    `}static{this.styles=(0,i.unsafeCSS)(s)}render(){return this._loadItemConfig.render({pending:()=>i.html`
+          <p role="status">Loading...</p>
+        `,complete:e=>this.renderAllGroups(e.config),error:e=>(console.error(e),i.html`
+          
+        `)})}_getOptionTranslation(e){return this._translationOverrides?.[e]??this._translations.options?.[e]}_getTranslationsFile(e){if(!(!e||typeof e!=`object`)&&(`groups`in e||`options`in e))return e}_getTranslationOverrides(e){if(!(!e||typeof e!=`object`)&&!(`groups`in e||`options`in e))return e}};n.n([(0,a.property)({type:String,reflect:!0})],c.prototype,`language`,void 0),n.n([(0,a.property)({type:String,reflect:!0,attribute:`item-type`})],c.prototype,`itemType`,void 0),n.n([(0,a.property)({type:Object})],c.prototype,`options`,void 0),n.n([(0,a.property)({type:Object})],c.prototype,`slots`,void 0),n.n([(0,a.property)({type:Object,reflect:!1})],c.prototype,`customOptionsConfiguration`,void 0),n.n([(0,a.property)({type:Object,reflect:!1})],c.prototype,`customTranslations`,void 0),n.n([(0,a.property)({type:Object})],c.prototype,`theme`,void 0),n.n([(0,a.property)({type:String,reflect:!0})],c.prototype,`size`,void 0),n.n([(0,a.property)({type:String,attribute:`api-url`,reflect:!0})],c.prototype,`apiUrl`,void 0),n.n([(0,a.property)({type:String,attribute:`auth-key`,reflect:!0})],c.prototype,`authKey`,void 0),n.n([(0,a.property)({type:String,attribute:`auth-token`,reflect:!0})],c.prototype,`authToken`,void 0),customElements.get(`luzmo-item-option-panel`)||customElements.define(`luzmo-item-option-panel`,c),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});

package/components/item-option-panel-CitKdCTB.js

@@ -0,0 +1,174 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 Luzmo
+ * All rights reserved.
+ * Luzmo web components (“Luzmo Web Components”)
+ * must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account
+ * to use the Luzmo Web Components. This license terminates
+ * automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { i as LuzmoElement } from "./base-BPca9j_g.js";
+import { n as __decorate } from "./localized-mixin-BMNoUdF8.js";
+import { i as y, n as getControlByKey, r as g } from "./item-option-DY0NLdz8.js";
+import { html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { Task } from "@lit/task";
+import "@luzmo/lucero/divider";
+import "@luzmo/lucero/accordion";
+var item_option_panel_module_default = ":host{font-size:var(--luzmo-item-option-panel-font-size,var(--luzmo-font-size))}:host luzmo-divider{margin:var(--luzmo-item-option-panel-divider-vertical-margin,calc(var(--luzmo-spacing-5) + var(--luzmo-spacing-2)))0;display:block}:host luzmo-item-option{margin:var(--luzmo-item-option-divider-vertical-margin,var(--luzmo-spacing-4))0;display:block}:host([size=s]){font-size:var(--luzmo-item-option-panel-font-size-s,var(--luzmo-font-size-s))}:host([size=l]){font-size:var(--luzmo-item-option-panel-font-size-l,var(--luzmo-font-size-l))}:host([size=xl]){font-size:var(--luzmo-item-option-panel-font-size-xl,var(--luzmo-font-size-xl))}", LuzmoItemOptionPanel = class extends LuzmoElement {
+	constructor(...e) {
+		super(...e), this._loadItemConfig = new Task(this, {
+			task: async ([e, r, a, s]) => {
+				let c = this._getTranslationOverrides(s), l = this._getTranslationsFile(s), u = this._hasCustomTranslationsFile;
+				if (this._translationOverrides = c ?? l?.options, this._groupTranslationOverrides = c, this._hasCustomTranslationsFile = !!l, a) return this._isCustomOptionsConfiguration = !0, this._optionsConfiguration = a, this._translations = l ?? {}, this._itemTypeLoaded = void 0, this._languageLoaded = void 0, { config: this._optionsConfiguration };
+				if (e) {
+					let a = e !== this._itemTypeLoaded, s = e !== this._itemTypeLoaded || r !== this._languageLoaded || !l && u;
+					a && (this._optionsConfiguration = await y(e) ?? [], this._itemTypeLoaded = e), l ? (this._translations = l, this._languageLoaded = r) : s && (this._translations = await g(e, r ?? "en", !0) ?? {}, this._languageLoaded = r), this._isCustomOptionsConfiguration = !1;
+				} else this._optionsConfiguration = [], this._translations = l ?? {};
+				return { config: this._optionsConfiguration };
+			},
+			args: () => [
+				this.itemType,
+				this.language,
+				this.customOptionsConfiguration,
+				this.customTranslations
+			]
+		}), this.language = "en", this.options = {}, this.slots = [], this.size = "m", this._optionsConfiguration = [], this._translations = {}, this._hasCustomTranslationsFile = !1, this.renderAllGroups = (e) => {
+			if (!Array.isArray(e)) return html`
+        
+      `;
+			let r = e?.map((e) => {
+				if (e?.children) return this.renderGroup(e);
+			});
+			return e && e.length > 0 ? html`<luzmo-accordion
+          variant="highlight"
+          .size=${this.size}
+          density="compact"
+          allow-multiple
+          no-content-padding
+          header-case="uppercase"
+          >${r}</luzmo-accordion
+        >` : html`
+          
+        `;
+		}, this.renderGroup = (e) => typeof e?.visibleIf == "function" && !e.visibleIf({
+			options: this.options,
+			slots: this.slots,
+			theme: this.theme
+		}) ? html`
+        
+      ` : html`<luzmo-accordion-item label=${e.key ? this._groupTranslationOverrides?.[e.key]?.label ?? this._translations.groups?.[e.key]?.label ?? e.label ?? e.key : e.label ?? ""} ?open=${e.open}>
+      ${((e) => e?.map((e) => {
+			if (typeof e?.visibleIf == "function" && !e.visibleIf({
+				options: this.options,
+				slots: this.slots,
+				theme: this.theme
+			})) return html`
+            
+          `;
+			if (e?.control && e.key) return this.renderOptionControl(e.key);
+			if (e?.type === "divider") return this.renderDivider();
+			if (e?.type === "group") return html`<luzmo-accordion
+            variant="highlight-child"
+            .size=${this.size}
+            density="compact"
+            allow-multiple
+            no-content-padding
+            header-case="default"
+            >${this.renderGroup(e)}</luzmo-accordion
+          >`;
+		}))(e.children)}
+    </luzmo-accordion-item>`, this.changedOptions = (e) => {
+			let r = e?.detail?.options;
+			this.options = e?.detail?.options, e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("luzmo-options-changed", {
+				bubbles: !0,
+				composed: !0,
+				cancelable: !0,
+				detail: { options: r }
+			}));
+		}, this.renderOptionControl = (e) => {
+			let r = this._isCustomOptionsConfiguration, i = r ? getControlByKey(e, this.customOptionsConfiguration ?? [], !0) : void 0, o = r ? this._getOptionTranslation(e) : this._translationOverrides;
+			return html`<luzmo-item-option
+      class="control"
+      .itemType=${r ? void 0 : this.itemType}
+      .optionKey=${e}
+      .options=${this.options}
+      .customOptionConfiguration=${i}
+      .customTranslations=${o}
+      .slots=${this.slots}
+      .theme=${this.theme}
+      .size=${this.size}
+      .language=${this.language}
+      .apiUrl=${this.apiUrl}
+      .authKey=${this.authKey}
+      .authToken=${this.authToken}
+      @luzmo-options-changed=${this.changedOptions}
+    ></luzmo-item-option>`;
+		}, this.renderDivider = () => html`
+      <luzmo-divider></luzmo-divider>
+    `;
+	}
+	static {
+		this.styles = unsafeCSS(item_option_panel_module_default);
+	}
+	render() {
+		return this._loadItemConfig.render({
+			pending: () => html`
+          <p role="status">Loading...</p>
+        `,
+			complete: (e) => this.renderAllGroups(e.config),
+			error: (e) => (console.error(e), html`
+          
+        `)
+		});
+	}
+	_getOptionTranslation(e) {
+		return this._translationOverrides?.[e] ?? this._translations.options?.[e];
+	}
+	_getTranslationsFile(e) {
+		if (!(!e || typeof e != "object") && ("groups" in e || "options" in e)) return e;
+	}
+	_getTranslationOverrides(e) {
+		if (!(!e || typeof e != "object") && !("groups" in e || "options" in e)) return e;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoItemOptionPanel.prototype, "language", void 0), __decorate([property({
+	type: String,
+	reflect: !0,
+	attribute: "item-type"
+})], LuzmoItemOptionPanel.prototype, "itemType", void 0), __decorate([property({ type: Object })], LuzmoItemOptionPanel.prototype, "options", void 0), __decorate([property({ type: Object })], LuzmoItemOptionPanel.prototype, "slots", void 0), __decorate([property({
+	type: Object,
+	reflect: !1
+})], LuzmoItemOptionPanel.prototype, "customOptionsConfiguration", void 0), __decorate([property({
+	type: Object,
+	reflect: !1
+})], LuzmoItemOptionPanel.prototype, "customTranslations", void 0), __decorate([property({ type: Object })], LuzmoItemOptionPanel.prototype, "theme", void 0), __decorate([property({
+	type: String,
+	reflect: !0
+})], LuzmoItemOptionPanel.prototype, "size", void 0), __decorate([property({
+	type: String,
+	attribute: "api-url",
+	reflect: !0
+})], LuzmoItemOptionPanel.prototype, "apiUrl", void 0), __decorate([property({
+	type: String,
+	attribute: "auth-key",
+	reflect: !0
+})], LuzmoItemOptionPanel.prototype, "authKey", void 0), __decorate([property({
+	type: String,
+	attribute: "auth-token",
+	reflect: !0
+})], LuzmoItemOptionPanel.prototype, "authToken", void 0), customElements.get("luzmo-item-option-panel") || customElements.define("luzmo-item-option-panel", LuzmoItemOptionPanel);
+export { LuzmoItemOptionPanel as t };

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

@@ -0,0 +1,20 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../base-Cz3eNBHA.cjs`),require(`../focus-visible-3ACCHno4.cjs`),require(`../localized-mixin-FYdeD8xw.cjs`),require(`../set-locale-7H4YCP38.cjs`),require(`../item-option-base-DVsbix3i.cjs`);const e=require(`../item-option-picker-DOP2i66P.cjs`);exports.LuzmoItemOptionPicker=e.t;

package/components/item-option-picker/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoItemOptionPicker } from './item-option-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-item-option-picker': LuzmoItemOptionPicker;
+    }
+}
+export { LuzmoItemOptionPicker } from './item-option-picker';

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

@@ -0,0 +1,32 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+(function() {
+	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+		let 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-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--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);
+	}
+})();
+import "../base-BPca9j_g.js";
+import "../focus-visible-D1pJhWEh.js";
+import "../localized-mixin-BMNoUdF8.js";
+import "../set-locale-CoJL3mt9.js";
+import "../item-option-base-B7ouWFev.js";
+import { t as LuzmoItemOptionPicker } from "../item-option-picker-Wf80pj4q.js";
+export { LuzmoItemOptionPicker };

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

@@ -0,0 +1,24 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/picker';
+import { TemplateResult } from 'lit';
+import { LuzmoItemOptionBase } from '../item-option-base/item-option-base';
+/**
+ * @customElement luzmo-item-option-picker
+ */
+export declare class LuzmoItemOptionPicker extends LuzmoItemOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    values: Record<string, string>;
+    disabled: boolean;
+    /**
+     * @property {Placement} placement - Placement of the picker dropdown.
+     */
+    placement: Placement;
+    value?: string;
+    parseValue?: (value: string | number | any) => string;
+    toValue?: (value: string) => string | number | any;
+    default?: string;
+    private _handleEvent;
+    private generateMenuItems;
+    protected renderController(): TemplateResult<1>;
+}

package/components/item-option-picker-DOP2i66P.cjs

@@ -0,0 +1,37 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2026 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.
+ * */
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./localized-mixin-FYdeD8xw.cjs`),n=require(`./item-option-base-DVsbix3i.cjs`);let r=require(`lit`),i=require(`lit/decorators.js`);require(`@luzmo/lucero/picker`),require(`@luzmo/lucero/menu`);var a=class extends n.t{constructor(...e){super(...e),this.values={},this.disabled=!1,this.placement=`bottom-end`}static{this.styles=[super.styles]}_handleEvent(e){this.dispatchEvent(new CustomEvent(`luzmo-option-changed`,{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue==`function`?this.toValue(e.detail):e.detail}}))}generateMenuItems(){return r.html`
+      ${Object.entries(this.values).map(([e,t])=>r.html`
+          <luzmo-menu-item value=${e}> ${t} </luzmo-menu-item>
+        `)}
+    `}renderController(){let e=typeof this.parseValue==`function`?this.parseValue(this.value):this.value,t=typeof this.parseValue==`function`?this.parseValue(this.default):this.default;return r.html`
+      <luzmo-picker
+        id="luzmo-item-option-control"
+        .label=${this.label}
+        .value=${e?.length?e:t??``}
+        .size=${this.size}
+        variant="highlight"
+        .placement=${this.placement}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${this.generateMenuItems()}
+      </luzmo-picker>
+    `}};t.n([(0,i.property)({type:Object})],a.prototype,`values`,void 0),t.n([(0,i.property)({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),t.n([(0,i.property)()],a.prototype,`placement`,void 0),t.n([(0,i.property)({type:String,reflect:!0})],a.prototype,`value`,void 0),t.n([(0,i.property)()],a.prototype,`parseValue`,void 0),t.n([(0,i.property)()],a.prototype,`toValue`,void 0),t.n([(0,i.property)({type:String})],a.prototype,`default`,void 0),customElements.get(`luzmo-item-option-picker`)||customElements.define(`luzmo-item-option-picker`,a),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});