@nuraly/runtime 0.1.8 → 0.1.10

package/dist/RichText-DV46U7fI.js

@@ -0,0 +1,449 @@
+import { i as b, c as p, d, q as z, b as h, t as f, u as w, w as _, A as g, x as y, E as H, B as x, h as M, n as V, o as L } from "./micro-app-entry-DiNqE6xi.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, u = (o, e, i, a) => {
+  for (var n = a > 1 ? void 0 : a ? $(e, i) : e, t = o.length - 1, r; t >= 0; t--)
+    (r = o[t]) && (n = (a ? r(e, i, n) : r(n)) || n);
+  return a && n && k(e, i, n), n;
+};
+const C = {
+  format_clear: '<svg viewBox="0 0 24 24"><path d="M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21 18 19.73 3.55 5.27 3.27 5zM6 5v.18L8.82 8h2.4l-.72 1.68 2.1 2.1L14.21 8H20V5H6z"></path></svg>',
+  format_bold: '<svg viewBox="0 0 24 24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path></svg>',
+  format_italic: '<svg viewBox="0 0 24 24"><path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path></svg>',
+  format_underlined: '<svg viewBox="0 0 24 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path></svg>',
+  format_align_left: '<svg viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"></path></svg>',
+  format_align_center: '<svg viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"></path></svg>',
+  format_align_right: '<svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"></path></svg>',
+  format_list_numbered: '<svg viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"></path></svg>',
+  format_list_bulleted: '<svg viewBox="0 0 24 24"><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"></path></svg>',
+  format_quote: '<svg viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"></path></svg>',
+  format_indent_decrease: '<svg viewBox="0 0 24 24"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>',
+  format_indent_increase: '<svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"></path></svg>',
+  link_off: '<svg viewBox="0 0 24 24"><path d="M17 7h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.43-.98 2.63-2.31 2.98l1.46 1.46C20.88 15.61 22 13.95 22 12c0-2.76-2.24-5-5-5zm-1 4h-2.19l2 2H16zM2 4.27l3.11 3.11C3.29 8.12 2 9.91 2 12c0 2.76 2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1 0-1.59 1.21-2.9 2.76-3.07L8.73 11H8v2h2.73L13 15.27V17h1.73l4.01 4.01 1.41-1.41L3.41 2.86 2 4.27z"></path></svg>',
+  add_link: '<svg viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></svg>',
+  format_color_text: '<svg viewBox="0 0 24 24"><path d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"></path></svg>',
+  border_color: '<svg viewBox="0 0 24 24"><path d="M17.75 7L14 3.25l-10 10V17h3.75l10-10zm2.96-2.96c.39-.39.39-1.02 0-1.41L18.37.29c-.39-.39-1.02-.39-1.41 0L15 2.25 18.75 6l1.96-1.96z"></path></svg>',
+  title: '<svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4z"></path></svg>',
+  text_format: '<svg viewBox="0 0 24 24"><path d="M5 17v2h14v-2H5zm4.5-4.2h5l.9 2.2h2.1L12.75 4h-1.5L6.5 15h2.1l.9-2.2zM12 5.98L13.87 11h-3.74L12 5.98z"></path></svg>',
+  format_size: '<svg viewBox="0 0 24 24"><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"></path></svg>',
+  undo: '<svg viewBox="0 0 24 24"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path></svg>',
+  redo: '<svg viewBox="0 0 24 24"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path></svg>',
+  content_cut: '<svg viewBox="0 0 24 24"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"></path></svg>',
+  content_copy: '<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>',
+  content_paste: '<svg viewBox="0 0 24 24"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path></svg>'
+};
+let v = class extends z {
+  constructor() {
+    super(...arguments), this.content = "", this.root = null;
+  }
+  render() {
+    return h`<main>
+    
+      <div id="editor-actions">
+        <div id="toolbar">
+          ${B(this.shadowRoot, this.getSelection(), (o, e) => {
+      document.execCommand(o, !1, e);
+    })}
+            <input id="bg" type="color" style="display: none" />
+            <input id="fg" type="color" style="display: none" />
+        </div>
+      </div>
+      <div id="editor" @input=${(o) => {
+      this.dispatchEvent(new CustomEvent("content-change", {
+        detail: {
+          value: this.root?.innerHTML
+        }
+      }));
+    }}>${this.root}</div>
+    </main> `;
+  }
+  async firstUpdated() {
+    this.parentElement?.querySelector("rich-text-editor template"), this.reset();
+  }
+  reset() {
+    const e = new DOMParser().parseFromString(this.content, "text/html");
+    document.execCommand("defaultParagraphSeparator", !1, "br"), document.addEventListener("selectionchange", () => {
+      this.requestUpdate();
+    });
+    const i = e.querySelector("body");
+    i.setAttribute("contenteditable", "true"), this.root = i, this.root.style.height = "100%";
+  }
+  getSelection() {
+    return this.shadowRoot?.getSelection ? this.shadowRoot?.getSelection() : null;
+  }
+};
+v.styles = b`
+    :host {
+      /* --editor-width: 600px; */
+      /* --editor-height: 600px; */
+      /* --editor-background: #f1f1f1; */
+      --editor-toolbar-height: 33px;
+      --editor-toolbar-background: #454545;
+      --editor-toolbar-on-background: white;
+      /* --editor-toolbar-on-active-background: #a4a4a4; */
+    }
+    main {
+  width: var(--editor-width);
+  height: var(--editor-height);
+  display: grid;
+  grid-template-areas:
+    "toolbar toolbar"
+    "editor editor";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto auto;
+}
+    #editor-actions {
+      grid-area: toolbar;
+width: var(--editor-width);
+/* height: var(--editor-toolbar-height); */
+background-color: var(--editor-toolbar-background);
+color: var(--editor-toolbar-on-background);
+overscroll-behavior: contain;
+/* overflow-y: auto; */
+-ms-overflow-style: none;
+scrollbar-width: none;
+overflow:auto;
+
+/* Add these lines for vertical alignment */
+display: flex;
+align-items: center; /* vertically center items */
+    }
+    #editor-actions::-webkit-scrollbar {
+      display: none;
+    }
+    #editor {
+      width: var(--editor-width);
+      grid-area: editor;
+      background-color: var(--editor-background);
+      border: 1px solid var(--editor-toolbar-background);
+    }
+    #toolbar {
+      width: 1080px;
+      height: var(--editor-toolbar-height);
+    }
+    [contenteditable] {
+      outline: 0px solid transparent;
+    }
+    .icon-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      padding: 0;
+      color: var(--editor-toolbar-on-background);
+    }
+    .icon-button svg {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+    .icon-button.active {
+      color: var(--editor-toolbar-on-active-background);
+    }
+    select {
+      margin-top: -5px;
+    height: calc(var(--editor-toolbar-height) - 10px);
+    vertical-align: middle;
+    }
+    input[type="color"] {
+      height: calc(var(--editor-toolbar-height) - 15px);
+      -webkit-appearance: none;
+      border: none;
+      width: 22px;
+    }
+    input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    input[type="color"]::-webkit-color-swatch {
+      border: none;
+    }
+  `;
+u([
+  p()
+], v.prototype, "content", 2);
+u([
+  d()
+], v.prototype, "root", 2);
+v = u([
+  f("rich-text-editor-block")
+], v);
+function B(o, e, i) {
+  const a = [];
+  if (e?.type === "Range") {
+    let t = e?.baseNode;
+    if (t) {
+      const r = () => {
+        const l = t?.tagName?.toLowerCase()?.trim();
+        l && a.push(l);
+      };
+      for (; t != null; )
+        r(), t = t?.parentNode;
+    }
+  }
+  const n = [
+    {
+      icon: "format_clear",
+      command: "removeFormat"
+    },
+    {
+      icon: "format_bold",
+      command: "bold",
+      active: a.includes("b")
+    },
+    {
+      icon: "format_italic",
+      command: "italic",
+      active: a.includes("i")
+    },
+    {
+      icon: "format_underlined",
+      command: "underline",
+      active: a.includes("u")
+    },
+    {
+      icon: "format_align_left",
+      command: "justifyleft"
+    },
+    {
+      icon: "format_align_center",
+      command: "justifycenter"
+    },
+    {
+      icon: "format_align_right",
+      command: "justifyright"
+    },
+    {
+      icon: "format_list_numbered",
+      command: "insertorderedlist",
+      active: a.includes("ol")
+    },
+    {
+      icon: "format_list_bulleted",
+      command: "insertunorderedlist",
+      active: a.includes("ul")
+    },
+    {
+      icon: "format_quote",
+      command: "formatblock",
+      command_value: "blockquote"
+    },
+    {
+      icon: "format_indent_decrease",
+      command: "outdent"
+    },
+    {
+      icon: "format_indent_increase",
+      command: "indent"
+    },
+    a.includes("a") ? { icon: "link_off", command: "unlink" } : {
+      icon: "add_link",
+      command: () => {
+        const t = prompt("Write the URL here", "http://");
+        t && t != "" && t != "http://" && i("createlink", t);
+      }
+    },
+    {
+      icon: "format_color_text",
+      command: () => {
+        const t = o.querySelector("#fg");
+        t.addEventListener("input", (r) => {
+          const l = r.target.value;
+          i("forecolor", l);
+        }), t.click();
+      },
+      type: "color"
+    },
+    {
+      icon: "border_color",
+      command: () => {
+        const t = o.querySelector("#bg");
+        t.addEventListener("input", (r) => {
+          const l = r.target.value;
+          i("backcolor", l);
+        }), t.click();
+      },
+      type: "color"
+    },
+    {
+      icon: "format_size",
+      command: "fontsize",
+      values: [
+        { name: "Font Size", value: "--" },
+        { name: "Very Small", value: "1" },
+        { name: "Small", value: "2" },
+        { name: "Normal", value: "3" },
+        { name: "Medium Large", value: "4" },
+        { name: "Large", value: "5" },
+        { name: "Very Large", value: "6" },
+        { name: "Maximum", value: "7" }
+      ]
+    },
+    {
+      icon: "undo",
+      command: "undo"
+    },
+    {
+      icon: "redo",
+      command: "redo"
+    },
+    {
+      icon: "content_cut",
+      command: "cut"
+    },
+    {
+      icon: "content_copy",
+      command: "copy"
+    },
+    {
+      icon: "content_paste",
+      command: "paste"
+    }
+  ];
+  return h`
+    ${n.map((t) => t.values ? h`
+          <select
+            id="${t.icon}"
+            @change=${(r) => {
+    const l = r.target.value;
+    l === "--" ? i("removeFormat", void 0) : typeof t.command == "string" && i(t.command, l);
+  }}
+          >
+            ${t.values.map(
+    (r) => h`<option value=${r.value}>${r.name}</option>`
+  )}
+          </select>
+        ` : h`
+          <button
+            class="icon-button ${t.active ? "active" : ""}"
+            @click=${() => {
+    typeof t.command == "string" ? i(t.command, t.command_value) : t.command();
+  }}
+            .innerHTML=${C[t.icon]}
+          ></button>
+        `)}
+  `;
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class m extends _ {
+  constructor(e) {
+    if (super(e), this.it = g, e.type !== y.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(e) {
+    if (e === g || e == null) return this._t = void 0, this.it = e;
+    if (e === H) return e;
+    if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (e === this.it) return this._t;
+    this.it = e;
+    const i = [e];
+    return i.raw = i, this._t = { _$litType$: this.constructor.resultType, strings: i, values: [] };
+  }
+}
+m.directiveName = "unsafeHTML", m.resultType = 1;
+const S = w(m);
+var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, s = (o, e, i, a) => {
+  for (var n = a > 1 ? void 0 : a ? O(e, i) : e, t = o.length - 1, r; t >= 0; t--)
+    (r = o[t]) && (n = (a ? r(e, i, n) : r(n)) || n);
+  return a && n && E(e, i, n), n;
+};
+let c = class extends x {
+  constructor() {
+    super(), this.isViewMode = !1, this.dragOverSituation = !1, this.wrapperStyle = {}, this.editing = !1, this.handleKeyDown = (o) => {
+      o.key === "Escape" && this.editing && (this.editing = !1, o.preventDefault(), o.stopPropagation());
+    }, this.handleDoubleClick = () => {
+      this.editing = !0;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown);
+  }
+  handleCodeEditorChange(o) {
+    if (!this.isViewMode) {
+      const e = JSON.stringify(o);
+      M(
+        this.component,
+        /* js */
+        `
+                  try {
+                      const selectedComponent = Utils.first($selectedComponents);
+                      updateInput(selectedComponent, "value", "string", ${e}, null);
+                  } catch (error) {
+                      console.error(error);
+                  }
+                `,
+        {}
+      );
+    }
+  }
+  renderComponent() {
+    return h`
+    
+      <div ${V(this.inputRef)}
+     class="${`drop-${this.component.uuid}`}"
+      style=${L({
+      width: this.editing ? "auto" : this.getStyles().width,
+      display: "block"
+    })}
+      >
+        ${this.editing && !this.isViewMode ? h`
+              <rich-text-editor-block
+              @content-change=${(o) => {
+      this.handleCodeEditorChange(o.detail.value);
+    }}
+                .content=${this.inputHandlersValue.value}
+              ></rich-text-editor-block>
+            ` : h`
+              <p @dblclick=${this.handleDoubleClick}>
+                ${S(this.inputHandlersValue.value)}
+              </p>
+            `}
+      </div>
+    `;
+  }
+  firstUpdated(o) {
+  }
+};
+s([
+  p({ type: Object })
+], c.prototype, "component", 2);
+s([
+  p({ type: Object })
+], c.prototype, "item", 2);
+s([
+  p({ type: Object })
+], c.prototype, "draggingComponentInfo", 2);
+s([
+  p({ type: Boolean })
+], c.prototype, "isViewMode", 2);
+s([
+  d()
+], c.prototype, "dragOverSituation", 2);
+s([
+  d()
+], c.prototype, "selectedComponent", 2);
+s([
+  d()
+], c.prototype, "hoveredComponent", 2);
+s([
+  d()
+], c.prototype, "wrapperStyle", 2);
+s([
+  d()
+], c.prototype, "components", 2);
+s([
+  d()
+], c.prototype, "editing", 2);
+c = s([
+  f("rich-text-block")
+], c);
+export {
+  c as RichTextContainer
+};

package/dist/Row-Bb95f5DI.js

@@ -0,0 +1,229 @@
+import { ae as BaseElementBlock, $ as $components, aM as renderComponent, ak as setCurrentComponentIdAction, ap as setContextMenuEvent } from './BaseElement-pS6m_x6Q.js';
+import { css, nothing, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import '@nuralyui/grid';
+
+const styles = css`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .grid-row {
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .grid-row.no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  /* Alignment */
+  .grid-row.align-top {
+    align-items: flex-start;
+  }
+
+  .grid-row.align-middle {
+    align-items: center;
+  }
+
+  .grid-row.align-bottom {
+    align-items: flex-end;
+  }
+
+  .grid-row.align-stretch {
+    align-items: stretch;
+  }
+
+  /* Justify */
+  .grid-row.justify-start {
+    justify-content: flex-start;
+  }
+
+  .grid-row.justify-end {
+    justify-content: flex-end;
+  }
+
+  .grid-row.justify-center {
+    justify-content: center;
+  }
+
+  .grid-row.justify-space-around {
+    justify-content: space-around;
+  }
+
+  .grid-row.justify-space-between {
+    justify-content: space-between;
+  }
+
+  .grid-row.justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  .empty-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100px;
+    border: 2px dashed #ccc;
+    color: #999;
+    font-size: 14px;
+    position: relative;
+  }
+`;
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const ROW_INPUT_PROPS = ["gutter", "align", "justify", "wrap"];
+let GridRow = class extends BaseElementBlock {
+  constructor() {
+    super(...arguments);
+    this.isViewMode = false;
+    this.childrenComponents = [];
+    this.containerRef = createRef();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+    ROW_INPUT_PROPS.forEach((prop) => this.registerCallback(prop, () => this.requestUpdate()));
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+  updateChildrenComponents() {
+    this.childrenComponents = this.component?.childrenIds?.map((id) => {
+      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
+    }).filter(Boolean) ?? [];
+  }
+  /**
+   * Parse gutter value - supports number, [h, v] array, or responsive object
+   */
+  parseGutter(gutter) {
+    if (!gutter) return 0;
+    if (typeof gutter === "number" || Array.isArray(gutter)) return gutter;
+    if (typeof gutter === "string" && !isNaN(Number(gutter))) return Number(gutter);
+    return gutter;
+  }
+  /**
+   * Get all row properties from input handlers
+   */
+  getRowProps() {
+    const input = this.inputHandlersValue;
+    return {
+      gutter: this.parseGutter(input?.gutter),
+      align: input?.align || "",
+      justify: input?.justify || "",
+      wrap: input?.wrap !== false
+    };
+  }
+  /**
+   * Render children components
+   */
+  renderChildren() {
+    return this.childrenComponents.length ? renderComponent(
+      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
+      this.item,
+      this.isViewMode,
+      { ...this.component, uniqueUUID: this.uniqueUUID }
+    ) : nothing;
+  }
+  /**
+   * Render empty state placeholder for editor mode
+   */
+  renderEmptyState() {
+    return html`
+      <div
+        class="empty-message"
+        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+      >
+        Add Grid Columns (nr-col) to this row
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+  renderComponent() {
+    const props = this.getRowProps();
+    if (this.isViewMode) {
+      return html`
+        <nr-row
+          ${ref(this.inputRef)}
+          data-component-uuid=${this.component?.uuid}
+          data-component-name=${this.component?.name}
+          style=${styleMap(this.getStyles())}
+          .gutter=${props.gutter}
+          align=${props.align || nothing}
+          justify=${props.justify || nothing}
+          ?wrap=${props.wrap}
+        >
+          ${this.renderChildren()}
+        </nr-row>
+      `;
+    }
+    return html`
+      <nr-row
+        ${ref(this.inputRef)}
+        ${ref(this.containerRef)}
+        data-component-uuid=${this.component?.uuid}
+        data-component-name=${this.component?.name}
+        @click="${(e) => {
+      setContextMenuEvent(null);
+      this.executeEvent("onClick", e);
+    }}"
+        style=${styleMap({
+      ...this.getStyles(),
+      "min-height": this.childrenComponents.length ? "auto" : "100px"
+    })}
+        .gutter=${props.gutter}
+        align=${props.align || nothing}
+        justify=${props.justify || nothing}
+        ?wrap=${props.wrap}
+      >
+        ${this.childrenComponents.length ? this.renderChildren() : this.renderEmptyState()}
+      </nr-row>
+    `;
+  }
+};
+GridRow.styles = styles;
+__decorateClass([
+  property({ type: Object })
+], GridRow.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], GridRow.prototype, "item", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GridRow.prototype, "isViewMode", 2);
+__decorateClass([
+  state()
+], GridRow.prototype, "childrenComponents", 2);
+__decorateClass([
+  state()
+], GridRow.prototype, "containerRef", 2);
+GridRow = __decorateClass([
+  customElement("grid-row-block")
+], GridRow);
+
+export { GridRow };