{"version":3,"sources":["../src/elements/toggle.ts","../src/styles/elements/toggle.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesToggle } from '../styles/elements/toggle';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-change', this);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n    --kemet-toggle-track-border: none;\n    --kemet-toggle-track-color: rgb(var(--kemet-color-white));\n    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));\n    --kemet-toggle-handle-border: none;\n    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));\n    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color);\n    box-shadow: var(--kemet-toggle-track-shadow);\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color);\n    box-shadow: var(--kemet-toggle-handle-shadow);\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"],"mappings":"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","names":[]}