UNPKG

@stories-js/core

Version:

Stories web components to build stories

5 lines 3.99 kB
/*! * (C) StoriesJS https://storiesjs.org - GPL-2.0 License */ import{r as e,i as t,h as o,c as r,g as i}from"./p-dea5a230.js";import{g as s,r as c}from"./p-f2dc59ee.js";import{c as a,h as n}from"./p-56a7b20e.js";const h=":host{--background-checked:var(--stories-color-primary, #3880ff);--border-color-checked:var(--stories-color-primary, #3880ff);--checkmark-color:var(--stories-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.stories-color){--background-checked:var(--stories-color-base);--border-color-checked:var(--stories-color-base);--checkmark-color:var(--stories-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}";let l=0;const d=class{constructor(o){e(this,o);this.storiesChange=t(this,"storiesChange",7);this.storiesFocus=t(this,"storiesFocus",7);this.storiesBlur=t(this,"storiesBlur",7);this.storiesStyle=t(this,"storiesStyle",7);this.inputId=`stories-cb-${l++}`;this.name=this.inputId;this.checked=false;this.indeterminate=false;this.disabled=false;this.value="on";this.onClick=e=>{e.preventDefault();this.setFocus();this.checked=!this.checked;this.indeterminate=false};this.onFocus=()=>{this.storiesFocus.emit()};this.onBlur=()=>{this.storiesBlur.emit()}}componentWillLoad(){this.emitStyle()}checkedChanged(e){this.storiesChange.emit({checked:e,value:this.value});this.emitStyle()}disabledChanged(){this.emitStyle()}emitStyle(){this.storiesStyle.emit({"checkbox-checked":this.checked,"interactive-disabled":this.disabled})}setFocus(){if(this.focusEl){this.focusEl.focus()}}render(){const{color:e,checked:t,disabled:i,el:h,indeterminate:l,inputId:d,name:b,value:k}=this;const{label:p,labelId:m,labelText:u}=s(h,d);c(true,h,b,t?k:"",i);const g=l?o("path",{d:"M6 12L18 12",part:"mark"}):o("path",{d:"M5.9,12.5l3.8,3.8l8.8-8.8",part:"mark"});return o(r,{"aria-checked":`${t}`,"aria-hidden":i?"true":null,"aria-labelledby":p?m:null,class:a(e,{"in-item":n("stories-item",h),"checkbox-checked":t,"checkbox-disabled":i,"checkbox-indeterminate":l,interactive:true}),onClick:this.onClick,role:"checkbox"},o("svg",{class:"checkbox-icon",viewBox:"0 0 24 24",part:"container"},g),o("label",{htmlFor:d},u),o("input",{ref:e=>this.focusEl=e,"aria-checked":`${t}`,disabled:i,id:d,onBlur:()=>this.onBlur(),onFocus:()=>this.onFocus(),type:"checkbox"}))}get el(){return i(this)}static get watchers(){return{checked:["checkedChanged"],disabled:["disabledChanged"]}}};d.style=h;export{d as stories_checkbox}; //# sourceMappingURL=p-87a85520.entry.js.map