@getflip/swirl-components 0.12.0 → 0.14.0

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

@@ -16,6 +16,17 @@
   line-height: var(--s-line-height-sm);
 }
 
+.date-input--inline .date-input__date-picker-button {
+    top: -0.0625rem;
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.date-input--inline .date-input__date-picker-button {
+      top: 0
+  }
+    }
+
 .date-input__input {
   display: inline-flex;
   width: 100%;

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

@@ -1,14 +1,11 @@
-import { Component, Event, h, Host, Prop, State, Watch, } from "@stencil/core";
+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 internalDateFormat = "yyyy-MM-dd";
 export class SwirlDateInput {
   constructor() {
-    this.datePickerLabel = "Date picker";
-    this.format = "yyyy-MM-dd";
-    this.placeholder = "yyyy-mm-dd";
-    this.iconSize = 24;
     this.desktopMediaQuery = getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
       this.updateIconSize(event.matches);
@@ -44,6 +41,21 @@ export class SwirlDateInput {
       this.valueChange.emit(newValue);
       this.pickerPopover.close();
     };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.datePickerLabel = "Date picker";
+    this.datePickerTriggerLabel = "Open date picker";
+    this.disabled = undefined;
+    this.format = "yyyy-MM-dd";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.labels = undefined;
+    this.locale = "en-US";
+    this.placeholder = "yyyy-mm-dd";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
   }
   componentWillLoad() {
     const index = document.querySelectorAll("swirl-date-input").length;
@@ -89,241 +101,300 @@ export class SwirlDateInput {
     const displayValue = isValid(dateValue)
       ? format(dateValue, this.format)
       : undefined;
-    return (h(Host, null,
-      h("div", { class: "date-input" },
-        h("input", { "aria-describedby": this.swirlAriaDescribedby, "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("swirl-icon-today", { size: this.iconSize }))),
-      !this.disabled && (h("swirl-popover", { label: this.datePickerLabel, placement: "bottom-end", popoverId: "popover", ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` },
-        h("swirl-date-picker", { locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    const className = classnames("date-input", {
+      "date-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: "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-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, type: "button" }, h("swirl-icon-today", { size: this.iconSize }))), !this.disabled && (h("swirl-popover", { label: this.datePickerLabel, placement: "bottom-end", popoverId: "popover", ref: (el) => (this.pickerPopover = el), trigger: `${this.id}-trigger` }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   static get is() { return "swirl-date-input"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["swirl-date-input.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["swirl-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": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-date-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "autoSelect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-select",
+        "reflect": false
       },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "swirlAriaDescribedby": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "datePickerTriggerLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-picker-trigger-label",
+        "reflect": false,
+        "defaultValue": "\"Open date picker\""
       },
-      "attribute": "swirl-aria-describedby",
-      "reflect": false
-    },
-    "format": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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\""
       },
-      "attribute": "format",
-      "reflect": false,
-      "defaultValue": "\"yyyy-MM-dd\""
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "inline",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": false
       },
-      "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"
+      "labels": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "WCDatepickerLabels",
+          "resolved": "{ clearButton: string; monthSelect: string; nextMonthButton: string; nextYearButton: string; picker: string; previousMonthButton: string; previousYearButton: string; todayButton: string; yearSelect: string; }",
+          "references": {
+            "WCDatepickerLabels": {
+              "location": "import",
+              "path": "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "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": {}
+      "locale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "locale",
+        "reflect": false,
+        "defaultValue": "\"en-US\""
       },
-      "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\""
       },
-      "attribute": "required",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false
       },
-      "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": ""
+      "swirlAriaDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-describedby",
+        "reflect": false
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
       }
-    }]; }
-  static get watchers() { return [{
-      "propName": "format",
-      "methodName": "watchFormat"
-    }]; }
+    };
+  }
+  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 watchers() {
+    return [{
+        "propName": "format",
+        "methodName": "watchFormat"
+      }];
+  }
 }