@luzmo/analytics-components-kit 1.0.1-alpha.4 → 1.0.1-alpha.6

package/components/edit-option-multi-language-field/edit-option-multi-language-field.d.ts

@@ -0,0 +1,15 @@
+import '@luzmo/lucero/multi-language-field';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionMultiLangField extends LuzmoEditOptionBase {
+    static styles: import("lit").CSSResultArray[];
+    value: Record<string, string>;
+    invalid: boolean;
+    readonly: boolean;
+    language?: string;
+    placeholder?: Record<string, string>;
+    debounce: number;
+    private multiLangFieldElement;
+    debounceTimeout: any;
+    private _handleEvent;
+    protected renderController(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,31 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 p=Reflect.get;var d=(u,t,o)=>p(c(u),o,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-f8GtjOLn.cjs");const l=require("../property-ChsOQ1Yj.cjs"),h=require("../query-D5qWDopr.cjs"),m=require("../edit-option-base-Ck3NFAli.cjs");var g=Object.defineProperty,i=(u,t,o,f)=>{for(var n=void 0,a=u.length-1,s;a>=0;a--)(s=u[a])&&(n=s(t,o,n)||n);return n&&g(t,o,n),n};const r=class r extends m.LuzmoEditOptionBase{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 t;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:((t=this.multiLangFieldElement)==null?void 0:t.value)??{}}}))},this.debounce??200)}renderController(){return l.x`
+      <luzmo-multi-language-field
+        .value=${this.value}
+        .language=${this.language??"en"}
+        .disabled=${this.disabled}
+        .size=${this.size}
+        .i18nPlaceholder=${this.placeholder??{}}
+        .invalid=${this.invalid}
+        @change=${this._handleEvent}
+      >
+      </luzmo-multi-language-field>
+    `}};r.styles=[d(r,r,"styles")];let e=r;i([l.n({type:Object,reflect:!0})],e.prototype,"value");i([l.n({type:Boolean,reflect:!0})],e.prototype,"invalid");i([l.n({type:Boolean,reflect:!0})],e.prototype,"readonly");i([l.n({type:String,reflect:!0})],e.prototype,"language");i([l.n({type:Object,reflect:!0})],e.prototype,"placeholder");i([l.n({type:Number,reflect:!0})],e.prototype,"debounce");i([h.e("luzmo-multi-language-field")],e.prototype,"multiLangFieldElement");customElements.get("luzmo-edit-option-multi-language-field")||customElements.define("luzmo-edit-option-multi-language-field",e);exports.LuzmoEditOptionMultiLangField=e;

package/components/edit-option-multi-language-field/index.d.ts

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

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

@@ -0,0 +1,102 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 s = Object.getPrototypeOf;
+var d = Reflect.get;
+var a = (e, l, i) => d(s(e), i, l);
+import "../index-C_Cxv6xn.js";
+import { x as f, n as t } from "../property-CXJD1jOW.js";
+import { e as g } from "../query-Ddbd72Um.js";
+import { L as b } from "../edit-option-base-w3UBiCoU.js";
+const z = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const e = document.createElement("style");
+    e.setAttribute("data-luzmo-vars", ""), e.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-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(e);
+  }
+};
+z();
+var p = Object.defineProperty, r = (e, l, i, h) => {
+  for (var u = void 0, c = e.length - 1, n; c >= 0; c--)
+    (n = e[c]) && (u = n(l, i, u) || u);
+  return u && p(l, i, u), u;
+};
+const m = class m extends b {
+  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 l;
+      this.dispatchEvent(
+        new CustomEvent("option-changed", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0,
+          detail: {
+            value: ((l = this.multiLangFieldElement) == null ? void 0 : l.value) ?? {}
+          }
+        })
+      );
+    }, this.debounce ?? 200);
+  }
+  renderController() {
+    return f`
+      <luzmo-multi-language-field
+        .value=${this.value}
+        .language=${this.language ?? "en"}
+        .disabled=${this.disabled}
+        .size=${this.size}
+        .i18nPlaceholder=${this.placeholder ?? {}}
+        .invalid=${this.invalid}
+        @change=${this._handleEvent}
+      >
+      </luzmo-multi-language-field>
+    `;
+  }
+};
+m.styles = [a(m, m, "styles")];
+let o = m;
+r([
+  t({ type: Object, reflect: !0 })
+], o.prototype, "value");
+r([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "invalid");
+r([
+  t({ type: Boolean, reflect: !0 })
+], o.prototype, "readonly");
+r([
+  t({ type: String, reflect: !0 })
+], o.prototype, "language");
+r([
+  t({ type: Object, reflect: !0 })
+], o.prototype, "placeholder");
+r([
+  t({ type: Number, reflect: !0 })
+], o.prototype, "debounce");
+r([
+  g("luzmo-multi-language-field")
+], o.prototype, "multiLangFieldElement");
+customElements.get("luzmo-edit-option-multi-language-field") || customElements.define(
+  "luzmo-edit-option-multi-language-field",
+  o
+);
+export {
+  o as LuzmoEditOptionMultiLangField
+};

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

@@ -0,0 +1,19 @@
+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;
+    step: number;
+    unit: boolean;
+    debounce: number;
+    fromOptionValue?: (value?: string | number) => number;
+    toOptionValue?: (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

@@ -0,0 +1,32 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 f=Object.getPrototypeOf;var d=Reflect.get;var a=(s,i,u)=>d(f(s),u,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-EkTLplXl.cjs");const t=require("../property-ChsOQ1Yj.cjs"),m=require("../query-D5qWDopr.cjs"),c=require("../edit-option-base-Ck3NFAli.cjs");var h=Object.defineProperty,o=(s,i,u,b)=>{for(var r=void 0,l=s.length-1,p;l>=0;l--)(p=s[l])&&(r=p(i,u,r)||r);return r&&h(i,u,r),r};const n=class n extends c.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.toOptionValue=="function"?this.toOptionValue(this.numberField.value):this.numberField.value}}))},this.debounce??200)}renderController(){const i=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.value):this.value,u=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.default):this.default;return t.x`
+      <luzmo-number-field
+        .value=${i??u??0}
+        .size=${this.size}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        .unit=${this.unit}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+      >
+      </luzmo-number-field>
+    `}};n.styles=[a(n,n,"styles")];let e=n;o([t.n({type:Boolean,reflect:!0})],e.prototype,"disabled");o([t.n({type:Number,reflect:!0})],e.prototype,"min");o([t.n({type:Number,reflect:!0})],e.prototype,"max");o([t.n({type:Number,reflect:!0})],e.prototype,"default");o([t.n({type:Number,reflect:!0})],e.prototype,"value");o([t.n({type:Number,reflect:!0})],e.prototype,"step");o([t.n({type:String,reflect:!0})],e.prototype,"unit");o([t.n({type:Number,reflect:!0})],e.prototype,"debounce");o([t.n()],e.prototype,"fromOptionValue");o([t.n()],e.prototype,"toOptionValue");o([m.e("luzmo-number-field")],e.prototype,"numberField");customElements.get("luzmo-edit-option-number-field")||customElements.define("luzmo-edit-option-number-field",e);exports.LuzmoEditOptionNumberField=e;

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

@@ -0,0 +1,115 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 a = Object.getPrototypeOf;
+var d = Reflect.get;
+var s = (r, t, u) => d(a(r), u, t);
+import "../index-aLxc3xA_.js";
+import { x as f, n as l } from "../property-CXJD1jOW.js";
+import { e as p } from "../query-Ddbd72Um.js";
+import { L as b } from "../edit-option-base-w3UBiCoU.js";
+const z = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const r = document.createElement("style");
+    r.setAttribute("data-luzmo-vars", ""), r.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(r);
+  }
+};
+z();
+var h = Object.defineProperty, e = (r, t, u, g) => {
+  for (var i = void 0, n = r.length - 1, c; n >= 0; n--)
+    (c = r[n]) && (i = c(t, u, i) || i);
+  return i && h(t, u, i), i;
+};
+const m = class m extends b {
+  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.toOptionValue == "function" ? this.toOptionValue(this.numberField.value) : this.numberField.value
+          }
+        })
+      );
+    }, this.debounce ?? 200);
+  }
+  renderController() {
+    const t = typeof this.fromOptionValue == "function" ? this.fromOptionValue(this.value) : this.value, u = typeof this.fromOptionValue == "function" ? this.fromOptionValue(this.default) : this.default;
+    return f`
+      <luzmo-number-field
+        .value=${t ?? u ?? 0}
+        .size=${this.size}
+        .step=${this.step}
+        .min=${this.min}
+        .max=${this.max}
+        .unit=${this.unit}
+        .disabled=${this.disabled}
+        @change=${this._handleEvent}
+      >
+      </luzmo-number-field>
+    `;
+  }
+};
+m.styles = [s(m, m, "styles")];
+let o = m;
+e([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "min");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "max");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "default");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "value");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "step");
+e([
+  l({ type: String, reflect: !0 })
+], o.prototype, "unit");
+e([
+  l({ type: Number, reflect: !0 })
+], o.prototype, "debounce");
+e([
+  l()
+], o.prototype, "fromOptionValue");
+e([
+  l()
+], o.prototype, "toOptionValue");
+e([
+  p("luzmo-number-field")
+], o.prototype, "numberField");
+customElements.get("luzmo-edit-option-number-field") || customElements.define(
+  "luzmo-edit-option-number-field",
+  o
+);
+export {
+  o as LuzmoEditOptionNumberField
+};

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;
+    fromOptionValue?: (value: string | number | any) => string;
+    toOptionValue?: (value: string) => string | number | any;
+    default?: string;
+    private _handleEvent;
+    private generateMenuItems;
+    protected renderController(): TemplateResult<1>;
+}

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

@@ -0,0 +1,35 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 p=(r,e,o)=>c(h(r),o,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-BxFGd_xp.cjs");require("../index-C_xCeCrL.cjs");const n=require("../property-ChsOQ1Yj.cjs"),d=require("../edit-option-base-Ck3NFAli.cjs");var m=Object.defineProperty,i=(r,e,o,f)=>{for(var s=void 0,a=r.length-1,u;a>=0;a--)(u=r[a])&&(s=u(e,o,s)||s);return s&&m(e,o,s),s};const l=class l extends d.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.toOptionValue=="function"?this.toOptionValue(e.detail):e.detail}}))}generateMenuItems(){return n.x`
+      ${Object.entries(this.values).map(([e,o])=>n.x`
+          <luzmo-menu-item value=${e}> ${o} </luzmo-menu-item>
+        `)}
+    `}renderController(){const e=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.value):this.value,o=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.default):this.default;return n.x`
+      <luzmo-picker
+        .value=${e!=null&&e.length?e:o??""}
+        .size=${this.size}
+        variant="highlight"
+        .placement=${this.placement}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${this.generateMenuItems()}
+      </luzmo-picker>
+    `}};l.styles=[p(l,l,"styles")];let t=l;i([n.n({type:Object})],t.prototype,"values");i([n.n({type:Boolean,reflect:!0})],t.prototype,"disabled");i([n.n()],t.prototype,"placement");i([n.n({type:String,reflect:!0})],t.prototype,"value");i([n.n()],t.prototype,"fromOptionValue");i([n.n()],t.prototype,"toOptionValue");i([n.n({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

@@ -0,0 +1,106 @@
+/*! * A kit of modern Luzmo Web Components for analytics in your web application.
+ * 
+ * Copyright © 2024 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 d = Reflect.get;
+var s = (l, o, r) => d(z(l), r, o);
+import "../index-FSUV_4nO.js";
+import "../index-Pmv-d4iw.js";
+import { x as c, n as t } from "../property-CXJD1jOW.js";
+import { L as f } from "../edit-option-base-w3UBiCoU.js";
+const p = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const l = document.createElement("style");
+    l.setAttribute("data-luzmo-vars", ""), l.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(l);
+  }
+};
+p();
+var b = Object.defineProperty, u = (l, o, r, g) => {
+  for (var m = void 0, n = l.length - 1, a; n >= 0; n--)
+    (a = l[n]) && (m = a(o, r, m) || m);
+  return m && b(o, r, m), m;
+};
+const i = class i extends f {
+  constructor() {
+    super(...arguments), this.values = {}, this.disabled = !1, this.placement = "bottom-end";
+  }
+  _handleEvent(o) {
+    this.dispatchEvent(
+      new CustomEvent("option-changed", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          value: typeof this.toOptionValue == "function" ? this.toOptionValue(o.detail) : o.detail
+        }
+      })
+    );
+  }
+  generateMenuItems() {
+    return c`
+      ${Object.entries(this.values).map(
+      ([o, r]) => c`
+          <luzmo-menu-item value=${o}> ${r} </luzmo-menu-item>
+        `
+    )}
+    `;
+  }
+  renderController() {
+    const o = typeof this.fromOptionValue == "function" ? this.fromOptionValue(this.value) : this.value, r = typeof this.fromOptionValue == "function" ? this.fromOptionValue(this.default) : this.default;
+    return c`
+      <luzmo-picker
+        .value=${o != null && o.length ? o : r ?? ""}
+        .size=${this.size}
+        variant="highlight"
+        .placement=${this.placement}
+        @change=${this._handleEvent}
+        .disabled=${this.disabled}
+      >
+        ${this.generateMenuItems()}
+      </luzmo-picker>
+    `;
+  }
+};
+i.styles = [s(i, i, "styles")];
+let e = i;
+u([
+  t({ type: Object })
+], e.prototype, "values");
+u([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+u([
+  t()
+], e.prototype, "placement");
+u([
+  t({ type: String, reflect: !0 })
+], e.prototype, "value");
+u([
+  t()
+], e.prototype, "fromOptionValue");
+u([
+  t()
+], e.prototype, "toOptionValue");
+u([
+  t({ type: String })
+], e.prototype, "default");
+customElements.get("luzmo-edit-option-picker") || customElements.define("luzmo-edit-option-picker", e);
+export {
+  e as LuzmoEditOptionPicker
+};

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

@@ -0,0 +1,28 @@
+import '@luzmo/lucero/number-field';
+import { CSSResultArray } from 'lit';
+import { LuzmoEditOptionBase } from '../edit-option-base/edit-option-base';
+export declare class LuzmoEditOptionPositionsNumberField extends LuzmoEditOptionBase {
+    static get styles(): CSSResultArray;
+    positions?: string[];
+    values?: Record<string, number>;
+    canSync?: boolean;
+    sync?: boolean;
+    positionConfiguration?: Record<string, {
+        min: number;
+        max: number;
+        step: number;
+        default: number;
+    }>;
+    invalid: boolean;
+    readonly: boolean;
+    debounce: number;
+    syncedValue?: number;
+    debounceTimeout: any;
+    _positions: string[][];
+    private _calculateSyncedValue;
+    toggleSync(): void;
+    private _handleEvent;
+    private _renderNumberField;
+    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 © 2024 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 b=require("@luzmo/icons");require("../index-EkTLplXl.cjs");const i=require("../property-ChsOQ1Yj.cjs"),f=require("../state-DLrsMPet.cjs"),v=require("../edit-option-base-Ck3NFAli.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$1(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 a;const s=Object.keys(this.values??{}),l=Object.keys(t);let c=!0;s.length!==l.length&&(c=!1);for(const d of s)((a=this.values)==null?void 0:a[d])!==t[d]&&(c=!1);c||(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,c,a,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
+          class="sync-button ${this.sync?"":"sync"}"
+          position=${e}
+          @click=${this.toggleSync}
+        >
+          ${b.luzmoIcon(b.luzmoLockOutline)}
+        </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">
+        <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}
+          .disabled=${this.disabled}
+          .size=${this.size}
+          .min=${((a=(c=this.positionConfiguration)==null?void 0:c[e])==null?void 0:a.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}
+          .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;

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';