@stories-js/core/dist/esm-es5/stories-checkbox.entry.js

Stories web components to build stories

/*!
 * (C) StoriesJS https://storiesjs.org - GPL-2.0 License
 */
import{r as registerInstance,i as createEvent,h,c as Host,g as getElement}from"./index-49238f69.js";import{g as getAriaLabel,r as renderHiddenInput}from"./helpers-77bcaf88.js";import{c as createColorClasses,h as hostContext}from"./utils-c1c54ef8.js";var checkboxCss=":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}";var checkboxIds=0;var Checkbox=function(){function e(e){var t=this;registerInstance(this,e);this.storiesChange=createEvent(this,"storiesChange",7);this.storiesFocus=createEvent(this,"storiesFocus",7);this.storiesBlur=createEvent(this,"storiesBlur",7);this.storiesStyle=createEvent(this,"storiesStyle",7);this.inputId="stories-cb-".concat(checkboxIds++);this.name=this.inputId;this.checked=false;this.indeterminate=false;this.disabled=false;this.value="on";this.onClick=function(e){e.preventDefault();t.setFocus();t.checked=!t.checked;t.indeterminate=false};this.onFocus=function(){t.storiesFocus.emit()};this.onBlur=function(){t.storiesBlur.emit()}}e.prototype.componentWillLoad=function(){this.emitStyle()};e.prototype.checkedChanged=function(e){this.storiesChange.emit({checked:e,value:this.value});this.emitStyle()};e.prototype.disabledChanged=function(){this.emitStyle()};e.prototype.emitStyle=function(){this.storiesStyle.emit({"checkbox-checked":this.checked,"interactive-disabled":this.disabled})};e.prototype.setFocus=function(){if(this.focusEl){this.focusEl.focus()}};e.prototype.render=function(){var e=this;var t=this,o=t.color,r=t.checked,i=t.disabled,c=t.el,n=t.indeterminate,s=t.inputId,a=t.name,l=t.value;var d=getAriaLabel(c,s),b=d.label,u=d.labelId,k=d.labelText;renderHiddenInput(true,c,a,r?l:"",i);var p=n?h("path",{d:"M6 12L18 12",part:"mark"}):h("path",{d:"M5.9,12.5l3.8,3.8l8.8-8.8",part:"mark"});return h(Host,{"aria-checked":"".concat(r),"aria-hidden":i?"true":null,"aria-labelledby":b?u:null,class:createColorClasses(o,{"in-item":hostContext("stories-item",c),"checkbox-checked":r,"checkbox-disabled":i,"checkbox-indeterminate":n,interactive:true}),onClick:this.onClick,role:"checkbox"},h("svg",{class:"checkbox-icon",viewBox:"0 0 24 24",part:"container"},p),h("label",{htmlFor:s},k),h("input",{ref:function(t){return e.focusEl=t},"aria-checked":"".concat(r),disabled:i,id:s,onBlur:function(){return e.onBlur()},onFocus:function(){return e.onFocus()},type:"checkbox"}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return e}();Checkbox.style=checkboxCss;export{Checkbox as stories_checkbox};
//# sourceMappingURL=stories-checkbox.entry.js.map