@getflip/swirl-components 0.340.1 → 0.341.0

package/dist/esm/swirl-time-input.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-DC8qzJZr.js';
 import { c as classnames } from './index-orsBiyT_.js';
-import { p as parse, i as isValid, f as format, m as maskaExports } from './maska-CSSJQ9ZE.js';
+import { I as IMask, p as parse, i as isValid, f as format } from './index-D3UoejeY.js';
 import { D as DesktopMediaQuery } from './media-query.service-Cx_VEA2f.js';
 import './utils-D_MUFqkF.js';
 
@@ -17,43 +17,8 @@ const SwirlTimeInput = class {
         this.placeholder = "hh:mm";
         this.iconSize = 24;
         this.mediaQueryUnsubscribe = () => { };
-        this.onChange = (event) => {
-            const value = event.target.value;
-            let newValue;
-            if (value === "") {
-                this.value = undefined;
-                this.valueChange.emit(undefined);
-            }
-            const newDate = parse(value, this.format, new Date());
-            const formatRegExp = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
-            if (!Boolean(value.match(formatRegExp))) {
-                return;
-            }
-            if (!isValid(newDate)) {
-                newValue = format(new Date(), internalTimeFormat);
-            }
-            else {
-                newValue = format(newDate, internalTimeFormat);
-            }
-            this.value = newValue;
-            this.valueChange.emit(newValue);
-        };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
-            const input = event.target;
-            const dateValue = parse(input.value, this.format, new Date());
-            if (!isValid(dateValue) && Boolean(this.value)) {
-                const currentDateValue = Boolean(this.value)
-                    ? parse(this.value, internalTimeFormat, new Date())
-                    : undefined;
-                if (!Boolean(currentDateValue) || !isValid(currentDateValue)) {
-                    this.value = "";
-                }
-                input.value = format(currentDateValue, this.format);
-            }
-        };
-        this.onInput = (event) => {
-            this.onChange(event);
         };
         this.onClick = (event) => {
             event.preventDefault();
@@ -86,39 +51,103 @@ const SwirlTimeInput = class {
     watchFormat() {
         this.setupMask();
     }
+    watchValue(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.valueChange.emit(newValue);
+        }
+    }
     updateIconSize(smallIcon) {
         this.iconSize = smallIcon ? 20 : 24;
     }
     handleAutoSelect(event) {
         if (!this.autoSelect) {
+            setTimeout(() => {
+                if (event.target &&
+                    event.target instanceof HTMLInputElement &&
+                    event.target.setSelectionRange) {
+                    event.target.setSelectionRange(0, 0);
+                }
+            });
             return;
         }
-        event.target.select();
+        if (event.target && event.target instanceof HTMLInputElement) {
+            event.target.select();
+        }
     }
     setupMask() {
         this.mask?.destroy();
-        this.mask = maskaExports.create(`#${this.id}`, {
-            mask: this.format.replace(/[Hhms]/g, "#"),
+        // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
+        const pattern = this.format
+            .replace(/(?<!H)H(?!H)/g, "HH")
+            .replace(/(?<!h)h(?!h)/g, "hh")
+            .replace(/(?<!m)m(?!m)/g, "mm")
+            .replace(/(?<!s)s(?!s)/g, "ss");
+        this.mask = IMask(this.inputEl, {
+            mask: Date,
+            pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
+            autofix: "pad",
+            lazy: true,
+            overwrite: true,
+            eager: "append",
+            blocks: {
+                HH: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 23,
+                    maxLength: 2,
+                },
+                hh: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    maxLength: 2,
+                },
+                mm: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    maxLength: 2,
+                },
+                ss: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    maxLength: 2,
+                },
+            },
+            format: (date) => {
+                if (!isValid(date)) {
+                    return "";
+                }
+                this.value = format(date, internalTimeFormat);
+                return format(date, pattern);
+            },
+            parse: (str) => {
+                return parse(str, pattern, new Date());
+            },
         });
+        // Set the initial value if it exists
+        if (this.value) {
+            const dateValue = parse(this.value, internalTimeFormat, new Date());
+            if (isValid(dateValue)) {
+                const formattedValue = format(dateValue, pattern);
+                this.mask.value = formattedValue;
+            }
+        }
     }
     render() {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const dateValue = Boolean(this.value)
-            ? parse(this.value, internalTimeFormat, new Date())
-            : undefined;
-        const displayValue = isValid(dateValue)
-            ? format(dateValue, this.format)
-            : undefined;
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '2d01caa594161a39badac0b0c1914fe0111f93b6' }, h("div", { key: '12e350dcf0b59510a885f2e38662ae52ca183d53', class: className }, h("input", { key: 'ddcb1410c0abe8f43854b41e773fc4ad0ee69c54', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '38d168f83acc421e7c987c1fab1f71b44de57e63', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'fe08cb78cf03822f99d98f4d9f33e0c103286d80', size: this.iconSize })))));
+        return (h(Host, { key: '8947322735a4ce58217aff86dcc3b5132905b82a' }, h("div", { key: '1368952e9638f3337d3b67b3ce6a22ce9c736dfd', class: className }, h("input", { key: '23299e8dce3200618853f2bc319fdfc741f215e1', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: 'd793539f7f1b7027a97d02649f1f89a5251ceb33', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '3fe2d103178eb908b82fa0fed4918253de760618', size: this.iconSize })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "format": ["watchFormat"]
+        "format": ["watchFormat"],
+        "value": ["watchValue"]
     }; }
 };
 SwirlTimeInput.style = swirlTimeInputCss;

package/dist/swirl-components/p-1bbb3a4b.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as e,H as s,d as a}from"./p-DC8qzJZr.js";import{c as n}from"./p-orsBiyT_.js";import{f as d,I as o,p as r,i as h}from"./p-D3UoejeY.js";import{D as p}from"./p-LU4x678Z.js";import{i as c}from"./p-D_MUFqkF.js";const l="yyyy-MM-dd",u=class{constructor(e){t(this,e),this.invalidInput=i(this,"invalidInput",7),this.valueChange=i(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.readonly=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),c()||this.focus())},this.onMouseDown=()=>{"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{const i=this.pickerPopover.contains(t.relatedTarget);this.setReadOnly(!i)},this.onPickDate=t=>{const i=t.detail,e=d(i,l);this.value=e,this.inputEl.value=d(i,this.pattern),this.mask.updateValue(),this.setReadOnly(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id=`swirl-date-input-${t}`,this.setReadOnly(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setReadOnly(t){this.readonly=!("pick"!==this.preferredInputMode||!c())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=l),this.mask=o(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:o.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:o.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:o.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:o.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=d(t,this.pattern);return h(t)?(this.value=d(t,l),i):(this.invalidInput.emit(t.toString()),"")},parse:t=>r(t,this.pattern,new Date)}),this.updateValue()}updateValue(){if(this.value){const t=r(this.value,l,new Date);if(h(t)){const i=d(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}}render(){const t=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,i=Boolean(this.value)?r(this.value,l,new Date):void 0,a=h(i)?i:void 0,d=n("date-input",{"date-input--inline":this.inline});return e(s,{key:"9f3d225dc75468cdddff1c0446234abfd9ca09e0"},e("div",{key:"977ea02e1a0a599f2b32e5c382210efb913d0463",class:d},e("input",{key:"5da50a63dcc55d88abccb1dd51fef4d28e66a5ee","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),e("swirl-popover-trigger",{key:"556f13ed495626e32a6436f0ab172820cd9066c7",swirlPopover:`popover-${this.id}`},e("button",{key:"e6dddc6e1cabe9c1e632dbe0f15834b0ab17fa2b","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},e("swirl-icon-today",{key:"a2ef423472b1db8429c44ad717847e600fb20cb8",size:this.iconSize})))),!this.disabled&&e("swirl-popover",{key:"84a3e021ac7d946171347de0e627233abc25e493",animation:"scale-in-y",class:"date-input__date-picker-popover",id:`popover-${this.id}`,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},e("swirl-date-picker",{key:"7edd4e96694530a7f49bc273d8fe36961c4b9e25",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:a,startDate:a})))}get el(){return a(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};u.style=".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-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)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-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;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}";export{u as swirl_date_input}

package/dist/swirl-components/p-96441b7e.entry.js

@@ -0,0 +1 @@
+import{r as i,c as t,h as s,H as e,d as n}from"./p-DC8qzJZr.js";import{c as a}from"./p-orsBiyT_.js";import{I as r,p as o,i as h,f as m}from"./p-D3UoejeY.js";import{D as p}from"./p-LU4x678Z.js";import"./p-D_MUFqkF.js";const c="HH:mm:ss",l=class{constructor(s){i(this,s),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.valueChange=t(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id=`swirl-time-input-${i}`}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){i!==t&&this.valueChange.emit(i)}updateIconSize(i){this.iconSize=i?20:24}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss");if(this.mask=r(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{HH:{mask:r.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:r.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:r.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:r.MaskedRange,from:0,to:59,maxLength:2}},format:t=>h(t)?(this.value=m(t,c),m(t,i)):"",parse:t=>o(t,i,new Date)}),this.value){const t=o(this.value,c,new Date);if(h(t)){const s=m(t,i);this.mask.value=s}}}render(){const i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,t=a("time-input",{"time-input--inline":this.inline});return s(e,{key:"8947322735a4ce58217aff86dcc3b5132905b82a"},s("div",{key:"1368952e9638f3337d3b67b3ce6a22ce9c736dfd",class:t},s("input",{key:"23299e8dce3200618853f2bc319fdfc741f215e1","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,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text"}),s("span",{key:"d793539f7f1b7027a97d02649f1f89a5251ceb33",class:"time-input__icon"},s("swirl-icon-time-outlined",{key:"3fe2d103178eb908b82fa0fed4918253de760618",size:this.iconSize}))))}get el(){return n(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};l.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{l as swirl_time_input}