@luzmo/analytics-components-kit 1.0.1-alpha.10 → 1.0.1-alpha.11

package/components/edit-option/item-translations/donut-chart.nl.d.ts

@@ -1,18 +1,78 @@
 declare const _default: {
     name: string;
+    groups: {
+        general: {
+            label: string;
+        };
+        slices: {
+            label: string;
+        };
+        legend: {
+            label: string;
+        };
+        annotate: {
+            label: string;
+        };
+    };
     options: {
         'display.title': {
             label: string;
-            description: string;
         };
         mode: {
             label: string;
-            description: string;
             enum: {
                 pie: string;
                 donut: string;
             };
         };
+        'display.legend': {
+            label: string;
+        };
+        'slices.half': {
+            label: string;
+            enum: {
+                full: string;
+                half: string;
+            };
+        };
+        'display.categoryLabels': {
+            label: string;
+            enum: {
+                list: string;
+                labels: string;
+            };
+        };
+        'sort.by': {
+            label: string;
+            enum: {
+                measure: string;
+                category: string;
+            };
+        };
+        'display.values': {
+            label: string;
+            tooltip: string;
+            enum: {
+                none: string;
+                absolute: string;
+                percentage: string;
+            };
+        };
+        'slices.width': {
+            label: string;
+        };
+        'slices.maxNumber': {
+            label: string;
+        };
+        'slices.minPercentage': {
+            label: string;
+        };
+        'slices.roundedCorners': {
+            label: string;
+        };
+        'slices.padding': {
+            label: string;
+        };
     };
 };
 export default _default;

package/components/edit-option/item-translations/imageobject.en.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    name: string;
+    groups: {
+        general: {
+            label: string;
+        };
+        alignment: {
+            label: string;
+        };
+        link: {
+            label: string;
+        };
+    };
+    options: {
+        url: {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        mode: {
+            label: string;
+            description: string;
+            enum: {
+                noResize: string;
+                compress: string;
+                fitHorizontal: string;
+                fitVertical: string;
+                fill: string;
+                stretch: string;
+            };
+        };
+        'alignment.vertical': {
+            label: string;
+            description: string;
+            enum: {
+                top: string;
+                middle: string;
+                bottom: string;
+            };
+        };
+        'alignment.horizontal': {
+            label: string;
+            description: string;
+            enum: {
+                left: string;
+                center: string;
+                right: string;
+            };
+        };
+        'link.url': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.tooltip': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.target': {
+            label: string;
+            description: string;
+            enum: {
+                _parent: string;
+                _blank: string;
+                _self: string;
+            };
+        };
+    };
+};
+export default _default;

package/components/edit-option/item-translations/imageobject.fr.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    name: string;
+    groups: {
+        general: {
+            label: string;
+        };
+        alignment: {
+            label: string;
+        };
+        link: {
+            label: string;
+        };
+    };
+    options: {
+        url: {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        mode: {
+            label: string;
+            description: string;
+            enum: {
+                noResize: string;
+                compress: string;
+                fitHorizontal: string;
+                fitVertical: string;
+                fill: string;
+                stretch: string;
+            };
+        };
+        'alignment.vertical': {
+            label: string;
+            description: string;
+            enum: {
+                top: string;
+                middle: string;
+                bottom: string;
+            };
+        };
+        'alignment.horizontal': {
+            label: string;
+            description: string;
+            enum: {
+                left: string;
+                center: string;
+                right: string;
+            };
+        };
+        'link.url': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.tooltip': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.target': {
+            label: string;
+            description: string;
+            enum: {
+                _parent: string;
+                _blank: string;
+                _self: string;
+            };
+        };
+    };
+};
+export default _default;

package/components/edit-option/item-translations/imageobject.nl.d.ts

@@ -0,0 +1,71 @@
+declare const _default: {
+    name: string;
+    groups: {
+        general: {
+            label: string;
+        };
+        alignment: {
+            label: string;
+        };
+        link: {
+            label: string;
+        };
+    };
+    options: {
+        url: {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        mode: {
+            label: string;
+            description: string;
+            enum: {
+                noResize: string;
+                compress: string;
+                fitHorizontal: string;
+                fitVertical: string;
+                fill: string;
+                stretch: string;
+            };
+        };
+        'alignment.vertical': {
+            label: string;
+            description: string;
+            enum: {
+                top: string;
+                middle: string;
+                bottom: string;
+            };
+        };
+        'alignment.horizontal': {
+            label: string;
+            description: string;
+            enum: {
+                left: string;
+                center: string;
+                right: string;
+            };
+        };
+        'link.url': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.tooltip': {
+            label: string;
+            placeholder: string;
+            description: string;
+        };
+        'link.target': {
+            label: string;
+            description: string;
+            enum: {
+                _parent: string;
+                _blank: string;
+                _self: string;
+            };
+        };
+    };
+};
+export default _default;

package/components/edit-option/item-translations/textobject.en.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    name: string;
+    groups: {
+        display: {
+            label: string;
+        };
+        padding: {
+            label: string;
+        };
+    };
+    options: {
+        'display.hideScrollbar': {
+            label: string;
+        };
+    };
+};
+export default _default;

package/components/edit-option/item-translations/textobject.fr.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    name: string;
+    groups: {
+        display: {
+            label: string;
+        };
+        padding: {
+            label: string;
+        };
+    };
+    options: {
+        'display.hideScrollbar': {
+            label: string;
+        };
+    };
+};
+export default _default;

package/components/edit-option/item-translations/textobject.nl.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+    name: string;
+    groups: {
+        display: {
+            label: string;
+        };
+        padding: {
+            label: string;
+        };
+    };
+    options: {
+        'display.hideScrollbar': {
+            label: string;
+        };
+    };
+};
+export default _default;

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

@@ -17,7 +17,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";var d=Object.getPrototypeOf;var b=Reflect.get;var s=(c,t,u)=>b(d(c),u,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../luzmo-icons-XsFsTAl3.cjs");require("../index-zuArOtOt.cjs");require("../index-DUO13KGl.cjs");require("../index-h9T5DPIm.cjs");const n=require("../property-0L4eB11h.cjs"),m=require("../query-D5qWDopr.cjs"),g=require("../edit-option-base-Boz7TNRZ.cjs"),z="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var v=Object.defineProperty,i=(c,t,u,f)=>{for(var r=void 0,l=c.length-1,p;l>=0;l--)(p=c[l])&&(r=p(t,u,r)||r);return r&&v(t,u,r),r};const h={alignBottom:o.U,alignMiddle:o.P,alignTop:o.E,alignLeft:o.G,alignCenter:o.q,alignRight:o.O,ban:o.a1,borderSolid:o.b2,borderDashed:o.k2,borderDotted:o.S2,compress:o.Y,expand:o._,arrowsExpand:o.c1,arrowsHorizontal:o.J,arrowsVertical:o.j,italic:o.w1,bold:o.D1,underline:o.x1,rows:o.E1,columns:o.P1,table:o.r1},a=class a extends g.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.actionGroup.selected}}))}_generateButtonContents(t){return typeof t=="string"?n.x`${t}`:t.iconName||t.icon?n.x`
+"use strict";var d=Object.getPrototypeOf;var m=Reflect.get;var s=(c,t,u)=>m(d(c),u,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../luzmo-icons-XsFsTAl3.cjs");require("../index-zuArOtOt.cjs");require("../index-DUO13KGl.cjs");require("../index-h9T5DPIm.cjs");const n=require("../property-0L4eB11h.cjs"),b=require("../query-D5qWDopr.cjs"),z=require("../edit-option-base-Boz7TNRZ.cjs"),g="luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";var v=Object.defineProperty,i=(c,t,u,f)=>{for(var r=void 0,l=c.length-1,p;l>=0;l--)(p=c[l])&&(r=p(t,u,r)||r);return r&&v(t,u,r),r};const h={alignBottom:o.U,alignMiddle:o.P,alignTop:o.E,alignLeft:o.G,alignCenter:o.q,alignRight:o.O,ban:o.a1,borderSolid:o.b2,borderDashed:o.k2,borderDotted:o.S2,compress:o.Y,expand:o._,arrowsExpand:o.c1,arrowsHorizontal:o.J,arrowsVertical:o.j,italic:o.w1,bold:o.D1,underline:o.x1,rows:o.E1,columns:o.P1,table:o.r1},a=class a extends z.LuzmoEditOptionBase{constructor(){super(...arguments),this.values={},this.disabled=!1}_handleEvent(){this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.actionGroup.selected}}))}_generateButtonContents(t){return typeof t=="string"?n.x`${t}`:t.iconName||t.icon?n.x`
         <luzmo-icon
           slot="icon"
           .icon=${t.icon??h[t.iconName]}
@@ -25,9 +25,16 @@
         ></luzmo-icon>
         ${t.buttonText??""}
       `:n.x`${t.buttonText??""}`}_generateActionButtons(){return Object.entries(this.values).map(([t,u])=>n.x`
-        <luzmo-action-button value=${t} ?disabled=${this.disabled}
-          >${this._generateButtonContents(u)}</luzmo-action-button
-        >
+        <luzmo-action-button value=${t} ?disabled=${this.disabled}>
+          ${this._generateButtonContents(u)}
+          ${u.label?n.x`<luzmo-tooltip
+                self-managed
+                placement="top"
+                size=${this.size}
+              >
+                ${u.label}
+              </luzmo-tooltip>`:""}
+        </luzmo-action-button>
       `)}renderController(){const t=this._generateActionButtons();return n.x`
       <luzmo-action-group
         compact
@@ -41,4 +48,4 @@
       >
         ${t}
       </luzmo-action-group>
-    `}};a.styles=[...s(a,a,"styles"),n.r$1(z)];let e=a;i([n.n({type:Array})],e.prototype,"values");i([n.n({type:Boolean,reflect:!0})],e.prototype,"disabled");i([n.n({type:String})],e.prototype,"selects");i([n.n({type:Array})],e.prototype,"value");i([n.n({type:Array})],e.prototype,"default");i([m.e("luzmo-action-group")],e.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",e);exports.LuzmoEditOptionActionButtonGroup=e;
+    `}};a.styles=[...s(a,a,"styles"),n.r$1(g)];let e=a;i([n.n({type:Array})],e.prototype,"values");i([n.n({type:Boolean,reflect:!0})],e.prototype,"disabled");i([n.n({type:String})],e.prototype,"selects");i([n.n({type:Array})],e.prototype,"value");i([n.n({type:Array})],e.prototype,"default");i([b.e("luzmo-action-group")],e.prototype,"actionGroup");customElements.get("luzmo-edit-option-action-button-group")||customElements.define("luzmo-edit-option-action-button-group",e);exports.LuzmoEditOptionActionButtonGroup=e;

package/components/edit-option-action-button-group/index.js

@@ -19,12 +19,12 @@
  * */
 var z = Object.getPrototypeOf;
 var d = Reflect.get;
-var s = (r, o, e) => d(z(r), e, o);
+var s = (r, o, l) => d(z(r), l, o);
 import { r as b, P as g, E as f, a as h, D as v, w as x, j as y, J as w, c as k, _ as $, Y as C, S as q, e as S, f as E, g as _, i as B, q as P, G as D, l as j, m as A, U as H } from "../luzmo-icons-BE2T8vWu.js";
 import "../index-CdCtJpK9.js";
 import "../index-Bee1uunR.js";
 import "../index-ymMEPngt.js";
-import { a as N, x as n, n as c } from "../property-B2F7x7Cz.js";
+import { a as N, x as u, n as c } from "../property-B2F7x7Cz.js";
 import { e as T } from "../query-Ddbd72Um.js";
 import { L as U } from "../edit-option-base-qePiIQWd.js";
 const p = () => {
@@ -35,10 +35,10 @@ const p = () => {
 };
 p();
 const M = "luzmo-action-group{--luzmo-edit-option-action-button-group-button-background-hover: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-background-down: rgba( var(--luzmo-primary-rgb), .2 );--luzmo-edit-option-action-button-group-button-background-focus: rgba( var(--luzmo-primary-rgb), .1 );--luzmo-edit-option-action-button-group-button-content-color-default: var( --luzmo-font-color-disabled );--luzmo-edit-option-action-button-group-button-content-color-hover: var( --luzmo-font-color-hover );--luzmo-edit-option-action-button-group-button-content-color-down: var( --luzmo-font-color-down );--luzmo-edit-option-action-button-group-button-content-color-focus: var( --luzmo-font-color-focus )}luzmo-action-group[compact][quiet][emphasized]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=s]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-1)}luzmo-action-group[compact][quiet][emphasized][size=l]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-2)}luzmo-action-group[compact][quiet][emphasized][size=xl]{--luzmo-action-group-gap-size-compact: var(--luzmo-spacing-3)}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-hover );--luzmo-action-button-background-color-down: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-focus: var( --luzmo-edit-option-action-button-group-button-background-focus );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-default );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-hover );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-focus: var( --luzmo-edit-option-action-button-group-button-content-color-focus )}luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]:hover,luzmo-action-group[compact][quiet][emphasized] luzmo-action-button[selected]{--luzmo-action-button-background-color-hover: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-background-color-default: var( --luzmo-edit-option-action-button-group-button-background-down );--luzmo-action-button-content-color-default: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-hover: var( --luzmo-edit-option-action-button-group-button-content-color-down );--luzmo-action-button-content-color-down: var( --luzmo-edit-option-action-button-group-button-content-color-down )}";
-var R = Object.defineProperty, u = (r, o, e, F) => {
-  for (var l = void 0, i = r.length - 1, m; i >= 0; i--)
-    (m = r[i]) && (l = m(o, e, l) || l);
-  return l && R(o, e, l), l;
+var R = Object.defineProperty, n = (r, o, l, F) => {
+  for (var e = void 0, i = r.length - 1, m; i >= 0; i--)
+    (m = r[i]) && (e = m(o, l, e) || e);
+  return e && R(o, l, e), e;
 };
 const V = {
   alignBottom: H,
@@ -79,27 +79,34 @@ const V = {
     );
   }
   _generateButtonContents(o) {
-    return typeof o == "string" ? n`${o}` : o.iconName || o.icon ? n`
+    return typeof o == "string" ? u`${o}` : o.iconName || o.icon ? u`
         <luzmo-icon
           slot="icon"
           .icon=${o.icon ?? V[o.iconName]}
           .label=${o.label ?? ""}
         ></luzmo-icon>
         ${o.buttonText ?? ""}
-      ` : n`${o.buttonText ?? ""}`;
+      ` : u`${o.buttonText ?? ""}`;
   }
   _generateActionButtons() {
     return Object.entries(this.values).map(
-      ([o, e]) => n`
-        <luzmo-action-button value=${o} ?disabled=${this.disabled}
-          >${this._generateButtonContents(e)}</luzmo-action-button
-        >
+      ([o, l]) => u`
+        <luzmo-action-button value=${o} ?disabled=${this.disabled}>
+          ${this._generateButtonContents(l)}
+          ${l.label ? u`<luzmo-tooltip
+                self-managed
+                placement="top"
+                size=${this.size}
+              >
+                ${l.label}
+              </luzmo-tooltip>` : ""}
+        </luzmo-action-button>
       `
     );
   }
   renderController() {
     const o = this._generateActionButtons();
-    return n`
+    return u`
       <luzmo-action-group
         compact
         quiet
@@ -117,22 +124,22 @@ const V = {
 };
 a.styles = [...s(a, a, "styles"), N(M)];
 let t = a;
-u([
+n([
   c({ type: Array })
 ], t.prototype, "values");
-u([
+n([
   c({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled");
-u([
+n([
   c({ type: String })
 ], t.prototype, "selects");
-u([
+n([
   c({ type: Array })
 ], t.prototype, "value");
-u([
+n([
   c({ type: Array })
 ], t.prototype, "default");
-u([
+n([
   T("luzmo-action-group")
 ], t.prototype, "actionGroup");
 customElements.get("luzmo-edit-option-action-button-group") || customElements.define(

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

@@ -7,6 +7,8 @@ export declare class LuzmoEditOptionMultiLangField extends LuzmoEditOptionBase {
     readonly: boolean;
     language?: string;
     placeholder?: Record<string, string>;
+    fromOptionValue?: (value: any, language: string) => any;
+    toOptionValue?: (value: any, language: string) => any;
     debounce: number;
     private multiLangFieldElement;
     debounceTimeout: any;

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

@@ -17,9 +17,9 @@
  * 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-86cIx1Ql.cjs");const l=require("../property-0L4eB11h.cjs"),h=require("../query-D5qWDopr.cjs"),m=require("../edit-option-base-Boz7TNRZ.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`
+"use strict";var d=Object.getPrototypeOf;var c=Reflect.get;var p=(a,t,n)=>c(d(a),n,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../index-86cIx1Ql.cjs");const l=require("../property-0L4eB11h.cjs"),h=require("../query-D5qWDopr.cjs"),m=require("../edit-option-base-Boz7TNRZ.cjs");var f=Object.defineProperty,i=(a,t,n,g)=>{for(var o=void 0,r=a.length-1,s;r>=0;r--)(s=a[r])&&(o=s(t,n,o)||o);return o&&f(t,n,o),o};const u=class u 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,n;this.dispatchEvent(new CustomEvent("option-changed",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:typeof this.toOptionValue=="function"?this.toOptionValue(((t=this.multiLangFieldElement)==null?void 0:t.value)??{},this.language??"en"):((n=this.multiLangFieldElement)==null?void 0:n.value)??{}}}))},this.debounce??200)}renderController(){const t=typeof this.fromOptionValue=="function"?this.fromOptionValue(this.value,this.language??"en"):this.value;return l.x`
       <luzmo-multi-language-field
-        .value=${this.value}
+        .value=${t}
         .language=${this.language??"en"}
         .disabled=${this.disabled}
         .size=${this.size}
@@ -28,4 +28,4 @@
         @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;
+    `}};u.styles=[p(u,u,"styles")];let e=u;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()],e.prototype,"fromOptionValue");i([l.n()],e.prototype,"toOptionValue");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.js

@@ -19,46 +19,50 @@
  * */
 var s = Object.getPrototypeOf;
 var d = Reflect.get;
-var a = (e, l, i) => d(s(e), i, l);
+var c = (r, e, u) => d(s(r), u, e);
 import "../index-DVAsMiOm.js";
 import { x as f, n as t } from "../property-B2F7x7Cz.js";
-import { e as g } from "../query-Ddbd72Um.js";
-import { L as b } from "../edit-option-base-qePiIQWd.js";
+import { e as p } from "../query-Ddbd72Um.js";
+import { L as g } from "../edit-option-base-qePiIQWd.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);
+    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 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;
+var b = Object.defineProperty, l = (r, e, u, h) => {
+  for (var i = void 0, n = r.length - 1, a; n >= 0; n--)
+    (a = r[n]) && (i = a(e, u, i) || i);
+  return i && b(e, u, i), i;
 };
-const m = class m extends b {
+const m = class m extends g {
   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;
+      var e, u;
       this.dispatchEvent(
         new CustomEvent("option-changed", {
           bubbles: !0,
           composed: !0,
           cancelable: !0,
           detail: {
-            value: ((l = this.multiLangFieldElement) == null ? void 0 : l.value) ?? {}
+            value: typeof this.toOptionValue == "function" ? this.toOptionValue(
+              ((e = this.multiLangFieldElement) == null ? void 0 : e.value) ?? {},
+              this.language ?? "en"
+            ) : ((u = this.multiLangFieldElement) == null ? void 0 : u.value) ?? {}
           }
         })
       );
     }, this.debounce ?? 200);
   }
   renderController() {
+    const e = typeof this.fromOptionValue == "function" ? this.fromOptionValue(this.value, this.language ?? "en") : this.value;
     return f`
       <luzmo-multi-language-field
-        .value=${this.value}
+        .value=${e}
         .language=${this.language ?? "en"}
         .disabled=${this.disabled}
         .size=${this.size}
@@ -70,28 +74,34 @@ const m = class m extends b {
     `;
   }
 };
-m.styles = [a(m, m, "styles")];
+m.styles = [c(m, m, "styles")];
 let o = m;
-r([
+l([
   t({ type: Object, reflect: !0 })
 ], o.prototype, "value");
-r([
+l([
   t({ type: Boolean, reflect: !0 })
 ], o.prototype, "invalid");
-r([
+l([
   t({ type: Boolean, reflect: !0 })
 ], o.prototype, "readonly");
-r([
+l([
   t({ type: String, reflect: !0 })
 ], o.prototype, "language");
-r([
+l([
   t({ type: Object, reflect: !0 })
 ], o.prototype, "placeholder");
-r([
+l([
+  t()
+], o.prototype, "fromOptionValue");
+l([
+  t()
+], o.prototype, "toOptionValue");
+l([
   t({ type: Number, reflect: !0 })
 ], o.prototype, "debounce");
-r([
-  g("luzmo-multi-language-field")
+l([
+  p("luzmo-multi-language-field")
 ], o.prototype, "multiLangFieldElement");
 customElements.get("luzmo-edit-option-multi-language-field") || customElements.define(
   "luzmo-edit-option-multi-language-field",