@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 4.74 kB
JavaScript
import{r as t,d as e,h as s,H as i,c as h}from"./p-6403d5dc.js";import{a}from"./p-da8c2c96.js";const c=class{constructor(s){t(this,s),this.toggleId=a("DuetToggle"),this.theme="",this.margin="auto",this.label="label",this.checked=!1,this.onClick=t=>{t.preventDefault(),this.setFocus(),this.checked=!this.checked},this.duetChange=e(this,"duetChange",3)}checkedChanged(t){this.duetChange.emit({checked:t,value:this.value,component:"duet-toggle"})}componentWillLoad(){void 0===this.value&&(this.value=this.identifier),"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}setFocus(){this.element.querySelector("input").focus()}render(){const t=this.identifier||this.toggleId;return s(i,{onClick:this.onClick,class:{"duet-m-0":"none"===this.margin}},s("div",{class:{"duet-toggle":!0,"duet-theme-turva":"turva"===this.theme}},s("duet-label",{theme:"turva"===this.theme?"turva":"default",for:t},this.label),s("label",{class:"duet-switch",htmlFor:t},s("input",{type:"checkbox",value:this.value,"aria-controls":this.accessibleControls,"aria-active-descendant":this.accessibleActiveDescendant,"aria-owns":this.accessibleOwns,id:t,role:this.role,name:this.name,checked:this.checked}),s("div",{class:"duet-slider"}))))}get element(){return h(this)}static get watchers(){return{checked:["checkedChanged"]}}static get style(){return".sc-duet-toggle-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:8px!important;margin-bottom:12px!important;-webkit-tap-highlight-color:transparent;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.sc-duet-toggle-h:last-child, .sc-duet-toggle-h:last-of-type{margin-right:0!important}.duet-m-0.sc-duet-toggle-h{margin:0!important}duet-label.sc-duet-toggle{width:100%!important;display:block!important}.duet-switch.sc-duet-toggle{border:0;padding:0;display:inline-block;height:28px;position:relative;width:48px}.duet-switch.sc-duet-toggle, .duet-switch.sc-duet-toggle input.sc-duet-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;margin:0}.duet-switch.sc-duet-toggle input.sc-duet-toggle{border:0;padding:0;position:absolute!important;top:0;clip:rect(1px,1px,1px,1px)!important;overflow:hidden!important;height:1px!important;width:1px!important;padding:0!important;border:0!important}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle{background-color:#0077b3;-webkit-box-shadow:none;box-shadow:none}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.duet-theme-turva.sc-duet-toggle, .duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle{background-color:#c60c30}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked + .duet-slider.sc-duet-toggle:before{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-transform:translateX(20px);transform:translateX(20px);background-color:#fff;-webkit-box-shadow:none;box-shadow:none}.user-is-tabbing.sc-duet-toggle-h .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus + .duet-slider.sc-duet-toggle{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-slider.sc-duet-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px #00294d;box-shadow:inset 0 0 0 1px #00294d;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:background-color .3s ease;transition:background-color .3s ease;border-radius:20px}.duet-slider.duet-theme-turva.sc-duet-toggle, .duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle{-webkit-box-shadow:inset 0 0 0 1px #111;box-shadow:inset 0 0 0 1px #111}.duet-slider.sc-duet-toggle:before{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;border-radius:50%;background-color:#00294d;bottom:4px;content:\"\";height:20px;left:4px;position:absolute;-webkit-transition:.3s ease;transition:.3s ease;width:20px}.duet-slider.duet-theme-turva.sc-duet-toggle:before, .duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle:before{background-color:#111}"}};export{c as duet_toggle};