carbon-custom-elements/es/components/toggle/toggle.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/toggle/toggle.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAK9C;;GAEG;AACH,oBAAY,WAAW;IACrB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,KAAK,UAAU;CAChB;AAED;;;;;;;GAOG;AACH,cACM,QAAS,SAAQ,UAAU;IAC/B,SAAS,CAAC,gBAAgB;IAW1B;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,aAAa,SAAM;IAEnB,MAAM;IAiCN;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC","file":"toggle.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport BXCheckbox from '../checkbox/checkbox';\nimport styles from './toggle.scss';\n\nconst { prefix } = settings;\n\n/**\n * Toggle size.\n */\nexport enum TOGGLE_SIZE {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Small size.\n   */\n  SMALL = 'small',\n}\n\n/**\n * Basic toggle.\n * @element bx-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires bx-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass BXToggle extends BXCheckbox {\n  protected _renderCheckmark() {\n    if (this.size !== TOGGLE_SIZE.SMALL) {\n      return undefined;\n    }\n    return html`\n      <svg class=\"${prefix}--toggle__check\" width=\"6px\" height=\"5px\" viewBox=\"0 0 6 5\">\n        <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * The text for the checked state.\n   */\n  @property({ attribute: 'checked-text' })\n  checkedText = '';\n\n  /**\n   * Toggle size.\n   */\n  @property({ reflect: true })\n  size = TOGGLE_SIZE.REGULAR;\n\n  /**\n   * The text for the unchecked state.\n   */\n  @property({ attribute: 'unchecked-text' })\n  uncheckedText = '';\n\n  render() {\n    const { checked, checkedText, disabled, labelText, name, size, uncheckedText, value, _handleChange: handleChange } = this;\n    const inputClasses = classMap({\n      [`${prefix}--toggle-input`]: true,\n      [`${prefix}--toggle-input--${size}`]: size,\n    });\n    return html`\n      <input\n        id=\"checkbox\"\n        type=\"checkbox\"\n        class=\"${inputClasses}\"\n        aria-checked=\"${String(Boolean(checked))}\"\n        .checked=\"${checked}\"\n        ?disabled=\"${disabled}\"\n        name=\"${ifNonNull(name)}\"\n        value=\"${ifNonNull(value)}\"\n        @change=\"${handleChange}\"\n      />\n      <label for=\"checkbox\" class=\"${prefix}--toggle-input__label\">\n        <slot name=\"label-text\">${labelText}</slot>\n        <span class=\"${prefix}--toggle__switch\">\n          ${this._renderCheckmark()}\n          <span class=\"${prefix}--toggle__text--off\" aria-hidden=\"true\">\n            <slot name=\"unchecked-text\">${uncheckedText}</slot>\n          </span>\n          <span class=\"${prefix}--toggle__text--on\" aria-hidden=\"true\">\n            <slot name=\"checked-text\">${checkedText}</slot>\n          </span>\n        </span>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this changebox changes its checked state.\n   */\n  static get eventChange() {\n    return `${prefix}-toggle-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXToggle;\n"]}