@limetech/lime-elements/dist/esm/limel-checkbox.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
import { c as createRandomString } from './random-string-355331d3.js';
import { C as CheckboxTemplate } from './checkbox.template-9acc6347.js';

const checkboxCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:\"*\"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)))}.checked .box,.boolean-input:has(input[type=checkbox]:checked) .box,.boolean-input:has(input[type=radio]:checked) .box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:\"\";position:absolute;inset:-0.1875rem;border-radius:inherit}.boolean-input:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(input[type=radio]:focus-visible) .box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:\"\";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white))}.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}";

const Checkbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.shouldReinitialize = false;
    this.id = createRandomString();
    this.helperTextId = createRandomString();
    this.destroyMDCInstances = () => {
      const input = this.getCheckboxElement();
      if (input) {
        delete input.dataset['indeterminate'];
        input.indeterminate = false;
      }
    };
    this.isInvalid = () => {
      if (this.invalid) {
        return true;
      }
      if (this.required && this.modified && !this.checked) {
        return true;
      }
    };
    this.initialize = () => {
      const input = this.getCheckboxElement();
      if (!input) {
        return;
      }
      input.indeterminate = this.indeterminate;
      input.checked = this.checked || this.indeterminate;
    };
    this.getCheckboxElement = () => {
      var _a, _b;
      return (((_b = (_a = this.limelCheckbox) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input[type="checkbox"]')) || null);
    };
    this.onChange = (event) => {
      var _a;
      event.stopPropagation();
      const input = event.currentTarget;
      const isChecked = (_a = input === null || input === void 0 ? void 0 : input.checked) !== null && _a !== void 0 ? _a : this.checked;
      this.change.emit(isChecked);
      this.modified = true;
    };
    this.disabled = false;
    this.readonly = false;
    this.invalid = undefined;
    this.label = undefined;
    this.helperText = undefined;
    this.checked = false;
    this.indeterminate = false;
    this.required = false;
    this.readonlyLabels = [];
    this.modified = false;
  }
  handleCheckedChange(newValue) {
    const input = this.getCheckboxElement();
    if (!input) {
      return;
    }
    input.checked = newValue || this.indeterminate;
  }
  handleIndeterminateChange(newValue) {
    const input = this.getCheckboxElement();
    if (!input) {
      return;
    }
    input.checked = this.checked || newValue;
    input.indeterminate = newValue;
  }
  handleReadonlyChange() {
    this.destroyMDCInstances();
    this.shouldReinitialize = true;
  }
  componentDidRender() {
    if (this.shouldReinitialize) {
      this.initialize();
      this.shouldReinitialize = false;
    }
  }
  connectedCallback() {
    this.initialize();
  }
  componentDidLoad() {
    this.initialize();
  }
  disconnectedCallback() {
    this.destroyMDCInstances();
  }
  render() {
    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
  }
  get limelCheckbox() { return getElement(this); }
  static get watchers() { return {
    "checked": ["handleCheckedChange"],
    "indeterminate": ["handleIndeterminateChange"],
    "readonly": ["handleReadonlyChange"]
  }; }
};
Checkbox.style = checkboxCss;

export { Checkbox as limel_checkbox };

//# sourceMappingURL=limel-checkbox.entry.js.map