@getflip/swirl-components 0.340.1 → 0.341.0

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { format, isValid, parse } from "date-fns";
-import { create as createMask } from "maska/dist/es6/maska";
+import IMask from "imask";
 import { DesktopMediaQuery } from "../../services/media-query.service";
 const internalTimeFormat = "HH:mm:ss";
 export class SwirlTimeInput {
@@ -10,43 +10,8 @@ export class SwirlTimeInput {
         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();
@@ -79,35 +44,98 @@ export class SwirlTimeInput {
     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 = createMask(`#${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 })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }
@@ -385,6 +413,9 @@ export class SwirlTimeInput {
         return [{
                 "propName": "format",
                 "methodName": "watchFormat"
+            }, {
+                "propName": "value",
+                "methodName": "watchValue"
             }];
     }
 }

package/dist/collection/components/swirl-time-input/swirl-time-input.stories.js

@@ -6,7 +6,7 @@ export default {
             description: "See https://date-fns.org/v2.29.3/docs/format.",
             table: {
                 type: {
-                    detail: '"h", "H", "m", "s", and separators (e.g. ":")',
+                    detail: '"hh", "HH", "mm", "ss", and separators (e.g. ":", ".", ",")',
                     summary: "Allowed patterns",
                 },
             },