@getflip/swirl-components 0.65.0 → 0.66.0

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

@@ -0,0 +1,334 @@
+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 { getDesktopMediaQuery } from "../../utils";
+const internalTimeFormat = "HH:mm:ss";
+export class SwirlTimeInput {
+  constructor() {
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    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) => {
+      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();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.disabled = undefined;
+    this.format = "HH:mm";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.placeholder = "hh:mm";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const index = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
+    this.id = `swirl-time-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_c = (_b = this.desktopMediaQuery).removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, "change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  setupMask() {
+    var _a;
+    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.mask = createMask(`#${this.id}`, {
+      mask: this.format.replace(/[Hhms]/g, "#"),
+    });
+  }
+  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, null, h("div", { class: className }, h("input", { "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, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
+  }
+  static get is() { return "swirl-time-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-time-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-time-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-focus",
+        "reflect": false
+      },
+      "autoSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-select",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "format": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "format",
+        "reflect": false,
+        "defaultValue": "\"HH:mm\""
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"hh:mm\""
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
+      },
+      "swirlAriaDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-describedby",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "format",
+        "methodName": "watchFormat"
+      }];
+  }
+}

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

@@ -0,0 +1,70 @@
+const maskSpy = jest.fn();
+jest.mock("maska/dist/es6/maska", () => ({
+  create: maskSpy,
+}));
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlTimeInput } from "./swirl-time-input";
+describe("swirl-time-input", () => {
+  beforeEach(() => {
+    maskSpy.mockReset();
+  });
+  it("renders the input", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTimeInput],
+      html: `<swirl-time-input></swirl-time-input>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-time-input>
+        <div class="time-input">
+          <input class="time-input__input" id="swirl-time-input-0" placeholder="hh:mm" type="text">
+          <span class="time-input__icon">
+            <swirl-icon-time-outlined size="24"></swirl-icon-time-outlined>
+          </span>
+        </div>
+      </swirl-time-input>
+    `);
+  });
+  it("handles different formats", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTimeInput],
+      html: `<swirl-time-input value="12:30:00"></swirl-time-input>`,
+    });
+    const input = page.root.querySelector("input");
+    expect(input.value).toBe("12:30");
+    page.root.format = "HH:mm:ss";
+    await page.waitForChanges();
+    expect(input.value).toBe("12:30:00");
+  });
+  it("masks values according to the format", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTimeInput],
+      html: `<swirl-time-input value="12:30:00"></swirl-time-input>`,
+    });
+    expect(maskSpy).toHaveBeenCalledWith("#swirl-time-input-0", {
+      mask: "##:##",
+    });
+    page.root.format = "HH:mm:ss";
+    expect(maskSpy).toHaveBeenCalledWith("#swirl-time-input-0", {
+      mask: "##:##:##",
+    });
+  });
+  it("fires valueChange events for valid values", async () => {
+    const page = await newSpecPage({
+      components: [SwirlTimeInput],
+      html: `<swirl-time-input></swirl-time-input>`,
+    });
+    const spy = jest.fn();
+    const input = page.root.querySelector("input");
+    page.root.addEventListener("valueChange", spy);
+    input.value = "12:";
+    input.dispatchEvent(new Event("input"));
+    expect(spy).toHaveBeenCalledTimes(0);
+    input.value = "12:30";
+    input.dispatchEvent(new Event("input"));
+    expect(spy.mock.calls[0][0].detail).toBe("12:30:00");
+    page.root.format = "HH:mm:ss";
+    input.value = "12:30:20";
+    input.dispatchEvent(new Event("input"));
+    expect(spy.mock.calls[1][0].detail).toBe("12:30:20");
+  });
+});

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

@@ -0,0 +1,38 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-time-input.mdx";
+export default {
+  argTypes: {
+    format: {
+      description: "See https://date-fns.org/v2.29.3/docs/format.",
+      table: {
+        type: {
+          detail: '"h", "H", "m", "s", and separators (e.g. ":")',
+          summary: "Allowed patterns",
+        },
+      },
+    },
+    locale: {
+      control: { type: "object" },
+    },
+  },
+  component: "swirl-time-input",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlTimeInput",
+};
+const Template = (args) => {
+  const formControl = document.createElement("swirl-form-control");
+  const element = generateStoryElement("swirl-time-input", args);
+  formControl.setAttribute("label", "Time");
+  formControl.append("\n  ", element, "\n");
+  element.addEventListener("valueChange", (event) => {
+    console.log(event);
+  });
+  return formControl;
+};
+export const SwirlTimeInput = Template.bind({});
+SwirlTimeInput.args = {};

package/dist/collection/components/swirl-toast/swirl-toast.js

@@ -22,10 +22,9 @@ export class SwirlToast {
     this.startTimer();
   }
   componentDidLoad() {
-    var _a, _b;
     this.startTimer();
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;