@everymatrix/cashier-page-nd 1.69.80

package/stencil/ui-skeleton-ae35c6f2-IN_dPA5_.js

@@ -0,0 +1,155 @@
+import { r, h as t, H as n } from "./index-b2193545-BoSqyMpB.js";
+const s = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}", a = s, l = class {
+  constructor(e) {
+    r(this, e), this.stylingValue = {
+      width: this.handleStylingProps(this.width),
+      height: this.handleStylingProps(this.height),
+      borderRadius: this.handleStylingProps(this.borderRadius),
+      marginBottom: this.handleStylingProps(this.marginBottom),
+      marginTop: this.handleStylingProps(this.marginTop),
+      marginLeft: this.handleStylingProps(this.marginLeft),
+      marginRight: this.handleStylingProps(this.marginRight),
+      size: this.handleStylingProps(this.size)
+    }, this.structure = void 0, this.width = "unset", this.height = "unset", this.borderRadius = "unset", this.marginBottom = "unset", this.marginTop = "unset", this.marginLeft = "unset", this.marginRight = "unset", this.animation = !0, this.rows = 0, this.size = "100%";
+  }
+  handleStructureChange(e, i) {
+    i !== e && this.handleStructure(e);
+  }
+  handleStylingProps(e) {
+    switch (typeof e) {
+      case "number":
+        return e === 0 ? 0 : `${e}px`;
+      case "undefined":
+        return "unset";
+      case "string":
+        return ["auto", "unset", "none", "inherit", "initial"].includes(e) || e.endsWith("px") || e.endsWith("%") ? e : "unset";
+      default:
+        return "unset";
+    }
+  }
+  handleStructure(e) {
+    switch (e) {
+      case "logo":
+        return this.renderLogo();
+      case "image":
+        return this.renderImage();
+      case "title":
+        return this.renderTitle();
+      case "text":
+        return this.renderText();
+      case "rectangle":
+        return this.renderRectangle();
+      case "circle":
+        return this.renderCircle();
+      default:
+        return null;
+    }
+  }
+  renderLogo() {
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Logo " + (this.animation ? "Skeleton" : "") }));
+  }
+  renderImage() {
+    return t("div", { class: "Image " + (this.animation ? "Skeleton" : "") });
+  }
+  renderTitle() {
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Title " + (this.animation ? "Skeleton" : "") }));
+  }
+  renderText() {
+    return t("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((e, i) => t("div", { key: i, class: "Text " + (this.animation ? "Skeleton" : "") })));
+  }
+  renderRectangle() {
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Rectangle " + (this.animation ? "Skeleton" : "") }));
+  }
+  renderCircle() {
+    return t("div", { class: "SkeletonContainer" }, t("div", { class: "Circle " + (this.animation ? "Skeleton" : "") }));
+  }
+  render() {
+    let e = "";
+    switch (this.structure) {
+      case "logo":
+        e = `
+          :host {
+            --emw-skeleton-logo-width: ${this.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "image":
+        e = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "title":
+        e = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "text":
+        e = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "rectangle":
+        e = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+        break;
+      case "circle":
+        e = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+        break;
+      default:
+        e = "";
+    }
+    return t(n, { key: "e6b885bfd985ce7663d990756fe9101e25eb97f0" }, t("style", { key: "06ae24c7bb74f4dacfc12ae58085333f9dc89da5" }, e), this.handleStructure(this.structure));
+  }
+  static get watchers() {
+    return {
+      structure: ["handleStructureChange"]
+    };
+  }
+};
+l.style = a;
+export {
+  l as U
+};