ranui 0.1.9 → 0.1.10-alpha.10

package/dist/index-D4qUro5V.js

@@ -0,0 +1,279 @@
+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);
+import { _ as __variableDynamicImportRuntimeHelper, s as str2Xml } from "./drop-4j4abxje.js";
+import "./arrow-down-B_hCY3Wt.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-icon-host-display, inline-flex)}:host([spin]){animation-name:var(--ran-icon-host-spin-animation-name, rotate);animation-duration:var(--ran-icon-host-spin-animation-name, 1.4s);animation-timing-function:linear;animation-iteration-count:var(--ran-icon-host-spin-animation-name, infinite)}.ran-icon{display:var(--ran-icon-display, flex);align-items:var(--ran-icon-align-items, center);justify-content:var(--ran-icon-justify-content, center)}@keyframes rotate{to{transform:var(--ran-icon-keyframes-to-transform, rotate(360deg))}}";
+const X_LINKS_NS = "http://www.w3.org/1999/xlink";
+const X_LINK_HREF = "xlink:href";
+function Custom() {
+  if (typeof window !== "undefined" && !customElements.get("r-icon")) {
+    class RIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-B_hCY3Wt.js").then((n) => n.j), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/drop.svg": () => import("./drop-4j4abxje.js").then((n) => n.d), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading-scene.svg": () => import("./loading-scene-BMc2wqKm.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`, 5).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();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __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 use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+        const shadowRoot = this.attachShadow({ mode: "closed" });
+        const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+        F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+        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", RIcon);
+  }
+  if (typeof window !== "undefined" && !customElements.get("ra-icon")) {
+    class RaIcon extends HTMLElement {
+      constructor() {
+        super();
+        __publicField(this, "_icon");
+        __publicField(this, "_div");
+        /**
+         * @description: 本地加载 icon
+         */
+        __publicField(this, "loadLocal", () => {
+          return new Promise((resolve, reject) => {
+            __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../assets/icons/add-user.svg": () => import("./add-user-BN1JlY7e.js"), "../../assets/icons/arrow-down.svg": () => import("./arrow-down-B_hCY3Wt.js").then((n) => n.j), "../../assets/icons/book.svg": () => import("./book-nTEFXU2x.js"), "../../assets/icons/check-circle-fill.svg": () => import("./check-circle-fill-B_pd8ZSs.js"), "../../assets/icons/check-circle.svg": () => import("./check-circle-szyAJiap.js"), "../../assets/icons/close-circle-fill.svg": () => import("./close-circle-fill-jSqPPw9i.js"), "../../assets/icons/close-circle.svg": () => import("./close-circle-CwmuN2C6.js"), "../../assets/icons/close.svg": () => import("./close-CFnkhudp.js"), "../../assets/icons/drop.svg": () => import("./drop-4j4abxje.js").then((n) => n.d), "../../assets/icons/eye-close.svg": () => import("./eye-close-BVr3NJtg.js"), "../../assets/icons/eye.svg": () => import("./eye-D_mEt17f.js"), "../../assets/icons/home.svg": () => import("./home-BUQ4USMk.js"), "../../assets/icons/info-circle-fill.svg": () => import("./info-circle-fill-CFeVMdci.js"), "../../assets/icons/info-circle.svg": () => import("./info-circle-COnL5bTJ.js"), "../../assets/icons/loading-scene.svg": () => import("./loading-scene-BMc2wqKm.js"), "../../assets/icons/loading.svg": () => import("./loading-Dcc5RApI.js"), "../../assets/icons/lock.svg": () => import("./lock-Cr7BnmWN.js"), "../../assets/icons/message.svg": () => import("./message-D36_Zo2l.js"), "../../assets/icons/power-off.svg": () => import("./power-off-lQRbiBak.js"), "../../assets/icons/preview.svg": () => import("./preview-CJbz9GjO.js"), "../../assets/icons/setting.svg": () => import("./setting-DemlgzVC.js"), "../../assets/icons/sprite.svg": () => import("./sprite-CH2zLtZy.js"), "../../assets/icons/team.svg": () => import("./team-tl4NJXPC.js"), "../../assets/icons/unlock.svg": () => import("./unlock-CeU74z9n.js"), "../../assets/icons/user.svg": () => import("./user-B-eVXwuk.js"), "../../assets/icons/warning-circle-fill.svg": () => import("./warning-circle-fill-lODUKz0i.js"), "../../assets/icons/warning-circle.svg": () => import("./warning-circle-DDUgEDIv.js") }), `../../assets/icons/${this.name}.svg`, 5).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();
+            });
+          });
+        });
+        /**
+         * @description: NS 加载 icon
+         */
+        __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 use = document.createElementNS(X_LINKS_NS, "use");
+          use.setAttributeNS(X_LINKS_NS, X_LINK_HREF, `../../assets/iconfont/icon.svg#icon-${this.name}`);
+          this._icon.appendChild(use);
+          this._div.appendChild(this._icon);
+        });
+        /**
+         * @description: 根据 name 属性加载对应的 svg
+         */
+        __publicField(this, "setIcon", async () => {
+          if (this.name) {
+            this.loadLocal();
+          }
+        });
+        /**
+         * @description: 设置 icon 的大小
+         */
+        __publicField(this, "setSize", () => {
+          if (this._icon && this.size) {
+            this._icon.setAttribute("width", this.size);
+            this._icon.setAttribute("height", this.size);
+          }
+        });
+        /**
+         * @description: 设置 icon 的颜色
+         */
+        __publicField(this, "setColor", () => {
+          if (this._icon) {
+            this.color ? this._icon.setAttribute("fill", this.color) : this._icon.setAttribute("fill", "currentColor");
+          }
+        });
+        /**
+         * @description: 设置是否旋转和旋转的速度
+         */
+        __publicField(this, "setSpin", () => {
+          if (this.spin) {
+            this.style.setProperty("animation-duration", `${this.spin}s`);
+          }
+        });
+        this._div = document.createElement("div");
+        this._div.setAttribute("class", "ran-icon");
+        this._div.setAttribute("part", "ran-icon");
+      }
+      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.appendChild(this._div);
+        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("ra-icon", RaIcon);
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  index as a,
+  index$1 as i
+};

package/dist/index-D4y9c1Dj.js

@@ -0,0 +1,310 @@
+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);
+import { c as create, i as isMobile } from "./arrow-down-B_hCY3Wt.js";
+import { c as createCustomError, H as HTMLElementSSR } from "./index-DC5EA657.js";
+import "./index-C9z10IgG.js";
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{display:var(--ran-popover-host-display, inline-block)}.ran-popover{box-sizing:var(--ran-popover-box-sizing, border-box);position:var(--ran-popover-position, relative);display:var(--ran-popover-display, inline-block);margin:var(--ran-popover-margin, 0);padding:var(--ran-popover-padding, 0)}.ran-popover-block{display:var(--ran-popover-block-display, inline-block)}";
+const less = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{visibility:hidden;position:absolute}";
+class Content extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "observer");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "_slot");
+    __publicField(this, "callback", (mutations, observer) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          this.onChange(mutation);
+        } else if (mutation.type === "attributes") {
+          this.onChange(mutation);
+        }
+      }
+    });
+    __publicField(this, "onChange", (mutation) => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            type: mutation.type,
+            value: { content: this.children, mutation }
+          }
+        })
+      );
+    });
+    this._slot = create("slot").setAttribute("class", "slot").element;
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    this._shadowDom = shadowRoot;
+    const style = create("style").setTextContent(less);
+    shadowRoot.appendChild(style.element);
+    shadowRoot.appendChild(this._slot);
+    this.observer = new MutationObserver(this.callback);
+  }
+  connectedCallback() {
+    this.observer.observe(this, { attributes: true, childList: true, subtree: true });
+  }
+  disconnectCallback() {
+    this.observer.disconnect();
+  }
+}
+function Custom$1() {
+  if (typeof document !== "undefined" && !customElements.get("r-content")) {
+    customElements.define("r-content", Content);
+    return Content;
+  } else {
+    return createCustomError("document is undefined or r-content is exist");
+  }
+}
+Custom$1();
+const arrowHeight = 4;
+const animationTime = 300;
+const placementDirection = {
+  bottom: {
+    add: "ran-dropdown-down-in",
+    remove: "ran-dropdown-down-out"
+  },
+  top: {
+    add: "ran-dropdown-up-in",
+    remove: "ran-dropdown-up-out"
+  }
+};
+class Popover extends HTMLElementSSR() {
+  constructor() {
+    super();
+    __publicField(this, "_slot");
+    __publicField(this, "popoverBlock");
+    __publicField(this, "popoverContent");
+    __publicField(this, "popoverInner");
+    __publicField(this, "popoverInnerBlock");
+    __publicField(this, "_shadowDom");
+    __publicField(this, "dropDownInTimeId");
+    __publicField(this, "dropDownOutTimeId");
+    __publicField(this, "removeTimeId");
+    __publicField(this, "stopPropagation", (e) => {
+      e.stopPropagation();
+    });
+    __publicField(this, "createContent", (content) => {
+      var _a, _b, _c;
+      if (!content) return;
+      if (!this.popoverContent) {
+        const div = document.createElement("div");
+        this.popoverContent = create("r-dropdown").setAttribute("class", "ran-popover-dropdown").setStyle("display", "none").setStyle("position", "absolute").element;
+        (_a = this.popoverContent) == null ? void 0 : _a.addEventListener("click", this.stopPropagation);
+        this.popoverContent && div.appendChild(this.popoverContent);
+        if (this.trigger.includes("hover") && !isMobile()) {
+          (_b = this.popoverContent) == null ? void 0 : _b.addEventListener("mouseleave", this.blur);
+          (_c = this.popoverContent) == null ? void 0 : _c.addEventListener("mouseenter", this.removeDropDownTimeId);
+        }
+        document.body.appendChild(div);
+      }
+      if (this.popoverContent && content.length > 0) {
+        this.popoverContent.innerHTML = "";
+        const Fragment = document.createDocumentFragment();
+        for (const child of content) {
+          Fragment.appendChild(child);
+        }
+        this.popoverContent.appendChild(Fragment);
+      }
+    });
+    __publicField(this, "watchContent", (e) => {
+      const { value } = e.detail;
+      this.createContent(value.content);
+    });
+    /**
+     * @description: 焦点移除的情况，需要移除下拉框
+     * @return {*}
+     */
+    __publicField(this, "blur", () => {
+      if (this.removeTimeId) {
+        this.removeDropDownTimeId();
+      }
+      this.removeTimeId = setTimeout(() => {
+        this.removeDropDownTimeId();
+        this.setDropdownDisplayNone();
+      }, 300);
+    });
+    __publicField(this, "removeDropDownTimeId", () => {
+      if (this.trigger.includes("hover") && !isMobile()) {
+        clearTimeout(this.removeTimeId);
+        this.removeTimeId = void 0;
+      }
+    });
+    /**
+     * @description: 添加 dropdown
+     * @return {*}
+     */
+    __publicField(this, "setDropdownDisplayBlock", () => {
+      var _a;
+      if (this.dropDownInTimeId) return;
+      if (this.popoverContent && this.popoverContent.style.display !== "block") {
+        this.popoverContent.setAttribute("transit", placementDirection[this.placement].add);
+        (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "block");
+        this.dropDownInTimeId = setTimeout(() => {
+          this.popoverContent && this.popoverContent.removeAttribute("transit");
+          clearTimeout(this.dropDownInTimeId);
+          this.dropDownInTimeId = void 0;
+        }, animationTime);
+      }
+    });
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    __publicField(this, "setDropdownDisplayNone", () => {
+      if (this.dropDownOutTimeId) return;
+      if (this.popoverContent && this.popoverContent.style.display !== "none") {
+        this.popoverContent.setAttribute("transit", placementDirection[this.placement].remove);
+        this.dropDownOutTimeId = setTimeout(() => {
+          var _a;
+          (_a = this.popoverContent) == null ? void 0 : _a.style.setProperty("display", "none");
+          this.popoverContent && this.popoverContent.removeAttribute("transit");
+          clearTimeout(this.dropDownOutTimeId);
+          this.dropDownOutTimeId = void 0;
+        }, animationTime);
+      }
+    });
+    __publicField(this, "placementPosition", () => {
+      if (!this.popoverContent) return;
+      const rect = this.getBoundingClientRect();
+      const { top, left, bottom, width, height } = rect;
+      let popoverTop = bottom + window.scrollY + arrowHeight;
+      let popoverLeft = left + window.scrollX;
+      const root = document.getElementById(this.getPopupContainerId);
+      const popoverContentRect = this.popoverContent.getBoundingClientRect();
+      if (this.placement === "top") {
+        popoverTop = top + window.scrollY - popoverContentRect.height - arrowHeight;
+        if (this.getPopupContainerId && root) {
+          const rootRect = root.getBoundingClientRect();
+          popoverLeft = left - rootRect.left;
+          popoverTop = top - root.getBoundingClientRect().top - this.popoverContent.clientHeight - arrowHeight;
+          popoverLeft = left - root.getBoundingClientRect().left;
+        }
+      }
+      this.popoverContent.style.setProperty("inset", `${popoverTop}px auto auto ${popoverLeft}px`);
+      this.popoverContent.style.setProperty("--ran-x", `${popoverLeft}px`);
+      this.popoverContent.style.setProperty("--ran-y", `${popoverTop}px`);
+      this.popoverContent.style.setProperty("--ran-popover-width", `${width}px`);
+      this.popoverContent.style.setProperty("--ran-popover-height", `${popoverContentRect.height}px`);
+    });
+    __publicField(this, "hoverPopover", (e) => {
+      this.clickPopover(e);
+    });
+    __publicField(this, "clickContent", (e) => {
+      e.stopPropagation();
+    });
+    __publicField(this, "clickPopover", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.setDropdownDisplayBlock();
+      this.placementPosition();
+    });
+    __publicField(this, "clickRemovePopover", (e) => {
+      this.hoverRemovePopover(e);
+    });
+    __publicField(this, "popoverTrigger", () => {
+      this.removeEventListener("mouseenter", this.hoverPopover);
+      this.removeEventListener("mouseleave", this.blur);
+      this.removeEventListener("click", this.clickPopover);
+      if (this.trigger.includes("hover")) {
+        this.addEventListener("mouseenter", this.hoverPopover);
+        this.addEventListener("mouseleave", this.blur);
+      }
+      this.addEventListener("click", this.clickPopover);
+    });
+    __publicField(this, "hoverRemovePopover", (e) => {
+      e.stopPropagation();
+      this.setDropdownDisplayNone();
+    });
+    __publicField(this, "changePlacement", () => {
+      var _a;
+      if (this.placement) {
+        const arrow = this.placement === "bottom" ? "top" : "bottom";
+        (_a = this.popoverContent) == null ? void 0 : _a.setAttribute("arrow", arrow);
+      }
+    });
+    this._slot = document.createElement("slot");
+    this._slot.setAttribute("class", "slot");
+    this.popoverBlock = document.createElement("div");
+    this.popoverBlock.setAttribute("class", "ran-popover-block");
+    this.popoverBlock.setAttribute("role", "tooltip");
+    this.popoverBlock.appendChild(this._slot);
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    this._shadowDom = shadowRoot;
+    shadowRoot.appendChild(this.popoverBlock);
+  }
+  static get observedAttributes() {
+    return ["placement", "arrow", "trigger"];
+  }
+  get placement() {
+    return this.getAttribute("placement") || "top";
+  }
+  set placement(value) {
+    this.setAttribute("placement", value);
+  }
+  get arrow() {
+    return this.getAttribute("arrow") || "";
+  }
+  set arrow(value) {
+    this.setAttribute("arrow", value);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") || "hover";
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get getPopupContainerId() {
+    return this.getAttribute("getPopupContainerId") || "";
+  }
+  set getPopupContainerId(value) {
+    this.setAttribute("getPopupContainerId", value);
+  }
+  connectedCallback() {
+    for (const element of this.children) {
+      if (element.tagName === "R-CONTENT") {
+        element.addEventListener("change", this.watchContent);
+        this.createContent(element.children);
+      }
+    }
+    this.popoverTrigger();
+    this.changePlacement();
+    document.addEventListener("click", this.clickRemovePopover);
+  }
+  disconnectCallback() {
+    this.removeEventListener("mouseenter", this.hoverPopover);
+    this.removeEventListener("mouseleave", this.hoverRemovePopover);
+    this.removeEventListener("click", this.hoverPopover);
+    document.removeEventListener("click", this.clickRemovePopover);
+  }
+  attributeChangedCallback(n, o, v) {
+    if (o !== v) {
+      if (n === "trigger") {
+        this.popoverTrigger();
+      }
+      if (n === "placement") {
+        this.changePlacement();
+      }
+    }
+  }
+}
+function Custom() {
+  if (typeof document !== "undefined" && !customElements.get("r-popover")) {
+    customElements.define("r-popover", Popover);
+    return Popover;
+  } else {
+    return createCustomError("document is undefined or r-popover is exist");
+  }
+}
+const index = Custom();
+const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Popover,
+  default: index
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Popover as P,
+  index as a,
+  index$1 as i
+};

package/dist/{index-b7790662.js → index-DAxs7Dd2.js}

@@ -1,10 +1,7 @@
 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 = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}\n";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}";
 function CustomElement() {
   if (typeof window !== "undefined" && !customElements.get("r-tab")) {
     class TabPane extends HTMLElement {
@@ -100,14 +97,10 @@ function CustomElement() {
       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);
+          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);
         }
       }
     }