UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 5.18 kB
System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js"],(function(e){"use strict";var t,i,n,s,c,u;return{setters:[function(e){t=e.r;i=e.d;n=e.h;s=e.H;c=e.c},function(e){u=e.a}],execute:function(){var r=e("duet_toggle",function(){function e(e){var n=this;t(this,e);this.toggleId=u("DuetToggle");this.theme="";this.margin="auto";this.label="label";this.checked=false;this.onClick=function(e){e.preventDefault();n.setFocus();n.checked=!n.checked};this.duetChange=i(this,"duetChange",3)}e.prototype.checkedChanged=function(e){this.duetChange.emit({checked:e,value:this.value,component:"duet-toggle"})};e.prototype.componentWillLoad=function(){if(this.value===undefined){this.value=this.identifier}if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};e.prototype.setFocus=function(){this.element.querySelector("input").focus()};e.prototype.render=function(){var e=this.identifier||this.toggleId;return n(s,{onClick:this.onClick,class:{"duet-m-0":this.margin==="none"}},n("div",{class:{"duet-toggle":true,"duet-theme-turva":this.theme==="turva"}},n("duet-label",{theme:this.theme==="turva"?"turva":"default",for:e},this.label),n("label",{class:"duet-switch",htmlFor:e},n("input",{type:"checkbox",value:this.value,"aria-controls":this.accessibleControls,"aria-active-descendant":this.accessibleActiveDescendant,"aria-owns":this.accessibleOwns,id:e,role:this.role,name:this.name,checked:this.checked}),n("div",{class:"duet-slider"}))))};Object.defineProperty(e.prototype,"element",{get:function(){return c(this)},enumerable:true,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:true,configurable:true});Object.defineProperty(e,"style",{get:function(){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}"},enumerable:true,configurable:true});return e}())}}}));