ranui/dist/checkbox-O_J_n1_W.js

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

import { a as o, c as i, l as s, n as h, o as b, p as d, r as l, s as t, t as k } from "./utils-D1iZnChu.js";
import { t as x } from "./events-C59wGdni.js";
import { i as a, m as c, p, s as u } from "./factory-ZNhcQ4tf.js";
import { a as v, n as f } from "./ssr-DSGwPtEd.js";
var g = '.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{position:var(--ran-checkbox-host-position, relative);display:var(--ran-checkbox-host-display, inline-flex);margin:var(--ran-checkbox-host-margin, 0);padding:var(--ran-checkbox-host-padding, 0);box-sizing:var(--ran-checkbox-host-box-sizing, border-box);list-style:var(--ran-checkbox-host-list-style, none)}:host([disabled]){opacity:var(--ran-checkbox-disabled-opacity, .6)}:host([disabled]) .ran-checkbox-input{cursor:var(--ran-checkbox-disabled-cursor, not-allowed);pointer-events:var(--ran-checkbox-disabled-pointer-events, all)}:host([disabled]) .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2));border:1px solid var(--ran-color-border, #eaeaea)}:host([disabled]) .ran-checkbox-inner:after{cursor:not-allowed;pointer-events:none;opacity:var(--ran-checkbox-checked-after-opacity, 1)}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-bg-muted, #f2f2f2))}:host([disabled]) .ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 0)}.ran-checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--ran-checkbox-label-gap, 8px);cursor:pointer;line-height:1}.ran-checkbox-label{color:var(--ran-checkbox-label-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-label-font-size, 14px);font-family:var(--ran-checkbox-label-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-checkbox-label-line-height, 1.5);-webkit-user-select:none;user-select:none}.ran-checkbox{position:var(--ran-checkbox-position, relative);display:var(--ran-checkbox-display, block);box-sizing:var(--ran-checkbox-box-sizing, border-box);margin:var(--ran-checkbox-margin, 0);width:var(--ran-checkbox-width, 16px);height:var(--ran-checkbox-height, 16px);padding:var(--ran-checkbox-padding, 0);color:var(--ran-checkbox-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-checkbox-font-size, 14px);line-height:var(--ran-checkbox-line-height, 1);list-style:var(--ran-checkbox-list-style, none);font-family:var(--ran-checkbox-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));white-space:var(--ran-checkbox-white-space, nowrap);cursor:var(--ran-checkbox-cursor, pointer);border-radius:var(--ran-checkbox-border-radius, 4px)}.ran-checkbox-input{position:var(--ran-checkbox-input-position, absolute);inset:var(--ran-checkbox-input-inset, 0);z-index:var(--ran-checkbox-input-z-index, 1);cursor:var(--ran-checkbox-input-cursor, pointer);opacity:var(--ran-checkbox-input-opacity, 0);margin:var(--ran-checkbox-input-margin, 0)}.ran-checkbox-inner{box-sizing:var(--ran-checkbox-inner-box-sizing, border-box);display:var(--ran-checkbox-inner-display, block);width:var(--ran-checkbox-inner-width, 16px);height:var(--ran-checkbox-inner-height, 16px);direction:var(--ran-checkbox-inner-direction, ltr);background-color:var(--ran-checkbox-inner-background-color, var(--ran-color-bg-elevated, #fff));border:var(--ran-checkbox-inner-border, 1px solid var(--ran-color-border, #eaeaea));border-image-source:var(--ran-checkbox-inner-border-image-source, none);border-image-slice:var(--ran-checkbox-inner-border-image-slice, 8);border-image-width:var(--ran-checkbox-inner-border-image-width, 4px);border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-checkbox-inner-border-radius, 4px);border-collapse:var(--ran-checkbox-inner-border-collapse, separate)}.ran-checkbox-inner:after{box-sizing:var(--ran-checkbox-inner-after-box-sizing, border-box);position:var(--ran-checkbox-inner-after-position, absolute);top:var(--ran-checkbox-inner-after-top, 50%);inset-inline-start:var(--ran-checkbox-inner-after-inset-inline-start, 25%);display:var(--ran-checkbox-inner-after-display, table);width:var(--ran-checkbox-inner-after-width, calc(16px / 14 * 5));height:var(--ran-checkbox-inner-after-height, calc(16px / 14 * 8));border:var(--ran-checkbox-inner-after-border, 2px solid #fff);border-top:var(--ran-checkbox-inner-after-border-top, 0);border-inline-start:var(--ran-checkbox-inner-after-border-inline-start, 0);opacity:var(--ran-checkbox-inner-after-opacity, 0);content:var(--ran-checkbox-inner-after-content, "");transition:var(--ran-checkbox-inner-after-transition, transform .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-inner-after-transform, rotate(45deg) scale(1) translate(-50%, -50%))}.ran-checkbox-checked .ran-checkbox-inner{background-color:var(--ran-checkbox-checked-background-color, var(--ran-color-primary, #006bff));background-image:var(--ran-checkbox-checked-background-image, none);border:var(--ran-checkbox-checked-border, 1px solid var(--ran-color-primary, #006bff));animation:var(--ran-checkbox-pop-animation, ran-checkbox-pop var(--ran-motion-duration-base, .2s) var(--ran-motion-ease-bouncy, cubic-bezier(.34, 1.56, .64, 1)))}.ran-checkbox-checked .ran-checkbox-inner:after{opacity:var(--ran-checkbox-checked-after-opacity, 1)}.ran-checkbox:focus-within .ran-checkbox-inner{box-shadow:var(--ran-checkbox-focus-box-shadow, 0 0 0 2px var(--ran-blue-400, #cae7ff));border-color:var(--ran-checkbox-focus-border-color, var(--ran-color-primary, #006bff))}@keyframes ran-checkbox-pop{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.ran-checkbox-checked .ran-checkbox-inner{animation:none}}', m = class extends f {
  static formAssociated = !0;
  _events = new x();
  _internals;
  checkInput;
  checkInner;
  context;
  container;
  _shadowDom;
  static get observedAttributes() {
    return [
      "disabled",
      "checked",
      "value",
      "sheet"
    ];
  }
  constructor() {
    super();
    try {
      this._internals = this.attachInternals();
    } catch {
      this._internals = void 0;
    }
    this._shadowDom = h(this, g);
    const e = k(this._shadowDom, ".ran-checkbox-wrapper", () => a().class("ran-checkbox-wrapper").part("wrapper").children(a().class("ran-checkbox").part("checkbox").children(u().class("ran-checkbox-input").part("input").attr("type", "checkbox"), c().class("ran-checkbox-inner").part("inner")), c().class("ran-checkbox-label").part("label").children(p())).build());
    this.container = e.querySelector(".ran-checkbox"), this.checkInput = e.querySelector(".ran-checkbox-input"), this.checkInner = e.querySelector(".ran-checkbox-inner"), this.checkInput.setAttribute("aria-hidden", "true"), this.checkInput.tabIndex = -1, this.context = { checked: !1 };
  }
  get disabled() {
    return i(this);
  }
  set disabled(e) {
    t.includes(e) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
  }
  get value() {
    const e = this.getAttribute("value");
    return t.includes(e) && (this.context.checked = !1), `${this.context.checked}`;
  }
  set value(e) {
    t.includes(e) ? (this.setAttribute("value", "false"), this.context.checked = !1) : (this.setAttribute("value", "true"), this.context.checked = !0), this.updateChecked();
  }
  get checked() {
    const e = this.getAttribute("checked");
    return t.includes(e) && (this.context.checked = !1), this.context.checked;
  }
  set checked(e) {
    t.includes(e) ? (this.setAttribute("checked", "false"), this.context.checked = !1) : (this.setAttribute("checked", "true"), this.context.checked = !0), this.updateChecked();
  }
  get sheet() {
    return l(this, "sheet");
  }
  set sheet(e) {
    o(this, "sheet", e);
  }
  handlerExternalCss = () => {
    b(this, this._shadowDom, "sheet", null, this.sheet);
  };
  updateChecked = () => {
    const { checked: e } = this.context;
    e ? (this.setAttribute("checked", "true"), this.setAttribute("value", "true"), s(this.container, "ran-checkbox-checked")) : (this.setAttribute("checked", "false"), this.setAttribute("value", "false"), d(this.container, "ran-checkbox-checked")), this.syncA11yAndForm();
  };
  syncA11yAndForm = () => {
    const { checked: e } = this.context;
    this.setAttribute("role", "checkbox"), this.setAttribute("aria-checked", e ? "true" : "false"), this.disabled ? (this.setAttribute("aria-disabled", "true"), this.tabIndex = -1) : (this.removeAttribute("aria-disabled"), (this.tabIndex < 0 || !this.hasAttribute("tabindex")) && (this.tabIndex = 0)), this._internals?.setFormValue?.(e ? this.getAttribute("value") || "true" : null);
  };
  update = () => {
    this.updateChecked();
  };
  onChange = () => {
    if (this.disabled) return;
    const { checked: e } = this.context;
    this.context.checked = !e, this.dispatchEvent(new CustomEvent("change", { detail: { checked: this.context.checked } })), this.update();
  };
  onKeydown = (e) => {
    (e.key === " " || e.key === "Spacebar" || e.key === "Enter") && (e.preventDefault(), this.onChange());
  };
  connectedCallback() {
    this.handlerExternalCss(), this._events.on(this, "click", this.onChange), this._events.on(this, "keydown", this.onKeydown), this.syncA11yAndForm();
  }
  disconnectedCallback() {
    this._events.abort();
  }
  attributeChangedCallback(e, n, r) {
    n !== r && (e === "checked" && (this.checked = r, this.value = r), e === "value" && (this.checked = r, this.value = r), e === "sheet" && this.handlerExternalCss());
  }
};
v("r-checkbox", m);
export {
  m as t
};