v4web-components/dist/components/lab-ds-radio-button2.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 labDsRadioButtonCss = ".container{display:flex;align-items:center;cursor:pointer;font-size:1.375rem;gap:var(--lab-ds-semantic-selectable-space-gap-s)}input[type='radio']{appearance:none;margin:0;font:inherit;color:currentColor;width:var(--lab-ds-semantic-selectable-size-xs);height:var(--lab-ds-semantic-selectable-size-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default);border-radius:50%;display:flex;justify-content:center;align-items:center}input[type='radio']::before{content:'';width:var(--lab-ds-semantic-selectable-size-xxs);height:var(--lab-ds-semantic-selectable-size-xxs);border-radius:50%;transform:scale(0);transition:120ms transform ease-in-out;border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked{border-color:var(--lab-ds-semantic-selectable-color-primary-default)}input[type='radio']:checked::before{background-color:var(--lab-ds-semantic-selectable-color-primary-default);transform:scale(1)}.label-text{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text.checked{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.error.checkmark{border-color:var(--lab-ds-semantic-selectable-color-border-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-within: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)}";

const LabDsRadioButton = /*@__PURE__*/ proxyCustomElement(class LabDsRadioButton extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleRadioButton = createEvent(this, "handleRadioButton", 7);
    this.label = undefined;
    this.avatar = false;
    this.error = false;
    this.disabled = false;
    this.checked = false;
  }
  handleClick() {
    this.handleRadioButton.emit(this.checked);
  }
  render() {
    return (h("label", { class: `container ${this.disabled ? 'disabled' : ''}` }, h("input", { checked: this.checked, onClick: () => this.handleClick(), disabled: this.disabled, type: "radio" }), this.avatar ? h("lab-ds-avatar", { size: "small" }) : null, h("span", { class: `label-text ${this.checked ? 'checked' : ''}` }, this.label)));
  }
  static get style() { return labDsRadioButtonCss; }
}, [1, "lab-ds-radio-button", {
    "label": [1],
    "avatar": [4],
    "error": [4],
    "disabled": [4],
    "checked": [4]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-radio-button", "lab-ds-avatar", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-radio-button":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsRadioButton);
      }
      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 { LabDsRadioButton as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-radio-button2.js.map