ranui/dist/button-DD4YR3Oo.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { T as o, _ as c, i, p as d } from "./factory-WDxu11V0.js";
import { t as l } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as s, c as u, l as a, o as h, t as v } from "./utils-U-9uH7EX.js";
import { a as f, n as p } from "./ssr-BzykYefm.js";
import { n as m } from "./a11y-ZSlIUH9B.js";
import { currentDevice as b } from "ranuts/utils";
var g = ':host{box-sizing:var(--ran-btn-box-sizing, border-box);position:var(--ran-btn-position, relative);display:var(--ran-btn-display, inline-flex);align-self:var(--ran-btn-align-self, flex-start);background-image:var(--ran-btn-background-image, none);box-shadow:var(--ran-btn-box-shadow, var(--ran-skin-raised-shadow, 0 2px #00000004));border-radius:var(--ran-btn-border-radius, var(--ran-radius-sm, 6px));cursor:var(--ran-btn-cursor, pointer);-webkit-user-select:var(--ran-btn-user-select, none);user-select:var(--ran-btn-user-select, none);touch-action:var(--ran-btn-touch-action, manipulation);overflow:var(--ran-btn-overflow, hidden);pointer-events:var(--ran-btn-pointer-events, auto)}:host .ran-btn{box-sizing:var(--ran-btn-surface-box-sizing, border-box);position:var(--ran-btn-surface-position, relative);display:var(--ran-btn-surface-display, block);background-image:var(--ran-btn-surface-background-image, none);cursor:var(--ran-btn-surface-cursor, pointer);transition:var(--ran-btn-surface-transition, opacity var(--ran-motion-duration-base, .2s) var(--ran-motion-ease-standard, cubic-bezier(.645, .045, .355, 1)));-webkit-user-select:var(--ran-btn-surface-user-select, none);user-select:var(--ran-btn-surface-user-select, none);touch-action:var(--ran-btn-surface-touch-action, manipulation);border-radius:var(--ran-btn-border-radius, var(--ran-radius-sm, 6px));background:var(--ran-btn-surface-background, var(--ran-color-bg-elevated, #fff))}:host,:host(:active),:host(:focus){outline:0;-webkit-tap-highlight-color:transparent}:host .ran-btn,:host(:active) .ran-btn,:host(:focus) .ran-btn{outline:var(--ran-btn-surface-outline, 0)}:host(:focus-visible){outline:var(--ran-btn-focus-outline, 2px solid var(--ran-color-primary));outline-offset:var(--ran-btn-focus-outline-offset, 2px)}:host([type="primary"]) .ran-btn-content{background-color:var(--ran-btn-background, var(--ran-color-primary, #171717));background-image:var(--ran-btn-content-background-image, none);border-color:var(--ran-btn-border-color, var(--ran-color-primary, #171717));color:var(--ran-btn-color, var(--ran-color-primary-text, #fff))}:host([type="primary"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, var(--ran-color-primary-text, #fff) 10%, transparent 10.01%))}:host([type="primary"]:not([disabled]):active) .ran-btn-content{background-color:var(--ran-btn-active-background, var(--ran-color-primary-active, #4d4d4d));border-color:var(--ran-btn-active-border-color, var(--ran-color-primary-active, #4d4d4d))}@media(min-width:1024px){:host(:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-hover-border-color, var(--ran-color-border-hover, #c9c9c9));color:var(--ran-btn-hover-color, var(--ran-color-text, #171717))}:host([type="primary"]:not([disabled]):hover) .ran-btn-content{background-color:var(--ran-btn-hover-background, var(--ran-color-primary-hover, #383838));border-color:var(--ran-btn-hover-border-color, var(--ran-color-primary-hover, #383838));color:var(--ran-btn-hover-color, var(--ran-color-primary-text, #fff))}:host([type="warning"]:not([disabled]):hover) .ran-btn-content{border-color:var(--ran-btn-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-warning-background, var(--ran-color-danger, #ff4d4f));color:var(--ran-btn-warning-color, #fff)}}:host([type="warning"]) .ran-btn-content{border-color:var(--ran-btn-warning-border-color, var(--ran-color-danger, #ff4d4f));background-color:var(--ran-btn-warning-background, var(--ran-color-danger, #ff4d4f));background-image:var(--ran-btn-content-background-image, none);color:var(--ran-btn-warning-color, #fff)}:host([type="warning"]:not([disabled])) .ran-btn:after{background-image:var(--ran-btn-after-background-image, radial-gradient(circle, #fff 10%, transparent 10.01%))}:host([type="text"]){box-shadow:var(--ran-btn-text-box-shadow, none)}:host([type="text"]) .ran-btn{background:var(--ran-btn-text-surface-background, transparent)}:host([type="text"]) .ran-btn-content{border:var(--ran-btn-text-border, none)}:host([disabled]){cursor:var(--ran-btn-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-disabled-pointer-events, all);opacity:var(--ran-btn-disabled-opacity, .6)}:host([disabled]) .ran-btn{cursor:var(--ran-btn-surface-disabled-cursor, not-allowed);pointer-events:var(--ran-btn-surface-disabled-pointer-events, all);opacity:var(--ran-btn-surface-disabled-opacity, .6)}:host(:not([disabled]):active) .ran-btn:after{transform:var(--ran-btn-after-transform, translate(-50%, -50%) scale(0));opacity:var(--ran-btn-after-opacity, .3);transition:var(--ran-btn-after-transition, 0s)}:host(:not([disabled]):active) .ran-btn-content{transform:var(--ran-btn-active-transform, scale(.96))}@media(min-width:1024px){:host(:not([disabled],[effect])) .ran-btn: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,var(--ran-gray-alpha-400, #00000014) 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:var(--ran-btn-slot-display, block)}:host([hidden]){display:none}.ran-btn-content{display:var(--ran-btn-content-display, flex);justify-content:var(--ran-btn-content-justify-content, space-between);align-items:var(--ran-btn-align-items, center);padding:var(--ran-btn-padding, var(--ran-space-2, 8px) var(--ran-space-4, 16px));border:var(--ran-btn-border, 1px solid transparent);border-image-source:var(--ran-btn-border-image-source, none);border-image-slice:var(--ran-btn-border-image-slice, 8);border-image-width:var(--ran-btn-border-image-width, var(--ran-skin-border-image-width, 4px));border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-btn-border-radius, var(--ran-radius-sm, 6px));border-color:var(--ran-btn-border-color, var(--ran-color-border, #eaeaea));color:var(--ran-btn-color, var(--ran-color-text, #000000d9));line-height:var(--ran-btn-line-height, var(--ran-text-button-line-height, 1));font-size:var(--ran-btn-font-size, var(--ran-text-button-size, 14px));font-weight:var(--ran-btn-font-weight, var(--ran-text-button-weight, 500));font-family:var(--ran-btn-font-family, var(--ran-skin-font-family, inherit));white-space:var(--ran-btn-white-space, nowrap);text-align:var(--ran-btn-text-align, center);box-sizing:var(--ran-btn-content-box-sizing, border-box);transition:var(--ran-btn-transition, transform var(--ran-motion-duration-base, .2s) var(--ran-motion-ease-spring, cubic-bezier(.34, 1.26, .5, 1)))}.ran-btn-content .icon{margin-right:var(--ran-btn-icon-margin-right, var(--ran-space-1, 4px))}@media(prefers-reduced-motion:reduce){.ran-btn-content{transition:none}}', y = class extends p {
  _btn;
  _btnContent;
  _iconElement;
  _slot;
  _shadowDom;
  _events = new l();
  debounceTimeId;
  static get observedAttributes() {
    return [
      "disabled",
      "icon",
      "effect",
      "iconSize",
      "type",
      "aria-label",
      "sheet"
    ];
  }
  constructor() {
    super(), this._shadowDom = v(this, g);
    const t = o(), r = o(), e = i().class("ran-btn").attr("part", "button").role("button").tabIndex(0).children(i().class("ran-btn-content").ref(t).attr("part", "content").children(d().ref(r).class("slot"))).build();
    this._shadowDom.appendChild(e), this._btn = e, this._btnContent = s(t, "content"), this._slot = s(r, "slot");
  }
  get sheet() {
    return this.getAttribute("sheet") || "";
  }
  set sheet(t) {
    this.setAttribute("sheet", t || ""), this.handlerExternalCss();
  }
  get disabled() {
    return a(this);
  }
  set disabled(t) {
    !t || t === "false" ? (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")) : (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"));
  }
  get iconSize() {
    return this.getAttribute("iconSize") || "";
  }
  set iconSize(t) {
    !t || t === "false" ? this.removeAttribute("iconSize") : (this.setAttribute("iconSize", t), this.setIcon());
  }
  get icon() {
    return this.getAttribute("icon") || "";
  }
  set icon(t) {
    !t || t === "false" ? this.removeAttribute("icon") : (this.setAttribute("icon", t), this.setIcon());
  }
  get effect() {
    return this.getAttribute("effect") || "";
  }
  set effect(t) {
    u.includes(t) || !t ? this.removeAttribute("effect") : this.setAttribute("effect", t);
  }
  get type() {
    return this.getAttribute("type") || "";
  }
  set type(t) {
    t ? this.setAttribute("type", t) : this.removeAttribute("type");
  }
  setIcon = () => {
    if (typeof document > "u" || !this._slot) return;
    const t = this.icon;
    if (!t) {
      this._iconElement && (this._iconElement.remove(), this._iconElement = void 0);
      return;
    }
    if (this._iconElement) this._iconElement.setAttribute("name", t);
    else {
      let n = this._shadowDom.querySelector("r-icon");
      n || (n = c("r-icon").attr("color", "currentColor").class("icon").build(), this._slot.insertAdjacentElement("beforebegin", n)), this._iconElement = n, this._iconElement.setAttribute("name", t);
    }
    const r = Number.parseFloat(getComputedStyle(this._btnContent).fontSize) || 14, e = this.iconSize || `${Math.round(r * 1.15)}`;
    this._iconElement.setAttribute("size", String(e));
  };
  mousedown = (t) => {
    if (b() === "pc" && !this.disabled) {
      this.debounceMouseEvent();
      const { left: r, top: e } = this.getBoundingClientRect();
      this._btn.style.setProperty("--ran-x", `${t.clientX - r}px`), this._btn.style.setProperty("--ran-y", `${t.clientY - e}px`);
    }
  };
  mouseup = () => {
    b() === "pc" && (this.debounceTimeId || (this.debounceTimeId = setTimeout(() => {
      this._btn.style.removeProperty("--ran-x"), this._btn.style.removeProperty("--ran-y"), this.debounceMouseEvent();
    }, 600)));
  };
  keydown = (t) => {
    a(this) || m(t) && (t.preventDefault(), this.click());
  };
  debounceMouseEvent = () => {
    this.debounceTimeId && (clearTimeout(this.debounceTimeId), this.debounceTimeId = void 0);
  };
  handlerExternalCss = () => {
    h(this, this._shadowDom, "sheet", null, this.sheet);
  };
  syncA11yState = () => {
    const t = a(this);
    this._btn.setAttribute("aria-disabled", t ? "true" : "false"), this._btn.tabIndex = t ? -1 : 0, t ? (this.setAttribute("aria-disabled", "true"), this._btnContent.setAttribute("disabled", "true")) : (this.removeAttribute("aria-disabled"), this._btnContent.removeAttribute("disabled"));
  };
  connectedCallback() {
    this.handlerExternalCss(), this.setIcon(), this.syncA11yState(), this.syncAriaLabel(), this._events.on(this._btn, "mousedown", this.mousedown).on(this._btn, "mouseup", this.mouseup).on(this._btn, "keydown", this.keydown);
  }
  disconnectedCallback() {
    this.debounceMouseEvent(), this._events.abort();
  }
  syncAriaLabel = () => {
    const t = this.getAttribute("aria-label");
    t === null ? this._btn.removeAttribute("aria-label") : this._btn.setAttribute("aria-label", t);
  };
  attributeChangedCallback(t, r, e) {
    r !== e && (t === "disabled" && this._btnContent && this.syncA11yState(), t === "aria-label" && this.syncAriaLabel(), (t === "icon" || t === "iconSize") && this.setIcon(), t === "sheet" && this.handlerExternalCss());
  }
};
f("r-button", y);
export {
  y as t
};