easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-empty.js

@@ -0,0 +1,93 @@
+var u = Object.defineProperty;
+var d = (t) => {
+  throw TypeError(t);
+};
+var g = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var c = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || d("Cannot " + e);
+var a = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), p = (t, s, e, m) => (h(t, s, "write to private field"), m ? m.call(t, e) : s.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as _ } from "../css/ea-empty.style.js";
+const y = `
+<svg viewBox="25 30 50 50" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" class="front" part="default-image-front" />
+    <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" class="border" part="default-image-border" />
+</svg>
+`;
+var l, i, o, n;
+class f extends v {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, l);
+    /** @type {HTMLElement} */
+    r(this, i);
+    /** @type {HTMLElement} */
+    r(this, o);
+    /** @type {HTMLElement} */
+    r(this, n);
+    c(this, "state", this.properties({
+      image: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          e ? a(this, i).innerHTML = this.html(`
+            <img class="ea-empty__image" src="${e}" alt="empty image" part="image" />
+          `) : a(this, i).innerHTML = this.html(`
+            <section class="ea-empty__default">${y}</section>
+          `);
+        }
+      },
+      "image-size": {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("--ea-empty-size", e))
+            return console.warn(
+              `[ea-empty] The size value ${e} is not supported.`
+            );
+          this.style.setProperty("--ea-empty-size", e);
+        }
+      },
+      description: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          e ? a(this, o).textContent = e : a(this, o).innerText = "No Data";
+        }
+      }
+    }));
+    this.stylesheet = _, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "image", "image-size", "description"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = this.html(`
+      <div class='ea-empty' part='container'>
+        <div class="ea-empty__placeholder" part="placeholder">
+            <slot name="image">
+              <section class="ea-empty__default">${y}</section>
+            </slot>
+        </div>
+        <div class="ea-empty__description" part="description">
+            <slot name="description">No Data</slot>
+        </div>
+        <div class="ea-empty__bottom" part="bottom">
+            <slot></slot>
+        </div>
+      </div>
+    `), p(this, l, this.shadowRoot.querySelector(".ea-empty")), p(this, i, this.shadowRoot.querySelector(
+      ".ea-empty__placeholder slot[name='image']"
+    )), p(this, o, this.shadowRoot.querySelector(
+      ".ea-empty__description slot[name='description']"
+    )), p(this, n, this.shadowRoot.querySelector(".ea-empty__bottom"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+l = new WeakMap(), i = new WeakMap(), o = new WeakMap(), n = new WeakMap();
+window.customElements.get("ea-empty") || window.customElements.define("ea-empty", f);
+export {
+  f as EaEmpty
+};