@luzmo/analytics-components-kit 1.0.1-alpha.96 → 1.0.1-alpha.97

package/components/edit-option-multi-language-field/index.js

@@ -19,29 +19,28 @@
  * */
 var s = Object.getPrototypeOf;
 var d = Reflect.get;
-var c = (i, o, u) => d(s(i), u, o);
+var c = (t, e, m) => d(s(t), m, e);
 import "@luzmo/lucero/multi-language-field";
 import { html as z } from "lit";
 import { property as r, query as g } from "lit/decorators.js";
-import { L as f } from "../edit-option-base-DIc7iC-b.js";
+import { L as f } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.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(o);
+    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);
   }
 })();
-var p = Object.defineProperty, l = (i, o, u, b) => {
-  for (var t = void 0, a = i.length - 1, n; a >= 0; a--)
-    (n = i[a]) && (t = n(o, u, t) || t);
-  return t && p(o, u, t), t;
+var p = Object.defineProperty, l = (t, e, m, b) => {
+  for (var u = void 0, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (u = n(e, m, u) || u);
+  return u && p(e, m, u), u;
 };
-const m = class m extends f {
+const i = class i extends f {
   constructor() {
     super(...arguments), this.value = {}, this.invalid = !1, this.readonly = !1, this.language = "en", this.debounce = 200;
   }
   _handleEvent() {
     this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
-      var o, u;
       this.dispatchEvent(
         new CustomEvent("option-changed", {
           bubbles: !0,
@@ -49,19 +48,19 @@ const m = class m extends f {
           cancelable: !0,
           detail: {
             value: typeof this.toValue == "function" ? this.toValue(
-              ((o = this.multiLangFieldElement) == null ? void 0 : o.value) ?? {},
+              this.multiLangFieldElement?.value ?? {},
               this.language ?? "en"
-            ) : ((u = this.multiLangFieldElement) == null ? void 0 : u.value) ?? {}
+            ) : this.multiLangFieldElement?.value ?? {}
           }
         })
       );
     }, this.debounce ?? 200);
   }
   renderController() {
-    const o = typeof this.parseValue == "function" ? this.parseValue(this.value, this.language ?? "en") : this.value;
+    const e = typeof this.parseValue == "function" ? this.parseValue(this.value, this.language ?? "en") : this.value;
     return z`
       <luzmo-multi-language-field
-        .value=${o}
+        .value=${e}
         .language=${this.language ?? "en"}
         .disabled=${this.disabled}
         .size=${this.size}
@@ -73,39 +72,39 @@ const m = class m extends f {
     `;
   }
 };
-m.styles = [c(m, m, "styles")];
-let e = m;
+i.styles = [c(i, i, "styles")];
+let o = i;
 l([
   r({ type: Object, reflect: !0 })
-], e.prototype, "value");
+], o.prototype, "value");
 l([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "invalid");
+], o.prototype, "invalid");
 l([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly");
+], o.prototype, "readonly");
 l([
   r({ type: String, reflect: !0 })
-], e.prototype, "language");
+], o.prototype, "language");
 l([
   r({ type: Object, reflect: !0 })
-], e.prototype, "placeholder");
+], o.prototype, "placeholder");
 l([
   r()
-], e.prototype, "parseValue");
+], o.prototype, "parseValue");
 l([
   r()
-], e.prototype, "toValue");
+], o.prototype, "toValue");
 l([
   r({ type: Number, reflect: !0 })
-], e.prototype, "debounce");
+], o.prototype, "debounce");
 l([
   g("luzmo-multi-language-field")
-], e.prototype, "multiLangFieldElement");
+], o.prototype, "multiLangFieldElement");
 customElements.get("luzmo-edit-option-multi-language-field") || customElements.define(
   "luzmo-edit-option-multi-language-field",
-  e
+  o
 );
 export {
-  e as LuzmoEditOptionMultiLangField
+  o as LuzmoEditOptionMultiLangField
 };

package/components/edit-option-number-field/edit-option-number-field.d.ts

@@ -0,0 +1,21 @@
+import '@luzmo/lucero/number-field';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionNumberField extends LuzmoEditOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    disabled: boolean;
+    min?: number;
+    max?: number;
+    default?: number;
+    value?: number;
+    placeholder?: string;
+    minWidthInputField?: string;
+    step: number;
+    unit: boolean;
+    debounce: number;
+    parseValue?: (value?: string | number) => number;
+    toValue?: (value?: number) => string | number | any;
+    private numberField;
+    debounceTimeout: any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/edit-option-number-field/index.cjs

@@ -1,4 +1,23 @@
-"use strict";var h=Object.getPrototypeOf;var c=Reflect.get;var a=(s,i,o)=>c(h(s),o,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/number-field");const y=require("lit"),t=require("lit/decorators.js"),d=require("lit/directives/if-defined.js"),f=require("../edit-option-base-VhTih9T1.cjs");var m=Object.defineProperty,r=(s,i,o,b)=>{for(var u=void 0,l=s.length-1,n;l>=0;l--)(n=s[l])&&(u=n(i,o,u)||u);return u&&m(i,o,u),u};const p=class p extends f.LuzmoEditOptionBase{constructor(){super(...arguments),this.disabled=!1,this.step=1,this.unit=!1,this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("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(){const i=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,o=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return y.html`
+/*! * 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";var h=Object.getPrototypeOf;var c=Reflect.get;var a=(s,i,o)=>c(h(s),o,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/number-field");const y=require("lit"),t=require("lit/decorators.js"),d=require("lit/directives/if-defined.js"),f=require("../edit-option-base-tFr8Qg2B.cjs");var m=Object.defineProperty,r=(s,i,o,b)=>{for(var u=void 0,l=s.length-1,n;l>=0;l--)(n=s[l])&&(u=n(i,o,u)||u);return u&&m(i,o,u),u};const p=class p extends f.LuzmoEditOptionBase{constructor(){super(...arguments),this.disabled=!1,this.step=1,this.unit=!1,this.debounce=200}_handleEvent(){this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("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(){const i=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,o=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return y.html`
       <luzmo-number-field
         style="min-width: ${this.minWidthInputField??"auto"}"
         value=${d.ifDefined(i??o)}

package/components/edit-option-number-field/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionNumberField } from './edit-option-number-field';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-number-field': LuzmoEditOptionNumberField;
+    }
+}
+export { LuzmoEditOptionNumberField } from './edit-option-number-field';

package/components/edit-option-number-field/index.js

@@ -24,7 +24,7 @@ import "@luzmo/lucero/number-field";
 import { html as p } from "lit";
 import { property as l, query as f } from "lit/decorators.js";
 import { ifDefined as s } from "lit/directives/if-defined.js";
-import { L as b } from "../edit-option-base-DIc7iC-b.js";
+import { L as b } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const r = document.createElement("style");

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

@@ -0,0 +1,22 @@
+import { Placement } from '@luzmo/lucero';
+import '@luzmo/lucero/menu';
+import '@luzmo/lucero/picker';
+import { TemplateResult } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionPicker extends LuzmoEditOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    values: Record<string, string>;
+    disabled: boolean;
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     * @attr
+     */
+    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/edit-option-picker/index.cjs

@@ -1,10 +1,29 @@
-"use strict";var c=Object.getPrototypeOf;var d=Reflect.get;var h=(i,e,r)=>d(c(i),r,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/menu");require("@luzmo/lucero/picker");const u=require("lit"),s=require("lit/decorators.js"),m=require("../edit-option-base-VhTih9T1.cjs");var y=Object.defineProperty,l=(i,e,r,f)=>{for(var o=void 0,p=i.length-1,n;p>=0;p--)(n=i[p])&&(o=n(e,r,o)||o);return o&&y(e,r,o),o};const a=class a extends m.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1,this.placement="bottom-end"}_handleEvent(e){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e.detail):e.detail}}))}generateMenuItems(){return u.html`
-      ${Object.entries(this.values).map(([e,r])=>u.html`
+/*! * 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";var c=Object.getPrototypeOf;var d=Reflect.get;var h=(i,e,r)=>d(c(i),r,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/menu");require("@luzmo/lucero/picker");const p=require("lit"),s=require("lit/decorators.js"),m=require("../edit-option-base-tFr8Qg2B.cjs");var y=Object.defineProperty,l=(i,e,r,f)=>{for(var a=void 0,u=i.length-1,n;u>=0;u--)(n=i[u])&&(a=n(e,r,a)||a);return a&&y(e,r,a),a};const o=class o extends m.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1,this.placement="bottom-end"}_handleEvent(e){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue(e.detail):e.detail}}))}generateMenuItems(){return p.html`
+      ${Object.entries(this.values).map(([e,r])=>p.html`
           <luzmo-menu-item value=${e}> ${r} </luzmo-menu-item>
         `)}
-    `}renderController(){const e=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,r=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return u.html`
+    `}renderController(){const e=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,r=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return p.html`
       <luzmo-picker
-        .value=${e!=null&&e.length?e:r??""}
+        .value=${e?.length?e:r??""}
         .size=${this.size}
         variant="highlight"
         .placement=${this.placement}
@@ -13,4 +32,4 @@
       >
         ${this.generateMenuItems()}
       </luzmo-picker>
-    `}};a.styles=[h(a,a,"styles")];let t=a;l([s.property({type:Object})],t.prototype,"values");l([s.property({type:Boolean,reflect:!0})],t.prototype,"disabled");l([s.property()],t.prototype,"placement");l([s.property({type:String,reflect:!0})],t.prototype,"value");l([s.property()],t.prototype,"parseValue");l([s.property()],t.prototype,"toValue");l([s.property({type:String})],t.prototype,"default");customElements.get("luzmo-edit-option-picker")||customElements.define("luzmo-edit-option-picker",t);exports.LuzmoEditOptionPicker=t;
+    `}};o.styles=[h(o,o,"styles")];let t=o;l([s.property({type:Object})],t.prototype,"values");l([s.property({type:Boolean,reflect:!0})],t.prototype,"disabled");l([s.property()],t.prototype,"placement");l([s.property({type:String,reflect:!0})],t.prototype,"value");l([s.property()],t.prototype,"parseValue");l([s.property()],t.prototype,"toValue");l([s.property({type:String})],t.prototype,"default");customElements.get("luzmo-edit-option-picker")||customElements.define("luzmo-edit-option-picker",t);exports.LuzmoEditOptionPicker=t;

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

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

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

@@ -24,7 +24,7 @@ import "@luzmo/lucero/menu";
 import "@luzmo/lucero/picker";
 import { html as n } from "lit";
 import { property as r } from "lit/decorators.js";
-import { L as p } from "../edit-option-base-DIc7iC-b.js";
+import { L as p } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
@@ -32,11 +32,11 @@ import { L as p } from "../edit-option-base-DIc7iC-b.js";
   }
 })();
 var f = Object.defineProperty, t = (m, o, l, b) => {
-  for (var u = void 0, a = m.length - 1, c; a >= 0; a--)
-    (c = m[a]) && (u = c(o, l, u) || u);
+  for (var u = void 0, i = m.length - 1, c; i >= 0; i--)
+    (c = m[i]) && (u = c(o, l, u) || u);
   return u && f(o, l, u), u;
 };
-const i = class i extends p {
+const a = class a extends p {
   constructor() {
     super(...arguments), this.values = {}, this.disabled = !1, this.placement = "bottom-end";
   }
@@ -65,7 +65,7 @@ const i = class i extends p {
     const o = typeof this.parseValue == "function" ? this.parseValue(this.value) : this.value, l = typeof this.parseValue == "function" ? this.parseValue(this.default) : this.default;
     return n`
       <luzmo-picker
-        .value=${o != null && o.length ? o : l ?? ""}
+        .value=${o?.length ? o : l ?? ""}
         .size=${this.size}
         variant="highlight"
         .placement=${this.placement}
@@ -77,8 +77,8 @@ const i = class i extends p {
     `;
   }
 };
-i.styles = [s(i, i, "styles")];
-let e = i;
+a.styles = [s(a, a, "styles")];
+let e = a;
 t([
   r({ type: Object })
 ], e.prototype, "values");

package/components/edit-option-position-picker/edit-option-position-picker.d.ts

@@ -0,0 +1,13 @@
+import '@luzmo/lucero/text-field';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionPositionPicker extends LuzmoEditOptionBase {
+    static styles: (import("lit").CSSResult | import("lit").CSSResultArray)[];
+    value?: string;
+    default: string;
+    positions?: string[];
+    readonly: boolean;
+    private _handleEvent;
+    private _handleClick;
+    protected willUpdate(): void;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/edit-option-position-picker/index.cjs

@@ -0,0 +1,25 @@
+/*! * 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";var m=Object.getPrototypeOf;var h=Reflect.get;var c=(e,i,o)=>h(m(e),o,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@luzmo/lucero/text-field");const a=require("lit"),d=require("lit/decorators.js"),k=require("../edit-option-base-tFr8Qg2B.cjs"),v=":host{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height));display:flex;align-items:center}.luzmo-edit-option{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height))}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luzmo-edit-option-position-picker-grid-gap, var(--edit-option-position-picker-grid-gap));width:var(--luzmo-edit-option-position-picker-grid-width, var(--edit-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-grid-border-color, var(--luzmo-border-color));padding:var(--luzmo-edit-option-position-picker-grid-padding, var(--edit-option-position-picker-grid-padding));border-radius:var(--luzmo-edit-option-position-picker-grid-border-radius, var(--edit-option-position-picker-grid-border-radius))}.position-item{width:100%;height:var(--luzmo-edit-option-position-picker-item-height, var(--edit-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-position-picker-border-radius, var(--edit-option-position-picker-border-radius));background:var(--luzmo-edit-option-position-picker-background, var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-edit-option-position-picker-animation-duration, var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-edit-option-position-picker-background-hover, var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-edit-option-position-picker-background-selected, var(--luzmo-primary));transition:background-color var(--luzmo-edit-option-position-picker-selected-animation-duration, 0) ease-in-out}.position-item.position-item-not-allowed{opacity:0}:host{--edit-option-position-picker-grid-height: 7rem;--edit-option-position-picker-grid-width: 7rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-padding: .25rem;--edit-option-position-picker-item-height: 1.75rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=s]){--edit-option-position-picker-grid-height: 5.125rem;--edit-option-position-picker-grid-width: 5.625rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-s );--edit-option-position-picker-grid-padding: .125rem;--edit-option-position-picker-item-height: 1.5rem;--edit-option-position-picker-grid-gap: .125rem}:host([size=l]){--edit-option-position-picker-grid-height: 8rem;--edit-option-position-picker-grid-width: 8rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-l);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-l );--edit-option-position-picker-grid-padding: .3rem;--edit-option-position-picker-item-height: 2rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=xl]){--edit-option-position-picker-grid-height: 9rem;--edit-option-position-picker-grid-width: 9rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-xl);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-xl );--edit-option-position-picker-grid-padding: .375rem;--edit-option-position-picker-item-height: 2.25rem;--edit-option-position-picker-grid-gap: .275rem}";var b=Object.defineProperty,n=(e,i,o,z)=>{for(var r=void 0,s=e.length-1,l;s>=0;s--)(l=e[s])&&(r=l(i,o,r)||r);return r&&b(i,o,r),r};const g=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],u=g.filter(e=>e!=="center"),p=class p extends k.LuzmoEditOptionBase{constructor(){super(...arguments),this.default="topRight",this.positions=u,this.readonly=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}}))}_handleClick(i){this.positions?.includes(i)&&(this.value=i,this._handleEvent())}willUpdate(){this.value=this.value??this.default??"topRight",this.positions=this.positions??u}renderController(){const i=g.map(o=>a.html`
+        <div
+          class="position-item ${this.positions?.includes(o)?"position-item-allowed":"position-item-not-allowed"} ${this.value===o?"selected":""}"
+          @click=${this._handleClick.bind(this,o)}
+        ></div>
+      `);return a.html` <div class="position-grid">${i}</div> `}};p.styles=[c(p,p,"styles"),a.unsafeCSS(v)];let t=p;n([d.property({type:String,reflect:!0})],t.prototype,"value");n([d.property({type:String,reflect:!0,attribute:"default-position"})],t.prototype,"default");n([d.property({type:Array,reflect:!0})],t.prototype,"positions");n([d.property({type:Boolean,reflect:!0})],t.prototype,"readonly");customElements.get("luzmo-edit-option-position-picker")||customElements.define("luzmo-edit-option-position-picker",t);exports.LuzmoEditOptionPositionPicker=t;

package/components/edit-option-position-picker/index.d.ts

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

package/components/edit-option-position-picker/index.js

@@ -17,26 +17,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-var z = Object.getPrototypeOf;
-var h = Reflect.get;
-var a = (r, o, i) => h(z(r), i, o);
+var g = Object.getPrototypeOf;
+var z = Reflect.get;
+var u = (r, o, i) => z(g(r), i, o);
 import "@luzmo/lucero/text-field";
-import { unsafeCSS as b, html as c } from "lit";
+import { unsafeCSS as h, html as a } from "lit";
 import { property as d } from "lit/decorators.js";
-import { L as f } from "../edit-option-base-DIc7iC-b.js";
+import { L as b } from "../edit-option-base-Bh29-Cak.js";
 (function() {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
     o.setAttribute("data-luzmo-vars", ""), o.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(o);
   }
 })();
-const v = ":host{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height));display:flex;align-items:center}.luzmo-edit-option{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height))}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luzmo-edit-option-position-picker-grid-gap, var(--edit-option-position-picker-grid-gap));width:var(--luzmo-edit-option-position-picker-grid-width, var(--edit-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-grid-border-color, var(--luzmo-border-color));padding:var(--luzmo-edit-option-position-picker-grid-padding, var(--edit-option-position-picker-grid-padding));border-radius:var(--luzmo-edit-option-position-picker-grid-border-radius, var(--edit-option-position-picker-grid-border-radius))}.position-item{width:100%;height:var(--luzmo-edit-option-position-picker-item-height, var(--edit-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-position-picker-border-radius, var(--edit-option-position-picker-border-radius));background:var(--luzmo-edit-option-position-picker-background, var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-edit-option-position-picker-animation-duration, var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-edit-option-position-picker-background-hover, var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-edit-option-position-picker-background-selected, var(--luzmo-primary));transition:background-color var(--luzmo-edit-option-position-picker-selected-animation-duration, 0) ease-in-out}.position-item.position-item-not-allowed{opacity:0}:host{--edit-option-position-picker-grid-height: 7rem;--edit-option-position-picker-grid-width: 7rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-padding: .25rem;--edit-option-position-picker-item-height: 1.75rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=s]){--edit-option-position-picker-grid-height: 5.125rem;--edit-option-position-picker-grid-width: 5.625rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-s );--edit-option-position-picker-grid-padding: .125rem;--edit-option-position-picker-item-height: 1.5rem;--edit-option-position-picker-grid-gap: .125rem}:host([size=l]){--edit-option-position-picker-grid-height: 8rem;--edit-option-position-picker-grid-width: 8rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-l);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-l );--edit-option-position-picker-grid-padding: .3rem;--edit-option-position-picker-item-height: 2rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=xl]){--edit-option-position-picker-grid-height: 9rem;--edit-option-position-picker-grid-width: 9rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-xl);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-xl );--edit-option-position-picker-grid-padding: .375rem;--edit-option-position-picker-item-height: 2.25rem;--edit-option-position-picker-grid-gap: .275rem}";
-var k = Object.defineProperty, n = (r, o, i, p) => {
-  for (var t = void 0, s = r.length - 1, u; s >= 0; s--)
-    (u = r[s]) && (t = u(o, i, t) || t);
-  return t && k(o, i, t), t;
+const f = ":host{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height));display:flex;align-items:center}.luzmo-edit-option{height:var(--luzmo-edit-option-position-picker-grid-height, var(--edit-option-position-picker-grid-height))}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--luzmo-edit-option-position-picker-grid-gap, var(--edit-option-position-picker-grid-gap));width:var(--luzmo-edit-option-position-picker-grid-width, var(--edit-option-position-picker-grid-width));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-grid-border-color, var(--luzmo-border-color));padding:var(--luzmo-edit-option-position-picker-grid-padding, var(--edit-option-position-picker-grid-padding));border-radius:var(--luzmo-edit-option-position-picker-grid-border-radius, var(--edit-option-position-picker-grid-border-radius))}.position-item{width:100%;height:var(--luzmo-edit-option-position-picker-item-height, var(--edit-option-position-picker-item-height));box-sizing:border-box;border:.0625rem solid var(--luzmo-edit-option-position-picker-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-position-picker-border-radius, var(--edit-option-position-picker-border-radius));background:var(--luzmo-edit-option-position-picker-background, var(--luzmo-background-color-highlight));transition:background-color var(--luzmo-edit-option-position-picker-animation-duration, var(--luzmo-animation-duration)) ease-in-out;cursor:pointer}.position-item:hover{background-color:var(--luzmo-edit-option-position-picker-background-hover, var(--luzmo-background-color-highlight-down))}.position-item.selected,.position-item.selected:hover,.position-item.selected:active,.position-item.selected:focus{background-color:var(--luzmo-edit-option-position-picker-background-selected, var(--luzmo-primary));transition:background-color var(--luzmo-edit-option-position-picker-selected-animation-duration, 0) ease-in-out}.position-item.position-item-not-allowed{opacity:0}:host{--edit-option-position-picker-grid-height: 7rem;--edit-option-position-picker-grid-width: 7rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-padding: .25rem;--edit-option-position-picker-item-height: 1.75rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=s]){--edit-option-position-picker-grid-height: 5.125rem;--edit-option-position-picker-grid-width: 5.625rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-s );--edit-option-position-picker-grid-padding: .125rem;--edit-option-position-picker-item-height: 1.5rem;--edit-option-position-picker-grid-gap: .125rem}:host([size=l]){--edit-option-position-picker-grid-height: 8rem;--edit-option-position-picker-grid-width: 8rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-l);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-l );--edit-option-position-picker-grid-padding: .3rem;--edit-option-position-picker-item-height: 2rem;--edit-option-position-picker-grid-gap: .25rem}:host([size=xl]){--edit-option-position-picker-grid-height: 9rem;--edit-option-position-picker-grid-width: 9rem;--edit-option-position-picker-border-radius: var(--luzmo-border-radius-xl);--edit-option-position-picker-grid-border-radius: var( --luzmo-border-radius-xl );--edit-option-position-picker-grid-padding: .375rem;--edit-option-position-picker-item-height: 2.25rem;--edit-option-position-picker-grid-gap: .275rem}";
+var v = Object.defineProperty, n = (r, o, i, k) => {
+  for (var t = void 0, p = r.length - 1, s; p >= 0; p--)
+    (s = r[p]) && (t = s(o, i, t) || t);
+  return t && v(o, i, t), t;
 };
-const g = [
+const m = [
   "topLeft",
   "top",
   "topRight",
@@ -46,9 +46,9 @@ const g = [
   "bottomLeft",
   "bottom",
   "bottomRight"
-], m = g.filter((r) => r !== "center"), l = class l extends f {
+], c = m.filter((r) => r !== "center"), l = class l extends b {
   constructor() {
-    super(...arguments), this.default = "topRight", this.positions = m, this.readonly = !1;
+    super(...arguments), this.default = "topRight", this.positions = c, this.readonly = !1;
   }
   _handleEvent() {
     this.dispatchEvent(
@@ -63,29 +63,25 @@ const g = [
     );
   }
   _handleClick(o) {
-    var i;
-    (i = this.positions) != null && i.includes(o) && (this.value = o, this._handleEvent());
+    this.positions?.includes(o) && (this.value = o, this._handleEvent());
   }
   willUpdate() {
-    this.value = this.value ?? this.default ?? "topRight", this.positions = this.positions ?? m;
+    this.value = this.value ?? this.default ?? "topRight", this.positions = this.positions ?? c;
   }
   // TODO add keyboard navigation & focusable & aria-labels
   renderController() {
-    const o = g.map(
-      (i) => {
-        var p;
-        return c`
+    const o = m.map(
+      (i) => a`
         <div
-          class="position-item ${(p = this.positions) != null && p.includes(i) ? "position-item-allowed" : "position-item-not-allowed"} ${this.value === i ? "selected" : ""}"
+          class="position-item ${this.positions?.includes(i) ? "position-item-allowed" : "position-item-not-allowed"} ${this.value === i ? "selected" : ""}"
           @click=${this._handleClick.bind(this, i)}
         ></div>
-      `;
-      }
+      `
     );
-    return c` <div class="position-grid">${o}</div> `;
+    return a` <div class="position-grid">${o}</div> `;
   }
 };
-l.styles = [a(l, l, "styles"), b(v)];
+l.styles = [u(l, l, "styles"), h(f)];
 let e = l;
 n([
   d({ type: String, reflect: !0 })

package/components/edit-option-positions-number-field/edit-option-positions-number-field.d.ts

@@ -0,0 +1,30 @@
+import '@luzmo/lucero/number-field';
+import { CSSResultArray } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export type Position = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+export declare class LuzmoEditOptionPositionsNumberField extends LuzmoEditOptionBase {
+    static get styles(): CSSResultArray;
+    positions?: Position[];
+    values?: Record<Position, number | undefined>;
+    canSync?: boolean;
+    positionConfiguration?: Record<Position, {
+        min?: number;
+        max?: number;
+        step?: number;
+        default?: number;
+    }>;
+    invalid: boolean;
+    readonly: boolean;
+    debounce: number;
+    sync?: boolean;
+    syncedValue?: number;
+    debounceTimeout: any;
+    _positions: Position[][];
+    private _calculateSyncedValue;
+    toggleSync(): void;
+    private _handleEvent;
+    private _renderNumberField;
+    protected firstUpdated(): void;
+    protected willUpdate(): void;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

package/components/edit-option-positions-number-field/index.cjs

@@ -0,0 +1,42 @@
+/*! * 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("@luzmo/icons");require("@luzmo/lucero/number-field");const u=require("lit"),s=require("lit/decorators.js"),m=require("../edit-option-base-tFr8Qg2B.cjs"),f=":host{--edit-option-positions-number-field-container-row-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-container-column-gap: var( --luzmo-spacing-2 );--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height) * 1.5 )}:host([size=s]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-s) * 1.5 )}:host([size=l]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-l) * 1.5 )}:host([size=xl]){--edit-option-positions-number-field-sync-height: calc( var(--luzmo-component-height-xl) * 1.5 )}:host{--var: test}.positions-container{max-width:var(--luzmo-edit-option-positions-number-field-container-max-width, var(--edit-option-positions-number-field-container-max-width));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);row-gap:var(--luzmo-edit-option-positions-number-field-container-row-gap, var(--edit-option-positions-number-field-container-row-gap));column-gap:var(--luzmo-edit-option-positions-number-field-container-column-gap, var(--edit-option-positions-number-field-container-column-gap))}.position,.sync-button{display:flex;align-items:center;justify-content:center}.sync-button{cursor:pointer}.sync-button[position=center].sync{border:var(--luzmo-edit-option-positions-number-field-sync-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-sync-border-color, var(--luzmo-primary));border-radius:var(--luzmo-edit-option-positions-number-field-sync-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height))}.no-sync-center{border:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-width, var(--luzmo-border-width)) solid var(--luzmo-edit-option-positions-number-field-no-sync-center-border-color, var(--luzmo-border-color));border-radius:var(--luzmo-edit-option-positions-number-field-no-sync-center-border-radius, var(--luzmo-border-radius));height:var(--luzmo-edit-option-positions-number-field-sync-height, var(--edit-option-positions-number-field-sync-height));background-color:var(--luzmo-edit-option-positions-number-field-no-sync-center-background-color, var(--luzmo-background-color-highlight))}";var y=Object.defineProperty,r=(c,t,o,e)=>{for(var i=void 0,l=c.length-1,a;l>=0;l--)(a=c[l])&&(i=a(t,o,i)||i);return i&&y(t,o,i),i};class n extends m.LuzmoEditOptionBase{constructor(){super(...arguments),this.canSync=!0,this.invalid=!1,this.readonly=!1,this.debounce=200,this._positions=[["top-left","top","top-right"],["left","center","right"],["bottom-left","bottom","bottom-right"]]}static get styles(){return[u.unsafeCSS(f)]}_calculateSyncedValue(){let t;const o={};return this.positions?.forEach(e=>{o[e]=this.values?.[e]??this.positionConfiguration?.[e]?.default??0,t=typeof t=="number"&&o[e]?Math.min(t,o[e]):o[e]}),t}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue=="number")){this.values={...this.values};for(const t of this.positions??[])this.values[t]=this.syncedValue}}_handleEvent(t){const o=t.target.getAttribute("position"),e=t.target.value;let i={};if(!(!o||typeof e!="number")){if(this.canSync&&this.sync&&o==="center"){this.syncedValue=e;for(const l of this.positions??[])i[l]=e}else i={...this.values,[o]:e};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{const l=Object.keys(this.values??{}),a=Object.keys(i);let d=!0;l.length!==a.length&&(d=!1);for(const p of l)this.values?.[p]!==i[p]&&(d=!1);d||(this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...i}}})),this.values=i)},this.debounce??200)}}_renderNumberField(t){return this.positions?.includes(t)||t==="center"?this.canSync&&(this.sync&&t!=="center"||!this.sync&&t==="center")?u.html`<div
+          class="sync-button ${this.sync?"":"sync"}"
+          position=${t}
+          @click=${this.toggleSync}
+        >
+          ${h.luzmoIcon(h.luzmoLockOutline)}
+        </div>`:!this.canSync&&!this.positions?.includes("center")&&t==="center"?u.html`<div class="no-sync-center"></div>`:u.html`<div class="position">
+        <luzmo-number-field
+          position=${t}
+          .value=${this.sync&&this.canSync?this.syncedValue??0:this.values?.[t]??this.positionConfiguration?.[t]?.default??0}
+          .disabled=${this.disabled}
+          .size=${this.size}
+          .min=${this.positionConfiguration?.[t]?.min??0}
+          .max=${this.positionConfiguration?.[t]?.max??100}
+          .step=${this.positionConfiguration?.[t]?.step??1}
+          .invalid=${this.invalid}
+          @change=${this._handleEvent}
+          @input=${this._handleEvent}
+        >
+        </luzmo-number-field>
+      </div>`:u.html`<div class="position"></div>`}firstUpdated(){if(this.canSync&&!this.positions?.includes("center")){const t=this.values?.left??this.positionConfiguration?.left?.default,o=this.values?.top??this.positionConfiguration?.top?.default,e=this.values?.right??this.positionConfiguration?.right?.default,i=this.values?.bottom??this.positionConfiguration?.bottom?.default;this.sync=t===o&&o===e&&e===i}else this.sync=!1}willUpdate(){this.positions||(this.positions=["top","right","bottom","left"])}renderController(){this._calculateSyncedValue();const t=this._positions.map(o=>{const e=o.map(i=>this._renderNumberField(i));return u.html`${e}`});return u.html`<div class="positions-container-wrapper">
+      <div class="positions-container">${t}</div>
+    </div>`}}r([s.property({type:Array,reflect:!0})],n.prototype,"positions");r([s.property({type:Object,reflect:!0})],n.prototype,"values");r([s.property({type:Boolean,reflect:!0,attribute:"can-sync"})],n.prototype,"canSync");r([s.property({type:Object})],n.prototype,"positionConfiguration");r([s.property({type:Boolean,reflect:!0})],n.prototype,"invalid");r([s.property({type:Boolean,reflect:!0})],n.prototype,"readonly");r([s.property({type:Number,reflect:!0})],n.prototype,"debounce");r([s.property({type:Boolean,reflect:!0})],n.prototype,"sync");r([s.state()],n.prototype,"syncedValue");customElements.get("luzmo-edit-option-positions-number-field")||customElements.define("luzmo-edit-option-positions-number-field",n);exports.LuzmoEditOptionPositionsNumberField=n;

package/components/edit-option-positions-number-field/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoEditOptionPositionsNumberField } from './edit-option-positions-number-field';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-edit-option-positions-number-field': LuzmoEditOptionPositionsNumberField;
+    }
+}
+export { LuzmoEditOptionPositionsNumberField } from './edit-option-positions-number-field';