@golemui/gui-lit 0.12.2 → 0.13.1

package/markdown.element-CT1JOOM3.js

@@ -0,0 +1,596 @@
+import { InputWidgetAdapter as O, formContext as S, inputContext as V } from "@golemui/lit";
+import "@golemui/gui-shared";
+import { LitElement as H, html as u, nothing as $ } from "lit";
+import { property as l, state as L, customElement as A } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { G as T, b as I, c as M } from "./templates-Dk1jxLwS.js";
+import { styleMap as B } from "lit-html/directives/style-map.js";
+import { ifDefined as x } from "lit/directives/if-defined.js";
+import "./markdown-text-X-BRJT6K.js";
+import { consume as _, provide as F } from "@lit/context";
+import "rxjs";
+var Z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? D(e, i) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (s = (o ? d(e, i, s) : d(s)) || s);
+  return o && s && Z(e, i, s), s;
+};
+let n = class extends H {
+  constructor() {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.tools = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.defaultOpenPreview = void 0, this.maxLength = void 0, this.headingTitle = void 0, this.boldTitle = void 0, this.italicTitle = void 0, this.strikethroughTitle = void 0, this.quoteTitle = void 0, this.linkTitle = void 0, this.orderedListTitle = void 0, this.unorderedListTitle = void 0, this.splitViewTitle = void 0, this.dependencies = void 0, this.splitViewActive = !1, this.activeFormats = {}, this.splitViewInitialized = !1, this.ariaController = new T(this, {
+      getTargets: () => this.querySelectorAll(`textarea[id="${this.uid}"]`),
+      getState: () => ({
+        uid: this.uid,
+        templateData: {
+          hint: this.hint,
+          errors: this.errors,
+          readonly: this.readOnly,
+          disabled: this.disabled,
+          touched: this.touched
+        }
+      })
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-field");
+  }
+  updated() {
+    this.recalculateAutoGrow();
+  }
+  willUpdate(t) {
+    !this.splitViewInitialized && t.has("defaultOpenPreview") && (this.splitViewActive = !!this.defaultOpenPreview, this.splitViewInitialized = !0);
+  }
+  render() {
+    super.render();
+    const t = {
+      uid: this.uid,
+      label: this.label,
+      errors: this.errors,
+      touched: this.touched,
+      required: this.required,
+      disabled: this.disabled,
+      readonly: this.readOnly,
+      value: this.value,
+      hint: this.hint,
+      placeholder: this.placeholder,
+      counterMode: this.counterMode ?? "remaining",
+      minimumHeight: this.minimumHeight ?? 120,
+      autoGrow: this.autoGrow ?? !1,
+      defaultOpenPreview: this.defaultOpenPreview ?? !1,
+      maxLength: this.maxLength,
+      dependencies: this.dependencies
+    }, e = {
+      "gui-markdown--icon": !1
+    };
+    let i = u``;
+    if (t.counterMode && t.maxLength) {
+      const s = {
+        "gui-markdown--counter": !0,
+        "gui-markdown--counter__error": (t.value?.length ?? 0) > t.maxLength
+      }, a = t.counterMode === "current" ? u`<span>${t.value?.length ?? 0}</span>` : u`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
+      i = u`<div class=${y(s)}>
+        ${a}
+        <span> / ${t.maxLength}</span>
+      </div>`;
+    }
+    const o = {
+      "min-height": `${t.minimumHeight}px`
+    };
+    return u`
+      ${I(this.uid, t)}
+
+      <div
+        class=${y({
+      "gui-widget": !0,
+      "gui-markdown--with-preview": this.splitViewActive
+    })}
+      >
+        <nav class="gui-markdown__toolbar">
+          <ul>
+            ${(this.tools ?? ["H", "B", "I", "S", "Q", "L", "|", "OL", "UL"]).map(
+      (s) => this.renderToolbarItem(s)
+    )}
+            <li>
+              <button
+                type="button"
+                tabindex="0"
+                class=${y({
+      "gui-markdown__toolbar-button": !0,
+      "gui-markdown__toolbar-button--active": this.splitViewActive
+    })}
+                @click=${this.splitView}
+                title=${this.splitViewTitle ?? "Split View"}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 256 256"
+                >
+                  <path
+                    d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40ZM56,56h64V200H56ZM200,200H136V56h64V200Z"
+                  ></path>
+                </svg>
+              </button>
+            </li>
+          </ul>
+        </nav>
+        <textarea
+          id=${x(this.uid)}
+          class=${y(e)}
+          style=${B(o)}
+          ?required=${t.required}
+          ?disabled=${t.disabled}
+          ?readonly=${t.readonly}
+          placeholder=${x(t.placeholder)}
+          autocomplete=${this.autocomplete || $}
+          .value=${this.value || ""}
+          @input=${this.valueChanged}
+          @keyup=${this.detectFormats}
+          @mouseup=${this.detectFormats}
+          @blur=${this.onBlur}
+        ></textarea>
+
+        ${this.splitViewActive ? u`
+              <section
+                data-cy=${x(this.uid ? `${this.uid}_markdown` : $)}
+                class="gui-markdown__preview"
+              >
+                <gui-markdown-text
+                  .md=${this.value || ""}
+                  .dependencies=${this.dependencies}
+                ></gui-markdown-text>
+              </section>
+            ` : $}
+      </div>
+
+      <div class="gui-markdown--validation">
+        <div>${M(this.uid, t)}</div>
+        ${i}
+      </div>
+    `;
+  }
+  recalculateAutoGrow() {
+    if (!this.autoGrow) return;
+    const t = this.querySelector(`textarea[id="${this.uid}"]`);
+    if (!t) return;
+    const e = window.getComputedStyle(t), i = parseFloat(e.paddingTop), o = parseFloat(e.paddingBottom), s = i + o;
+    t.style.height = "auto", t.style.height = `${Math.max(this.minimumHeight ?? 120, t.scrollHeight - s)}px`;
+  }
+  splitView() {
+    this.splitViewActive = !this.splitViewActive;
+  }
+  renderToolbarItem(t) {
+    switch (t) {
+      case "H":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("heading")}
+            @click=${this.applyFormat("# ", "", "heading")}
+            title=${this.headingTitle ?? "Heading"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M212,56V200a12,12,0,0,1-24,0V140H68v60a12,12,0,0,1-24,0V56a12,12,0,0,1,24,0v60H188V56a12,12,0,0,1,24,0Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "B":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("bold")}
+            @click=${this.applyFormat("**", "**", "bold")}
+            title=${this.boldTitle ?? "Bold"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M185.08,114.46A48,48,0,0,0,148,36H80A12,12,0,0,0,68,48V200a12,12,0,0,0,12,12h80a52,52,0,0,0,25.08-97.54ZM92,60h56a24,24,0,0,1,0,48H92Zm68,128H92V132h68a28,28,0,0,1,0,56Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "I":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("italic")}
+            @click=${this.applyFormat("_", "_", "italic")}
+            title=${this.italicTitle ?? "Italic"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M204,56a12,12,0,0,1-12,12H160.65l-40,120H144a12,12,0,0,1,0,24H64a12,12,0,0,1,0-24H95.35l40-120H112a12,12,0,0,1,0-24h80A12,12,0,0,1,204,56Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "S":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("strikethrough")}
+            @click=${this.applyFormat("~~", "~~", "strikethrough")}
+            title=${this.strikethroughTitle ?? "Strikethrough"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M224,128a8,8,0,0,1-8,8H175.93c9.19,7.11,16.07,17.2,16.07,32,0,13.34-7,25.7-19.75,34.79C160.33,211.31,144.61,216,128,216s-32.33-4.69-44.25-13.21C71,193.7,64,181.34,64,168a8,8,0,0,1,16,0c0,17.35,22,32,48,32s48-14.65,48-32c0-14.85-10.54-23.58-38.77-32H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM76.33,104a8,8,0,0,0,7.61-10.49A17.3,17.3,0,0,1,83.11,88c0-18.24,19.3-32,44.89-32,18.84,0,34.16,7.42,41,19.85a8,8,0,0,0,14-7.7C173.33,50.52,152.77,40,128,40,93.29,40,67.11,60.63,67.11,88a33.73,33.73,0,0,0,1.62,10.49A8,8,0,0,0,76.33,104Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "Q":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("quote")}
+            @click=${this.applyFormat("> ", "", "quote")}
+            title=${this.quoteTitle ?? "Quote"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M100,52H40A20,20,0,0,0,20,72v64a20,20,0,0,0,20,20H96v4a28,28,0,0,1-28,28,12,12,0,0,0,0,24,52.06,52.06,0,0,0,52-52V72A20,20,0,0,0,100,52Zm-4,80H44V76H96ZM216,52H156a20,20,0,0,0-20,20v64a20,20,0,0,0,20,20h56v4a28,28,0,0,1-28,28,12,12,0,0,0,0,24,52.06,52.06,0,0,0,52-52V72A20,20,0,0,0,216,52Zm-4,80H160V76h52Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "L":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("link")}
+            @click=${this.applyFormat("[", "](url)", "link")}
+            title=${this.linkTitle ?? "Link"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M117.18,188.74a12,12,0,0,1,0,17l-5.12,5.12A58.26,58.26,0,0,1,70.6,228h0A58.62,58.62,0,0,1,29.14,127.92L63.89,93.17a58.64,58.64,0,0,1,98.56,28.11,12,12,0,1,1-23.37,5.44,34.65,34.65,0,0,0-58.22-16.58L46.11,144.89A34.62,34.62,0,0,0,70.57,204h0a34.41,34.41,0,0,0,24.49-10.14l5.11-5.12A12,12,0,0,1,117.18,188.74ZM226.83,45.17a58.65,58.65,0,0,0-82.93,0l-5.11,5.11a12,12,0,0,0,17,17l5.12-5.12a34.63,34.63,0,1,1,49,49L175.1,145.86A34.39,34.39,0,0,1,150.61,156h0a34.63,34.63,0,0,1-33.69-26.72,12,12,0,0,0-23.38,5.44A58.64,58.64,0,0,0,150.56,180h.05a58.28,58.28,0,0,0,41.47-17.17l34.75-34.75a58.62,58.62,0,0,0,0-82.91Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "OL":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("orderedList")}
+            @click=${this.applyFormat("1. ", "", "orderedList")}
+            title=${this.orderedListTitle ?? "Ordered List"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M228,128a12,12,0,0,1-12,12H116a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM116,76H216a12,12,0,0,0,0-24H116a12,12,0,0,0,0,24ZM216,180H116a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24ZM44,59.31V104a12,12,0,0,0,24,0V40A12,12,0,0,0,50.64,29.27l-16,8a12,12,0,0,0,9.36,22Zm39.73,96.86a27.7,27.7,0,0,0-11.2-18.63A28.89,28.89,0,0,0,32.9,143a27.71,27.71,0,0,0-4.17,7.54,12,12,0,0,0,22.55,8.21,4,4,0,0,1,.58-1,4.78,4.78,0,0,1,6.5-.82,3.82,3.82,0,0,1,1.61,2.6,3.63,3.63,0,0,1-.77,2.77l-.13.17L30.39,200.82A12,12,0,0,0,40,220H72a12,12,0,0,0,0-24H64l14.28-19.11A27.48,27.48,0,0,0,83.73,156.17Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "UL":
+        return u`<li>
+          <button
+            type="button"
+            tabindex="0"
+            class=${this.toolbarBtnClass("unorderedList")}
+            @click=${this.applyFormat("- ", "", "unorderedList")}
+            title=${this.unorderedListTitle ?? "Unordered List"}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path
+                d="M76,64A12,12,0,0,1,88,52H216a12,12,0,0,1,0,24H88A12,12,0,0,1,76,64Zm140,52H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Zm0,64H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24ZM44,112a16,16,0,1,0,16,16A16,16,0,0,0,44,112Zm0-64A16,16,0,1,0,60,64,16,16,0,0,0,44,48Zm0,128a16,16,0,1,0,16,16A16,16,0,0,0,44,176Z"
+              ></path>
+            </svg>
+          </button>
+        </li>`;
+      case "|":
+        return u`<li>
+          <span class="gui-markdown__toolbar-separator">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+              <path d="M140,24V232a12,12,0,0,1-24,0V24a12,12,0,0,1,24,0Z"></path>
+            </svg>
+          </span>
+        </li>`;
+      default:
+        return $;
+    }
+  }
+  toolbarBtnClass(t) {
+    return y({
+      "gui-markdown__toolbar-button": !0,
+      "gui-markdown__toolbar-button--active": !!t && !!this.activeFormats[t]
+    });
+  }
+  detectFormats() {
+    const t = this.querySelector(`textarea[id="${this.uid}"]`);
+    if (!t) return;
+    const { selectionStart: e, value: i } = t, o = i.lastIndexOf(`
+`, e - 1) + 1, s = i.indexOf(`
+`, e), a = i.substring(o, s === -1 ? i.length : s);
+    this.activeFormats = {
+      heading: /^#{1,6}\s/.test(a),
+      bold: this.isInsideInlineFormat(i, e, "**"),
+      italic: this.isInsideInlineFormat(i, e, "_"),
+      strikethrough: this.isInsideInlineFormat(i, e, "~~"),
+      quote: a.startsWith("> "),
+      link: this.isInsideLink(i, e),
+      orderedList: /^\d+\.\s/.test(a),
+      unorderedList: a.startsWith("- ")
+    };
+  }
+  isInsideInlineFormat(t, e, i) {
+    const o = t.lastIndexOf(`
+`, e - 1) + 1, s = t.indexOf(`
+`, e), a = t.substring(o, s === -1 ? t.length : s), d = e - o;
+    let h = 0;
+    for (; h < a.length; ) {
+      const g = a.indexOf(i, h);
+      if (g === -1) break;
+      const p = a.indexOf(i, g + i.length);
+      if (p === -1) break;
+      if (d >= g && d <= p + i.length)
+        return !0;
+      h = p + i.length;
+    }
+    return !1;
+  }
+  isInsideLink(t, e) {
+    const i = t.lastIndexOf(`
+`, e - 1) + 1, o = t.indexOf(`
+`, e), s = t.substring(i, o === -1 ? t.length : o), a = e - i, d = /\[[^\]]*\]\([^)]*\)/g;
+    let h;
+    for (; (h = d.exec(s)) !== null; )
+      if (a >= h.index && a <= h.index + h[0].length)
+        return !0;
+    return !1;
+  }
+  applyFormat(t, e = "", i = "") {
+    return () => {
+      const o = this.querySelector(`textarea[id="${this.uid}"]`);
+      if (o) {
+        if (i && this.activeFormats[i])
+          this.removeFormat(o, t, e, i);
+        else {
+          const { selectionStart: s, selectionEnd: a, value: d } = o, h = d.substring(s, a), g = d.substring(0, s), p = d.substring(a);
+          o.value = `${g}${t}${h}${e}${p}`, o.selectionStart = s + t.length, o.selectionEnd = s + t.length + h.length;
+        }
+        o.focus(), o.dispatchEvent(new Event("input", { bubbles: !0 })), this.detectFormats();
+      }
+    };
+  }
+  removeFormat(t, e, i, o) {
+    const { selectionStart: s, value: a } = t, d = a.lastIndexOf(`
+`, s - 1) + 1, h = a.indexOf(`
+`, s), g = a.substring(d, h === -1 ? a.length : h);
+    if (i)
+      if (o === "link") {
+        const p = s - d, w = /\[([^\]]*)\]\([^)]*\)/g;
+        let c;
+        for (; (c = w.exec(g)) !== null; )
+          if (p >= c.index && p <= c.index + c[0].length) {
+            const v = c[1], m = d + c.index, b = m + c[0].length;
+            t.value = `${a.substring(0, m)}${v}${a.substring(b)}`, t.selectionStart = m, t.selectionEnd = m + v.length;
+            break;
+          }
+      } else {
+        const p = s - d;
+        let w = 0;
+        for (; w < g.length; ) {
+          const c = g.indexOf(e, w);
+          if (c === -1) break;
+          const v = g.indexOf(i, c + e.length);
+          if (v === -1) break;
+          if (p >= c && p <= v + i.length) {
+            const m = g.substring(c + e.length, v), b = d + c, C = d + v + i.length;
+            t.value = `${a.substring(0, b)}${m}${a.substring(C)}`, t.selectionStart = b, t.selectionEnd = b + m.length;
+            break;
+          }
+          w = v + i.length;
+        }
+      }
+    else {
+      let p = e;
+      if (o === "heading") {
+        const m = g.match(/^#{1,6}\s/);
+        m && (p = m[0]);
+      } else if (o === "orderedList") {
+        const m = g.match(/^\d+\.\s/);
+        m && (p = m[0]);
+      }
+      const w = a.substring(0, d), c = g.substring(p.length), v = a.substring(h === -1 ? a.length : h);
+      t.value = `${w}${c}${v}`, t.selectionStart = Math.max(d, s - p.length), t.selectionEnd = t.selectionStart;
+    }
+  }
+  valueChanged(t) {
+    if (t.stopPropagation(), !this.readOnly) {
+      const e = t.target;
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { value: e.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  onBlur() {
+    this.dispatchEvent(
+      new CustomEvent("blur", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+r([
+  l({ type: String })
+], n.prototype, "uid", 2);
+r([
+  l({ type: String })
+], n.prototype, "label", 2);
+r([
+  l({ type: String, attribute: "locale-id" })
+], n.prototype, "localeId", 2);
+r([
+  l({ type: Array })
+], n.prototype, "errors", 2);
+r([
+  l({ type: Boolean })
+], n.prototype, "touched", 2);
+r([
+  l({ type: Boolean })
+], n.prototype, "required", 2);
+r([
+  l({ type: Boolean })
+], n.prototype, "disabled", 2);
+r([
+  l({ type: Boolean, attribute: "readonly" })
+], n.prototype, "readOnly", 2);
+r([
+  l({ type: String })
+], n.prototype, "value", 2);
+r([
+  l({ type: String })
+], n.prototype, "hint", 2);
+r([
+  l({ type: Array })
+], n.prototype, "tools", 2);
+r([
+  l({ type: String })
+], n.prototype, "placeholder", 2);
+r([
+  l({ type: String })
+], n.prototype, "autocomplete", 2);
+r([
+  l({ type: String, attribute: "countermode" })
+], n.prototype, "counterMode", 2);
+r([
+  l({ type: Number, attribute: "minimumheight" })
+], n.prototype, "minimumHeight", 2);
+r([
+  l({ type: Boolean, attribute: "autogrow" })
+], n.prototype, "autoGrow", 2);
+r([
+  l({ type: Boolean, attribute: "defaultopenpreview" })
+], n.prototype, "defaultOpenPreview", 2);
+r([
+  l({ type: Number, attribute: "maxlength" })
+], n.prototype, "maxLength", 2);
+r([
+  l({ type: String })
+], n.prototype, "headingTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "boldTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "italicTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "strikethroughTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "quoteTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "linkTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "orderedListTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "unorderedListTitle", 2);
+r([
+  l({ type: String })
+], n.prototype, "splitViewTitle", 2);
+r([
+  l({ type: Object })
+], n.prototype, "dependencies", 2);
+r([
+  L()
+], n.prototype, "splitViewActive", 2);
+r([
+  L()
+], n.prototype, "activeFormats", 2);
+n = r([
+  A("gui-markdown")
+], n);
+typeof customElements < "u" && !customElements.get("gui-markdown") && customElements.define("gui-markdown", n);
+var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, k = (t, e, i, o) => {
+  for (var s = o > 1 ? void 0 : o ? q(e, i) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (s = (o ? d(e, i, s) : d(s)) || s);
+  return o && s && E(e, i, s), s;
+};
+let f = class extends H {
+  constructor() {
+    super(...arguments), this.adapter = new O(), this.subscriptions = [];
+  }
+  createRenderRoot() {
+    return this;
+  }
+  updated(t) {
+    super.updated(t);
+    const e = this.adapter.templateData.size;
+    e ? this.style.flex = String(e) : this.style.removeProperty("flex");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.classList.add("gui-markdown", "gui-field"), this.adapter.context = this.formContext, this.adapter.init(this.widget), this.subscriptions.push(
+      this.adapter.templateDataChanged$.subscribe(() => this.requestUpdate())
+    );
+  }
+  render() {
+    return super.render(), u`
+      <gui-markdown
+        .uid=${this.widget.uid}
+        .label=${this.adapter.templateData.label}
+        .errors=${this.adapter.templateData.errors}
+        ?touched=${this.adapter.templateData.touched}
+        ?required=${this.adapter.templateData.validator?.required}
+        ?disabled=${this.adapter.templateData.disabled}
+        ?readonly=${this.adapter.templateData.readonly}
+        .value=${this.adapter.templateData.value}
+        .hint=${this.adapter.templateData.hint}
+        .placeholder=${this.adapter.templateData.placeholder}
+        .autocomplete=${this.adapter.templateData.autocomplete}
+        .counterMode=${this.adapter.templateData.counterMode}
+        .minimumHeight=${this.adapter.templateData.minimumHeight}
+        .autoGrow=${this.adapter.templateData.autoGrow}
+        .tools=${this.adapter.templateData.tools}
+        .defaultOpenPreview=${this.adapter.templateData.defaultOpenPreview}
+        .maxLength=${this.adapter.templateData.validator?.maxLength}
+        .dependencies=${this.adapter.templateData.deps}
+        @input=${this.valueChanged}
+        @blur=${() => this.adapter.onBlur()}
+      ></gui-markdown>
+    `;
+  }
+  valueChanged(t) {
+    const e = t.detail.value;
+    this.adapter.valueChanged(e);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
+  }
+};
+k([
+  _({ context: S }),
+  l({ attribute: !1 })
+], f.prototype, "formContext", 2);
+k([
+  F({ context: V })
+], f.prototype, "adapter", 2);
+f = k([
+  A("gui-markdown-input")
+], f);
+export {
+  f as MarkdownElement
+};