@claromentis/design-system/dist/collection/components/cla-radio/cla-radio.js

Claromentis Design System Component Library

import { h } from '@stencil/core';
import { propagateFocusEvent } from "../../utils/utils";
/**
 *  @slot - Allows label content
 */
export class Radio {
  constructor() {
    /**
     * Propagate a focus event.
     *
     * Used to propagate `<input>` focus events through the Shadow DOM boundary
     * in the case that they aren't by the browser.
     *
     * @param {FocusEvent} event
     */
    this.onFocusEvent = (event) => {
      propagateFocusEvent(this.element, event);
    };
    /**
     * on Change event change input's value.
     *
     * Used to emit the change of value when an input is checked.
     *
     * @param {InputEvent} event
     */
    this.onChangeEvent = (event) => {
      this.checked = event.target.checked;
      if (this.checked) {
        this.selected.emit({
          value: this.value
        });
      }
      else {
        this.unselected.emit({
          value: this.value
        });
      }
    };
    /**
     * prevent Event Propagation
     *
     * Prevents the propagation of click events to prevent click events firing twice on the component
     *
     * @param {MouseEvent} event
     */
    this.preventPropagation = (event) => {
      event.stopPropagation();
    };
    this.name = undefined;
    this.large = undefined;
    this.inverted = undefined;
    this.value = undefined;
    this.block = undefined;
    this.disabled = false;
    this.checked = false;
  }
  /**
   * Get the map of CSS classes for the radio.
   *
   * @return CssClassMap
   */
  getClassMap() {
    const large = this.large;
    const block = this.block;
    const inverted = this.inverted;
    return {
      'cla-radio': true,
      [`cla-radio-block`]: block,
      [`cla-radio-lg`]: large,
      [`cla-radio-inverted`]: inverted
    };
  }
  render() {
    return (h("label", { class: this.getClassMap() }, h("input", { type: "radio", class: "cla-custom-control-input", value: this.value, name: this.name, onFocus: this.onFocusEvent, onBlur: this.onFocusEvent, onChange: this.onChangeEvent, disabled: this.disabled, checked: this.checked }), h("span", { onClick: this.preventPropagation, class: "cla-radio-input" }), h("span", { onClick: this.preventPropagation, class: "cla-radio-label" }, h("slot", null))));
  }
  static get is() { return "cla-radio"; }
  static get originalStyleUrls() {
    return {
      "$": ["cla-radio.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["cla-radio.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The radio ID & name"
        },
        "attribute": "name",
        "reflect": false
      },
      "large": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the large variant of the radio."
        },
        "attribute": "large",
        "reflect": false
      },
      "inverted": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the inverted variant of the radio."
        },
        "attribute": "inverted",
        "reflect": false
      },
      "value": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "The radio value"
        },
        "attribute": "value",
        "reflect": false
      },
      "block": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "false",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether to use the block style variant of the radio."
        },
        "attribute": "block",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether the radio is disabled."
        },
        "attribute": "disabled",
        "reflect": true,
        "defaultValue": "false"
      },
      "checked": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Is it Checked ?"
        },
        "attribute": "checked",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "selected",
        "name": "selected",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the radio is selected."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "unselected",
        "name": "unselected",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitted when the radio is unselected."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "element"; }
}