@stories-js/core
Version:
Stories web components to build stories
5 lines • 9.69 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(t,e,i,n){function a(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,o){function r(t){try{l(n.next(t))}catch(e){o(e)}}function s(t){try{l(n["throw"](t))}catch(e){o(e)}}function l(t){t.done?i(t.value):a(t.value).then(r,s)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,a,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return l([t,e])}}function l(r){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;a=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){i.label=r[1];break}if(r[0]===6&&i.label<o[1]){i.label=o[1];o=r;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(r);break}if(o[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(s){r=[6,s];a=0}finally{n=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
/*!
* (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{d as debounceEvent,i as inheritAttributes,f as findItemLabel}from"./helpers-77bcaf88.js";import{c as createColorClasses}from"./utils-c1c54ef8.js";var inputCss=":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}";var inputIds=0;var Input=function(){function t(t){var e=this;registerInstance(this,t);this.storiesInput=createEvent(this,"storiesInput",7);this.storiesChange=createEvent(this,"storiesChange",7);this.storiesBlur=createEvent(this,"storiesBlur",7);this.storiesFocus=createEvent(this,"storiesFocus",7);this.storiesStyle=createEvent(this,"storiesStyle",7);this.inputId="stories-input-".concat(inputIds++);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=function(t){var i=t.target;if(i){e.value=i.value||""}e.storiesInput.emit(t)};this.onBlur=function(t){e.hasFocus=false;e.emitStyle();if(e.fireFocusEvents){e.storiesBlur.emit(t)}};this.onFocus=function(t){e.hasFocus=true;e.emitStyle();if(e.fireFocusEvents){e.storiesFocus.emit(t)}};this.clearTextOnEnter=function(t){if(t.key==="Enter"){e.clearTextInput(t)}};this.clearTextInput=function(t){if(e.clearInput&&!e.readonly&&!e.disabled&&t){t.preventDefault();t.stopPropagation();e.setFocus()}e.value="";if(e.nativeInput){e.nativeInput.value=""}}}t.prototype.debounceChanged=function(){this.storiesChange=debounceEvent(this.storiesChange,this.debounce)};t.prototype.disabledChanged=function(){this.emitStyle()};t.prototype.placeholderChanged=function(){this.emitStyle()};t.prototype.valueChanged=function(){this.emitStyle();this.storiesChange.emit({value:this.value===null?this.value:this.value.toString()})};t.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label","tabindex","title"])};t.prototype.connectedCallback=function(){this.emitStyle();this.debounceChanged()};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};t.prototype.setBlur=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeInput){this.nativeInput.blur()}return[2]}))}))};t.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};t.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};t.prototype.emitStyle=function(){this.storiesStyle.emit({interactive:true,input:true,"has-placeholder":this.placeholder!==undefined,"has-value":this.hasValue(),"has-focus":this.hasFocus,"interactive-disabled":this.disabled})};t.prototype.hasValue=function(){return this.getValue().length>0};t.prototype.render=function(){var t=this;var e=this.getValue();var i=this.inputId+"-lbl";var n=findItemLabel(this.el);if(n){n.id=i}return h(Host,{"aria-disabled":this.disabled?"true":null,class:createColorClasses(this.color,{"has-value":this.hasValue(),"has-focus":this.hasFocus})},h("input",Object.assign({ref:function(e){return t.nativeInput=e},"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:e},this.inheritedAttributes)),this.clearInput&&!this.readonly&&!this.disabled&&h("button",{"aria-label":"reset",class:"input-clear-icon",onKeyDown:this.clearTextOnEnter,onMouseDown:this.clearTextInput,onTouchStart:this.clearTextInput,type:"button"}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{debounce:["debounceChanged"],disabled:["disabledChanged"],placeholder:["placeholderChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return t}();Input.style=inputCss;export{Input as stories_input};
//# sourceMappingURL=stories-input.entry.js.map