@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -4,9 +4,7 @@
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, dateFromISO, dateToISO, getDaysDiff } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { HEADING_LEVEL, TEXT } from "./resources";
 export class CalciteDatePicker {
   constructor() {
@@ -18,6 +16,10 @@ export class CalciteDatePicker {
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
+    /** Localized string for "year" (used for aria label)
+     * @default "Year"
+     */
+    this.intlYear = TEXT.year;
     /** BCP 47 language tag for desired language and country format */
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
@@ -32,7 +34,7 @@ export class CalciteDatePicker {
     //
     //--------------------------------------------------------------------------
     this.keyUpHandler = (e) => {
-      if (getKey(e.key) === "Escape") {
+      if (e.key === "Escape") {
         this.reset();
       }
     };
@@ -159,8 +161,10 @@ export class CalciteDatePicker {
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
       if (!this.range) {
-        this.value = dateToISO(date);
-        this.activeDate = date;
+        this.value = date ? dateToISO(date) : "";
+        this.valueAsDate = date || null;
+        this.activeDate = date || null;
+        this.calciteDatePickerChange.emit(date);
         return;
       }
       if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
@@ -209,12 +213,12 @@ export class CalciteDatePicker {
           this.endAsDate = this.activeEndDate = this.end = undefined;
         }
       }
+      this.calciteDatePickerChange.emit(date);
     };
   }
   handleValueAsDate(date) {
     if (!Array.isArray(date) && date && date !== this.activeDate) {
       this.activeDate = date;
-      this.calciteDatePickerChange.emit(date);
     }
   }
   handleRangeChange() {
@@ -222,6 +226,12 @@ export class CalciteDatePicker {
     this.activeEndDate = endDate;
     this.activeStartDate = startDate;
   }
+  onMinChanged(min) {
+    this.minAsDate = dateFromISO(min);
+  }
+  onMaxChanged(max) {
+    this.maxAsDate = dateFromISO(max);
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -251,6 +261,8 @@ export class CalciteDatePicker {
   }
   async componentWillLoad() {
     await this.loadLocaleData();
+    this.onMinChanged(this.min);
+    this.onMaxChanged(this.max);
   }
   render() {
     var _a;
@@ -281,8 +293,7 @@ export class CalciteDatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    const dir = getElementDir(this.el);
-    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   valueHandler(value) {
     if (Array.isArray(value)) {
@@ -312,10 +323,10 @@ export class CalciteDatePicker {
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
    */
-  renderCalendar(activeDate, dir, maxDate, minDate, date, endDate) {
+  renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
-      h("calcite-date-picker-month-header", { activeDate: activeDate, dir: dir, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      h("calcite-date-picker-month", { activeDate: activeDate, dir: dir, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
+      h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
@@ -345,14 +356,14 @@ export class CalciteDatePicker {
     }
   }
   setEndDate(date) {
-    this.end = dateToISO(date);
+    this.end = date ? dateToISO(date) : "";
     this.setEndAsDate(date, true);
-    this.activeEndDate = date;
+    this.activeEndDate = date || null;
   }
   setStartDate(date) {
-    this.start = dateToISO(date);
+    this.start = date ? dateToISO(date) : "";
     this.setStartAsDate(date, true);
-    this.activeStartDate = date;
+    this.activeStartDate = date || null;
   }
   /**
    * Get an active date using the value, or current date as default
@@ -535,7 +546,7 @@ export class CalciteDatePicker {
     },
     "min": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -552,7 +563,7 @@ export class CalciteDatePicker {
     },
     "max": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -609,6 +620,27 @@ export class CalciteDatePicker {
       "reflect": false,
       "defaultValue": "TEXT.nextMonth"
     },
+    "intlYear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"Year\""
+          }],
+        "text": "Localized string for \"year\" (used for aria label)"
+      },
+      "attribute": "intl-year",
+      "reflect": false,
+      "defaultValue": "TEXT.year"
+    },
     "locale": {
       "type": "string",
       "mutable": false,
@@ -782,6 +814,12 @@ export class CalciteDatePicker {
     }, {
       "propName": "endAsDate",
       "methodName": "handleRangeChange"
+    }, {
+      "propName": "min",
+      "methodName": "onMinChanged"
+    }, {
+      "propName": "max",
+      "methodName": "onMaxChanged"
     }, {
       "propName": "value",
       "methodName": "valueHandler"

package/dist/collection/components/calcite-date-picker/resources.js

@@ -5,5 +5,6 @@
 export const HEADING_LEVEL = 2;
 export const TEXT = {
   nextMonth: "Next month",
-  prevMonth: "Previous month"
+  prevMonth: "Previous month",
+  year: "Year"
 };

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -86,12 +80,12 @@
 
 :host {
   display: flex;
+  min-width: 0px;
+  cursor: pointer;
   justify-content: center;
+  color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
-  color: var(--calcite-ui-text-3);
-  cursor: pointer;
-  min-width: 0;
   width: 14.2857142857%;
 }
 
@@ -107,23 +101,24 @@
 
 .day {
   display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 9999px;
   font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
-  justify-content: center;
-  align-items: center;
   line-height: 1;
   color: var(--calcite-ui-text-3);
-  transition-property: all;
   opacity: var(--calcite-ui-opacity-disabled);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   background: none;
   box-shadow: 0 0 0 2px transparent, 0 0 0 0px transparent;
 }
 
 .text {
   margin-top: 1px;
-  margin-right: 0;
-  margin-bottom: 0;
+  margin-right: 0px;
+  margin-bottom: 0px;
   margin-left: 1px;
 }
 
@@ -131,11 +126,9 @@
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-
 :host([scale=s]) .day-wrapper {
-  padding: 0;
+  padding: 0px;
 }
-
 :host([scale=s]) .day {
   height: 27px;
   width: 27px;
@@ -146,12 +139,10 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-
 :host([scale=m]) .day-wrapper {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-
 :host([scale=m]) .day {
   height: 33px;
   width: 33px;
@@ -162,12 +153,10 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-
 :host([scale=l]) .day-wrapper {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-
 :host([scale=l]) .day {
   height: 43px;
   width: 43px;
@@ -183,8 +172,7 @@
   opacity: 0.25;
 }
 
-:host(:hover:not([disabled])) .day,
-:host([active]:not([range])) .day {
+:host(:hover:not([disabled])) .day, :host([active]:not([range])) .day {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
@@ -209,13 +197,20 @@
   background-color: var(--calcite-ui-foreground-current);
 }
 
+:host([start-of-range]) .day-wrapper {
+  border-start-start-radius: 40%;
+  border-end-start-radius: 40%;
+}
+
+:host([end-of-range]) .day-wrapper {
+  border-start-end-radius: 40%;
+  border-end-end-radius: 40%;
+}
+
 :host([start-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([end-of-range]) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 40%;
-  border-bottom-left-radius: 40%;
   box-shadow: inset 4px 0 var(--calcite-ui-foreground-1);
 }
-
 :host([start-of-range]) :not(.calcite--rtl) .day,
 :host([end-of-range]) .calcite--rtl .day {
   opacity: 1;
@@ -228,11 +223,8 @@
 
 :host([end-of-range]) :not(.calcite--rtl) .day-wrapper,
 :host([start-of-range]) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 40%;
-  border-bottom-right-radius: 40%;
   box-shadow: inset -4px 0 var(--calcite-ui-foreground-1);
 }
-
 :host([end-of-range]) :not(.calcite--rtl) .day,
 :host([start-of-range]) .calcite--rtl .day {
   opacity: 1;
@@ -256,59 +248,63 @@
 :host([highlighted]) .day-wrapper {
   background-color: var(--calcite-ui-foreground-current);
 }
-
 :host([highlighted]) .day-wrapper .day {
   color: var(--calcite-ui-text-1);
 }
 
 :host([highlighted]:not([active]:focus)) .day {
-  border-radius: 0;
+  border-radius: 0px;
   color: var(--calcite-ui-text-1);
 }
 
 :host([range-hover]:not([selected])) .day-wrapper {
   background-color: var(--calcite-ui-foreground-2);
 }
-
 :host([range-hover]:not([selected])) .day {
-  border-radius: 0;
+  border-radius: 0px;
 }
 
 :host([end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
 :host([start-of-range][range-hover]) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
-  border-radius: 0;
-  box-shadow: none;
+  border-radius: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 :host([start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
 :host([end-of-range][range-hover]) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
-  border-radius: 0;
-  box-shadow: none;
+  border-radius: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 :host(:hover[end-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
 :host(:hover[start-of-range][range-hover]) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
-  border-radius: 0;
-  box-shadow: none;
+  border-radius: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 :host(:hover[start-of-range][range-hover]) :not(.calcite--rtl) .day-wrapper,
 :host(:hover[end-of-range][range-hover]) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to left, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
-  border-radius: 0;
-  box-shadow: none;
+  border-radius: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 :host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day-wrapper,
 :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current));
 }
-
-:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day,
-:host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -318,9 +314,7 @@
 :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-current), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-
-:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day,
-:host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -330,9 +324,7 @@
 :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2));
 }
-
-:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day,
-:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
@@ -342,21 +334,17 @@
 :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day-wrapper {
   background-image: linear-gradient(to right, var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-2), var(--calcite-ui-foreground-1), var(--calcite-ui-foreground-1));
 }
-
-:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day,
-:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
+:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) :not(.calcite--rtl) .day, :host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .calcite--rtl .day {
   border-radius: 9999px;
   opacity: 1;
   box-shadow: 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
-:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper,
-:host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host(:hover[start-of-range].hover--inside-range.focused--end) .day-wrapper, :host(:hover[end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-image: none;
 }
 
-:host([start-of-range].hover--inside-range.focused--end) .day-wrapper,
-:host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
+:host([start-of-range].hover--inside-range.focused--end) .day-wrapper, :host([end-of-range].hover--inside-range.focused--start) .day-wrapper {
   background-color: var(--calcite-ui-foreground-2);
 }
 
@@ -364,8 +352,6 @@
 :host([range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:first-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:first-child) .calcite--rtl .day-wrapper {
-  border-top-right-radius: 45%;
-  border-bottom-right-radius: 45%;
   box-shadow: inset -4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -373,8 +359,6 @@
 :host([range-hover]:first-child) :not(.calcite--rtl) .day-wrapper,
 :host([highlighted]:last-child) .calcite--rtl .day-wrapper,
 :host([range-hover]:last-child) .calcite--rtl .day-wrapper {
-  border-top-left-radius: 45%;
-  border-bottom-left-radius: 45%;
   box-shadow: inset 4px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
@@ -399,6 +383,18 @@
   box-shadow: inset 6px 0px 0px 0px var(--calcite-ui-foreground-1);
 }
 
+:host([highlighted]:first-child) .day-wrapper,
+:host([range-hover]:first-child) .day-wrapper {
+  border-start-start-radius: 45%;
+  border-end-start-radius: 45%;
+}
+
+:host([highlighted]:last-child) .day-wrapper,
+:host([range-hover]:last-child) .day-wrapper {
+  border-start-end-radius: 45%;
+  border-end-end-radius: 45%;
+}
+
 :host([scale=l][highlighted]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][range-hover]:last-child) :not(.calcite--rtl) .day-wrapper,
 :host([scale=l][highlighted]:first-child) .calcite--rtl .day-wrapper,

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
-import { getKey } from "../../utils/key";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteDatePickerDay {
@@ -35,7 +34,7 @@ export class CalciteDatePickerDay {
       !this.disabled && this.calciteDaySelect.emit();
     };
     this.keyDownHandler = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         !this.disabled && this.calciteDaySelect.emit();
       }