@stories-js/core/dist/core/p-a5557d96.entry.js

Stories web components to build stories

/*!
 * (C) StoriesJS https://storiesjs.org - GPL-2.0 License
 */
import{r as t,i as e,f as r,h as a,c as o,g as i}from"./p-dea5a230.js";import{d as s,a as n}from"./p-f2dc59ee.js";import{c as h}from"./p-56a7b20e.js";const c=":host{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;color:var(--color);font-family:var(--stories-font-family, inherit);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.stories-color){color:var(--stories-color-contrast)}:host(.stories-color) .searchbar-input{background:var(--stories-color-base)}:host(.stories-color) .searchbar-clear-button,:host(.stories-color) .searchbar-cancel-button,:host(.stories-color) .searchbar-search-icon{color:inherit}.searchbar-search-icon{color:var(--icon-color);pointer-events:none}.searchbar-input-container{display:block;position:relative;-ms-flex-negative:1;flex-shrink:1;width:100%}.searchbar-input{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;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-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)}.searchbar-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)}.searchbar-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)}.searchbar-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)}.searchbar-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)}.searchbar-input::-webkit-search-cancel-button,.searchbar-input::-ms-clear{display:none}.searchbar-cancel-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbar-cancel-button>div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button{display:block}:host(.searchbar-disabled){cursor:default;opacity:0.4;pointer-events:none}";const l=class{constructor(r){t(this,r);this.storiesInput=e(this,"storiesInput",7);this.storiesChange=e(this,"storiesChange",7);this.storiesCancel=e(this,"storiesCancel",7);this.storiesClear=e(this,"storiesClear",7);this.storiesBlur=e(this,"storiesBlur",7);this.storiesFocus=e(this,"storiesFocus",7);this.storiesStyle=e(this,"storiesStyle",7);this.shouldAlignLeft=true;this.focused=false;this.cancelButtonIcon="arrow-back-sharp";this.debounce=250;this.disabled=false;this.placeholder="Search";this.showCancelButton="never";this.showClearButton="always";this.type="search";this.value="";this.onClearInput=(t,e)=>{this.storiesClear.emit();if(t){t.preventDefault();t.stopPropagation()}setTimeout((()=>{const t=this.getValue();if(t!==""){this.value="";this.storiesInput.emit();if(e&&!this.focused){this.setFocus()}}}),16*4)};this.onInput=t=>{const e=t.target;if(e){this.value=e.value}this.storiesInput.emit(t)};this.onBlur=()=>{this.focused=false;this.storiesBlur.emit();this.positionElements()};this.onFocus=()=>{this.focused=true;this.storiesFocus.emit();this.positionElements()}}debounceChanged(){this.storiesChange=s(this.storiesChange,this.debounce)}valueChanged(){const t=this.nativeInput;const e=this.getValue();if(t&&t.value!==e){t.value=e}this.storiesChange.emit({value:e})}showCancelButtonChanged(){requestAnimationFrame((()=>{this.positionElements();r(this)}))}connectedCallback(){this.emitStyle()}componentDidLoad(){this.positionElements();this.debounceChanged()}emitStyle(){this.storiesStyle.emit({searchbar:true})}async setFocus(){if(this.nativeInput){this.nativeInput.focus()}}getInputElement(){return Promise.resolve(this.nativeInput)}positionElements(){const t=this.getValue();const e=this.shouldAlignLeft;const r=t.trim()!==""||!!this.focused;this.shouldAlignLeft=r;if(e!==r){this.positionPlaceholder()}}positionPlaceholder(){const t=this.nativeInput;if(!t){return}const e=document.dir==="rtl";const r=(this.el.shadowRoot||this.el).querySelector(".searchbar-search-icon");if(this.shouldAlignLeft){t.removeAttribute("style");r.removeAttribute("style")}else{const a=document;const o=a.createElement("span");o.innerText=this.placeholder||"";a.body.appendChild(o);n((()=>{const a=o.offsetWidth;o.remove();const i="calc(50% - "+a/2+"px)";const s="calc(50% - "+(a/2+30)+"px)";if(e){t.style.paddingRight=i;r.style.marginRight=s}else{t.style.paddingLeft=i;r.style.marginLeft=s}}))}}getValue(){return this.value||""}hasValue(){return this.getValue()!==""}shouldShowClearButton(){if(this.showClearButton==="never"||this.showClearButton==="focus"&&!this.focused){return false}return true}render(){const t=this.clearIcon||"close-sharp";const e=this.searchIcon||"search-sharp";return a(o,{"aria-disabled":this.disabled?"true":null,class:h(this.color,{"searchbar-disabled":this.disabled,"searchbar-has-value":this.hasValue(),"searchbar-left-aligned":this.shouldAlignLeft,"searchbar-has-focus":this.focused,"searchbar-should-show-clear":this.shouldShowClearButton()}),role:"search"},a("div",{class:"searchbar-input-container"},a("input",{ref:t=>this.nativeInput=t,"aria-label":"search text",class:"searchbar-input",disabled:this.disabled,inputMode:this.inputmode,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,type:this.type,value:this.getValue()}),a("stories-icon",{"aria-hidden":"true",class:"searchbar-search-icon",name:e}),a("button",{"aria-label":"reset",class:"searchbar-clear-button",onMouseDown:t=>this.onClearInput(t,true),onTouchStart:t=>this.onClearInput(t,true),type:"button","no-blur":true},a("stories-icon",{"aria-hidden":"true",class:"searchbar-clear-icon",name:t}))))}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"],showCancelButton:["showCancelButtonChanged"]}}};l.style=c;export{l as stories_searchbar};
//# sourceMappingURL=p-a5557d96.entry.js.map