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;
};
import { b as createDocumentFragment, a as addClassToElement } from "./utils-74Icp-PI.js";
import { i as isDisabled, r as removeClassToElementChild } from "./index-CSnBqUsQ.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}html.dark .r-preview-mask .r-preview-contain{background-color:#191919!important}.ran-tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto;text-align:start}.ran-tab-header{position:relative;overflow:hidden;scroll-behavior:smooth}.ran-tab-header-nav{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center}.ran-tab-header-nav::-webkit-scrollbar{display:none}.ran-tab-header-nav-item{flex-shrink:0}.ran-tab-header-nav .active{color:var(--active-color, #1890ff)}.ran-tab-header-line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--line-color, #1890ff);transition:.2s}.ran-tab-content{overflow:hidden}.ran-tab-content-wrap{display:flex;width:100%;height:100%;transition:.2s}:host([type="line"]) .ran-tab-header-nav-item{border:solid 1px transparent}:host([type="line"]) .ran-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"]) .ran-tab-header-line{transition:none;visibility:hidden}:host([type="line"]) .ran-tab-header-line:after,:host([type="line"]) .ran-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"]) .ran-tab-header-line:after{left:100%}:host([type="line"]) .ran-tab-header-line:before{right:100%}:host([align="center"]) .ran-tab-header-nav{justify-content:center}:host([align="center"]) .ran-tab-header-line{left:50%}:host([align="end"]) .ran-tab-header-nav{justify-content:flex-end}';
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");
        /**
         * @description: 构建tabPane组件key值和index的映射，同时判断一个tabs下的tabPane key值不能重复
         * @param {string} key
         * @param {number} index
         */
        __publicField(this, "initTabHeaderKeyMapIndex", (key, index2) => {
          const value = this.tabHeaderKeyMapIndex[key];
          if (value) {
            throw new Error("tab 组件的 key 值存在重复, 或者某个 tab 组件缺少 key 属性");
          } else {
            this.tabHeaderKeyMapIndex[key] = index2;
          }
        });
        /**
         * @description: 初始化tabLine的位置，主要是当tabs的align属性为center时需要处理
         */
        __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)`);
        });
        /**
         * @description: 初始化tabLine的位置，主要是当tabs的align属性为end时需要处理
         */
        __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)`);
        });
        /**
         * @description: 通过key值设置tabLine的位置
         * @param {string} key
         */
        __publicField(this, "setTabLine", (key) => {
          if (key) {
            const index2 = this.tabHeaderKeyMapIndex[key];
            const TabHeader = this._nav.children[index2];
            const { width = 0 } = TabHeader.getBoundingClientRect();
            this._line.style.setProperty("width", `${width}px`);
            let distance = 0;
            for (let i = 0; i < index2; i++) {
              const item = this._nav.children[i];
              const { width: width2 = 0 } = item.getBoundingClientRect();
              distance += width2;
            }
            this._line.style.setProperty("transform", `translateX(${distance}px)`);
          }
        });
        /**
         * @description: 通过传入的key值设置tabContent
         */
        __publicField(this, "setTabContent", (key) => {
          if (key) {
            const index2 = this.tabHeaderKeyMapIndex[key];
            this._wrap.style.setProperty("transform", `translateX(${index2 * -100}%)`);
          }
        });
        /**
         * @description: 根据点击设置tabLine的位置
         * @param {Event} e
         * @param {number} index
         * @param {number} width
         */
        __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);
            removeClassToElementChild(this._nav, "active");
            addClassToElement(tabHeader, "active");
          }
        });
        /**
         * @description: tabPane 设置属性，需要在 tabs 上展示时触发
         * @param {string} key
         * @param {string} value
         */
        __publicField(this, "updateAttribute", (key, attribute, value = "") => {
          var _a, _b;
          const index2 = this.tabHeaderKeyMapIndex[key];
          if (key && value && this._nav.children[index2]) {
            (_a = this._nav.children[index2]) == null ? void 0 : _a.setAttribute(attribute, value);
          } else {
            (_b = this._nav.children[index2]) == null ? void 0 : _b.removeAttribute(attribute);
          }
        });
        /**
         * @description: 初始化tabs的active属性和tabLine,tabContent
         */
        __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 index2 = tabHeaderList.findIndex((item) => item === initTabHeader);
          const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("r-key")) || `${index2}`;
          if (key != null) {
            this.setAttribute("active", `${key}`);
            addClassToElement(initTabHeader, "active");
            this.setTabContent(key);
            setTimeout(() => {
              this.setTabLine(key);
            }, 200);
          }
        });
        /**
         * @description: 监听slot组件的添加/删除/替换操作，进行tabs初始化
         * @return {*}
         */
        __publicField(this, "listenSlotChange", () => {
          const slots = this._slot.assignedElements();
          slots.forEach((item, index2) => {
            const tabPane = this.createTabHeader(item, index2);
            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();
          }
        });
        /**
         * @description: 初始化tab
         */
        __publicField(this, "initTab", () => {
          this._slot.addEventListener("slotchange", this.listenSlotChange);
        });
        /**
         * @description: 卸载tab
         */
        __publicField(this, "unloadTab", () => {
          this._slot.removeEventListener("slotchange", this.listenSlotChange);
        });
        this._container = document.createElement("div");
        this._container.setAttribute("class", "ran-tab");
        this._header = document.createElement("div");
        this._header.setAttribute("class", "ran-tab-header");
        this._nav = document.createElement("div");
        this._nav.setAttribute("class", "ran-tab-header-nav");
        this._line = document.createElement("div");
        this._line.setAttribute("class", "ran-tab-header-line");
        this._content = document.createElement("div");
        this._content.setAttribute("class", "ran-tab-content");
        this._wrap = document.createElement("div");
        this._wrap.setAttribute("class", "ran-tab-content-wrap");
        this._slot = document.createElement("slot");
        this._wrap.appendChild(this._slot);
        this._content.appendChild(this._wrap);
        this._header.appendChild(createDocumentFragment([this._nav, this._line]));
        this._container.appendChild(createDocumentFragment([this._header, 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);
        }
      }
      /**
       * @description: 根据传入的tabPane生成tabs的头部
       * @param {Element} tabPane
       * @param {number} index
       * @return {Element}
       */
      createTabHeader(tabPane, index2) {
        const label = tabPane.getAttribute("label") || "";
        const icon = tabPane.getAttribute("icon") || "";
        const iconSize = tabPane.getAttribute("iconSize") || "";
        const key = tabPane.getAttribute("r-key") || `${index2}`;
        const type = tabPane.getAttribute("type") || "text";
        this.initTabHeaderKeyMapIndex(key, index2);
        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;
  }
}
const index = CustomElement();
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
};
