v4web-components/dist/components/lab-ds-checkbox2.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './lab-ds-avatar2.js';
import { d as defineCustomElement$1 } from './lab-ds-icon-not-selectable2.js';

const labDsCheckboxCss = ".container{display:block;position:relative;padding-left:2.3rem;cursor:pointer;font-size:1.375rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wrap-text .label-text{white-space:wrap}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.container-label{display:flex;gap:0.7rem;align-items:flex-start}.container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:1.25rem;width:1.25rem;border-style:solid;border-color:var(--lab-ds-semantic-color-bg-cloudy);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border-width:var(--lab-ds-semantic-selectable-border-width-m);background-color:var(--lab-ds-semantic-color-bg-default)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-dark-error);background-color:rgba(0, 0, 0, 0)}.container:hover input:not([disabled]):not(:checked)~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-hover)}.container:active input:not([disabled])~.checkmark{background-color:var(--lab-ds-semantic-selectable-color-primary-press)}.container:focus:not([disabled]){outline-style:solid;outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-offset:0.4rem}.container.disabled{opacity:var(--lab-ds-core-opacity-80)}.container input:checked~.checkmark{background-color:rgba(0, 0, 0, 0);border-style:solid;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}.checkmark:after{content:'';position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:0.438rem;top:0.125rem;width:0.313rem;height:0.625rem;border:solid var(--lab-ds-semantic-selectable-color-primary-default);border-width:0 0.188rem 0.188rem 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}";

const LabDsCheckbox = /*@__PURE__*/ proxyCustomElement(class LabDsCheckbox extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleCheckbox = createEvent(this, "handleCheckbox", 7);
    this.label = undefined;
    this.avatar = false;
    this.error = false;
    this.disabled = false;
    this.checked = false;
    this.wrapText = false;
  }
  handleClick() {
    this.handleCheckbox.emit(this.checked);
    this.checked = !this.checked;
  }
  render() {
    return (h("label", { class: `container ${this.disabled ? 'disabled' : ''} ${this.wrapText ? 'wrap-text' : ''}` }, (this.avatar || this.label) && (h("span", { class: "container-label" }, this.avatar ? h("lab-ds-avatar", { size: "small" }) : null, this.label && h("span", { class: `label-text ${this.checked ? 'checked' : ''}` }, this.label))), h("input", { checked: this.checked, onClick: () => this.handleClick(), disabled: this.disabled, type: "checkbox" }), h("span", { class: `${this.error && 'error'} checkmark` })));
  }
  static get style() { return labDsCheckboxCss; }
}, [1, "lab-ds-checkbox", {
    "label": [1],
    "avatar": [4],
    "error": [4],
    "disabled": [4],
    "checked": [4],
    "wrapText": [4, "wrap-text"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-checkbox", "lab-ds-avatar", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-checkbox":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsCheckbox);
      }
      break;
    case "lab-ds-avatar":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsCheckbox as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-checkbox2.js.map