@getflip/swirl-components 0.12.0 → 0.13.0

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

@@ -1,4 +1,5 @@
 import { Component, Event, h, Host, Prop, State, Watch, } 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";
@@ -6,7 +7,9 @@ const internalDateFormat = "yyyy-MM-dd";
 export class SwirlDateInput {
   constructor() {
     this.datePickerLabel = "Date picker";
+    this.datePickerTriggerLabel = "Open date picker";
     this.format = "yyyy-MM-dd";
+    this.locale = "en-US";
     this.placeholder = "yyyy-mm-dd";
     this.iconSize = 24;
     this.desktopMediaQuery = getDesktopMediaQuery();
@@ -89,13 +92,16 @@ export class SwirlDateInput {
     const displayValue = isValid(dateValue)
       ? format(dateValue, this.format)
       : undefined;
+    const className = classnames("date-input", {
+      "date-input--inline": this.inline,
+    });
     return (h(Host, null,
-      h("div", { class: "date-input" },
+      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-hidden": "true", class: "date-input__date-picker-button", disabled: this.disabled, id: `${this.id}-trigger`, tabIndex: -1, type: "button" },
+        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", { locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+        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"; }
@@ -158,6 +164,24 @@ export class SwirlDateInput {
       "reflect": false,
       "defaultValue": "\"Date picker\""
     },
+    "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\""
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -175,7 +199,7 @@ export class SwirlDateInput {
       "attribute": "disabled",
       "reflect": false
     },
-    "swirlAriaDescribedby": {
+    "format": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -189,15 +213,16 @@ export class SwirlDateInput {
         "tags": [],
         "text": ""
       },
-      "attribute": "swirl-aria-describedby",
-      "reflect": false
+      "attribute": "format",
+      "reflect": false,
+      "defaultValue": "\"yyyy-MM-dd\""
     },
-    "format": {
-      "type": "string",
+    "inline": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -206,9 +231,8 @@ export class SwirlDateInput {
         "tags": [],
         "text": ""
       },
-      "attribute": "format",
-      "reflect": false,
-      "defaultValue": "\"yyyy-MM-dd\""
+      "attribute": "inline",
+      "reflect": false
     },
     "invalid": {
       "type": "boolean",
@@ -227,19 +251,16 @@ export class SwirlDateInput {
       "attribute": "invalid",
       "reflect": false
     },
-    "locale": {
+    "labels": {
       "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; }",
+        "original": "WCDatepickerLabels",
+        "resolved": "{ clearButton: string; monthSelect: string; nextMonthButton: string; nextYearButton: string; picker: string; previousMonthButton: string; previousYearButton: string; todayButton: string; yearSelect: string; }",
         "references": {
-          "Partial": {
-            "location": "global"
-          },
-          "AirDatepickerLocale": {
+          "WCDatepickerLabels": {
             "location": "import",
-            "path": "air-datepicker"
+            "path": "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker"
           }
         }
       },
@@ -250,6 +271,24 @@ export class SwirlDateInput {
         "text": ""
       }
     },
+    "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\""
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,
@@ -285,6 +324,23 @@ export class SwirlDateInput {
       "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,

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

@@ -21,88 +21,165 @@
 }
   }
 
-.air-datepicker--pointer {
-  display: none;
+.date-picker__header {
+  display: flex;
+  margin-bottom: var(--s-space-8);
+  align-items: center;
 }
 
-.air-datepicker-nav {
+.date-picker__current-month {
   display: flex;
-  margin-bottom: var(--s-space-8);
+  padding: var(--s-space-8);
+  flex-grow: 1;
   align-items: center;
+  order: 1;
+  gap: var(--s-space-4);
 }
 
-.air-datepicker-nav--action {
+.date-picker__next-month-button,
+.date-picker__previous-month-button {
   position: relative;
   display: inline-flex;
   width: 2.5rem;
   height: 2.5rem;
+  margin: 0;
+  padding: 0;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
+  border: none;
   border-radius: 50%;
   color: var(--s-icon-highlight);
+  background-color: transparent;
   cursor: pointer;
-  order: 2;
 }
 
-.air-datepicker-nav--action:hover {
+.date-picker__next-month-button:after, .date-picker__previous-month-button:after {
+    position: absolute;
+    background-color: currentColor;
+    content: "";
+    inset: 0;
+    -webkit-mask-position: center center;
+            mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+  }
+
+.date-picker__next-month-button:hover, .date-picker__previous-month-button:hover {
     background-color: var(--s-surface-overlay-hovered);
   }
 
-.air-datepicker-nav--title {
-  padding: var(--s-space-8);
-  flex-grow: 1;
-  border-radius: var(--s-border-radius-s);
+.date-picker__next-month-button:focus:not(:focus-visible), .date-picker__previous-month-button:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.date-picker__next-month-button:focus-visible, .date-picker__previous-month-button:focus-visible {
+    outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
+  }
+
+.date-picker__next-month-button > svg, .date-picker__previous-month-button > svg {
+    display: none;
+  }
+
+.date-picker__next-month-button {
+  order: 3;
+}
+
+.date-picker__next-month-button:after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+.date-picker__previous-month-button {
+  order: 2;
+}
+
+.date-picker__previous-month-button:after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
+  }
+
+.date-picker__month-select,
+.date-picker__year-select {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: var(--s-surface-overlay-default);
+  font: inherit;
   font-size: var(--s-font-size-base);
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-base);
   text-align: left;
   cursor: pointer;
-  order: 0;
 }
 
-.air-datepicker-nav--title i {
-    font-style: normal;
+.date-picker__month-select:focus:not(:focus-visible), .date-picker__year-select:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.date-picker__month-select:focus-visible, .date-picker__year-select:focus-visible {
+    outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
   }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.air-datepicker-nav--title {
+.date-picker__month-select,
+.date-picker__year-select {
     font-size: var(--s-font-size-sm);
     line-height: var(--s-line-height-sm)
 }
   }
 
-.air-datepicker-body--day-names {
+.date-picker__month-select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.date-picker__year-select {
+  max-width: 4rem;
+}
+
+.date-picker__calendar {
+  display: block;
+  width: 100%;
+}
+
+.date-picker__calendar tbody {
+    display: block;
+  }
+
+.date-picker__calendar-header {
+  display: block;
+}
+
+.date-picker__weekday-row,
+.date-picker__calendar-row {
   display: flex;
+}
+
+.date-picker__weekday-row {
   margin-bottom: var(--s-space-8);
-  justify-content: space-between;
-  align-items: center;
 }
 
-.air-datepicker-body--day-name {
+.date-picker__weekday {
   display: inline-flex;
+  min-width: 2.25rem;
   flex-basis: calc(100 / 7 * 1%);
   justify-content: center;
   align-items: center;
   color: var(--s-text-subdued);
+  font-weight: var(--s-font-weight-regular);
   aspect-ratio: 1;
 }
 
-.air-datepicker-body--cells {
+.date-picker__date {
   position: relative;
   z-index: 1;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.air-datepicker-body--cells.-months- {
-    gap: var(--s-space-2);
-  }
-
-.air-datepicker-cell {
-  position: relative;
   display: inline-flex;
+  min-width: 2.25rem;
   flex-basis: calc(100 / 7 * 1%);
   justify-content: center;
   align-items: center;
@@ -111,136 +188,106 @@
   aspect-ratio: 1;
 }
 
-.air-datepicker-cell:not(.-month-):not(.-year-):not(.-in-range-):hover:before {
-      position: absolute;
-      z-index: -1;
-      border-radius: 50%;
+.date-picker__date:before {
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    background-color: transparent;
+    content: "";
+    inset: 0;
+  }
+
+.date-picker__date:hover:before {
       background-color: var(--s-surface-overlay-hovered);
-      content: "";
-      inset: 0;
     }
 
-.air-datepicker-cell.-month-,
-  .air-datepicker-cell.-year- {
-    height: 2.5rem;
-    flex-basis: calc(100 / 3 * 1% - var(--s-space-2) * 2);
-    border-radius: var(--s-border-radius-s);
-    aspect-ratio: auto;
+.date-picker__date--current:before {
+    background-color: var(--s-surface-overlay-hovered);
   }
 
-.air-datepicker-cell.-month-.-in-range-:before, .air-datepicker-cell.-year-.-in-range-:before {
-        border-radius: var(--s-border-radius-s);
-      }
-
-.air-datepicker-cell.-month-:hover:not(.-in-range-):not(.-selected-), .air-datepicker-cell.-year-:hover:not(.-in-range-):not(.-selected-) {
-      background-color: var(--s-surface-overlay-hovered);
-    }
+.date-picker__date--current:focus:not(:focus-visible) {
+    outline: none;
+  }
 
-.air-datepicker-cell.-other-month- {
-    color: var(--s-text-subdued);
+.date-picker__date--current:focus-visible {
+    outline-color: var(--s-focus-default);
+    outline-offset: var(--s-space-2);
   }
 
-.air-datepicker-cell.-current-:not(.-month-):not(.-year-):after {
-      position: absolute;
-      z-index: -1;
-      border: var(--s-border-width-default) solid var(--s-border-highlight);
-      border-radius: 50%;
-      content: "";
-      inset: 0;
-    }
+.date-picker__date--selected {
+  color: var(--s-text-on-surface-highlight);
+}
+
+.date-picker__date--selected:before {
+    background-color: var(--s-surface-highlight-default);
+  }
 
-.air-datepicker-cell.-selected- {
+.date-picker__date--selected:hover {
     color: var(--s-text-on-surface-highlight);
   }
 
-.air-datepicker-cell.-selected-.-year-,
-    .air-datepicker-cell.-selected-.-month- {
+.date-picker__date--selected:hover:before {
       background-color: var(--s-surface-highlight-default);
     }
 
-.air-datepicker-cell.-selected-:not(.-month-):not(.-year-):not(.-in-range-):before {
-        position: absolute;
-        z-index: -1;
-        border-radius: 50%;
-        background-color: var(--s-surface-highlight-default);
-        content: "";
-        inset: 0;
-      }
-
-.air-datepicker-cell.-disabled- {
-    color: var(--s-text-subdued);
-    cursor: default;
+.date-picker__date--selected > strong {
+    font-weight: var(--s-font-weight-medium);
   }
 
-.air-datepicker-cell.-disabled-:hover {
-      background-color: transparent;
-    }
-
-.air-datepicker-cell.-in-range-:before {
-      position: absolute;
-      z-index: -1;
-      top: 0.0625rem;
-      right: 0;
-      bottom: 0.0625rem;
-      left: 0;
-      border-radius: 0;
-      background-color: var(--s-surface-highlight-default);
-      content: "";
-      opacity: 0.2;
-    }
+.date-picker__date--in-range:not(.date-picker__date--selected):after {
+    position: absolute;
+    border-radius: 0px;
+    background-color: var(--s-surface-highlight-default);
+    content: "";
+    opacity: 0.2;
+    inset: 0.0625rem 0px;
+  }
 
-.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):hover {
-      color: var(--s-text-on-surface-highlight);
-    }
+.date-picker__date--start:not(.date-picker__date--end) {
+    color: var(--s-text-on-surface-highlight);
+  }
 
-.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):before {
-      position: absolute;
-      z-index: -1;
-      border-radius: 50%;
+.date-picker__date--start:not(.date-picker__date--end):before {
       background-color: var(--s-surface-highlight-default);
-      content: "";
-      inset: 0;
     }
 
-.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):after {
+.date-picker__date--start:not(.date-picker__date--end):after {
       position: absolute;
       z-index: -1;
-      top: 0.0625rem;
-      right: 0;
-      bottom: 0.0625rem;
-      left: 50%;
       border-radius: 0;
       background-color: var(--s-surface-highlight-default);
       content: "";
       opacity: 0.2;
+      inset: 0.0625rem 0 0.0625rem 50%;
     }
 
-.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):hover {
-      color: var(--s-text-on-surface-highlight);
-    }
+.date-picker__date--end:not(.date-picker__date--start) {
+    color: var(--s-text-on-surface-highlight);
+  }
 
-.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):before {
-      position: absolute;
-      z-index: -1;
-      border-radius: 50%;
+.date-picker__date--end:not(.date-picker__date--start):before {
       background-color: var(--s-surface-highlight-default);
-      content: "";
-      inset: 0;
     }
 
-.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):after {
+.date-picker__date--end:not(.date-picker__date--start):after {
       position: absolute;
       z-index: -1;
-      top: 0.0625rem;
-      right: 50%;
-      bottom: 0.0625rem;
-      left: 0;
       border-radius: 0;
       background-color: var(--s-surface-highlight-default);
       content: "";
       opacity: 0.2;
+      inset: 0.0625rem 50% 0.0625rem 0;
     }
 
-.-hidden- {
-  display: none;
+.date-picker__date--overflowing {
+  color: var(--s-text-subdued);
 }
+
+.date-picker__date--today:before {
+    box-shadow: inset 0 0 0 var(--s-border-width-default)
+      var(--s-border-highlight);
+  }
+
+.date-picker__date--today > em {
+    font-style: normal;
+  }