ranui 0.1.1-alpha.6 → 0.1.1-alpha.7

package/dist/index.js

@@ -1,2 +1,1230 @@
-import "./index.f8060ae2.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc$7 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}:host{position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;border:1px solid transparent;box-shadow:0 2px #00000004;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;line-height:22px;font-size:14px;border-radius:2px;color:#000000d9;border-color:#d9d9d9;background:#fff;overflow:hidden;pointer-events:auto}:host,:host(:active),:host(:focus){outline:0}:host(:not([disabled]):hover){border-color:#1890ff;color:#1890ff}:host([type="primary"]){border-color:#1890ff;background-color:#1890ff;color:#fff}:host([type="primary"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="primary"]:not([disabled]):hover){background-color:#40a9ff;color:#fff}:host([type="warning"]){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="warning"]:not([disabled])):after{background-image:radial-gradient(circle,#fff 10%,transparent 10.01%)}:host([type="warning"]:not([disabled]):hover){border-color:#ff4d4f;background-color:#ff4d4f;color:#fff}:host([type="text"]){border:none}:host([disabled]){cursor:not-allowed;pointer-events:all;opacity:.6}:host(:not([disabled]):active):after{transform:translate(-50%,-50%) scale(0);opacity:.3;transition:0s}:host(:active) .btn:before{opacity:.2}:host(:not([disabled],[effect])):after{content:"";display:block;position:absolute;width:100%;height:100%;left:var(--ran-x, 0);top:var(--ran-y, 0);pointer-events:none;background-image:radial-gradient(circle,#1890ff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:translate(-50%,-50%) scale(10);opacity:0;transition:transform .3s,opacity .8s}:host .slot{display:block}.btn{display:flex;justify-content:space-between;align-items:center;padding:4px 15px}.btn .icon{margin-right:2px}\n';
+const falseList = [false, "false", null, void 0];
+const isDisabled = (element) => {
+  const status = element.hasAttribute("disabled");
+  const value = element.getAttribute("disabled");
+  if (status && !falseList.includes(value))
+    return true;
+  return false;
+};
+const setElementClass = (element, addClass) => {
+  const classList = element.classList;
+  if (!classList.contains(addClass)) {
+    classList.add(addClass);
+  }
+};
+const deleteElementChildClass = (parent, deleteClass) => {
+  const pre = parent.querySelectorAll(`.${deleteClass}`);
+  if (pre.length > 0) {
+    pre.forEach((item) => item.classList.remove(deleteClass));
+  }
+};
+class CustomError$1 {
+  constructor(message2 = "document is undefined or r-button is exist") {
+    __publicField(this, "message");
+    this.message = message2;
+  }
+}
+function Custom$4() {
+  if (typeof document !== "undefined" && !customElements.get("r-button")) {
+    class Button extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_btn");
+        __publicField(this, "_iconElement");
+        __publicField(this, "_slot");
+        __publicField(this, "setIcon", () => {
+          if (this.icon) {
+            const { width, height } = this._slot.getBoundingClientRect();
+            const size = Math.min(width, height);
+            if (this._iconElement) {
+              this._iconElement.setAttribute("name", this.icon);
+            } else {
+              this._iconElement = document.createElement("r-icon");
+              this._iconElement.setAttribute("name", this.icon);
+              this._iconElement.setAttribute("color", "currentColor");
+              this._iconElement.setAttribute("class", "icon");
+              this._slot.insertAdjacentElement("beforebegin", this._iconElement);
+            }
+            if (this.iconSize) {
+              this._iconElement.setAttribute("size", this.iconSize);
+            } else {
+              this._iconElement.setAttribute("size", `${size - 5}`);
+            }
+          }
+        });
+        __publicField(this, "mousedown", (event) => {
+          if (!this.disabled || this.disabled === "false") {
+            const { left, top } = this.getBoundingClientRect();
+            this.style.setProperty("--ran-x", event.clientX - left + "px");
+            this.style.setProperty("--ran-y", event.clientY - top + "px");
+          }
+        });
+        __publicField(this, "mouseLeave", () => {
+          this.style.removeProperty("--ran-x");
+          this.style.removeProperty("--ran-y");
+        });
+        this._slot = document.createElement("slot");
+        this._btn = document.createElement("div");
+        this._btn.setAttribute("class", "btn");
+        this._btn.appendChild(this._slot);
+        this._slot.setAttribute("class", "slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$7;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._btn);
+      }
+      static get observedAttributes() {
+        return ["disabled", "icon", "effect", "iconSize"];
+      }
+      get disabled() {
+        return isDisabled(this);
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", "");
+        }
+      }
+      get iconSize() {
+        return this.getAttribute("iconSize");
+      }
+      set iconSize(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("iconSize");
+        } else {
+          this.setAttribute("iconSize", value);
+          this.setIcon();
+        }
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("icon");
+        } else {
+          this.setAttribute("icon", value);
+          this.setIcon();
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (falseList.includes(value) || !value) {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      connectedCallback() {
+        this._btn.addEventListener("mousedown", this.mousedown);
+        this._btn.addEventListener("mouseleave", this.mouseLeave);
+        this.setIcon();
+      }
+      disconnectCallback() {
+        this._btn.removeEventListener("mousedown", this.mousedown);
+        this._btn.removeEventListener("mouseleave", this.mouseLeave);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "disabled" && this._btn) {
+          if (!newValue || newValue === "false") {
+            this._btn.setAttribute("disabled", "");
+          } else {
+            this._btn.removeAttribute("disabled");
+          }
+        }
+        if (name === "icon" && this._btn) {
+          if (oldValue !== newValue) {
+            this.setIcon();
+          }
+        }
+        if (name === "iconSize" && this._btn) {
+          if (oldValue !== newValue) {
+            this._btn.setAttribute("iconSize", newValue);
+          }
+        }
+      }
+    }
+    customElements.define("r-button", Button);
+    return Button;
+  } else {
+    return CustomError$1;
+  }
+}
+Custom$4();
+const __variableDynamicImportRuntimeHelper = (glob, path) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
+  });
+};
+const f7170ee498e0dd32cbdcb63fba8f75cc$6 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}:host{display:inline-flex}:host .icon{display:block}:host([spin]){animation-name:rotate;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes rotate{to{transform:rotate(360deg)}}\n';
+const fs = {};
+let fileSystem = fs;
+if (typeof process !== "undefined" && typeof fileSystem.Stats === "function") {
+  fileSystem._identification = true;
+} else {
+  fileSystem = { _identification: false, message: "require is not defined" };
+}
+const str2Xml = (xmlStr, format = "text/xml") => {
+  if (window.DOMParser)
+    return new window.DOMParser().parseFromString(xmlStr, format).documentElement;
+  if (typeof window.ActiveXObject !== "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
+    const xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
+    xmlDoc.async = "false";
+    xmlDoc.loadXML(xmlStr);
+    return xmlDoc;
+  }
+  return void 0;
+};
+function vnode$1(sel, data, children, text, elm) {
+  const key = data === void 0 ? void 0 : data.key;
+  return { sel, data, children, text, elm, key };
+}
+vnode$1("", {}, [], void 0, void 0);
+function Custom$3() {
+  if (typeof window !== "undefined" && !customElements.get("r-icon")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user.98b805f1.js"), "../../assets/icons/book.svg": () => import("./book.c3235430.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill.0a9e8a28.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle.711c4f31.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill.726bf59c.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle.dda355df.js"), "../../assets/icons/close.svg": () => import("./close.9954c08c.js"), "../../assets/icons/eye-close.svg": () => import("./eye-close.a954b46e.js"), "../../assets/icons/eye.svg": () => import("./eye.c904f80b.js"), "../../assets/icons/home.svg": () => import("./home.f5970edc.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill.9dfc3b5e.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle.718e6ac4.js"), "../../assets/icons/loading.svg": () => import("./loading.876d0293.js"), "../../assets/icons/lock.svg": () => import("./lock.26244026.js"), "../../assets/icons/message.svg": () => import("./message.5379338a.js"), "../../assets/icons/power-off.svg": () => import("./power-off.050e4c26.js"), "../../assets/icons/preview.svg": () => import("./preview.de4d53cc.js"), "../../assets/icons/setting.svg": () => import("./setting.7917f3b2.js"), "../../assets/icons/team.svg": () => import("./team.b3a3196b.js"), "../../assets/icons/unlock.svg": () => import("./unlock.1e7bed93.js"), "../../assets/icons/user.svg": () => import("./user.21cfbfa6.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill.b87fec04.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle.b1792bd4.js") }), `../../assets/icons/${this.name}.svg`).then((result) => {
+              if (result && result.default && result.default._identification) {
+                const { data } = result.default;
+                this._icon && this._div.removeChild(this._icon);
+                this._icon = str2Xml(data, "image/svg+xml");
+                if (this._icon) {
+                  this._div.appendChild(this._icon);
+                  this.setSize();
+                  this.setColor();
+                  resolve();
+                }
+              } else {
+                this.loadNs();
+                reject(
+                  `
+ couldn't be loaded by r-icon, message: ${this.name} icon is undefined`
+                );
+              }
+            }).catch((error) => {
+              this.loadNs();
+            });
+          });
+        });
+        __publicField(this, "loadNs", () => {
+          if (this._icon && this._div) {
+            this._div.removeChild(this._icon);
+          }
+          this._icon = document.createElement("svg");
+          this._icon.setAttribute("class", "icon");
+          this._icon.setAttribute("viewBox", "0 0 1024 1024");
+          this._icon.setAttribute("width", "100");
+          this._icon.setAttribute("height", "100");
+          const xLinksNs = "http://www.w3.org/1999/xlink";
+          const use = document.createElementNS(xLinksNs, "use");
+          use.setAttributeNS(
+            xLinksNs,
+            "xlink:href",
+            `../../assets/iconfont/icon.svg#icon-${this.name}`
+          );
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "icon");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$6;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["name", "size", "color", "spin"];
+      }
+      get name() {
+        return this.getAttribute("name");
+      }
+      set name(value) {
+        if (value)
+          this.setAttribute("name", value);
+      }
+      get size() {
+        return this.getAttribute("size");
+      }
+      set size(value) {
+        if (value)
+          this.setAttribute("size", value);
+      }
+      get color() {
+        return this.getAttribute("color");
+      }
+      set color(value) {
+        if (value)
+          this.setAttribute("color", value);
+      }
+      get spin() {
+        return this.getAttribute("spin");
+      }
+      set spin(value) {
+        if (value != null)
+          this.setAttribute("spin", value);
+      }
+      connectedCallback() {
+        this.setIcon();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue !== oldValue) {
+          if (name === "name")
+            this.setIcon();
+          if (name === "size")
+            this.setSize();
+          if (name === "color")
+            this.setColor();
+          if (name === "spin")
+            this.setSpin();
+        }
+      }
+    }
+    customElements.define("r-icon", CustomElement2);
+  }
+}
+Custom$3();
+const f7170ee498e0dd32cbdcb63fba8f75cc$5 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}\n';
+const failImage = `
+    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==
+`;
+function Custom$2() {
+  if (typeof window !== "undefined" && !customElements.get("r-img")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_image");
+        __publicField(this, "_container");
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "r-image");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$5;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._container);
+      }
+      static get observedAttributes() {
+        return ["fallback"];
+      }
+      get fallback() {
+        return this.getAttribute("fallback") || failImage;
+      }
+      set fallback(value) {
+        if (value) {
+          this.setAttribute("fallback", value);
+        } else {
+          this.removeAttribute("fallback");
+        }
+      }
+      listenFallback(name, value) {
+        if (name === "fallback" && this._image) {
+          if (value) {
+            this._image.setAttribute("fallback", value);
+          } else {
+            this._image.removeAttribute("fallback");
+          }
+        }
+      }
+      connectedCallback() {
+        const src = this.getAttribute("src") || "";
+        this._image = new Image();
+        this._image.src = src;
+        this._image.addEventListener("error", () => {
+          if (this._image && this.fallback) {
+            this._image.src = this.fallback;
+          }
+        });
+        this._image.addEventListener("load", () => {
+          if (this._image) {
+            this._container.appendChild(this._image);
+          }
+        });
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenFallback(name, newValue);
+      }
+    }
+    customElements.define("r-img", CustomElement2);
+  }
+}
+Custom$2();
+const f7170ee498e0dd32cbdcb63fba8f75cc$4 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}.input{position:relative;display:flex;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:2px;transition:all .3s}.input:active{border-color:#40a9ff;box-shadow:0 0 0 2px #1890ff33;border-right-width:1px;outline:0}.input:hover{border-color:#40a9ff;border-right-width:1px}.input>.input-main:hover~.input-label{color:#40a9ff}.input[value]>.input-label{transform:translateY(calc(-50% - .43em)) scale(.8);color:#00000040}.input[status=error]{border-color:#ff4d4f}.input[status=error]>.input-main~.input-label{color:#ff4d4f}.input[status=warning]{border-color:#ff7875}.input[status=warning]>.input-main~.input-label{color:#ff7875}.input[disabled]{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main{color:#00000040;background-color:#f5f5f5;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1}.input[disabled]>.input-main~.input-label{color:#00000040;background-color:#f5f5f5}.input[disabled]>.input-label{color:#999;border-color:#d9d9d9;box-shadow:none;cursor:not-allowed}.input-main{writing-mode:horizontal-tb;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0px;text-shadow:none;text-align:start;-webkit-rtl-ordering:logical;cursor:text;touch-action:manipulation;-webkit-appearance:none;text-overflow:ellipsis;box-sizing:border-box;margin:0;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";position:relative;border:none;width:100%;min-width:0;color:#000000d9;font-size:14px;line-height:1.5715;background-color:#fff;background-image:none;transition:all .3s}.input-main:focus,.input-main:hover{border:none;outline:0}.input-main::placeholder{color:#999}.input-main:placeholder-shown~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-main:focus~.input-label{transform:translateY(calc(-50% - .43em)) scale(.8)}.input-label{pointer-events:none;position:absolute;font-size:14px;left:8px;transition:transform .3s,color .3s,background-color .3s,backdrop-filter .3s;transform-origin:left;padding:0 .2em;color:#999;background:#fff;opacity:.9}\n';
+class CustomError {
+  constructor(message2 = "document is undefined or r-input is exist") {
+    __publicField(this, "message");
+    this.message = message2;
+  }
+}
+function Custom$1() {
+  if (typeof window !== "undefined" && !customElements.get("r-input")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_container");
+        __publicField(this, "_label");
+        __publicField(this, "_input");
+        __publicField(this, "_icon");
+        __publicField(this, "inputValue", (event) => {
+          event.stopPropagation();
+          const target = event.target;
+          this.value = target ? target.value : "";
+          this.change();
+          this.dispatchEvent(
+            new CustomEvent("input", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        __publicField(this, "change", () => {
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        __publicField(this, "focus", () => {
+          this.dispatchEvent(
+            new CustomEvent("focus", {
+              detail: {
+                value: this.value
+              }
+            })
+          );
+        });
+        __publicField(this, "dealIcon", () => {
+          if (!this._icon) {
+            this._icon = document.createElement("r-icon");
+            const { width, height } = this._input.getBoundingClientRect();
+            const size = Math.min(width, height);
+            this._icon.setAttribute("size", `${size}`);
+            this._input.insertAdjacentElement("beforebegin", this._icon);
+          }
+          this.icon && this._icon.setAttribute("name", this.icon);
+        });
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "input");
+        this._input = document.createElement("input");
+        this._input.setAttribute("class", "input-main");
+        this._container.appendChild(this._input);
+        shadowRoot.appendChild(this._container);
+      }
+      static get observedAttributes() {
+        return [
+          "label",
+          "disabled",
+          "name",
+          "placeholder",
+          "type",
+          "icon",
+          "status"
+        ];
+      }
+      get value() {
+        return this.getAttribute("value");
+      }
+      set value(value) {
+        if (!isDisabled(this) && value) {
+          this.setAttribute("value", value);
+          this._container.setAttribute("value", value);
+        } else {
+          this.removeAttribute("value");
+          this._container.removeAttribute("value");
+        }
+      }
+      get placeholder() {
+        return this.getAttribute("placeholder");
+      }
+      set placeholder(value) {
+        if (value) {
+          this.setAttribute("placeholder", value);
+        } else {
+          this.removeAttribute("placeholder");
+        }
+      }
+      get required() {
+        return this.getAttribute("required");
+      }
+      set required(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("required");
+        } else {
+          this.setAttribute("required", "");
+        }
+      }
+      get disabled() {
+        return isDisabled(this);
+      }
+      set disabled(value) {
+        if (falseList.includes(value)) {
+          this.removeAttribute("disabled");
+          this._container.removeAttribute("disabled");
+          this._input.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", "");
+          this._container.setAttribute("disabled", "");
+          this._input.setAttribute("disabled", "");
+        }
+      }
+      get label() {
+        return this.getAttribute("label") || "";
+      }
+      set label(value) {
+        this.setAttribute("label", value);
+      }
+      get status() {
+        return this.getAttribute("status") || "";
+      }
+      set status(value) {
+        if (value) {
+          this.setAttribute("status", value);
+          this._container.setAttribute("status", value);
+        } else {
+          this.removeAttribute("status");
+          this._container.removeAttribute("status");
+        }
+      }
+      get name() {
+        return this.getAttribute("name") || "";
+      }
+      set name(value) {
+        this.setAttribute("name", value);
+      }
+      get min() {
+        return this.getAttribute("min") || "";
+      }
+      set min(value) {
+        if (this.type === "number")
+          this.setAttribute("min", value);
+      }
+      get max() {
+        return this.getAttribute("max") || "";
+      }
+      set max(value) {
+        if (this.type === "number")
+          this.setAttribute("max", value);
+      }
+      get step() {
+        return this.getAttribute("step") || "";
+      }
+      set step(value) {
+        if (this.type === "number")
+          this.setAttribute("step", value);
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (value) {
+          this.setAttribute("icon", value);
+        } else {
+          this.removeAttribute("icon");
+        }
+      }
+      get type() {
+        return this.getAttribute("type");
+      }
+      set type(value) {
+        if (value) {
+          this.setAttribute("type", value);
+        } else {
+          this.removeAttribute("type");
+        }
+      }
+      listenPlaceholder(name, value) {
+        if (name === "placeholder" && this._input) {
+          if (value != null) {
+            this._input.setAttribute("placeholder", value);
+          } else {
+            this._input.removeAttribute("placeholder");
+          }
+        }
+      }
+      listenLabel(name, value) {
+        if (name === "label" && this._input) {
+          if (value != null) {
+            if (this._label) {
+              this._label.innerHTML = value;
+            } else {
+              this._label = document.createElement("label");
+              this._label.innerHTML = value;
+              this._label.setAttribute("class", "input-label");
+              this._container.appendChild(this._label);
+            }
+          } else {
+            this._container.removeAttribute("label");
+            if (this._label) {
+              this._container.removeChild(this._label);
+              this._label = void 0;
+            }
+          }
+        }
+      }
+      listenType(name, value) {
+        if (name === "type" && this._input) {
+          if (value) {
+            this._input.setAttribute("type", value);
+          } else {
+            this._input.removeAttribute("type");
+            this._input.removeAttribute("min");
+            this._input.removeAttribute("max");
+            this._input.removeAttribute("step");
+          }
+        }
+      }
+      listenStatus(name, value) {
+        if (name === "status" && this._container) {
+          if (value) {
+            this._container.setAttribute("status", value);
+          } else {
+            this._container.removeAttribute("status");
+          }
+        }
+      }
+      listenDisabled(name, value) {
+        if (name === "disabled" && this._container) {
+          if (falseList.includes(value)) {
+            this._container.removeAttribute("disabled");
+          } else {
+            this._container.setAttribute("disabled", "");
+            this._input.setAttribute("disabled", "");
+          }
+        }
+      }
+      listenIcon(name, value, oldValue) {
+        if (name === "icon" && value && value !== oldValue) {
+          this.removeAttribute("label");
+          this.setAttribute("icon", value);
+          this.dealIcon();
+        }
+      }
+      listenEvent(name, oldValue, newValue) {
+        this.listenPlaceholder(name, newValue);
+        this.listenLabel(name, newValue);
+        this.listenStatus(name, newValue);
+        this.listenDisabled(name, newValue);
+        this.listenIcon(name, newValue, oldValue);
+      }
+      connectedCallback() {
+        if (this.value) {
+          this._input.value = this.value;
+          this._container.setAttribute("value", this.value);
+        }
+        if (this.status) {
+          this._container.setAttribute("status", this.status);
+        }
+        if (isDisabled(this)) {
+          this._container.setAttribute("disabled", "");
+          this._input.setAttribute("disabled", "");
+        }
+        if (this.type) {
+          this._input.setAttribute("type", this.type);
+        }
+        this._input.addEventListener("input", this.inputValue);
+        this._input.addEventListener("focus", this.focus);
+        if (document.readyState === "complete") {
+          this.dealIcon();
+        }
+      }
+      disconnectCallback() {
+        this._input.removeEventListener("input", this.inputValue);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        this.listenEvent(name, oldValue, newValue);
+      }
+    }
+    customElements.define("r-input", CustomElement2);
+    return CustomElement2;
+  } else {
+    return CustomError;
+  }
+}
+Custom$1();
+const f7170ee498e0dd32cbdcb63fba8f75cc$3 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}@keyframes MessageMoveUpIn{0%{transform:translateY(-100%);transform-origin:0 0;opacity:0}to{transform:translateY(0);transform-origin:0 0;opacity:1}}@keyframes MessageMoveOut{0%{max-height:150px;padding:8px;opacity:1}to{max-height:0;padding:0;opacity:0}}:host([type="toast"]){--ranui-message-background: rgba(0, 0, 0, .7);--ranui-message-color: #fff;--ranui-message-border-radius: 7px}.message-notice{padding:8px;text-align:center;max-width:90%;margin:0 auto;word-break:break-all}.message-notice-content{display:inline-block;padding:10px 16px;background:var(--ranui-message-background, #fff);border-radius:var(--ranui-message-border-radius, 2px);box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;pointer-events:all}.message-notice-content-info{align-items:center;display:flex}.message-notice-content-info span{margin:0;padding:0;color:var(--ranui-message-color, #000000d9);font-size:14px;font-variant:tabular-nums;list-style:none;font-feature-settings:"tnum";z-index:1010;width:100%;pointer-events:none}.message-leave{animation-name:MessageMoveOut;animation-duration:.3s}.message-in{animation-name:MessageMoveUpIn;animation-duration:.2s;animation-fill-mode:both}\n';
+const AnimationTime = 300;
+const defaultDuration = 3e3;
+const typeMapIcon = /* @__PURE__ */ new Map([
+  ["success", "check-circle-fill"],
+  ["warning", "warning-circle-fill"],
+  ["error", "close-circle-fill"],
+  ["info", "info-circle-fill"],
+  ["toast", null]
+]);
+const typeMapColor = /* @__PURE__ */ new Map([
+  ["success", "#52c41a"],
+  ["warning", "#faad14"],
+  ["error", "#ff4d4f"],
+  ["info", "#1890ff"],
+  ["toast", "rgba(0, 0, 0, 0.7)"]
+]);
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-message")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_info");
+        __publicField(this, "_notice");
+        __publicField(this, "_content");
+        __publicField(this, "_icon");
+        __publicField(this, "_span");
+        __publicField(this, "timeId");
+        __publicField(this, "close");
+        __publicField(this, "setIcon", (value) => {
+          var _a, _b, _c, _d;
+          const icon = typeMapIcon.get(value);
+          const color = typeMapColor.get(value);
+          if (icon) {
+            (_a = this._icon) == null ? void 0 : _a.setAttribute("name", icon);
+            (_b = this._icon) == null ? void 0 : _b.style.setProperty("margin-right", "8px");
+            (_c = this._icon) == null ? void 0 : _c.setAttribute("size", "18");
+            color && ((_d = this._icon) == null ? void 0 : _d.setAttribute("color", color));
+          }
+        });
+        this._notice = document.createElement("div");
+        this._notice.setAttribute("class", "message-notice");
+        this._content = document.createElement("div");
+        this._content.setAttribute("class", "message-notice-content");
+        this._info = document.createElement("div");
+        this._info.setAttribute("class", "message-notice-content-info");
+        this._icon = document.createElement("r-icon");
+        this._span = document.createElement("span");
+        this._info.appendChild(this._icon);
+        this._info.appendChild(this._span);
+        this._content.appendChild(this._info);
+        this._notice.appendChild(this._content);
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$3;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._notice);
+      }
+      static get observedAttributes() {
+        return ["type", "content"];
+      }
+      get type() {
+        return this.getAttribute("type");
+      }
+      set type(value) {
+        if (value)
+          this.setAttribute("type", value);
+      }
+      get content() {
+        return this.getAttribute("content");
+      }
+      set content(value) {
+        if (value)
+          this.setAttribute("content", value);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "content" && oldValue !== newValue) {
+          this._span.textContent = newValue;
+        }
+        if (name === "type" && oldValue !== newValue) {
+          this.setIcon(newValue);
+        }
+      }
+    }
+    customElements.define("r-message", CustomElement2);
+    const container = document.createElement("div");
+    const div = document.createElement("div");
+    div.setAttribute("class", "ranui-message");
+    document.body.appendChild(container);
+    container.appendChild(div);
+    const commonPrompt = (type) => {
+      return (options) => {
+        const message2 = new CustomElement2();
+        message2.setAttribute("class", "message");
+        message2.timeId && clearTimeout(message2.timeId);
+        message2.setAttribute("type", type);
+        let duration = defaultDuration;
+        let close;
+        if (typeof options === "string") {
+          message2.setAttribute("content", options);
+        } else {
+          message2.setAttribute("content", options.content);
+          close = options.close;
+          duration = options.duration || defaultDuration;
+        }
+        const time = setTimeout(() => {
+          message2.classList.remove("message-in");
+          message2.classList.add("message-leave");
+          clearTimeout(time);
+        }, duration - AnimationTime);
+        message2.timeId = setTimeout(() => {
+          div.removeChild(message2);
+          if (close)
+            close();
+        }, duration);
+        div.appendChild(message2);
+        message2.classList.add("message-in");
+      };
+    };
+    return {
+      info: commonPrompt("info"),
+      success: commonPrompt("success"),
+      error: commonPrompt("error"),
+      warning: commonPrompt("warning"),
+      toast: commonPrompt("toast")
+    };
+  }
+}
+const message = Custom();
+if (typeof window !== "undefined" && message) {
+  window.message = message;
+}
+const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}@keyframes skeleton{0%{transform:translate(-37.5%)}to{transform:translate(37.5%)}}.skeleton{position:relative;z-index:0;overflow:hidden;background:0 0;width:100%;height:16px;background:rgba(0,0,0,.06);border-radius:4px}.skeleton:after{position:absolute;top:0;inset-inline-end:-150%;bottom:0;inset-inline-start:-150%;background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.15) 37%,rgba(0,0,0,.06) 63%);animation-name:skeleton;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;content:""}\n';
+function Skeleton() {
+  if (typeof window !== "undefined" && !customElements.get("r-skeleton")) {
+    class CustomElement2 extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_div");
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "skeleton");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["disabled"];
+      }
+      connectedCallback() {
+      }
+      disconnectCallback() {
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+      }
+    }
+    window.customElements.define("r-skeleton", CustomElement2);
+  }
+}
+Skeleton();
+const f7170ee498e0dd32cbdcb63fba8f75cc$1 = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}\n';
+function CustomElement$1() {
+  if (typeof window !== "undefined" && !customElements.get("r-tab")) {
+    class TabPane extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_div");
+        __publicField(this, "parent");
+        __publicField(this, "initAttribute", () => {
+          var _a, _b, _c;
+          this.parent = this.parentNode;
+          this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute(this.key, "icon", this.icon));
+          this.key && ((_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "iconSize", this.iconSize));
+          this.key && ((_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "effect", this.effect));
+        });
+        this._div = document.createElement("slot");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$1;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._div);
+      }
+      static get observedAttributes() {
+        return ["label", "key", "disabled", "icon", "effect", "iconSize"];
+      }
+      get label() {
+        return this.getAttribute("label") || "";
+      }
+      set label(value) {
+        this.setAttribute("label", value);
+      }
+      get icon() {
+        return this.getAttribute("icon");
+      }
+      set icon(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("icon");
+        } else {
+          this.setAttribute("icon", value);
+        }
+      }
+      get iconSize() {
+        return this.getAttribute("iconSize");
+      }
+      set iconSize(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("iconSize");
+        } else {
+          this.setAttribute("iconSize", value);
+        }
+      }
+      get key() {
+        return this.getAttribute("r-key");
+      }
+      set key(value) {
+        if (value) {
+          this.setAttribute("r-key", value);
+        } else {
+          this.removeAttribute("r-key");
+        }
+      }
+      get disabled() {
+        return this.getAttribute("disabled");
+      }
+      set disabled(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("disabled");
+        } else {
+          this.setAttribute("disabled", value);
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      onClick(e) {
+        console.log("e", e);
+      }
+      connectedCallback() {
+        this._div.addEventListener("click", this.onClick);
+        document.addEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      disconnectCallback() {
+        document.removeEventListener("DOMContentLoaded", this.initAttribute);
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        var _a, _b, _c, _d, _e;
+        if (oldValue !== newValue && this.key && ((_a = this.parent) == null ? void 0 : _a.updateAttribute)) {
+          if (name === "icon")
+            (_b = this.parent) == null ? void 0 : _b.updateAttribute(this.key, "icon", newValue);
+          if (name === "iconSize")
+            (_c = this.parent) == null ? void 0 : _c.updateAttribute(this.key, "iconSize", newValue);
+          if (name === "effect")
+            (_d = this.parent) == null ? void 0 : _d.updateAttribute(this.key, "effect", newValue);
+          if (name === "disabled")
+            (_e = this.parent) == null ? void 0 : _e.updateAttribute(this.key, "disabled", newValue);
+        }
+      }
+    }
+    customElements.define("r-tab", TabPane);
+    return TabPane;
+  }
+}
+CustomElement$1();
+const f7170ee498e0dd32cbdcb63fba8f75cc = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(./assets/icons/close.svg) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}.tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.tab-header_nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.tab-header_nav::-webkit-scrollbar{display:none}.tab-header_nav__item{flex-shrink:0}.tab-header_nav .active{color:var(--active-color, #1890ff)}.tab-header_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .tab-header_nav__item{border:solid 1px transparent}:host([type="line"]) .tab-header_nav .active{color:var(--line-color, #1890ff);border:solid 1px transparent;border-color:var(--border-color, rgba(0, 0, 0, .2)) var(--border-color, rgba(0, 0, 0, .2)) transparent;border-radius:var(--border-radius, .25em) var(--border-radius, .25em) 0 0}:host([type="line"]) .tab-header_line{transition:none;visibility:hidden}:host([type="line"]) .tab-header_line:after,:host([type="line"]) .tab-header_line:before{content:"";position:absolute;visibility:visible;width:9999px;height:1px;bottom:0;background:var(--border-color, rgba(0, 0, 0, .2))}:host([type="line"]) .tab-header_line:after{left:100%}:host([type="line"]) .tab-header_line:before{right:100%}:host([align="center"]) .tab-header_nav{justify-content:center}:host([align="center"]) .tab-header_line{left:50%}:host([align="end"]) .tab-header_nav{justify-content:flex-end}\n';
+function CustomElement() {
+  if (typeof window !== "undefined" && !customElements.get("r-tabs")) {
+    class Tabs extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_container");
+        __publicField(this, "_header");
+        __publicField(this, "_nav");
+        __publicField(this, "_line");
+        __publicField(this, "_content");
+        __publicField(this, "_wrap");
+        __publicField(this, "_slot");
+        __publicField(this, "tabHeaderKeyMapIndex");
+        __publicField(this, "initTabHeaderKeyMapIndex", (key, index) => {
+          const value = this.tabHeaderKeyMapIndex[key];
+          if (value) {
+            throw new Error(
+              "tab \u7EC4\u4EF6\u7684 key \u503C\u5B58\u5728\u91CD\u590D, \u6216\u8005\u67D0\u4E2A tab \u7EC4\u4EF6\u7F3A\u5C11 key \u5C5E\u6027"
+            );
+          } else {
+            this.tabHeaderKeyMapIndex[key] = index;
+          }
+        });
+        __publicField(this, "initTabLineAlignCenter", () => {
+          const { length } = this._nav.children;
+          let left = 0;
+          for (let i = 0; i < length; i++) {
+            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
+            left += width;
+          }
+          this._line.style.setProperty("left", `calc(50% - ${left / 2}px)`);
+        });
+        __publicField(this, "initTabLineAlignEnd", () => {
+          const { length } = this._nav.children;
+          let left = 0;
+          for (let i = 0; i < length; i++) {
+            const { width = 0 } = this._nav.children[i].getBoundingClientRect();
+            left += width;
+          }
+          this._line.style.setProperty("left", `calc(100% - ${left}px)`);
+        });
+        __publicField(this, "setTabLine", (key) => {
+          if (key) {
+            const index = this.tabHeaderKeyMapIndex[key];
+            const TabHeader = this._nav.children[index];
+            const { width = 0 } = TabHeader.getBoundingClientRect();
+            this._line.style.setProperty("width", `${width}px`);
+            let distance = 0;
+            for (let i = 0; i < index; i++) {
+              const item = this._nav.children[i];
+              const { width: width2 = 0 } = item.getBoundingClientRect();
+              distance += width2;
+            }
+            this._line.style.setProperty("transform", `translateX(${distance}px)`);
+          }
+        });
+        __publicField(this, "setTabContent", (key) => {
+          if (key) {
+            const index = this.tabHeaderKeyMapIndex[key];
+            this._wrap.style.setProperty(
+              "transform",
+              `translateX(${index * -100}%)`
+            );
+          }
+        });
+        __publicField(this, "clickTabHead", (e) => {
+          const tabHeader = e.target;
+          const key = tabHeader.getAttribute("r-key");
+          const disabled = isDisabled(tabHeader);
+          if (!disabled && key) {
+            this.setAttribute("active", key);
+            this.setTabLine(key);
+            this.setTabContent(key);
+            deleteElementChildClass(this._nav, "active");
+            setElementClass(tabHeader, "active");
+          }
+        });
+        __publicField(this, "updateAttribute", (key, attribute, value = "") => {
+          var _a, _b;
+          const index = this.tabHeaderKeyMapIndex[key];
+          if (key && value && this._nav.children[index]) {
+            (_a = this._nav.children[index]) == null ? void 0 : _a.setAttribute(attribute, value);
+          } else {
+            (_b = this._nav.children[index]) == null ? void 0 : _b.removeAttribute(attribute);
+          }
+        });
+        __publicField(this, "initActive", () => {
+          const tabHeaderList = [...this._nav.children];
+          const initTabList = tabHeaderList.filter((item) => !isDisabled(item));
+          let initTabHeader;
+          if (this.active != null) {
+            initTabHeader = initTabList.find(
+              (item) => item.getAttribute("r-key") === this.active
+            );
+            initTabHeader == null ? void 0 : initTabHeader.setAttribute("r-key", this.active);
+          }
+          if (!initTabHeader) {
+            initTabHeader = initTabList.shift();
+          }
+          if (!initTabHeader)
+            return;
+          const index = tabHeaderList.findIndex((item) => item === initTabHeader);
+          const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("r-key")) || `${index}`;
+          if (key != null) {
+            this.setAttribute("active", `${key}`);
+            setElementClass(initTabHeader, "active");
+            this.setTabContent(key);
+            setTimeout(() => {
+              this.setTabLine(key);
+            }, 200);
+          }
+        });
+        __publicField(this, "listenSlotChange", () => {
+          const slots = this._slot.assignedElements();
+          slots.forEach((item, index) => {
+            const tabPane = this.createTabHeader(item, index);
+            this._nav.appendChild(tabPane);
+            tabPane.addEventListener("click", this.clickTabHead);
+          });
+          this.initActive();
+          if (this.align) {
+            if (this.align === "center")
+              this.initTabLineAlignCenter();
+            if (this.align === "end")
+              this.initTabLineAlignEnd();
+          }
+        });
+        __publicField(this, "initTab", () => {
+          this._slot.addEventListener("slotchange", this.listenSlotChange);
+        });
+        __publicField(this, "unloadTab", () => {
+          this._slot.removeEventListener("slotchange", this.listenSlotChange);
+        });
+        this._container = document.createElement("div");
+        this._container.setAttribute("class", "tab");
+        this._header = document.createElement("div");
+        this._header.setAttribute("class", "tab-header");
+        this._nav = document.createElement("div");
+        this._nav.setAttribute("class", "tab-header_nav");
+        this._line = document.createElement("div");
+        this._line.setAttribute("class", "tab-header_line");
+        this._content = document.createElement("div");
+        this._content.setAttribute("class", "tab-content");
+        this._wrap = document.createElement("div");
+        this._wrap.setAttribute("class", "tab-content_wrap");
+        this._slot = document.createElement("slot");
+        this._wrap.appendChild(this._slot);
+        this._content.appendChild(this._wrap);
+        this._header.appendChild(this._nav);
+        this._header.appendChild(this._line);
+        this._container.appendChild(this._header);
+        this._container.appendChild(this._content);
+        this.tabHeaderKeyMapIndex = {};
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+        shadowRoot.appendChild(this._container);
+      }
+      static get observedAttributes() {
+        return ["active", "forceRender", "type", "align", "effect"];
+      }
+      get align() {
+        return this.getAttribute("align") || "start";
+      }
+      set align(value) {
+        this.setAttribute("align", value);
+      }
+      set type(value) {
+        this.setAttribute("type", value);
+      }
+      get type() {
+        return this.getAttribute("type") || "flat";
+      }
+      get active() {
+        return this.getAttribute("active");
+      }
+      set active(value) {
+        if (value) {
+          this.setAttribute("active", value);
+          this.setTabLine(value);
+          this.setTabContent(value);
+        } else {
+          this.removeAttribute("active");
+        }
+      }
+      get effect() {
+        return this.getAttribute("effect");
+      }
+      set effect(value) {
+        if (!value || value === "false") {
+          this.removeAttribute("effect");
+        } else {
+          this.setAttribute("effect", value);
+        }
+      }
+      createTabHeader(tabPane, index) {
+        const label = tabPane.getAttribute("label") || "";
+        const icon = tabPane.getAttribute("icon") || "";
+        const iconSize = tabPane.getAttribute("iconSize") || "";
+        const key = tabPane.getAttribute("r-key") || `${index}`;
+        const type = tabPane.getAttribute("type") || "text";
+        this.initTabHeaderKeyMapIndex(key, index);
+        const tabHeader = document.createElement("r-button");
+        tabHeader.setAttribute("class", "tab-header_nav__item");
+        tabHeader.setAttribute("type", type);
+        icon && tabHeader.setAttribute("icon", icon);
+        iconSize && tabHeader.setAttribute("iconSize", iconSize);
+        isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
+        tabHeader.setAttribute("r-key", key);
+        if (this.effect) {
+          tabPane.setAttribute("effect", this.effect);
+          this._line.style.setProperty("display", "none");
+        }
+        tabPane.setAttribute("r-key", key);
+        tabHeader.innerHTML = label;
+        return tabHeader;
+      }
+      connectedCallback() {
+        this.initTab();
+      }
+      disconnectCallback() {
+        this.unloadTab();
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          this.dispatchEvent(
+            new CustomEvent("change", {
+              detail: {
+                active: this.active
+              }
+            })
+          );
+          if (name === "align") {
+            if (newValue === "center")
+              this.initTabLineAlignCenter();
+            if (newValue === "end")
+              this.initTabLineAlignEnd();
+          }
+          if (name === "effect") {
+            const tabHeaderList = [...this._nav.children];
+            tabHeaderList.forEach((item) => {
+              if (!this.effect || this.effect === "false") {
+                item.removeAttribute("effect");
+              } else {
+                item.setAttribute("effect", newValue);
+              }
+            });
+          }
+          if (name === "active") {
+            this.setAttribute(name, newValue);
+          }
+        }
+      }
+    }
+    customElements.define("r-tabs", Tabs);
+    return Tabs;
+  }
+}
+CustomElement();
+const styles = '.ranui-message{box-sizing:border-box;margin:0;padding:0;color:#000000d9;font-size:14px;font-variant:tabular-nums;line-height:1.5715;list-style:none;font-feature-settings:"tnum";position:fixed;top:8px;left:0;z-index:1010;width:100%;pointer-events:none}.r-preview-mask{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000073;z-index:1081}.r-preview-mask .r-preview-options{width:100%;background:rgba(0,0,0,.1);pointer-events:auto;display:flex;flex-flow:row-reverse nowrap;align-items:center;justify-content:space-between}.r-preview-mask .r-preview-options-close{margin:14px;border:none;cursor:pointer;transition:all .3s;user-select:none;width:25px;height:25px;background:url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg4Mzc4MDE2NjYzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MDgiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij48cGF0aCBkPSJNNTY4IDUxNS4wMDhsMjU0LjAxNi0yNTUuMDA4cTEyLTExLjAwOCAxMi0yNy40ODh0LTExLjQ4OC0yOC0yOC0xMS40ODgtMjcuNDg4IDEybC0yNTUuMDA4IDI1NC4wMTYtMjU1LjAwOC0yNTQuMDE2cS0xMS4wMDgtMTItMjcuNDg4LTEydC0yOCAxMS40ODgtMTEuNDg4IDI4IDEyIDI3LjQ4OGwyNTQuMDE2IDI1NS4wMDgtMjU0LjAxNiAyNTUuMDA4cS0xMiAxMS4wMDgtMTIgMjcuNDg4dDExLjQ4OCAyOCAyOCAxMS40ODggMjcuNDg4LTEybDI1NS4wMDgtMjU1LjAwOCAyNTUuMDA4IDI1NS4wMDhxMTEuMDA4IDEyIDI3LjQ4OCAxMnQyOC0xMS40ODggMTEuNDg4LTI4LTEyLTI3LjQ4OHoiIHAtaWQ9IjI2MDkiID48L3BhdGg+PC9zdmc+) no-repeat center center;background-size:contain}.r-preview-mask .r-preview-contain{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context{height:calc(100vh - 44px);overflow:auto}.r-preview-mask .r-preview-contain .r-preview-context section{width:100%;height:690px;position:relative;border:1px solid #333;background-color:#efefef;text-align:center;border-radius:10px;box-shadow:1px 1px 3px #aaa;overflow:hidden}.r-preview-mask .r-preview-contain .r-preview-context section div.block{position:absolute;top:0;left:0;width:100%}.r-preview-mask .r-preview-contain .r-preview-context section div.content{display:flex;flex-direction:column}.r-preview-mask .r-preview-contain .r-preview-context section div.v-up{justify-content:flex-start}.r-preview-mask .r-preview-contain .r-preview-context section div.v-mid{justify-content:center}.r-preview-mask .r-preview-contain .r-preview-context section div.v-down{justify-content:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.h-left{align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.h-mid{align-items:center;text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section div.h-right{align-items:flex-end;text-align:right}.r-preview-mask .r-preview-contain .r-preview-context section div.up-left{justify-content:flex-start;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.up-center{justify-content:flex-start;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.up-right{justify-content:flex-start;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.center-left{justify-content:center;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.center-center{justify-content:center;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.center-right{justify-content:center;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context section div.down-left{justify-content:flex-end;align-items:flex-start;text-align:left}.r-preview-mask .r-preview-contain .r-preview-context section div.down-center{justify-content:flex-end;align-items:center}.r-preview-mask .r-preview-contain .r-preview-context section div.down-right{justify-content:flex-end;align-items:flex-end}.r-preview-mask .r-preview-contain .r-preview-context li.slide{margin:10px 0;font-size:18px}.r-preview-mask .r-preview-contain .r-preview-context div.footer{text-align:center}.r-preview-mask .r-preview-contain .r-preview-context section table{position:absolute}.r-preview-mask .r-preview-contain .r-preview-context section table,.r-preview-mask .r-preview-contain .r-preview-context section th,.r-preview-mask .r-preview-contain .r-preview-context section td{border:1px solid black}.r-preview-mask .r-preview-contain .r-preview-context section svg.drawing{position:absolute;overflow:visible}\n';
+if (typeof document !== "undefined") {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  document.body.appendChild(style);
+}
 //# sourceMappingURL=index.js.map