import { U as m } from "./ui-image-b7b48fe5-c0NIgcTj.js";
import { r, h as t, H as n } from "./index-97d17652-D6HPqRtr.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 {
  m as ui_image,
  l as ui_skeleton
};
