@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-checkbox/flip-checkbox.js

@@ -32,7 +32,7 @@ export class FlipCheckbox {
       h("label", { class: className, htmlFor: this.inputId },
         h("span", { class: "checkbox__control" },
           h("flip-visually-hidden", null,
-            h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })),
+            h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.flipAriaDescribedby, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })),
           h("span", { "aria-hidden": "true", class: "checkbox__box" },
             h("span", { class: "checkbox__icon" },
               checked && h("flip-icon-check-strong", null),
@@ -107,6 +107,23 @@ export class FlipCheckbox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "reflect": false
+    },
     "inputId": {
       "type": "string",
       "mutable": false,
@@ -210,3 +227,4 @@ export class FlipCheckbox {
       }
     }]; }
 }
+//# sourceMappingURL=flip-checkbox.js.map

package/dist/collection/components/flip-checkbox/flip-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-checkbox.js","sourceRoot":"","sources":["../../../../src/components/flip-checkbox/flip-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipCheckboxState = boolean | \"true\" | \"false\" | \"indeterminate\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-checkbox.css\",\n  tag: \"flip-checkbox\",\n})\nexport class FlipCheckbox {\n  @Prop({ mutable: true }) checked?: FlipCheckboxState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  private onChange = () => {\n    this.checked =\n      this.checked === true || this.checked === \"true\" ? false : true;\n\n    this.valueChange.emit(this.checked);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n    const indeterminate = this.checked === \"indeterminate\";\n\n    const showLabelContainer = Boolean(this.label) || Boolean(this.description);\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const className = classnames(\"checkbox\", {\n      \"checkbox--checked\": checked,\n      \"checkbox--disabled\": this.disabled,\n      \"checkbox--indeterminate\": indeterminate,\n      \"checkbox--invalid\": this.invalid,\n      \"checkbox--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"checkbox__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-describedby={this.flipAriaDescribedby}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"checkbox__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                indeterminate={indeterminate}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"checkbox\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"checkbox__box\">\n              <span class=\"checkbox__icon\">\n                {checked && <flip-icon-check-strong></flip-icon-check-strong>}\n                {indeterminate && (\n                  <span class=\"checkbox__indeterminate-icon\"></span>\n                )}\n              </span>\n            </span>\n          </span>\n          {showLabelContainer && (\n            <span class=\"checkbox__label-container\">\n              {this.label && <span class=\"checkbox__label\">{this.label}</span>}\n              {this.description && (\n                <span class=\"checkbox__description\">{this.description}</span>\n              )}\n            </span>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-checkbox/flip-checkbox.stories.js

@@ -27,3 +27,4 @@ FlipCheckbox.args = {
   inputName: "Checkbox",
   label: "Checkbox",
 };
+//# sourceMappingURL=flip-checkbox.stories.js.map

package/dist/collection/components/flip-checkbox/flip-checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-checkbox/flip-checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,eAAe;EACb,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,OAAO,EAAE,OAAO;MAChB,OAAO,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,CAAC;KACxC;GACF;EACD,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,yBAAyB;CACjC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;EAE5D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE9C,YAAY,CAAC,IAAI,GAAG;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,mCAAmC;EAChD,OAAO,EAAE,UAAU;EACnB,SAAS,EAAE,UAAU;EACrB,KAAK,EAAE,UAAU;CAClB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-checkbox.mdx\";\n\nexport default {\n  argTypes: {\n    checked: {\n      control: \"radio\",\n      options: [false, \"indeterminate\", true],\n    },\n  },\n  component: \"flip-checkbox\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipCheckbox\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-checkbox\", args);\n\n  return element;\n};\n\nexport const FlipCheckbox = Template.bind({});\n\nFlipCheckbox.args = {\n  checked: true,\n  description: \"Optional description of the item.\",\n  inputId: \"checkbox\",\n  inputName: \"Checkbox\",\n  label: \"Checkbox\",\n};\n"]}

package/dist/collection/components/flip-chip/flip-chip.js

@@ -142,3 +142,4 @@ export class FlipChip {
     }
   }; }
 }
+//# sourceMappingURL=flip-chip.js.map

package/dist/collection/components/flip-chip/flip-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-chip.js","sourceRoot":"","sources":["../../../../src/components/flip-chip/flip-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,OAAO,QAAQ;EALrB;IAQU,WAAM,GAAoB,SAAS,CAAC;IACpC,gBAAW,GAAa,KAAK,CAAC;GAoEvC;EA9DC,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,gBAAgB;IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;MAC3B,OAAO;KACR;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IACvC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAEnC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACrC,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACzB,OAAO;KACR;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAErC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAEjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE;MAClE,mBAAmB,EAAE,IAAI,CAAC,WAAW;KACtC,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,EAAC,GAAG,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QACjE,UAAU,IAAI,CACb,YACE,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,GAC3B,CACT;QACA,QAAQ,IAAI,CACX,YACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT;QACD,YAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,CACzC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipChipIntent = \"default\" | \"critical\" | \"success\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-chip.css\",\n  tag: \"flip-chip\",\n})\nexport class FlipChip {\n  @Prop() avatar?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipChipIntent = \"default\";\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n\n  private avatarEl: HTMLElement;\n  private iconEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceAvatarProps();\n    this.forceIconProps();\n  }\n\n  private forceAvatarProps() {\n    if (!Boolean(this.avatarEl)) {\n      return;\n    }\n\n    const avatar = this.avatarEl.querySelector(\"flip-avatar\");\n\n    avatar?.removeAttribute(\"badge\");\n    avatar?.removeAttribute(\"interactive\");\n    avatar?.removeAttribute(\"show-label\");\n    avatar?.removeAttribute(\"variant\");\n\n    avatar?.setAttribute(\"size\", \"xs\");\n  }\n\n  private forceIconProps() {\n    if (!Boolean(this.iconEl)) {\n      return;\n    }\n\n    const icon = this.iconEl.children[0];\n\n    icon?.setAttribute(\"size\", \"24\");\n  }\n\n  render() {\n    const Tag = this.interactive ? \"button\" : \"span\";\n\n    const showAvatar = Boolean(this.avatar);\n    const showIcon = !showAvatar && Boolean(this.icon);\n\n    const className = classnames(\"chip\", `chip--intent-${this.intent}`, {\n      \"chip--interactive\": this.interactive,\n    });\n\n    return (\n      <Host>\n        <Tag class={className} type={this.interactive ? \"button\" : undefined}>\n          {showAvatar && (\n            <span\n              class=\"chip__avatar\"\n              innerHTML={this.avatar}\n              ref={(el) => (this.avatarEl = el)}\n            ></span>\n          )}\n          {showIcon && (\n            <span\n              class=\"chip__icon\"\n              innerHTML={this.icon}\n              ref={(el) => (this.iconEl = el)}\n            ></span>\n          )}\n          <span class=\"chip__label\">{this.label}</span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-chip/flip-chip.stories.js

@@ -35,3 +35,4 @@ export const FlipChip = Template.bind({});
 FlipChip.args = {
   label: "Label",
 };
+//# sourceMappingURL=flip-chip.stories.js.map

package/dist/collection/components/flip-chip/flip-chip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-chip.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-chip/flip-chip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EACJ,8FAA8F;UAChG,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,0CAA0C;UAClD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAExD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG;EACd,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-chip.mdx\";\n\nexport default {\n  argTypes: {\n    avatar: {\n      table: {\n        type: {\n          detail:\n            'e.g. <flip-avatar label=\"John Doe\" src=\"https://picsum.photos/id/433/144/144\"></flip-avatar>',\n          summary: \"flip-avatar\",\n        },\n      },\n    },\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-close></flip-icon-close>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-chip\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipChip\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-chip\", args);\n\n  return element;\n};\n\nexport const FlipChip = Template.bind({});\n\nFlipChip.args = {\n  label: \"Label\",\n};\n"]}

package/dist/collection/components/flip-date-input/flip-date-input.css

@@ -0,0 +1,62 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.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__input {
+  display: inline-flex;
+  width: 100%;
+  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:focus {
+    outline: none;
+  }
+
+.date-input__input:disabled {
+    color: var(--s-text-disabled);
+    background-color: transparent;
+  }
+
+.date-input__date-picker-button {
+  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:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.date-input__date-picker-button:disabled {
+    cursor: default;
+    color: var(--s-icon-disabled);
+  }

package/dist/collection/components/flip-date-input/flip-date-input.js

@@ -0,0 +1,312 @@
+import { Component, Event, h, Host, Prop, Watch, } from "@stencil/core";
+import { format, isValid, parse } from "date-fns";
+import { create as createMask } from "maska/dist/es6/maska";
+const internalDateFormat = "yyyy-MM-dd";
+export class FlipDateInput {
+  constructor() {
+    this.datePickerLabel = "Date picker";
+    this.format = "yyyy-MM-dd";
+    this.placeholder = "yyyy-mm-dd";
+    this.onChange = (event) => {
+      const value = event.target.value;
+      const newDate = parse(value, this.format, new Date());
+      const formatRegExp = new RegExp(`^${this.format.replace(/y|d|M/g, "\\d")}$`);
+      if (!Boolean(value.match(formatRegExp)) || !isValid(newDate)) {
+        return;
+      }
+      const newValue = format(newDate, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onPickDate = (event) => {
+      const newDateValue = event.detail;
+      const newValue = format(newDateValue, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+      this.pickerPopover.close();
+    };
+  }
+  componentWillLoad() {
+    const index = document.querySelectorAll("flip-date-input").length;
+    this.id = `flip-date-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  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(/y|d|M/g, "#"),
+    });
+  }
+  render() {
+    const ariaInvalid = this.invalid === true
+      ? "true"
+      : this.invalid === false
+        ? "false"
+        : undefined;
+    const dateValue = Boolean(this.value)
+      ? parse(this.value, internalDateFormat, new Date())
+      : undefined;
+    const displayValue = isValid(dateValue)
+      ? format(dateValue, this.format)
+      : undefined;
+    return (h(Host, null,
+      h("div", { class: "date-input" },
+        h("input", { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }),
+        h("button", { "aria-hidden": "true", class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, tabIndex: -1, type: "button" },
+          h("flip-icon-today", null))),
+      !this.disabled && (h("flip-popover", { label: this.datePickerLabel, placement: "bottom-end", popoverId: "popover", ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` },
+        h("flip-date-picker", { locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+  }
+  static get is() { return "flip-date-input"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-date-input.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-date-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
+    },
+    "datePickerLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date-picker-label",
+      "reflect": false,
+      "defaultValue": "\"Date picker\""
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "flipAriaDescribedby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-describedby",
+      "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": "\"yyyy-MM-dd\""
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "invalid",
+      "reflect": false
+    },
+    "locale": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Partial<AirDatepickerLocale>",
+        "resolved": "{ days?: string[]; daysShort?: string[]; daysMin?: string[]; months?: string[]; monthsShort?: string[]; today?: string; clear?: string; dateFormat?: string; timeFormat?: string; firstDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "AirDatepickerLocale": {
+            "location": "import",
+            "path": "air-datepicker"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "\"yyyy-mm-dd\""
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "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 events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "format",
+      "methodName": "watchFormat"
+    }]; }
+}
+//# sourceMappingURL=flip-date-input.js.map

package/dist/collection/components/flip-date-input/flip-date-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-date-input.js","sourceRoot":"","sources":["../../../../src/components/flip-date-input/flip-date-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAcxC,MAAM,OAAO,aAAa;EAZ1B;IAeU,oBAAe,GAAY,aAAa,CAAC;IAGzC,WAAM,GAAY,YAAY,CAAC;IAG/B,gBAAW,GAAY,YAAY,CAAC;IA6BpC,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAClC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;MACvD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;MAEtD,MAAM,YAAY,GAAG,IAAI,MAAM,CAC7B,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAC5C,CAAC;MAEF,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC5D,OAAO;OACR;MAED,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;MAErD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAY,EAAE,EAAE;MACjC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,KAAiC,EAAE,EAAE;MACzD,MAAM,YAAY,GAAG,KAAK,CAAC,MAAc,CAAC;MAE1C,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;MAE1D,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAEhC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC,CAAC;GAoFH;EA9IC,iBAAiB;IACf,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC;IAElE,IAAI,CAAC,EAAE,GAAG,mBAAmB,KAAK,EAAE,CAAC;EACvC,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC;EACvB,CAAC;EAGD,WAAW;IACT,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EA2CO,gBAAgB,CAAC,KAAiB;IACxC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO;KACR;IAEA,KAAK,CAAC,MAA2B,CAAC,MAAM,EAAE,CAAC;EAC9C,CAAC;EAEO,SAAS;;IACf,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC;IAErB,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE;MACpC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;KACzC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,KAAK,IAAI;MACnB,CAAC,CAAC,MAAM;MACR,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK;QACxB,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;MACnC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,IAAI,IAAI,EAAE,CAAC;MACnD,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,SAAS,CAAC;MACrC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC;MAChC,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,YAAY;QACrB,iCACoB,IAAI,CAAC,mBAAmB,mBAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBACnC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,YAAY,GACnB;QAEF,6BACc,MAAM,EAClB,KAAK,EAAC,gCAAgC,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU,EACxB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ;UAEb,0BAAmC,CAC5B,CACL;MAEL,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,oBACE,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,SAAS,EAAC,YAAY,EACtB,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACtC,OAAO,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU;QAE7B,wBACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,aAAa,EAAE,IAAI,CAAC,UAAU,EAC9B,KAAK,EAAE,SAAS,GACE,CACP,CAChB,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport { AirDatepickerLocale } from \"air-datepicker\";\nimport { format, isValid, parse } from \"date-fns\";\nimport { create as createMask } from \"maska/dist/es6/maska\";\nimport Maska from \"maska/types/maska\";\n\nconst internalDateFormat = \"yyyy-MM-dd\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-date-input.css\",\n  tag: \"flip-date-input\",\n})\nexport class FlipDateInput {\n  @Prop() autoFocus?: boolean;\n  @Prop() autoSelect?: boolean;\n  @Prop() datePickerLabel?: string = \"Date picker\";\n  @Prop() disabled?: boolean;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() format?: string = \"yyyy-MM-dd\";\n  @Prop() invalid?: boolean;\n  @Prop() locale?: Partial<AirDatepickerLocale>;\n  @Prop() placeholder?: string = \"yyyy-mm-dd\";\n  @Prop() required?: boolean;\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private id: string;\n  private mask: Maska;\n  private pickerPopover: HTMLFlipPopoverElement;\n\n  componentWillLoad() {\n    const index = document.querySelectorAll(\"flip-date-input\").length;\n\n    this.id = `flip-date-input-${index}`;\n  }\n\n  componentDidLoad() {\n    this.setupMask();\n  }\n\n  disconnectedCallback() {\n    this.mask?.destroy();\n  }\n\n  @Watch(\"format\")\n  watchFormat() {\n    this.setupMask();\n  }\n\n  private onChange = (event: Event) => {\n    const value = (event.target as HTMLInputElement).value;\n    const newDate = parse(value, this.format, new Date());\n\n    const formatRegExp = new RegExp(\n      `^${this.format.replace(/y|d|M/g, \"\\\\d\")}$`\n    );\n\n    if (!Boolean(value.match(formatRegExp)) || !isValid(newDate)) {\n      return;\n    }\n\n    const newValue = format(newDate, internalDateFormat);\n\n    this.value = newValue;\n    this.valueChange.emit(newValue);\n  };\n\n  private onInput = (event: Event) => {\n    this.onChange(event);\n  };\n\n  private onClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.handleAutoSelect(event);\n  };\n\n  private onPickDate = (event: CustomEvent<Date | Date[]>) => {\n    const newDateValue = event.detail as Date;\n\n    const newValue = format(newDateValue, internalDateFormat);\n\n    this.value = newValue;\n    this.valueChange.emit(newValue);\n\n    this.pickerPopover.close();\n  };\n\n  private handleAutoSelect(event: FocusEvent) {\n    if (!this.autoSelect) {\n      return;\n    }\n\n    (event.target as HTMLInputElement).select();\n  }\n\n  private setupMask() {\n    this.mask?.destroy();\n\n    this.mask = createMask(`#${this.id}`, {\n      mask: this.format.replace(/y|d|M/g, \"#\"),\n    });\n  }\n\n  render() {\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const dateValue = Boolean(this.value)\n      ? parse(this.value, internalDateFormat, new Date())\n      : undefined;\n\n    const displayValue = isValid(dateValue)\n      ? format(dateValue, this.format)\n      : undefined;\n\n    return (\n      <Host>\n        <div class=\"date-input\">\n          <input\n            aria-describedby={this.flipAriaDescribedby}\n            aria-disabled={this.disabled ? \"true\" : undefined}\n            aria-invalid={ariaInvalid}\n            autoFocus={this.autoFocus}\n            class=\"date-input__input\"\n            disabled={this.disabled}\n            id={this.id}\n            onClick={this.onClick}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            placeholder={this.placeholder}\n            required={this.required}\n            type=\"text\"\n            value={displayValue}\n          />\n\n          <button\n            aria-hidden=\"true\"\n            class=\"date-input__date-picker-button\"\n            disabled={this.disabled}\n            id={`${this.id}-trigger`}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <flip-icon-today></flip-icon-today>\n          </button>\n        </div>\n\n        {!this.disabled && (\n          <flip-popover\n            label={this.datePickerLabel}\n            placement=\"bottom-end\"\n            popoverId=\"popover\"\n            ref={(el) => (this.pickerPopover = el)}\n            trigger={`${this.id}-trigger`}\n          >\n            <flip-date-picker\n              locale={this.locale}\n              onValueChange={this.onPickDate}\n              value={dateValue}\n            ></flip-date-picker>\n          </flip-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-date-input/flip-date-input.stories.js

@@ -0,0 +1,32 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-date-input.mdx";
+export default {
+  argTypes: {
+    format: {
+      description: "See https://date-fns.org/v2.29.3/docs/format.",
+      table: {
+        type: {
+          detail: '"d", "M", "y", and separators (e.g. ".", "-", "/", " ")',
+          summary: "Allowed patterns",
+        },
+      },
+    },
+    locale: {
+      control: { type: "object" },
+    },
+  },
+  component: "flip-date-input",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipDateInput",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-date-input", args);
+  return element;
+};
+export const FlipDateInput = Template.bind({});
+FlipDateInput.args = {};
+//# sourceMappingURL=flip-date-input.stories.js.map

package/dist/collection/components/flip-date-input/flip-date-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-date-input.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-date-input/flip-date-input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,eAAe;EACb,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,WAAW,EAAE,+CAA+C;MAC5D,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,yDAAyD;UACjE,OAAO,EAAE,kBAAkB;SAC5B;OACF;KACF;IACD,MAAM,EAAE;MACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;GACF;EACD,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;EAE9D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,aAAa,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-date-input.mdx\";\n\nexport default {\n  argTypes: {\n    format: {\n      description: \"See https://date-fns.org/v2.29.3/docs/format.\",\n      table: {\n        type: {\n          detail: '\"d\", \"M\", \"y\", and separators (e.g. \".\", \"-\", \"/\", \" \")',\n          summary: \"Allowed patterns\",\n        },\n      },\n    },\n    locale: {\n      control: { type: \"object\" },\n    },\n  },\n  component: \"flip-date-input\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipDateInput\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-date-input\", args);\n\n  return element;\n};\n\nexport const FlipDateInput = Template.bind({});\n\nFlipDateInput.args = {};\n"]}