@luzmo/analytics-components-kit 1.0.1-alpha.5 → 1.0.1-alpha.51

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

@@ -0,0 +1,108 @@
+/*! * 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.
+ * */
+var z = Object.getPrototypeOf;
+var h = Reflect.get;
+var a = (i, r, o) => h(z(i), o, r);
+import "../index-DE3d0E0P.js";
+import { r as f, x as c, n as d } from "../property-DCzt3DR1.js";
+import { L as v } from "../edit-option-base-CG0JcbX9.js";
+const b = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const i = document.createElement("style");
+    i.setAttribute("data-luzmo-vars", ""), i.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-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(i);
+  }
+};
+b();
+const k = ":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 x = Object.defineProperty, n = (i, r, o, p) => {
+  for (var t = void 0, s = i.length - 1, u; s >= 0; s--)
+    (u = i[s]) && (t = u(r, o, t) || t);
+  return t && x(r, o, t), t;
+};
+const g = [
+  "topLeft",
+  "top",
+  "topRight",
+  "left",
+  "center",
+  "right",
+  "bottomLeft",
+  "bottom",
+  "bottomRight"
+], m = g.filter((i) => i !== "center"), l = class l extends v {
+  constructor() {
+    super(...arguments), this.default = "topRight", this.positions = m, this.readonly = !1;
+  }
+  _handleEvent() {
+    this.dispatchEvent(
+      new CustomEvent("option-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          value: this.value
+        }
+      })
+    );
+  }
+  _handleClick(r) {
+    var o;
+    (o = this.positions) != null && o.includes(r) && (this.value = r, this._handleEvent());
+  }
+  willUpdate() {
+    this.value = this.value ?? this.default ?? "topRight", this.positions = this.positions ?? m;
+  }
+  // TODO add keyboard navigation & focusable & aria-labels
+  renderController() {
+    const r = g.map(
+      (o) => {
+        var p;
+        return c`
+        <div
+          class="position-item ${(p = this.positions) != null && p.includes(o) ? "position-item-allowed" : "position-item-not-allowed"} ${this.value === o ? "selected" : ""}"
+          @click=${this._handleClick.bind(this, o)}
+        ></div>
+      `;
+      }
+    );
+    return c` <div class="position-grid">${r}</div> `;
+  }
+};
+l.styles = [a(l, l, "styles"), f(k)];
+let e = l;
+n([
+  d({ type: String, reflect: !0 })
+], e.prototype, "value");
+n([
+  d({ type: String, reflect: !0, attribute: "default-position" })
+], e.prototype, "default");
+n([
+  d({ type: Array, reflect: !0 })
+], e.prototype, "positions");
+n([
+  d({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly");
+customElements.get("luzmo-edit-option-position-picker") || customElements.define(
+  "luzmo-edit-option-position-picker",
+  e
+);
+export {
+  e as LuzmoEditOptionPositionPicker
+};

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

@@ -1,28 +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?: string[];
-    values?: Record<string, number>;
+    positions?: Position[];
+    values?: Record<Position, number | undefined>;
     canSync?: boolean;
-    sync?: boolean;
-    positionConfiguration?: Record<string, {
-        min: number;
-        max: number;
-        step: number;
-        default: number;
+    positionConfiguration?: Record<Position, {
+        min?: number;
+        max?: number;
+        step?: number;
+        default?: number;
     }>;
     invalid: boolean;
     readonly: boolean;
     debounce: number;
+    sync?: boolean;
     syncedValue?: number;
     debounceTimeout: any;
-    _positions: string[][];
+    _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

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,26 +17,26 @@
  * 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 b=require("../luzmo-icons-BrtBl3E5.cjs");require("../index-D9vzXhtJ.cjs");const i=require("../property-Su1Q6aME.cjs"),f=require("../state-ByiKNRhp.cjs"),v=require("../edit-option-base-DnrerC_T.cjs"),g=":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 z=Object.defineProperty,u=(p,e,o,n)=>{for(var t=void 0,s=p.length-1,l;s>=0;s--)(l=p[s])&&(t=l(e,o,t)||t);return t&&z(e,o,t),t};class r extends v.LuzmoEditOptionBase{constructor(){super(...arguments),this.positions=["top","right","bottom","left"],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[i.r(g)]}_calculateSyncedValue(){var o;let e;return(o=this.positions)==null||o.forEach(n=>{var t,s,l;e=typeof e=="number"&&((t=this.values)!=null&&t[n])?Math.min(e,(s=this.values)==null?void 0:s[n]):(l=this.values)==null?void 0:l[n]}),e}toggleSync(){if(this.sync=!this.sync,this.sync&&(this.syncedValue=this._calculateSyncedValue(),typeof this.syncedValue=="number")){this.values={...this.values};for(const e of this.positions??[])this.values[e]=this.syncedValue}}_handleEvent(e){const o=e.target.getAttribute("position"),n=e.target.value;let t={};if(!(!o||typeof n!="number")){if(this.canSync&&this.sync&&o==="center"){this.syncedValue=n;for(const s of this.positions??[])t[s]=n}else t={...this.values,[o]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var c;const s=Object.keys(this.values??{}),l=Object.keys(t);let a=!0;s.length!==l.length&&(a=!1);for(const d of s)((c=this.values)==null?void 0:c[d])!==t[d]&&(a=!1);a||(this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...t}}})),this.values=t)},this.debounce??200)}}_renderNumberField(e){var o,n,t,s,l,a,c,d,h,m,y;return(o=this.positions)!=null&&o.includes(e)||e==="center"?this.canSync&&(this.sync&&e!=="center"||!this.sync&&e==="center")?i.x`<div
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("../luzmo-icons-DonyjSXg.cjs");require("../index-MPM_B4re.cjs");const s=require("../property-Cu4Q1hS4.cjs"),$=require("../state-fyl3IYMu.cjs"),x=require("../edit-option-base-a2yoNqdf.cjs"),S=":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 V=Object.defineProperty,a=(f,t,i,n)=>{for(var e=void 0,o=f.length-1,r;o>=0;o--)(r=f[o])&&(e=r(t,i,e)||e);return e&&V(t,i,e),e};class u extends x.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[s.r(S)]}_calculateSyncedValue(){var n;let t;const i={};return(n=this.positions)==null||n.forEach(e=>{var o,r,l;i[e]=((o=this.values)==null?void 0:o[e])??((l=(r=this.positionConfiguration)==null?void 0:r[e])==null?void 0:l.default)??0,t=typeof t=="number"&&i[e]?Math.min(t,i[e]):i[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 i=t.target.getAttribute("position"),n=t.target.value;let e={};if(!(!i||typeof n!="number")){if(this.canSync&&this.sync&&i==="center"){this.syncedValue=n;for(const o of this.positions??[])e[o]=n}else e={...this.values,[i]:n};this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{var c;const o=Object.keys(this.values??{}),r=Object.keys(e);let l=!0;o.length!==r.length&&(l=!1);for(const d of o)((c=this.values)==null?void 0:c[d])!==e[d]&&(l=!1);l||(this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{values:{...e}}})),this.values=e)},this.debounce??200)}}_renderNumberField(t){var i,n,e,o,r,l,c,d,p,h,m;return(i=this.positions)!=null&&i.includes(t)||t==="center"?this.canSync&&(this.sync&&t!=="center"||!this.sync&&t==="center")?s.x`<div
           class="sync-button ${this.sync?"":"sync"}"
-          position=${e}
+          position=${t}
           @click=${this.toggleSync}
         >
-          ${b.O2(b.$1)}
-        </div>`:!this.canSync&&!((n=this.positions)!=null&&n.includes("center"))&&e==="center"?i.x`<div class="no-sync-center"></div>`:i.x`<div class="position">
+          ${g.y3(g.R1)}
+        </div>`:!this.canSync&&!((n=this.positions)!=null&&n.includes("center"))&&t==="center"?s.x`<div class="no-sync-center"></div>`:s.x`<div class="position">
         <luzmo-number-field
-          position=${e}
-          .value=${this.sync&&this.canSync?this.syncedValue??0:((t=this.values)==null?void 0:t[e])??((l=(s=this.positionConfiguration)==null?void 0:s[e])==null?void 0:l.default)??0}
+          position=${t}
+          .value=${this.sync&&this.canSync?this.syncedValue??0:((e=this.values)==null?void 0:e[t])??((r=(o=this.positionConfiguration)==null?void 0:o[t])==null?void 0:r.default)??0}
           .disabled=${this.disabled}
           .size=${this.size}
-          .min=${((c=(a=this.positionConfiguration)==null?void 0:a[e])==null?void 0:c.min)??0}
-          .max=${((h=(d=this.positionConfiguration)==null?void 0:d[e])==null?void 0:h.max)??100}
-          .step=${((y=(m=this.positionConfiguration)==null?void 0:m[e])==null?void 0:y.step)??1}
+          .min=${((c=(l=this.positionConfiguration)==null?void 0:l[t])==null?void 0:c.min)??0}
+          .max=${((p=(d=this.positionConfiguration)==null?void 0:d[t])==null?void 0:p.max)??100}
+          .step=${((m=(h=this.positionConfiguration)==null?void 0:h[t])==null?void 0:m.step)??1}
           .invalid=${this.invalid}
           @change=${this._handleEvent}
           @input=${this._handleEvent}
         >
         </luzmo-number-field>
-      </div>`:i.x`<div class="position"></div>`}willUpdate(){!this.canSync&&this.sync&&(this.sync=!1)}renderController(){this._calculateSyncedValue();const e=this._positions.map(o=>{const n=o.map(t=>this._renderNumberField(t));return i.x`${n}`});return i.x`<div class="positions-container-wrapper">
-      <div class="positions-container">${e}</div>
-    </div>`}}u([i.n({type:Array,reflect:!0})],r.prototype,"positions");u([i.n({type:Object,reflect:!0})],r.prototype,"values");u([i.n({type:Boolean,reflect:!0,attribute:"can-sync"})],r.prototype,"canSync");u([i.n({type:Boolean,reflect:!0})],r.prototype,"sync");u([i.n({type:Object})],r.prototype,"positionConfiguration");u([i.n({type:Boolean,reflect:!0})],r.prototype,"invalid");u([i.n({type:Boolean,reflect:!0})],r.prototype,"readonly");u([i.n({type:Number,reflect:!0})],r.prototype,"debounce");u([f.r()],r.prototype,"syncedValue");customElements.get("luzmo-edit-option-positions-number-field")||customElements.define("luzmo-edit-option-positions-number-field",r);exports.LuzmoEditOptionPositionsNumberField=r;
+      </div>`:s.x`<div class="position"></div>`}firstUpdated(){var t,i,n,e,o,r,l,c,d,p,h,m,y;if(this.canSync&&!((t=this.positions)!=null&&t.includes("center"))){const z=((i=this.values)==null?void 0:i.left)??((e=(n=this.positionConfiguration)==null?void 0:n.left)==null?void 0:e.default),b=((o=this.values)==null?void 0:o.top)??((l=(r=this.positionConfiguration)==null?void 0:r.top)==null?void 0:l.default),v=((c=this.values)==null?void 0:c.right)??((p=(d=this.positionConfiguration)==null?void 0:d.right)==null?void 0:p.default),w=((h=this.values)==null?void 0:h.bottom)??((y=(m=this.positionConfiguration)==null?void 0:m.bottom)==null?void 0:y.default);this.sync=z===b&&b===v&&v===w}else this.sync=!1}willUpdate(){this.positions||(this.positions=["top","right","bottom","left"])}renderController(){this._calculateSyncedValue();const t=this._positions.map(i=>{const n=i.map(e=>this._renderNumberField(e));return s.x`${n}`});return s.x`<div class="positions-container-wrapper">
+      <div class="positions-container">${t}</div>
+    </div>`}}a([s.n({type:Array,reflect:!0})],u.prototype,"positions");a([s.n({type:Object,reflect:!0})],u.prototype,"values");a([s.n({type:Boolean,reflect:!0,attribute:"can-sync"})],u.prototype,"canSync");a([s.n({type:Object})],u.prototype,"positionConfiguration");a([s.n({type:Boolean,reflect:!0})],u.prototype,"invalid");a([s.n({type:Boolean,reflect:!0})],u.prototype,"readonly");a([s.n({type:Number,reflect:!0})],u.prototype,"debounce");a([s.n({type:Boolean,reflect:!0})],u.prototype,"sync");a([$.r()],u.prototype,"syncedValue");customElements.get("luzmo-edit-option-positions-number-field")||customElements.define("luzmo-edit-option-positions-number-field",u);exports.LuzmoEditOptionPositionsNumberField=u;

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

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,41 +17,42 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { O as g, $ as y } from "../luzmo-icons-CZEpXpvy.js";
-import "../index-DszPbTTD.js";
-import { r as v, x as m, n as u } from "../property-CD3dwBJC.js";
-import { r as x } from "../state-B1a8XIDm.js";
-import { L as w } from "../edit-option-base-oIvlolV9.js";
-const b = () => {
+import { a8 as k, a9 as S } from "../luzmo-icons-CVeTZ59u.js";
+import "../index-DsP81c4M.js";
+import { r as C, x as p, n as m } from "../property-DCzt3DR1.js";
+import { r as $ } from "../state-nDsQPund.js";
+import { L as V } from "../edit-option-base-CG0JcbX9.js";
+const w = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const c = document.createElement("style");
-    c.setAttribute("data-luzmo-vars", ""), c.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-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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-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(c);
+    const d = document.createElement("style");
+    d.setAttribute("data-luzmo-vars", ""), d.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-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(d);
   }
 };
-b();
-const k = ":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 $ = Object.defineProperty, s = (c, o, t, i) => {
-  for (var e = void 0, r = c.length - 1, l; r >= 0; r--)
-    (l = c[r]) && (e = l(o, t, e) || e);
-  return e && $(o, t, e), e;
+w();
+const _ = ":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 E = Object.defineProperty, u = (d, o, t, r) => {
+  for (var e = void 0, i = d.length - 1, n; i >= 0; i--)
+    (n = d[i]) && (e = n(o, t, e) || e);
+  return e && E(o, t, e), e;
 };
-class n extends w {
+class s extends V {
   constructor() {
-    super(...arguments), this.positions = ["top", "right", "bottom", "left"], this.invalid = !1, this.readonly = !1, this.debounce = 200, this._positions = [
+    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 [v(k)];
+    return [C(_)];
   }
   _calculateSyncedValue() {
-    var t;
+    var r;
     let o;
-    return (t = this.positions) == null || t.forEach((i) => {
-      var e, r, l;
-      o = typeof o == "number" && ((e = this.values) != null && e[i]) ? Math.min(o, (r = this.values) == null ? void 0 : r[i]) : (l = this.values) == null ? void 0 : l[i];
+    const t = {};
+    return (r = this.positions) == null || r.forEach((e) => {
+      var i, n, l;
+      t[e] = ((i = this.values) == null ? void 0 : i[e]) ?? ((l = (n = this.positionConfiguration) == null ? void 0 : n[e]) == null ? void 0 : l.default) ?? 0, o = typeof o == "number" && t[e] ? Math.min(o, t[e]) : t[e];
     }), o;
   }
   toggleSync() {
@@ -62,26 +63,26 @@ class n extends w {
     }
   }
   _handleEvent(o) {
-    const t = o.target.getAttribute("position"), i = o.target.value;
+    const t = o.target.getAttribute("position"), r = o.target.value;
     let e = {};
-    if (!(!t || typeof i != "number")) {
+    if (!(!t || typeof r != "number")) {
       if (this.canSync && this.sync && t === "center") {
-        this.syncedValue = i;
-        for (const r of this.positions ?? [])
-          e[r] = i;
+        this.syncedValue = r;
+        for (const i of this.positions ?? [])
+          e[i] = r;
       } else
         e = {
           ...this.values,
-          [t]: i
+          [t]: r
         };
       this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
-        var d;
-        const r = Object.keys(this.values ?? {}), l = Object.keys(e);
-        let a = !0;
-        r.length !== l.length && (a = !1);
-        for (const p of r)
-          ((d = this.values) == null ? void 0 : d[p]) !== e[p] && (a = !1);
-        a || (this.dispatchEvent(
+        var c;
+        const i = Object.keys(this.values ?? {}), n = Object.keys(e);
+        let l = !0;
+        i.length !== n.length && (l = !1);
+        for (const a of i)
+          ((c = this.values) == null ? void 0 : c[a]) !== e[a] && (l = !1);
+        l || (this.dispatchEvent(
           new CustomEvent("option-changed", {
             bubbles: !0,
             composed: !0,
@@ -95,76 +96,84 @@ class n extends w {
     }
   }
   _renderNumberField(o) {
-    var t, i, e, r, l, a, d, p, h, f, z;
-    return (t = this.positions) != null && t.includes(o) || o === "center" ? this.canSync && (this.sync && o !== "center" || !this.sync && o === "center") ? m`<div
+    var t, r, e, i, n, l, c, a, h, f, b;
+    return (t = this.positions) != null && t.includes(o) || o === "center" ? this.canSync && (this.sync && o !== "center" || !this.sync && o === "center") ? p`<div
           class="sync-button ${this.sync ? "" : "sync"}"
           position=${o}
           @click=${this.toggleSync}
         >
-          ${g(y)}
-        </div>` : !this.canSync && !((i = this.positions) != null && i.includes("center")) && o === "center" ? m`<div class="no-sync-center"></div>` : m`<div class="position">
+          ${k(S)}
+        </div>` : !this.canSync && !((r = this.positions) != null && r.includes("center")) && o === "center" ? p`<div class="no-sync-center"></div>` : p`<div class="position">
         <luzmo-number-field
           position=${o}
-          .value=${this.sync && this.canSync ? this.syncedValue ?? 0 : ((e = this.values) == null ? void 0 : e[o]) ?? ((l = (r = this.positionConfiguration) == null ? void 0 : r[o]) == null ? void 0 : l.default) ?? 0}
+          .value=${this.sync && this.canSync ? this.syncedValue ?? 0 : ((e = this.values) == null ? void 0 : e[o]) ?? ((n = (i = this.positionConfiguration) == null ? void 0 : i[o]) == null ? void 0 : n.default) ?? 0}
           .disabled=${this.disabled}
           .size=${this.size}
-          .min=${((d = (a = this.positionConfiguration) == null ? void 0 : a[o]) == null ? void 0 : d.min) ?? 0}
-          .max=${((h = (p = this.positionConfiguration) == null ? void 0 : p[o]) == null ? void 0 : h.max) ?? 100}
-          .step=${((z = (f = this.positionConfiguration) == null ? void 0 : f[o]) == null ? void 0 : z.step) ?? 1}
+          .min=${((c = (l = this.positionConfiguration) == null ? void 0 : l[o]) == null ? void 0 : c.min) ?? 0}
+          .max=${((h = (a = this.positionConfiguration) == null ? void 0 : a[o]) == null ? void 0 : h.max) ?? 100}
+          .step=${((b = (f = this.positionConfiguration) == null ? void 0 : f[o]) == null ? void 0 : b.step) ?? 1}
           .invalid=${this.invalid}
           @change=${this._handleEvent}
           @input=${this._handleEvent}
         >
         </luzmo-number-field>
-      </div>` : m`<div class="position"></div>`;
+      </div>` : p`<div class="position"></div>`;
+  }
+  firstUpdated() {
+    var o, t, r, e, i, n, l, c, a, h, f, b, z;
+    if (this.canSync && !((o = this.positions) != null && o.includes("center"))) {
+      const v = ((t = this.values) == null ? void 0 : t.left) ?? ((e = (r = this.positionConfiguration) == null ? void 0 : r.left) == null ? void 0 : e.default), g = ((i = this.values) == null ? void 0 : i.top) ?? ((l = (n = this.positionConfiguration) == null ? void 0 : n.top) == null ? void 0 : l.default), y = ((c = this.values) == null ? void 0 : c.right) ?? ((h = (a = this.positionConfiguration) == null ? void 0 : a.right) == null ? void 0 : h.default), x = ((f = this.values) == null ? void 0 : f.bottom) ?? ((z = (b = this.positionConfiguration) == null ? void 0 : b.bottom) == null ? void 0 : z.default);
+      this.sync = v === g && g === y && y === x;
+    } else
+      this.sync = !1;
   }
   willUpdate() {
-    !this.canSync && this.sync && (this.sync = !1);
+    this.positions || (this.positions = ["top", "right", "bottom", "left"]);
   }
   renderController() {
     this._calculateSyncedValue();
     const o = this._positions.map((t) => {
-      const i = t.map(
+      const r = t.map(
         (e) => this._renderNumberField(e)
       );
-      return m`${i}`;
+      return p`${r}`;
     });
-    return m`<div class="positions-container-wrapper">
+    return p`<div class="positions-container-wrapper">
       <div class="positions-container">${o}</div>
     </div>`;
   }
 }
-s([
-  u({ type: Array, reflect: !0 })
-], n.prototype, "positions");
-s([
-  u({ type: Object, reflect: !0 })
-], n.prototype, "values");
-s([
-  u({ type: Boolean, reflect: !0, attribute: "can-sync" })
-], n.prototype, "canSync");
-s([
-  u({ type: Boolean, reflect: !0 })
-], n.prototype, "sync");
-s([
-  u({ type: Object })
-], n.prototype, "positionConfiguration");
-s([
-  u({ type: Boolean, reflect: !0 })
-], n.prototype, "invalid");
-s([
-  u({ type: Boolean, reflect: !0 })
-], n.prototype, "readonly");
-s([
-  u({ type: Number, reflect: !0 })
-], n.prototype, "debounce");
-s([
-  x()
-], n.prototype, "syncedValue");
+u([
+  m({ type: Array, reflect: !0 })
+], s.prototype, "positions");
+u([
+  m({ type: Object, reflect: !0 })
+], s.prototype, "values");
+u([
+  m({ type: Boolean, reflect: !0, attribute: "can-sync" })
+], s.prototype, "canSync");
+u([
+  m({ type: Object })
+], s.prototype, "positionConfiguration");
+u([
+  m({ type: Boolean, reflect: !0 })
+], s.prototype, "invalid");
+u([
+  m({ type: Boolean, reflect: !0 })
+], s.prototype, "readonly");
+u([
+  m({ type: Number, reflect: !0 })
+], s.prototype, "debounce");
+u([
+  m({ type: Boolean, reflect: !0 })
+], s.prototype, "sync");
+u([
+  $()
+], s.prototype, "syncedValue");
 customElements.get("luzmo-edit-option-positions-number-field") || customElements.define(
   "luzmo-edit-option-positions-number-field",
-  n
+  s
 );
 export {
-  n as LuzmoEditOptionPositionsNumberField
+  s as LuzmoEditOptionPositionsNumberField
 };

package/components/edit-option-radio-button-group/edit-option-radio-button-group.d.ts

@@ -8,8 +8,8 @@ export declare class LuzmoEditOptionRadioButtonGroup extends LuzmoEditOptionBase
     disabled: boolean;
     value: string;
     default: string;
-    fromOptionValue?: (value?: string | number | any) => string;
-    toOptionValue?: (value?: string) => string | number | any;
+    parseValue?: (value?: string | number | any) => string;
+    toValue?: (value?: string) => string | number | any;
     private actionGroup;
     debounceTimeout: any;
     private generateRadioButtons;

package/components/edit-option-radio-button-group/index.cjs

@@ -1,6 +1,6 @@
 /*! * A kit of modern Luzmo Web Components for analytics in your web application.
  * 
- * Copyright © 2024 Luzmo
+ * Copyright © 2025 Luzmo
  * All rights reserved.
  * Luzmo web components (“Luzmo Web Components”)
  * must be used according to the Luzmo Terms of Service.
@@ -17,11 +17,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var h=Reflect.get;var c=(u,e,t)=>h(d(u),t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-CtHO6VyI.cjs");require("../index-CTPox3yS.cjs");const i=require("../property-Su1Q6aME.cjs"),f=require("../query-D5qWDopr.cjs"),v=require("../edit-option-base-DnrerC_T.cjs");var y=Object.defineProperty,n=(u,e,t,r)=>{for(var s=void 0,l=u.length-1,p;l>=0;l--)(p=u[l])&&(s=p(e,t,s)||s);return s&&y(e,t,s),s};const a=class a extends v.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}generateRadioButtons(){const e=Object.entries(this.values).map(([t,r])=>i.x`
+"use strict";var d=Object.getPrototypeOf;var h=Reflect.get;var c=(l,e,t)=>h(d(l),t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-Dy_5M3M5.cjs");require("../index-CnP-Q5Bw.cjs");const a=require("../property-Cu4Q1hS4.cjs"),v=require("../query-D5qWDopr.cjs"),y=require("../edit-option-base-a2yoNqdf.cjs");var f=Object.defineProperty,i=(l,e,t,r)=>{for(var o=void 0,n=l.length-1,p;n>=0;n--)(p=l[n])&&(o=p(e,t,o)||o);return o&&f(e,t,o),o};const u=class u extends y.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}generateRadioButtons(){const e=Object.entries(this.values).map(([t,r])=>a.x`
         <luzmo-action-button value=${t} ?disabled=${this.disabled}>
           ${r}
         </luzmo-action-button>
-      `);return i.x` ${e} `}_handleEvent(){var e,t,r,s;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toOptionValue=="function"?this.toOptionValue((t=(e=this.actionGroup)==null?void 0:e.selected)==null?void 0:t[0]):(s=(r=this.actionGroup)==null?void 0:r.selected)==null?void 0:s[0]}}))}renderController(){const e=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.value):this.value,t=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.default):this.default;return i.x`
+      `);return a.x` ${e} `}_handleEvent(){var e,t,r,o;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toValue=="function"?this.toValue((t=(e=this.actionGroup)==null?void 0:e.selected)==null?void 0:t[0]):(o=(r=this.actionGroup)==null?void 0:r.selected)==null?void 0:o[0]}}))}renderController(){const e=typeof this.parseValue=="function"?this.parseValue(this.value):this.value,t=typeof this.parseValue=="function"?this.parseValue(this.default):this.default;return a.x`
       <luzmo-action-group
         compact
         selects="single"
@@ -33,4 +33,4 @@
       >
         ${this.generateRadioButtons()}
       </luzmo-action-group>
-    `}};a.styles=[c(a,a,"styles")];let o=a;n([i.n({type:Array})],o.prototype,"values");n([i.n({type:Boolean,reflect:!0})],o.prototype,"disabled");n([i.n({type:String})],o.prototype,"value");n([i.n({type:String})],o.prototype,"default");n([i.n()],o.prototype,"fromOptionValue");n([i.n()],o.prototype,"toOptionValue");n([f.e("luzmo-action-group")],o.prototype,"actionGroup");customElements.get("luzmo-edit-option-radio-button-group")||customElements.define("luzmo-edit-option-radio-button-group",o);exports.LuzmoEditOptionRadioButtonGroup=o;
+    `}};u.styles=[c(u,u,"styles")];let s=u;i([a.n({type:Array})],s.prototype,"values");i([a.n({type:Boolean,reflect:!0})],s.prototype,"disabled");i([a.n({type:String})],s.prototype,"value");i([a.n({type:String})],s.prototype,"default");i([a.n()],s.prototype,"parseValue");i([a.n()],s.prototype,"toValue");i([v.e("luzmo-action-group")],s.prototype,"actionGroup");customElements.get("luzmo-edit-option-radio-button-group")||customElements.define("luzmo-edit-option-radio-button-group",s);exports.LuzmoEditOptionRadioButtonGroup=s;