ranui 0.1.0-alpha

package/dist/index.js

@@ -0,0 +1,677 @@
+const f7170ee498e0dd32cbdcb63fba8f75cc$4 = ':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])):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;margin:4px 15px}\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;
+};
+class CustomElement$4 extends HTMLElement {
+  constructor() {
+    super();
+    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");
+      }
+    };
+    this.mouseLeave = () => {
+      this.style.removeProperty("--ran-x");
+      this.style.removeProperty("--ran-y");
+    };
+    const slot = document.createElement("slot");
+    this._btn = document.createElement("div");
+    this._btn.appendChild(slot);
+    slot.setAttribute("class", "slot");
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$4;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    shadowRoot.appendChild(this._btn);
+  }
+  static get observedAttributes() {
+    return ["disabled", "type"];
+  }
+  get disabled() {
+    return isDisabled(this);
+  }
+  set disabled(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("disabled");
+    } else {
+      this.setAttribute("disabled", "");
+    }
+  }
+  connectedCallback() {
+    this._btn.addEventListener("mousedown", this.mousedown);
+    this._btn.addEventListener("mouseleave", this.mouseLeave);
+  }
+  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");
+      }
+    }
+  }
+}
+function Custom$2() {
+  if (!customElements.get("r-button")) {
+    customElements.define("r-button", CustomElement$4);
+  }
+}
+Custom$2();
+const f7170ee498e0dd32cbdcb63fba8f75cc$3 = "";
+class CustomElement$3 extends HTMLElement {
+  constructor() {
+    super();
+    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$3;
+    shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
+    shadowRoot.appendChild(this._container);
+  }
+  static get observedAttributes() {
+    return ["fallback"];
+  }
+  get fallback() {
+    return this.getAttribute("fallback");
+  }
+  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);
+  }
+}
+function Custom$1() {
+  if (!customElements.get("r-img")) {
+    customElements.define("r-img", CustomElement$3);
+  }
+}
+Custom$1();
+const f7170ee498e0dd32cbdcb63fba8f75cc$2 = '.input{position:relative;display:inline-block;width:100%;min-width:0;padding:2px 8px;color:#000000d9;font-size:12px;line-height:1.5715;background-color:#fff;background-image:none;border:1px solid #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[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:hover~.input-label{color:#999}.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;transform-origin:left;padding:0 .2em;color:#999;backdrop-filter:blur(10px);opacity:.9}\n';
+class CustomElement$2 extends HTMLElement {
+  constructor() {
+    super();
+    this.inputValue = (event) => {
+      event.stopPropagation();
+      const target = event.target;
+      this.value = target ? target.value : "";
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    };
+    this.change = () => {
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    };
+    this.focus = () => {
+      this.dispatchEvent(
+        new CustomEvent("focus", {
+          detail: {
+            value: this.value
+          }
+        })
+      );
+    };
+    this.checkout = () => {
+    };
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
+    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc$2;
+    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",
+      "pattern",
+      "required",
+      "placeholder",
+      "type"
+    ];
+  }
+  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 warning() {
+    return this.getAttribute("warning");
+  }
+  set warning(value) {
+    if (!value) {
+      this.removeAttribute("warning");
+    } else {
+      this.setAttribute("warning", value);
+    }
+  }
+  get pattern() {
+    return this.getAttribute("pattern");
+  }
+  set pattern(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("pattern");
+    } else {
+      this.setAttribute("pattern", value);
+    }
+  }
+  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 name() {
+    return this.getAttribute("name") || "";
+  }
+  set name(value) {
+    this.setAttribute("name", 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");
+      }
+    }
+  }
+  listenRequired(name, value) {
+    if (name === "required" && this._input) {
+      if (value && value !== "false") {
+        this._input.setAttribute("required", "");
+      } else {
+        this._input.removeAttribute("required");
+      }
+    }
+  }
+  listenPattern(name, value) {
+    if (name === "pattern" && this._input) {
+      if (value && value !== "false") {
+        this._input.setAttribute("pattern", value);
+      } else {
+        this._input.removeAttribute("pattern");
+      }
+    }
+  }
+  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");
+      }
+    }
+  }
+  connectedCallback() {
+    if (this.value) {
+      this._input.value = this.value;
+      this._container.setAttribute("value", this.value);
+    }
+    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("change", this.change);
+    this._input.addEventListener("focus", this.focus);
+  }
+  disconnectCallback() {
+    this._input.removeEventListener("input", this.inputValue);
+    this._input.removeEventListener("change", this.change);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.listenPlaceholder(name, newValue);
+    this.listenRequired(name, newValue);
+    this.listenPattern(name, newValue);
+    this.listenLabel(name, newValue);
+  }
+}
+function Custom() {
+  if (!customElements.get("r-input")) {
+    customElements.define("r-input", CustomElement$2);
+  }
+}
+Custom();
+function Modal() {
+  const template = document.createElement("template");
+  const div = document.createElement("div");
+  div.setAttribute("class", "modal-content");
+  const slot = document.createElement("slot");
+  slot.setAttribute("name", "modal-content");
+  div.appendChild(slot);
+  template == null ? void 0 : template.appendChild(div);
+  class Modal2 extends HTMLElement {
+    constructor() {
+      super();
+      const templateContent = template.content;
+      const shadowRoot = this.attachShadow({ mode: "open" });
+      const wrap = document.createElement("div");
+      const modal = document.createElement("div");
+      const header = document.createElement("header");
+      const btnClose = document.createElement("span");
+      const mask = document.createElement("div");
+      const footer = document.createElement("footer");
+      const btnCancel = document.createElement("xu-button");
+      const btnOk = document.createElement("xu-button");
+      wrap.setAttribute("class", "wrap");
+      modal.setAttribute("class", "xu-modal");
+      let title = this.getAttribute("title");
+      header.textContent = title;
+      btnClose.setAttribute("class", "xu-close");
+      btnClose.textContent = "x";
+      header.appendChild(btnClose);
+      modal.appendChild(header);
+      btnClose.addEventListener("click", () => {
+        wrap.style.display = "none";
+      });
+      modal.appendChild(templateContent.cloneNode(true));
+      btnOk.setAttribute("type", "primary");
+      const slot1 = document.createElement("span");
+      slot1.setAttribute("slot", "btn-content");
+      slot1.textContent = "\u786E\u8BA4";
+      btnOk.appendChild(slot1);
+      const slot2 = document.createElement("span");
+      slot2.setAttribute("slot", "btn-content");
+      slot2.textContent = "\u53D6\u6D88";
+      btnCancel.appendChild(slot2);
+      footer.appendChild(btnCancel);
+      footer.appendChild(btnOk);
+      modal.appendChild(footer);
+      mask.setAttribute("class", "mask");
+      wrap.appendChild(mask);
+      wrap.appendChild(modal);
+      const style = document.createElement("style");
+      this.getAttribute("width");
+      const isVisible = this.getAttribute("visible");
+      style.textContent = `
+        .wrap {
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          display: ${isVisible === "true" ? "block" : "none"}
+        }
+        // \u5FFD\u7565\u90E8\u5206\u6837\u5F0F
+      `;
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(wrap);
+    }
+    connectedCallback(el) {
+      console.log("insert dom", el);
+    }
+    disconnectedCallback() {
+      console.log("Custom square element removed from page.");
+    }
+    adoptedCallback() {
+      console.log("Custom square element moved to new page.");
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      var _a;
+      if (oldValue && this.shadowRoot) {
+        const children = [...this.shadowRoot.children];
+        for (let i = 0; i < children.length; i++) {
+          if (children[i].nodeName === "DIV" && ((_a = children[i]) == null ? void 0 : _a.className) === "wrap") {
+            if (newValue === "true") {
+              children[i].style.display = "block";
+            } else {
+              children[i].style.display = "none";
+            }
+          }
+        }
+      }
+    }
+    static get observedAttributes() {
+      return ["visible"];
+    }
+  }
+  window.customElements.define("xu-modal", Modal2);
+}
+Modal();
+const f7170ee498e0dd32cbdcb63fba8f75cc$1 = "";
+class TabPane extends HTMLElement {
+  constructor() {
+    super();
+    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"];
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(value) {
+    this.setAttribute("label", value);
+  }
+  get icon() {
+    return this.getAttribute("icon");
+  }
+  get key() {
+    return this.getAttribute("key");
+  }
+  set key(value) {
+    if (value) {
+      this.setAttribute("key", value);
+    } else {
+      this.removeAttribute("key");
+    }
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(value) {
+    if (!value || value === "false") {
+      this.removeAttribute("disabled");
+    } else {
+      this.setAttribute("disabled", value);
+    }
+  }
+  onClick(e) {
+    console.log("e", e);
+  }
+  connectedCallback() {
+    this._div.addEventListener("click", this.onClick);
+  }
+  disconnectCallback() {
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+  }
+}
+function CustomElement$1() {
+  if (!customElements.get("r-tab")) {
+    customElements.define("r-tab", TabPane);
+  }
+}
+CustomElement$1();
+const f7170ee498e0dd32cbdcb63fba8f75cc = ".tab ::slotted(r-tab){box-sizing:border-box;width:100%;height:100%;padding:10px;flex-shrink:0;overflow:auto}.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_line{position:absolute;width:0;margin-top:-2px;height:2px;border-radius:2px;background:var(--themeColor, #1890ff);transition:.2s}.tab-content{overflow:hidden}.tab-content_wrap{display:flex;width:100%;height:100%;transition:.2s}\n";
+class Tabs extends HTMLElement {
+  constructor() {
+    super();
+    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;
+      }
+    };
+    this.setTabLine = (key) => {
+      if (key) {
+        const index = this.tabHeaderKeyMapIndex[key];
+        this._line.style.setProperty("transform", `translateX(${100 * index}%)`);
+      }
+    };
+    this.setTabContent = (key) => {
+      if (key) {
+        const index = this.tabHeaderKeyMapIndex[key];
+        this._wrap.style.setProperty("transform", `translateX(${index * -100}%)`);
+      }
+    };
+    this.clickTabHead = (e) => {
+      const tabHeader = e.target;
+      const key = tabHeader.getAttribute("ran-key");
+      const disabled = isDisabled(tabHeader);
+      if (!disabled && key) {
+        this.setAttribute("active", key);
+        this.setTabLine(key);
+        this.setTabContent(key);
+      }
+    };
+    this.initActive = () => {
+      const tabHeaderList = [...this._nav.children];
+      const initTabHeader = tabHeaderList.filter((item) => !isDisabled(item)).shift();
+      if (!initTabHeader)
+        return;
+      const index = tabHeaderList.findIndex((item) => item === initTabHeader);
+      const key = (initTabHeader == null ? void 0 : initTabHeader.getAttribute("ran-key")) || `${index}`;
+      if (this.active === null && key !== null) {
+        this.setAttribute("active", `${key}`);
+        const { width = 0 } = initTabHeader.getBoundingClientRect();
+        this._line.style.setProperty("width", `${width}px`);
+        this.setTabLine(key);
+        this.setTabContent(key);
+      }
+    };
+    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();
+    };
+    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"];
+  }
+  get align() {
+    return this.getAttribute("align") || "start";
+  }
+  set align(value) {
+    this.setAttribute("align", 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");
+    }
+  }
+  set type(value) {
+    this.setAttribute("type", value);
+  }
+  createTabHeader(tabPane, index) {
+    const label = tabPane.getAttribute("label") || "";
+    const key = tabPane.getAttribute("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);
+    isDisabled(tabPane) && tabHeader.setAttribute("disabled", "");
+    tabHeader.setAttribute("ran-key", key);
+    tabHeader.innerHTML = label;
+    return tabHeader;
+  }
+  connectedCallback() {
+    this._slot.addEventListener("slotchange", this.listenSlotChange);
+  }
+  disconnectCallback() {
+    this._slot.removeEventListener("slotchange", this.listenSlotChange);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.dispatchEvent(new CustomEvent("change", {
+        detail: {
+          active: this.active
+        }
+      }));
+    }
+  }
+}
+function CustomElement() {
+  if (!customElements.get("r-tabs")) {
+    customElements.define("r-tabs", Tabs);
+  }
+}
+CustomElement();
+//# sourceMappingURL=index.js.map