@stories-js/core/dist/core/p-0678709e.entry.js

Stories web components to build stories

/*!
 * (C) StoriesJS https://storiesjs.org - GPL-2.0 License
 */
import{r as t,i,h as e,c as a,g as n}from"./p-dea5a230.js";import{d as o,i as s,f as r}from"./p-f2dc59ee.js";import{c as h}from"./p-56a7b20e.js";const l=":host{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--background:transparent;--color:initial;display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0 !important;background:var(--background);color:var(--color);font-family:var(--stories-font-family, inherit);z-index:2}:host-context(stories-item:not(.item-label)){--padding-start:0}:host(.stories-color){color:var(--stories-color-base)}.native-input{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input:-webkit-autofill{background-color:transparent}.native-input:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input::-ms-clear{display:none}.native-input[disabled]{opacity:0.4}.cloned-input{left:0;top:0;position:absolute;pointer-events:none}[dir=rtl] .cloned-input,:host-context([dir=rtl]) .cloned-input{left:unset;right:unset;right:0}.input-clear-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-clear-icon:focus{opacity:0.5}:host(.has-value) .input-clear-icon{visibility:visible}:host(.has-focus){pointer-events:none}:host(.has-focus) input,:host(.has-focus) a,:host(.has-focus) button{pointer-events:auto}:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)){opacity:0}:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus){-webkit-transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);opacity:1}";let d=0;const p=class{constructor(e){t(this,e);this.storiesInput=i(this,"storiesInput",7);this.storiesChange=i(this,"storiesChange",7);this.storiesBlur=i(this,"storiesBlur",7);this.storiesFocus=i(this,"storiesFocus",7);this.storiesStyle=i(this,"storiesStyle",7);this.inputId=`stories-input-${d++}`;this.inheritedAttributes={};this.fireFocusEvents=true;this.hasFocus=false;this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.name=this.inputId;this.readonly=false;this.required=false;this.type="text";this.value="";this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}this.storiesInput.emit(t)};this.onBlur=t=>{this.hasFocus=false;this.emitStyle();if(this.fireFocusEvents){this.storiesBlur.emit(t)}};this.onFocus=t=>{this.hasFocus=true;this.emitStyle();if(this.fireFocusEvents){this.storiesFocus.emit(t)}};this.clearTextOnEnter=t=>{if(t.key==="Enter"){this.clearTextInput(t)}};this.clearTextInput=t=>{if(this.clearInput&&!this.readonly&&!this.disabled&&t){t.preventDefault();t.stopPropagation();this.setFocus()}this.value="";if(this.nativeInput){this.nativeInput.value=""}}}debounceChanged(){this.storiesChange=o(this.storiesChange,this.debounce)}disabledChanged(){this.emitStyle()}placeholderChanged(){this.emitStyle()}valueChanged(){this.emitStyle();this.storiesChange.emit({value:this.value===null?this.value:this.value.toString()})}componentWillLoad(){this.inheritedAttributes=s(this.el,["aria-label","tabindex","title"])}connectedCallback(){this.emitStyle();this.debounceChanged()}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}async setBlur(){if(this.nativeInput){this.nativeInput.blur()}}getInputElement(){return Promise.resolve(this.nativeInput)}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}emitStyle(){this.storiesStyle.emit({interactive:true,input:true,"has-placeholder":this.placeholder!==undefined,"has-value":this.hasValue(),"has-focus":this.hasFocus,"interactive-disabled":this.disabled})}hasValue(){return this.getValue().length>0}render(){const t=this.getValue();const i=this.inputId+"-lbl";const n=r(this.el);if(n){n.id=i}return e(a,{"aria-disabled":this.disabled?"true":null,class:h(this.color,{"has-value":this.hasValue(),"has-focus":this.hasFocus})},e("input",Object.assign({ref:t=>this.nativeInput=t,"aria-labelledby":n?i:null,autoFocus:this.autofocus,class:"native-input",disabled:this.disabled,inputMode:this.inputmode,max:this.max,maxLength:this.maxlength,min:this.min,minLength:this.minlength,name:this.name,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:this.readonly,required:this.required,size:this.size,step:this.step,type:this.type,value:t},this.inheritedAttributes)),this.clearInput&&!this.readonly&&!this.disabled&&e("button",{"aria-label":"reset",class:"input-clear-icon",onKeyDown:this.clearTextOnEnter,onMouseDown:this.clearTextInput,onTouchStart:this.clearTextInput,type:"button"}))}get el(){return n(this)}static get watchers(){return{debounce:["debounceChanged"],disabled:["disabledChanged"],placeholder:["placeholderChanged"],value:["valueChanged"]}}};p.style=l;export{p as stories_input};
//# sourceMappingURL=p-0678709e.entry.js.map