@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.17

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

@@ -15,7 +15,77 @@
  * 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 e=require("../base-CBCg3yyw.cjs"),u=require("../sized-mixin-CPxE5C96.cjs");require("../text-field/index.cjs");const p=require("../manage-help-text-DhgARkZX.cjs"),h=":host{display:inline-block}:host luzmo-text-field{width:100%}";var d=Object.defineProperty,l=(n,i,r,g)=>{for(var a=void 0,o=n.length-1,s;o>=0;o--)(s=n[o])&&(a=s(i,r,a)||a);return a&&d(i,r,a),a};class t extends p.ManageHelpText(u.SizedMixin(e.LuzmoElement,{noDefaultSize:!0})){constructor(){super(...arguments),this.allowedKeys="",this.i18nPlaceholder={},this.type="text",this.grows=!1,this.maxlength=-1,this.minlength=-1,this.multiline=!1,this.rows=-1,this.quiet=!1,this.disabled=!1,this.required=!1,this.readonly=!1,this.language="en",this.defaultLanguage="en",this.value={}}static get styles(){return[e.r(h)]}get _localizedValue(){const i={...this.value};return i[this.language]??i[this.defaultLanguage]??Object.values(i)[0]??""}get _localizedPlaceholder(){const i={...this.i18nPlaceholder};return i[this.language]??i[this.defaultLanguage]??Object.values(i)[0]??""}handleChange(i){i.stopPropagation(),i.preventDefault();const r=i.target;this.value[this.language]!==r.value&&(this.value={...this.value,[this.language]:r.value},this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,cancelable:!0,detail:{value:this.value}})))}render(){return e.x`
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const base = require("../base-COw9n7UR.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+require("../text-field/index.cjs");
+const manageHelpText = require("../manage-help-text-BYx84zZR.cjs");
+const styles = ":host{display:inline-block}:host luzmo-text-field{width:100%}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoMultiLangField extends manageHelpText.ManageHelpText(
+  sizedMixin.SizedMixin(base.LuzmoElement, {
+    noDefaultSize: true
+  })
+) {
+  constructor() {
+    super(...arguments);
+    this.allowedKeys = "";
+    this.i18nPlaceholder = {};
+    this.type = "text";
+    this.grows = false;
+    this.maxlength = -1;
+    this.minlength = -1;
+    this.multiline = false;
+    this.rows = -1;
+    this.quiet = false;
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.language = "en";
+    this.defaultLanguage = "en";
+    this.value = {};
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  get _localizedValue() {
+    const i18nValue = { ...this.value };
+    return i18nValue[this.language] ?? i18nValue[this.defaultLanguage] ?? Object.values(i18nValue)[0] ?? "";
+  }
+  get _localizedPlaceholder() {
+    const i18nValue = { ...this.i18nPlaceholder };
+    return i18nValue[this.language] ?? i18nValue[this.defaultLanguage] ?? Object.values(i18nValue)[0] ?? "";
+  }
+  handleChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const input = event.target;
+    if (this.value[this.language] === input.value) {
+      return;
+    }
+    this.value = { ...this.value, [this.language]: input.value };
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: { value: this.value }
+      })
+    );
+  }
+  render() {
+    return lit.html`
       <luzmo-text-field
         .value=${this._localizedValue}
         .size=${this.size}
@@ -36,4 +106,64 @@
         @input=${this.handleChange}
         @change=${this.handleChange}
       ></luzmo-text-field>
-    `}}l([e.n({attribute:"allowed-keys"})],t.prototype,"allowedKeys");l([e.n({type:String,reflect:!0})],t.prototype,"name");l([e.n({type:Object,attribute:"i18n-placeholder"})],t.prototype,"i18nPlaceholder");l([e.n({attribute:"type",reflect:!0})],t.prototype,"type");l([e.n()],t.prototype,"pattern");l([e.n({type:Boolean,reflect:!0})],t.prototype,"grows");l([e.n({type:Number})],t.prototype,"maxlength");l([e.n({type:Number})],t.prototype,"minlength");l([e.n({type:Boolean,reflect:!0})],t.prototype,"multiline");l([e.n({type:Number})],t.prototype,"rows");l([e.n({type:Boolean,reflect:!0})],t.prototype,"quiet");l([e.n({type:Boolean,reflect:!0})],t.prototype,"disabled");l([e.n({type:Boolean,reflect:!0})],t.prototype,"required");l([e.n({type:Boolean,reflect:!0})],t.prototype,"readonly");l([e.n({type:String,reflect:!0})],t.prototype,"autocomplete");l([e.n({type:String,reflect:!0})],t.prototype,"language");l([e.n({type:String,reflect:!0})],t.prototype,"defaultLanguage");l([e.n({type:Object,reflect:!0})],t.prototype,"value");customElements.get("luzmo-multi-language-field")||customElements.define("luzmo-multi-language-field",t);exports.LuzmoMultiLangField=t;
+    `;
+  }
+}
+__decorateClass([
+  decorators_js.property({ attribute: "allowed-keys" })
+], LuzmoMultiLangField.prototype, "allowedKeys");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "name");
+__decorateClass([
+  decorators_js.property({ type: Object, attribute: "i18n-placeholder" })
+], LuzmoMultiLangField.prototype, "i18nPlaceholder");
+__decorateClass([
+  decorators_js.property({ attribute: "type", reflect: true })
+], LuzmoMultiLangField.prototype, "type");
+__decorateClass([
+  decorators_js.property()
+], LuzmoMultiLangField.prototype, "pattern");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "grows");
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoMultiLangField.prototype, "maxlength");
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoMultiLangField.prototype, "minlength");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "multiline");
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoMultiLangField.prototype, "rows");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "quiet");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "disabled");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "required");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "readonly");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "autocomplete");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "language");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "defaultLanguage");
+__decorateClass([
+  decorators_js.property({ type: Object, reflect: true })
+], LuzmoMultiLangField.prototype, "value");
+if (!customElements.get("luzmo-multi-language-field")) {
+  customElements.define("luzmo-multi-language-field", LuzmoMultiLangField);
+}
+exports.LuzmoMultiLangField = LuzmoMultiLangField;

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

@@ -15,56 +15,84 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as m, r as c, x as d, n as e } from "../base-WsynuqaS.js";
-import { S as p } from "../sized-mixin-D4ACoVUr.js";
-import "../text-field/index.js";
-import { M as z } from "../manage-help-text-syYnjKGL.js";
-const s = () => {
-  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-disabled-color);--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-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-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #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);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.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-disabled-color);--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-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-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #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(styleElement);
   }
 };
-s();
-const g = ":host{display:inline-block}:host luzmo-text-field{width:100%}";
-var h = Object.defineProperty, l = (r, t, i, f) => {
-  for (var u = void 0, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (u = n(t, i, u) || u);
-  return u && h(t, i, u), u;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
+import "../text-field/index.js";
+import { M as ManageHelpText } from "../manage-help-text-DOuMTGht.js";
+const styles = ":host{display:inline-block}:host luzmo-text-field{width:100%}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-class o extends z(
-  p(m, {
-    noDefaultSize: !0
+class LuzmoMultiLangField extends ManageHelpText(
+  SizedMixin(LuzmoElement, {
+    noDefaultSize: true
   })
 ) {
   constructor() {
-    super(...arguments), this.allowedKeys = "", this.i18nPlaceholder = {}, this.type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.rows = -1, this.quiet = !1, this.disabled = !1, this.required = !1, this.readonly = !1, this.language = "en", this.defaultLanguage = "en", this.value = {};
+    super(...arguments);
+    this.allowedKeys = "";
+    this.i18nPlaceholder = {};
+    this.type = "text";
+    this.grows = false;
+    this.maxlength = -1;
+    this.minlength = -1;
+    this.multiline = false;
+    this.rows = -1;
+    this.quiet = false;
+    this.disabled = false;
+    this.required = false;
+    this.readonly = false;
+    this.language = "en";
+    this.defaultLanguage = "en";
+    this.value = {};
   }
   static get styles() {
-    return [c(g)];
+    return [unsafeCSS(styles)];
   }
   get _localizedValue() {
-    const t = { ...this.value };
-    return t[this.language] ?? t[this.defaultLanguage] ?? Object.values(t)[0] ?? "";
+    const i18nValue = { ...this.value };
+    return i18nValue[this.language] ?? i18nValue[this.defaultLanguage] ?? Object.values(i18nValue)[0] ?? "";
   }
   get _localizedPlaceholder() {
-    const t = { ...this.i18nPlaceholder };
-    return t[this.language] ?? t[this.defaultLanguage] ?? Object.values(t)[0] ?? "";
+    const i18nValue = { ...this.i18nPlaceholder };
+    return i18nValue[this.language] ?? i18nValue[this.defaultLanguage] ?? Object.values(i18nValue)[0] ?? "";
   }
-  handleChange(t) {
-    t.stopPropagation(), t.preventDefault();
-    const i = t.target;
-    this.value[this.language] !== i.value && (this.value = { ...this.value, [this.language]: i.value }, this.dispatchEvent(
+  handleChange(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const input = event.target;
+    if (this.value[this.language] === input.value) {
+      return;
+    }
+    this.value = { ...this.value, [this.language]: input.value };
+    this.dispatchEvent(
       new CustomEvent("change", {
-        bubbles: !0,
-        composed: !0,
-        cancelable: !0,
+        bubbles: true,
+        composed: true,
+        cancelable: true,
         detail: { value: this.value }
       })
-    ));
+    );
   }
   render() {
-    return d`
+    return html`
       <luzmo-text-field
         .value=${this._localizedValue}
         .size=${this.size}
@@ -88,61 +116,63 @@ class o extends z(
     `;
   }
 }
-l([
-  e({ attribute: "allowed-keys" })
-], o.prototype, "allowedKeys");
-l([
-  e({ type: String, reflect: !0 })
-], o.prototype, "name");
-l([
-  e({ type: Object, attribute: "i18n-placeholder" })
-], o.prototype, "i18nPlaceholder");
-l([
-  e({ attribute: "type", reflect: !0 })
-], o.prototype, "type");
-l([
-  e()
-], o.prototype, "pattern");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "grows");
-l([
-  e({ type: Number })
-], o.prototype, "maxlength");
-l([
-  e({ type: Number })
-], o.prototype, "minlength");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "multiline");
-l([
-  e({ type: Number })
-], o.prototype, "rows");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "quiet");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "required");
-l([
-  e({ type: Boolean, reflect: !0 })
-], o.prototype, "readonly");
-l([
-  e({ type: String, reflect: !0 })
-], o.prototype, "autocomplete");
-l([
-  e({ type: String, reflect: !0 })
-], o.prototype, "language");
-l([
-  e({ type: String, reflect: !0 })
-], o.prototype, "defaultLanguage");
-l([
-  e({ type: Object, reflect: !0 })
-], o.prototype, "value");
-customElements.get("luzmo-multi-language-field") || customElements.define("luzmo-multi-language-field", o);
+__decorateClass([
+  property({ attribute: "allowed-keys" })
+], LuzmoMultiLangField.prototype, "allowedKeys");
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "name");
+__decorateClass([
+  property({ type: Object, attribute: "i18n-placeholder" })
+], LuzmoMultiLangField.prototype, "i18nPlaceholder");
+__decorateClass([
+  property({ attribute: "type", reflect: true })
+], LuzmoMultiLangField.prototype, "type");
+__decorateClass([
+  property()
+], LuzmoMultiLangField.prototype, "pattern");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "grows");
+__decorateClass([
+  property({ type: Number })
+], LuzmoMultiLangField.prototype, "maxlength");
+__decorateClass([
+  property({ type: Number })
+], LuzmoMultiLangField.prototype, "minlength");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "multiline");
+__decorateClass([
+  property({ type: Number })
+], LuzmoMultiLangField.prototype, "rows");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "quiet");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "required");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoMultiLangField.prototype, "readonly");
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "autocomplete");
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "language");
+__decorateClass([
+  property({ type: String, reflect: true })
+], LuzmoMultiLangField.prototype, "defaultLanguage");
+__decorateClass([
+  property({ type: Object, reflect: true })
+], LuzmoMultiLangField.prototype, "value");
+if (!customElements.get("luzmo-multi-language-field")) {
+  customElements.define("luzmo-multi-language-field", LuzmoMultiLangField);
+}
 export {
-  o as LuzmoMultiLangField
+  LuzmoMultiLangField
 };