{"mappings":"AACA,cAAc,sBAAiC;AAI/C,SAAS,kBAAkB;;;;;;;AAa3B,cA0DM,eAAe,oBAAoB;CACvC,IAAI,QAAQ;CAIZ,IAAI;;;;CAOJ,AACA;;;;CAKA,AACA;CAEA,IAAI,kBAAkB;CAItB,UAAU,UAAU,eAAe;CAmBnC;CAKA,UAAU;CAWV,UAAU;;AAOZ,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/switch/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\nimport { omit } from \"sharekit\";\n\nconst protoName = \"switch\";\nconst cssScope = scopePrefix(protoName);\n\n/**\n * {@linkcode Switch} renders a switch.\n *\n * @fires change - Fires when the switch is switched.\n * @category input\n */\n@godown(protoName)\n@styles(css`\n  :host,\n  :host([contents]) [part=\"root\"] {\n    display: inline-block;\n  }\n\n  :host {\n    ${cssScope}-width: 3em;\n    ${cssScope}-height: calc(var(${cssScope}-width) / 2);\n    ${cssScope}-handle-size: 1.25em;\n    ${cssScope}-handle-space: calc(var(${cssScope}-width) / 4 - var(${cssScope}-handle-size) / 2);\n    width: var(${cssScope}-width);\n    height: var(${cssScope}-height);\n    border-radius: calc(var(${cssScope}-height) / 2);\n    background: var(${cssGlobalVars.passive});\n    vertical-align: bottom;\n    transition: 0.2s ease-in-out;\n    transition-property: background, left;\n  }\n\n  :host([checked]) {\n    background: var(${cssGlobalVars.active});\n  }\n\n  [part=\"root\"] {\n    display: flex;\n    align-items: center;\n    position: relative;\n    transition: inherit;\n  }\n\n  [part=\"handle\"] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    transition: inherit;\n    left: 0;\n    top: 50%;\n    pointer-events: none;\n    border-radius: 100%;\n    background: var(${cssGlobalVars.background});\n    width: var(${cssScope}-handle-size);\n    height: var(${cssScope}-handle-size);\n    transform: translateY(-50%) translateX(var(${cssScope}-handle-space));\n  }\n\n  :host([checked]) [part=\"handle\"] {\n    left: 50%;\n  }\n\n  [part=\"input\"] {\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n  }\n`)\nclass Switch extends SuperInput<boolean> {\n  set checked(v: boolean) {\n    this.value = v;\n  }\n\n  get checked(): boolean {\n    return this.value;\n  }\n\n  /**\n   * Default checked state.\n   */\n  @property({ type: Boolean })\n  default = false;\n\n  /**\n   * The current value of the switch component. Reflects the \"checked\" attribute.\n   */\n  @property({ type: Boolean, attribute: \"checked\", reflect: true })\n  value = false;\n\n  get observedRecord(): Record<string, any> {\n    return omit(super.observedRecord, ringTypeAttribute);\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        class=\"round\"\n      >\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          ?disabled=\"${this.disabled}\"\n          ?checked=\"${this.value}\"\n          @change=\"${this._handleChange}\"\n        />\n        <span part=\"handle\"></span>\n      </div>\n    `;\n  }\n\n  reset(): void {\n    this.value = this.default;\n    this._input.checked = this.value;\n  }\n\n  protected _connectedInit(): void {\n    if (this.default) {\n      this.value = true;\n    } else {\n      if (this.value) {\n        this.value = true;\n        this.default = true;\n      }\n    }\n  }\n\n  protected _handleChange(): void {\n    const { checked } = this._input;\n    this.value = checked;\n    this.dispatchCustomEvent(\"change\", this.value);\n  }\n}\n\nexport default Switch;\nexport { Switch };\n"],"version":3,"file":"component.d.ts"}