@nuraly/runtime 0.1.9 → 0.1.11

package/dist/Form-CsN7UMF-.js

@@ -0,0 +1,339 @@
+import { css, html, nothing } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock, $ as $components, ak as setCurrentComponentIdAction, aM as renderComponent } from './BaseElement-wyA58UxT.js';
+import { ref } from 'lit/directives/ref.js';
+import '@nuralyui/icon';
+import '@nuralyui/label';
+
+const formStyles = css`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .form-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    min-height: 200px;
+    width: 100%;
+    border-radius: 8px;
+    border: 2px dashed #cbd5e1;
+    gap: 12px;
+    cursor: pointer;
+  }
+
+  .form-placeholder nr-icon {
+    --nuraly-icon-size: 48px;
+  }
+`;
+
+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;
+};
+try {
+  await import('@nuralyui/forms');
+} catch (error) {
+  console.warn("[@nuralyui/forms] Package not found or failed to load.");
+}
+let FormBlock = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this._formElement = null;
+    this._registeredFields = /* @__PURE__ */ new Map();
+    this.childrenComponents = [];
+    this._fieldRegisterHandler = this._handleFieldRegister.bind(this);
+    this._fieldUnregisterHandler = this._handleFieldUnregister.bind(this);
+    this._fieldValueChangeHandler = this._handleFieldValueChange.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+    this.addEventListener("nr-field-register", this._fieldRegisterHandler);
+    this.addEventListener("nr-field-unregister", this._fieldUnregisterHandler);
+    this.addEventListener("nr-field-value-change", this._fieldValueChangeHandler);
+  }
+  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) ?? [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("nr-field-register", this._fieldRegisterHandler);
+    this.removeEventListener("nr-field-unregister", this._fieldUnregisterHandler);
+    this.removeEventListener("nr-field-value-change", this._fieldValueChangeHandler);
+    this._registeredFields.clear();
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this._formElement = this.renderRoot.querySelector("nr-form");
+    this.registerCallback("disabled", (value) => {
+      if (this._formElement) {
+        this._formElement.disabled = value;
+      }
+    });
+  }
+  /**
+   * Handle field registration from child input blocks
+   */
+  _handleFieldRegister(event) {
+    event.stopPropagation();
+    const { element, name, blockElement } = event.detail;
+    if (!name || !element) {
+      console.warn("[FormBlock] Field registration missing name or element");
+      return;
+    }
+    this._registeredFields.set(name, { element, blockElement });
+    if (this._formElement?.validationController) {
+      try {
+        this._formElement.validationController.registerField(element);
+      } catch (error) {
+        console.warn("[FormBlock] Failed to register field with validation controller:", error);
+      }
+    }
+  }
+  /**
+   * Handle field unregistration when child input blocks are removed
+   */
+  _handleFieldUnregister(event) {
+    event.stopPropagation();
+    const { name } = event.detail;
+    if (name && this._registeredFields.has(name)) {
+      if (this._formElement?.validationController) {
+        try {
+          this._formElement.validationController.unregisterField(name);
+        } catch (error) {
+          console.warn("[FormBlock] Failed to unregister field:", error);
+        }
+      }
+      this._registeredFields.delete(name);
+    }
+  }
+  /**
+   * Handle field value changes for form data collection
+   */
+  _handleFieldValueChange(event) {
+    const { name, value } = event.detail;
+    if (name && this._registeredFields.has(name)) {
+      const fieldInfo = this._registeredFields.get(name);
+      fieldInfo.value = value;
+    }
+  }
+  /**
+   * Get all form field values
+   */
+  getFieldsValue() {
+    if (this._formElement?.getFieldsValue) {
+      return this._formElement.getFieldsValue();
+    }
+    const values = {};
+    for (const [name, fieldInfo] of this._registeredFields) {
+      values[name] = fieldInfo.element?.value ?? fieldInfo.value;
+    }
+    return values;
+  }
+  /**
+   * Set form field values
+   */
+  setFieldsValue(values) {
+    if (this._formElement?.setFieldsValue) {
+      this._formElement.setFieldsValue(values);
+    }
+  }
+  /**
+   * Validate all form fields
+   */
+  async validate() {
+    if (this._formElement?.validate) {
+      return this._formElement.validate();
+    }
+    return true;
+  }
+  /**
+   * Submit the form programmatically
+   */
+  async submit(customData) {
+    if (this._formElement?.submit) {
+      await this._formElement.submit(customData);
+    }
+  }
+  /**
+   * Reset the form
+   */
+  reset() {
+    if (this._formElement?.reset) {
+      this._formElement.reset();
+    }
+  }
+  /**
+   * Get form state summary
+   */
+  getFormState() {
+    if (this._formElement?.getFormState) {
+      return this._formElement.getFormState();
+    }
+    return {
+      isValid: true,
+      isSubmitting: false,
+      hasErrors: false,
+      errorCount: 0,
+      fieldCount: this._registeredFields.size
+    };
+  }
+  /**
+   * Render placeholder when form is empty in editor mode
+   */
+  renderPlaceholder() {
+    return html`
+      <div
+        class="form-placeholder"
+        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+      >
+        <nr-icon name="file-text"></nr-icon>
+        <nr-label>Add form fields to this form</nr-label>
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+  /**
+   * Render children components
+   */
+  renderChildren() {
+    return renderComponent(
+      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
+      this.item,
+      this.isViewMode,
+      { ...this.component, uniqueUUID: this.uniqueUUID }
+    );
+  }
+  renderComponent() {
+    const inputStyles = this.getStyles();
+    const hasChildren = this.childrenComponents.length > 0;
+    if (this.isViewMode) {
+      return html`
+        <nr-form
+          ${ref(this.inputRef)}
+          class="${`drop-${this.component.uuid}`}"
+          style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(";")}
+          .disabled=${this.inputHandlersValue?.disabled || false}
+          .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
+          .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
+          .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
+          .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
+          .action=${this.inputHandlersValue?.action ?? nothing}
+          .method=${this.inputHandlersValue?.method ?? "POST"}
+          @nr-form-submit-success=${(e) => {
+        this.executeEvent("onSubmitSuccess", e, {
+          formData: e.detail?.formData,
+          values: this.getFieldsValue()
+        });
+      }}
+          @nr-form-submit-error=${(e) => {
+        this.executeEvent("onSubmitError", e, {
+          error: e.detail?.error
+        });
+      }}
+          @nr-form-validation-changed=${(e) => {
+        this.executeEvent("onValidationChange", e, {
+          validationResult: e.detail?.validationResult
+        });
+      }}
+          @nr-form-field-changed=${(e) => {
+        this.executeEvent("onFieldChange", e, {
+          field: e.detail?.field
+        });
+      }}
+          @nr-form-reset=${(e) => {
+        this.executeEvent("onReset", e, {});
+      }}
+        >
+          ${hasChildren ? this.renderChildren() : nothing}
+        </nr-form>
+      `;
+    }
+    return html`
+      <nr-form
+        ${ref(this.inputRef)}
+        class="${`drop-${this.component.uuid}`}"
+        style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(";")}
+        .disabled=${this.inputHandlersValue?.disabled || false}
+        .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
+        .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
+        .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
+        .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
+        .action=${this.inputHandlersValue?.action ?? nothing}
+        .method=${this.inputHandlersValue?.method ?? "POST"}
+        @nr-form-submit-success=${(e) => {
+      this.executeEvent("onSubmitSuccess", e, {
+        formData: e.detail?.formData,
+        values: this.getFieldsValue()
+      });
+    }}
+        @nr-form-submit-error=${(e) => {
+      this.executeEvent("onSubmitError", e, {
+        error: e.detail?.error
+      });
+    }}
+        @nr-form-validation-changed=${(e) => {
+      this.executeEvent("onValidationChange", e, {
+        validationResult: e.detail?.validationResult
+      });
+    }}
+        @nr-form-field-changed=${(e) => {
+      this.executeEvent("onFieldChange", e, {
+        field: e.detail?.field
+      });
+    }}
+        @nr-form-reset=${(e) => {
+      this.executeEvent("onReset", e, {});
+    }}
+      >
+        ${hasChildren ? this.renderChildren() : this.renderPlaceholder()}
+      </nr-form>
+    `;
+  }
+};
+FormBlock.styles = [formStyles];
+__decorateClass([
+  property({ type: Object })
+], FormBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], FormBlock.prototype, "item", 2);
+__decorateClass([
+  state()
+], FormBlock.prototype, "_formElement", 2);
+__decorateClass([
+  state()
+], FormBlock.prototype, "_registeredFields", 2);
+__decorateClass([
+  state()
+], FormBlock.prototype, "childrenComponents", 2);
+FormBlock = __decorateClass([
+  customElement("form-block")
+], FormBlock);
+
+export { FormBlock };

package/dist/Icon-B_2ZWGd0.js

@@ -0,0 +1,64 @@
+import { B as u, n as h, A as l, o as d, b as y, c as p, t as b } from "./micro-app-entry-BgDXbkmh.js";
+var $ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? v(e, c) : e, a = t.length - 1, s; a >= 0; a--)
+    (s = t[a]) && (i = (n ? s(e, c, i) : s(i)) || i);
+  return n && i && $(e, c, i), i;
+};
+try {
+  await import("@nuralyui/icon");
+} catch {
+  console.warn("[@nuralyui/icon] Package not found or failed to load.");
+}
+let o = class extends u {
+  constructor() {
+    super(), this.registerCallback("icon", () => {
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  renderComponent() {
+    const t = this.getStyles();
+    return y`
+      <nr-icon
+      ${h(this.inputRef)}
+        .name=${this.inputHandlersValue.icon ?? "smile"}
+        .type=${this.inputHandlersValue.type || "solid"}
+        .alt=${this.inputHandlersValue.alt || ""}
+        .size=${this.inputHandlersValue.size || l}
+        .color=${this.inputHandlersValue.color || l}
+        .width=${t?.width || l}
+        .height=${t?.height || l}
+        .clickable=${this.inputHandlersValue.clickable || !1}
+        .disabled=${this.inputHandlersValue.state === "disabled"}
+        @click=${(e) => {
+      this.executeEvent("onClick", e);
+    }}
+        @icon-click=${(e) => {
+      this.executeEvent("onIconClick", e);
+    }}
+        @icon-keyboard-activation=${(e) => {
+      this.executeEvent("onIconKeyboardActivation", e);
+    }}
+        style=${d({
+      display: "block",
+      ...this.getStyles(),
+      "--nuraly-icon-width": t?.width,
+      "--nuraly-icon-height": t?.height
+    })}>
+      </nr-icon>
+    `;
+  }
+};
+r([
+  p({ type: Object })
+], o.prototype, "component", 2);
+r([
+  p({ type: Object })
+], o.prototype, "item", 2);
+o = r([
+  b("icon-block")
+], o);
+export {
+  o as IconBlock
+};

package/dist/Icon-CkLIObME.js

@@ -0,0 +1,74 @@
+import { nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { ref } from 'lit/directives/ref.js';
+
+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;
+};
+try {
+  await import('@nuralyui/icon');
+} catch (error) {
+  console.warn("[@nuralyui/icon] Package not found or failed to load.");
+}
+let IconBlock = class extends BaseElementBlock {
+  constructor() {
+    super();
+    this.registerCallback("icon", () => {
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  renderComponent() {
+    const iconStyles = this.getStyles();
+    return html`
+      <nr-icon
+      ${ref(this.inputRef)}
+        .name=${this.inputHandlersValue.icon ?? "smile"}
+        .type=${this.inputHandlersValue.type || "solid"}
+        .alt=${this.inputHandlersValue.alt || ""}
+        .size=${this.inputHandlersValue.size || nothing}
+        .color=${this.inputHandlersValue.color || nothing}
+        .width=${iconStyles?.width || nothing}
+        .height=${iconStyles?.height || nothing}
+        .clickable=${this.inputHandlersValue.clickable || false}
+        .disabled=${this.inputHandlersValue.state === "disabled"}
+        @click=${(e) => {
+      this.executeEvent("onClick", e);
+    }}
+        @icon-click=${(e) => {
+      this.executeEvent("onIconClick", e);
+    }}
+        @icon-keyboard-activation=${(e) => {
+      this.executeEvent("onIconKeyboardActivation", e);
+    }}
+        style=${styleMap({
+      display: "block",
+      ...this.getStyles(),
+      "--nuraly-icon-width": iconStyles?.width,
+      "--nuraly-icon-height": iconStyles?.height
+    })}>
+      </nr-icon>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Object })
+], IconBlock.prototype, "component", 2);
+__decorateClass([
+  property({ type: Object })
+], IconBlock.prototype, "item", 2);
+IconBlock = __decorateClass([
+  customElement("icon-block")
+], IconBlock);
+
+export { IconBlock };

package/dist/Image-CcswllGj.js

@@ -0,0 +1,93 @@
+import { B as u, n, o as c, b as d, A as h, i as m, c as g, t as b } from "./micro-app-entry-BgDXbkmh.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, r, i, a) => {
+  for (var e = a > 1 ? void 0 : a ? y(r, i) : r, l = t.length - 1, s; l >= 0; l--)
+    (s = t[l]) && (e = (a ? s(r, i, e) : s(e)) || e);
+  return a && e && f(r, i, e), e;
+};
+try {
+  await import("@nuralyui/image");
+} catch {
+  console.warn("[@nuralyui/image] Package not found or failed to load.");
+}
+let o = class extends u {
+  connectedCallback() {
+    super.connectedCallback(), this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (t) => {
+      this.isDarkMode = t.matches, this.requestUpdate();
+    });
+  }
+  renderComponent() {
+    const t = this.getStyles(), r = this.getStyles() || {}, i = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([e, l]) => l)
+    ) : {}, a = this.isDarkMode ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src : this.inputHandlersValue?.src;
+    return a ? d`
+      <nr-image
+        ${n(this.inputRef)}
+        style=${c({
+      ...this.getStyles(),
+      display: "block",
+      "--nuraly-image-local-border-top-left-radius": t?.["border-top-left-radius"] ?? "",
+      "--nuraly-image-local-border-top-right-radius": t?.["border-top-right-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-left-radius": t?.["border-bottom-left-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-right-radius": t?.["border-bottom-right-radius"] ?? ""
+    })}
+        .src=${a}
+        .fallback=${this.inputHandlersValue?.fallback ?? h}
+        .previewable=${this.inputHandlersValue?.previewable ?? !1}
+        .fit=${this.inputHandlersValue?.fit ?? h}
+        .block=${this.inputHandlersValue?.block ?? !1}
+        .width=${i?.width || r?.width}
+        .height=${i?.height || r?.height}
+        .alt=${this.inputHandlersValue?.alt ?? "image"}
+        @click=${(e) => this.executeEvent("onClick", e)}
+        @nr-image-error=${(e) => this.executeEvent("onError", e)}
+        @nr-image-load=${(e) => this.executeEvent("onLoad", e)}
+        @nr-image-preview-open=${(e) => this.executeEvent("onPreviewOpen", e)}
+        @nr-image-preview-close=${(e) => this.executeEvent("onPreviewClose", e)}
+      >
+      </nr-image>
+    ` : d`
+        <div
+          ${n(this.inputRef)}
+          class="image-placeholder"
+          style=${c({
+      width: i?.width || r?.width || "100%",
+      height: i?.height || r?.height || "200px"
+    })}
+          @click=${(e) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="image"></nr-icon>
+          <nr-label>No image source</nr-label>
+        </div>
+      `;
+  }
+};
+o.styles = [m`
+    :host {
+      display: block;
+    }
+    .image-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #64748b;
+      min-height: 200px;
+      min-width: 200px;
+      border-radius: 8px;
+      border: 2px dashed #cbd5e1;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+    .image-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+  `];
+p([
+  g({ type: Object })
+], o.prototype, "component", 2);
+o = p([
+  b("image-block")
+], o);
+export {
+  o as ImageBlock
+};

package/dist/Image-CihbGdKt.js

@@ -0,0 +1,111 @@
+import { html, nothing, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { ae as BaseElementBlock } from './BaseElement-wyA58UxT.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ref } from 'lit/directives/ref.js';
+
+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;
+};
+try {
+  await import('@nuralyui/image');
+} catch (error) {
+  console.warn("[@nuralyui/image] Package not found or failed to load.");
+}
+let ImageBlock = class extends BaseElementBlock {
+  connectedCallback() {
+    super.connectedCallback();
+    this.isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+      this.isDarkMode = event.matches;
+      this.requestUpdate();
+    });
+  }
+  renderComponent() {
+    const fallbackStyles = this.getStyles();
+    const imageStyles = this.getStyles() || {};
+    const imageStyleHandlers = this.component?.styleHandlers ? Object.fromEntries(
+      Object.entries(this.component?.styleHandlers).filter(([key, value]) => value)
+    ) : {};
+    const imageSrc = this.isDarkMode ? this.inputHandlersValue?.darkSrc ?? this.inputHandlersValue?.src : this.inputHandlersValue?.src;
+    if (!imageSrc) {
+      return html`
+        <div
+          ${ref(this.inputRef)}
+          class="image-placeholder"
+          style=${styleMap({
+        width: imageStyleHandlers?.width || imageStyles?.width || "100%",
+        height: imageStyleHandlers?.height || imageStyles?.height || "200px"
+      })}
+          @click=${(e) => this.executeEvent("onClick", e)}
+        >
+          <nr-icon name="image"></nr-icon>
+          <nr-label>No image source</nr-label>
+        </div>
+      `;
+    }
+    return html`
+      <nr-image
+        ${ref(this.inputRef)}
+        style=${styleMap({
+      ...this.getStyles(),
+      "display": "block",
+      "--nuraly-image-local-border-top-left-radius": fallbackStyles?.["border-top-left-radius"] ?? "",
+      "--nuraly-image-local-border-top-right-radius": fallbackStyles?.["border-top-right-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-left-radius": fallbackStyles?.["border-bottom-left-radius"] ?? "",
+      "--nuraly-image-local-border-bottom-right-radius": fallbackStyles?.["border-bottom-right-radius"] ?? ""
+    })}
+        .src=${imageSrc}
+        .fallback=${this.inputHandlersValue?.fallback ?? nothing}
+        .previewable=${this.inputHandlersValue?.previewable ?? false}
+        .fit=${this.inputHandlersValue?.fit ?? nothing}
+        .block=${this.inputHandlersValue?.block ?? false}
+        .width=${imageStyleHandlers?.width || imageStyles?.width}
+        .height=${imageStyleHandlers?.height || imageStyles?.height}
+        .alt=${this.inputHandlersValue?.alt ?? "image"}
+        @click=${(e) => this.executeEvent("onClick", e)}
+        @nr-image-error=${(e) => this.executeEvent("onError", e)}
+        @nr-image-load=${(e) => this.executeEvent("onLoad", e)}
+        @nr-image-preview-open=${(e) => this.executeEvent("onPreviewOpen", e)}
+        @nr-image-preview-close=${(e) => this.executeEvent("onPreviewClose", e)}
+      >
+      </nr-image>
+    `;
+  }
+};
+ImageBlock.styles = [css`
+    :host {
+      display: block;
+    }
+    .image-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #64748b;
+      min-height: 200px;
+      min-width: 200px;
+      border-radius: 8px;
+      border: 2px dashed #cbd5e1;
+      gap: 12px;
+      box-sizing: border-box;
+    }
+    .image-placeholder nr-icon {
+      --nuraly-icon-size: 48px;
+    }
+  `];
+__decorateClass([
+  property({ type: Object })
+], ImageBlock.prototype, "component", 2);
+ImageBlock = __decorateClass([
+  customElement("image-block")
+], ImageBlock);
+
+export { ImageBlock };