soft-components/dist/collection/components/sc-toggle/sc-toggle.js

Simple soft flexible set of web components

import { Component, Host, h, Prop, Event, State } from '@stencil/core';
export class Toggle {
  constructor() {
    /**
     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
     */
    this.autofocus = false;
    /**
     * If `true`, the user cannot interact with the input.
     */
    this.disabled = false;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = '';
    /**
     * aria labelby
     */
    this.ariaLabelledby = '';
    /**
     * The value of the input.
     */
    this.value = '';
    /**
     * Size of toggle
     */
    this.size = 'lg';
    this.isFocused = false;
    /**
     * If this toggle is on by default
     */
    this.checked = false;
    this.onInput = e => {
      this.inputEvent.emit(e);
    };
    this.onBlur = () => {
      this.isFocused = false;
      this.blurEvent.emit();
    };
    this.onFocus = () => {
      this.isFocused = true;
      this.focusEvent.emit();
    };
    this.onKeydown = (e) => {
      if (this.isFocused && e.key === 'Enter') {
        e.preventDefault();
        this.checked = !this.checked;
      }
      this.keyDownEvent.emit(e);
    };
    this.onChange = e => {
      this.changeEvent.emit(e);
    };
  }
  getValue() {
    return this.value || '';
  }
  render() {
    const value = this.getValue();
    const { size, ariaLabelledby, disabled, autofocus, name, checked } = this;
    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: { 'sm': size === 'sm' } },
      h("label", null,
        h("span", { class: "toggle" },
          h("input", { type: "checkbox", "aria-labelledby": ariaLabelledby, disabled: disabled, autoFocus: autofocus, name: name, checked: checked, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onChange: this.onChange }),
          h("span", { class: "toggle--slider" },
            h("span", { class: "toggle--btn" },
              h("span", { class: "toggle--dots" },
                h("span", null),
                h("span", null),
                h("span", null),
                h("span", null))))),
        this.label && h("span", { class: "toggle--label" }, this.label))));
  }
  static get is() { return "sc-toggle"; }
  static get originalStyleUrls() { return {
    "$": ["sc-toggle.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-toggle.css"]
  }; }
  static get properties() { return {
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | undefined",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label text to be displayed inline with the toggle"
      },
      "attribute": "label",
      "reflect": false
    },
    "autofocus": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
      },
      "attribute": "autofocus",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the input."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "''"
    },
    "ariaLabelledby": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "aria labelby"
      },
      "attribute": "aria-labelledby",
      "reflect": true,
      "defaultValue": "''"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string | null",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The value of the input."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "''"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'lg' | 'sm'",
        "resolved": "\"lg\" | \"sm\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Size of toggle"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'lg'"
    },
    "checked": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean | undefined",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If this toggle is on by default"
      },
      "attribute": "checked",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "isFocused": {}
  }; }
  static get events() { return [{
      "method": "inputEvent",
      "name": "inputEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a keyboard input occurred."
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "changeEvent",
      "name": "changeEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the value has changed."
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "blurEvent",
      "name": "blurEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "focusEvent",
      "name": "focusEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the input has focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "keyDownEvent",
      "name": "keyDownEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a key is pressed down"
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }]; }
}