ranui/dist/checkbox-CBM4TmwS.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 c, i as n, m as o, p as h, s as d } from "./factory-WDxu11V0.js";
import { t as b } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as i, c as t, i as l, l as k, n as x, o as u, r as p, t as v } from "./utils-U-9uH7EX.js";
import { a as f, n as g } from "./ssr-BzykYefm.js";
import { a as m, n as y, r as A, t as w } from "./a11y-ZSlIUH9B.js";
import { addClassToElement as C, removeClassToElement as _ } from "ranuts/utils";
var z = ':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-tick-checked-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-tick-checked-opacity, 0)}:host([hidden]){display:none}.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, var(--ran-text-label-1, 14px));font-weight:var(--ran-checkbox-label-font-weight, var(--ran-text-label-weight, 500));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, var(--ran-size-1, 16px));height:var(--ran-checkbox-height, var(--ran-size-1, 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, var(--ran-text-label-1, 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, var(--ran-size-1, 16px));height:var(--ran-checkbox-inner-height, var(--ran-size-1, 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, var(--ran-skin-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-tick-box-sizing, border-box);position:var(--ran-checkbox-tick-position, absolute);top:var(--ran-checkbox-tick-top, 50%);inset-inline-start:var(--ran-checkbox-tick-inset-inline-start, 25%);display:var(--ran-checkbox-tick-display, table);width:var(--ran-checkbox-tick-width, calc(16px / 14 * 5));height:var(--ran-checkbox-tick-height, calc(16px / 14 * 8));border:var(--ran-checkbox-tick-border, 2px solid #fff);border-top:var(--ran-checkbox-tick-border-top, 0);border-inline-start:var(--ran-checkbox-tick-border-inline-start, 0);opacity:var(--ran-checkbox-tick-opacity, 0);content:var(--ran-checkbox-tick-content, "");transition:var(--ran-checkbox-tick-transition, transform .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s);transform:var(--ran-checkbox-tick-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-tick-checked-opacity, 1)}.ran-checkbox:has(.ran-checkbox-input:focus-visible) .ran-checkbox-inner{box-shadow:var(--ran-checkbox-focus-box-shadow, var(--ran-focus-ring));border-color:var(--ran-checkbox-focus-border-color, var(--ran-color-primary, #171717))}@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}}', I = class extends g {
  static formAssociated = !0;
  _events = new b();
  _internals;
  checkInput;
  checkInner;
  context;
  container;
  _shadowDom;
  static get observedAttributes() {
    return [
      "disabled",
      "checked",
      "value",
      "required",
      "sheet"
    ];
  }
  _defaultChecked = !1;
  _defaultCaptured = !1;
  constructor() {
    super();
    try {
      this._internals = this.attachInternals();
    } catch {
      this._internals = void 0;
    }
    this._shadowDom = v(this, z);
    const e = c(), a = c(), r = c(), s = n().class("ran-checkbox-wrapper").part("wrapper").children(n().class("ran-checkbox").ref(e).part("checkbox").children(d().class("ran-checkbox-input").ref(a).part("input").attr("type", "checkbox"), o().class("ran-checkbox-inner").ref(r).part("inner")), o().class("ran-checkbox-label").part("label").children(h())).build();
    this._shadowDom.appendChild(s), this.container = i(e, "ran checkbox"), this.checkInput = i(a, "input"), this.checkInner = i(r, "inner"), this.checkInput.setAttribute("aria-hidden", "true"), this.checkInput.tabIndex = -1, this.context = { checked: !1 };
  }
  get disabled() {
    return k(this);
  }
  set disabled(e) {
    t.includes(e) ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
  }
  get required() {
    return this.hasAttribute("required");
  }
  set required(e) {
    p(this, "required", !(!e || e === "false"));
  }
  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 x(this, "sheet");
  }
  set sheet(e) {
    l(this, "sheet", e);
  }
  handlerExternalCss = () => {
    u(this, this._shadowDom, "sheet", null, this.sheet);
  };
  updateChecked = () => {
    const { checked: e } = this.context;
    e ? (this.setAttribute("checked", "true"), this.setAttribute("value", "true"), C(this.container, "ran-checkbox-checked")) : (this.setAttribute("checked", "false"), this.setAttribute("value", "false"), _(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), this._updateValidity();
  };
  _updateValidity = () => {
    m(this, this._internals, {
      disabled: this.disabled,
      required: this.required,
      isEmpty: !this.context.checked,
      message: "Please check this box if you want to proceed.",
      anchor: this
    });
  };
  checkValidity() {
    return w(this._internals);
  }
  reportValidity() {
    return A(this._internals);
  }
  get validity() {
    return this._internals?.validity;
  }
  get validationMessage() {
    return this._internals?.validationMessage ?? "";
  }
  formResetCallback() {
    this.checked = this._defaultChecked;
  }
  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) => {
    y(e) && (e.preventDefault(), this.onChange());
  };
  connectedCallback() {
    this.handlerExternalCss(), this._defaultCaptured || (this._defaultChecked = this.context.checked, this._defaultCaptured = !0), this._events.on(this, "click", this.onChange), this._events.on(this, "keydown", this.onKeydown), this.syncA11yAndForm();
  }
  disconnectedCallback() {
    this._events.abort();
  }
  attributeChangedCallback(e, a, r) {
    a !== r && (e === "checked" && (this.checked = r, this.value = r), e === "value" && (this.checked = r, this.value = r), e === "disabled" ? this.syncA11yAndForm() : e === "required" && this._updateValidity(), e === "sheet" && this.handlerExternalCss());
  }
};
f("r-checkbox", I);
export {
  I as t
};