@getflip/swirl-components 0.81.2 → 0.81.4

package/dist/swirl-components/p-9d9427ab.entry.js

@@ -1 +0,0 @@
-import{r as i,c as t,h as s,H as e,g as n}from"./p-3fca9a05.js";import{c as o}from"./p-b7898321.js";import{p as h,i as a,f as r,m as l}from"./p-6339561b.js";import{g as d}from"./p-646e00de.js";const p="HH:mm:ss",m=class{constructor(s){i(this,s),this.valueChange=t(this,"valueChange",7),this.desktopMediaQuery=d(),this.desktopMediaQueryHandler=i=>{this.updateIconSize(i.matches)},this.onChange=i=>{const t=i.target.value;let s;""===t&&(this.value=void 0,this.valueChange.emit(void 0));const e=h(t,this.format,new Date),n=new RegExp(`^${this.format.replace(/[Hhms]/g,"\\d")}$`);Boolean(t.match(n))&&(s=a(e)?r(e,p):r(new Date,p),this.value=s,this.valueChange.emit(s))},this.onBlur=i=>{const t=i.target,s=h(t.value,this.format,new Date);if(!a(s)&&Boolean(this.value)){const i=Boolean(this.value)?h(this.value,p,new Date):void 0;Boolean(i)&&a(i)||(this.value=""),t.value=r(i,this.format)}},this.onInput=i=>{this.onChange(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.handleAutoSelect(i)},this.autoFocus=void 0,this.autoSelect=void 0,this.disabled=void 0,this.format="HH:mm",this.inline=void 0,this.invalid=void 0,this.placeholder="hh:mm",this.required=void 0,this.swirlAriaDescribedby=void 0,this.value=void 0,this.iconSize=24}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id=`swirl-time-input-${i}`}componentDidLoad(){this.setupMask(),this.updateIconSize(this.desktopMediaQuery.matches),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}disconnectedCallback(){var i,t,s;null===(i=this.mask)||void 0===i||i.destroy(),null===(s=(t=this.desktopMediaQuery).removeEventListener)||void 0===s||s.call(t,"change",this.desktopMediaQueryHandler)}watchFormat(){this.setupMask()}updateIconSize(i){this.iconSize=i?20:24}handleAutoSelect(i){this.autoSelect&&i.target.select()}setupMask(){var i;null===(i=this.mask)||void 0===i||i.destroy(),this.mask=l.create(`#${this.id}`,{mask:this.format.replace(/[Hhms]/g,"#")})}render(){const i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,t=Boolean(this.value)?h(this.value,p,new Date):void 0,n=a(t)?r(t,this.format):void 0,l=o("time-input",{"time-input--inline":this.inline});return s(e,null,s("div",{class:l},s("input",{"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,required:this.required,type:"text",value:n}),s("span",{class:"time-input__icon"},s("swirl-icon-time-outlined",{size:this.iconSize}))))}get el(){return n(this)}static get watchers(){return{format:["watchFormat"]}}};m.style=".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";export{m as swirl_time_input}