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

package/dist/collection/components/calcite-date-picker-month/calcite-date-picker-month.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]) {
@@ -90,57 +84,57 @@
 
 .week-headers {
   display: flex;
-  border-width: 0;
+  border-width: 0px;
   border-top-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
 
 .week-header {
-  color: var(--calcite-ui-text-3);
   text-align: center;
   font-weight: var(--calcite-font-weight-bold);
+  color: var(--calcite-ui-text-3);
   width: 14.2857142857%;
 }
 
 :host([scale=s]) .week-header {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
+  padding-left: 0px;
+  padding-right: 0px;
   padding-top: 0.5rem;
   padding-bottom: 0.75rem;
-  padding-left: 0;
-  padding-right: 0;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
 }
 
 :host([scale=m]) .week-header {
-  font-size: var(--calcite-font-size--2);
-  line-height: 1rem;
+  padding-left: 0px;
+  padding-right: 0px;
   padding-top: 0.75rem;
   padding-bottom: 1rem;
-  padding-left: 0;
-  padding-right: 0;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1rem;
 }
 
 :host([scale=l]) .week-header {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
+  padding-left: 0px;
+  padding-right: 0px;
   padding-top: 1rem;
   padding-bottom: 1.25rem;
-  padding-left: 0;
-  padding-right: 0;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .week-days {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   display: flex;
   flex-direction: row;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   padding-left: 6px;
   padding-right: 6px;
 }

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

@@ -4,8 +4,6 @@
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
-import { getKey } from "../../utils/key";
-import { getElementDir } from "../../utils/dom";
 export class CalciteDatePickerMonth {
   constructor() {
     /** Date currently active.*/
@@ -17,7 +15,7 @@ export class CalciteDatePickerMonth {
     //--------------------------------------------------------------------------
     this.keyDownHandler = (e) => {
       const isRTL = this.el.dir === "rtl";
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
           this.addDays(-7);
@@ -99,20 +97,19 @@ export class CalciteDatePickerMonth {
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
-    const dir = getElementDir(this.el);
     const days = [
       ...prevMonDays.map((day) => {
         const date = new Date(year, month - 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       }),
       ...curMonDays.map((day) => {
         const date = new Date(year, month, day);
         const active = sameDate(date, this.activeDate);
-        return this.renderDateDay(active, day, dir, date, true, true);
+        return this.renderDateDay(active, day, date, true, true);
       }),
       ...nextMonDays.map((day) => {
         const date = new Date(year, month + 1, day);
-        return this.renderDateDay(false, day, dir, date);
+        return this.renderDateDay(false, day, date);
       })
     ];
     const weeks = [];
@@ -225,7 +222,7 @@ export class CalciteDatePickerMonth {
   /**
    * Render calcite-date-picker-day
    */
-  renderDateDay(active, day, dir, date, currentMonth, ref) {
+  renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
@@ -235,7 +232,7 @@ export class CalciteDatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, dir: dir, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();

package/dist/collection/components/calcite-date-picker-month-header/calcite-date-picker-month-header.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]) {
@@ -91,61 +85,57 @@
 .header {
   display: flex;
   justify-content: space-between;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
 
 :host([scale=s]) .text {
-  font-size: var(--calcite-font-size--1);
-  line-height: 1rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
-
 :host([scale=s]) .chevron {
   height: 2.25rem;
 }
 
 :host([scale=m]) .text {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.25rem;
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
+  font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
-
 :host([scale=m]) .chevron {
   height: 3rem;
 }
 
 :host([scale=l]) .text {
-  font-size: var(--calcite-font-size-1);
-  line-height: 1.5rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
+  font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
-
 :host([scale=l]) .chevron {
   height: 3.5rem;
 }
 
 .chevron {
-  color: var(--calcite-ui-text-3);
-  flex-grow: 0;
-  box-sizing: content-box;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
   margin-left: -0.25rem;
   margin-right: -0.25rem;
-  border-style: none;
+  box-sizing: content-box;
   display: flex;
+  flex-grow: 0;
+  cursor: pointer;
   align-items: center;
   justify-content: center;
+  border-style: none;
   background-color: var(--calcite-ui-foreground-1);
-  cursor: pointer;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  color: var(--calcite-ui-text-3);
+  outline: 2px solid transparent;
   transition-property: all;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -154,70 +144,63 @@
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   width: 14.2857142857%;
 }
-
 .chevron:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-
 .chevron:hover, .chevron:focus {
-  color: var(--calcite-ui-text-1);
   background-color: var(--calcite-ui-foreground-2);
   fill: var(--calcite-ui-text-1);
+  color: var(--calcite-ui-text-1);
 }
-
 .chevron:active {
   background-color: var(--calcite-ui-foreground-3);
 }
-
 .chevron[aria-disabled=true] {
   pointer-events: none;
   opacity: 0;
 }
 
 .text {
+  margin-top: auto;
+  margin-bottom: auto;
+  width: 100%;
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
-  line-height: 1;
-  margin-top: auto;
-  margin-bottom: auto;
   text-align: center;
-  width: 100%;
+  line-height: 1;
 }
 
-.text--reverse {
+.text-nreverse {
   flex-direction: row-reverse;
 }
 
-.month,
-.year,
-.suffix {
-  color: var(--calcite-ui-text-1);
-  background-color: var(--calcite-ui-foreground-1);
-  font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.25;
+.month, .year, .suffix {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   margin-top: auto;
   margin-bottom: auto;
   display: inline-block;
+  background-color: var(--calcite-ui-foreground-1);
+  font-weight: var(--calcite-font-weight-medium);
+  line-height: 1.25;
+  color: var(--calcite-ui-text-1);
   font-size: inherit;
 }
 
 .year {
-  font-family: inherit;
-  text-align: center;
-  border-style: none;
+  position: relative;
   width: 3rem;
+  border-style: none;
   background-color: transparent;
-  position: relative;
+  text-align: center;
+  font-family: inherit;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   z-index: 2;
 }
-
 .year:hover {
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -225,7 +208,6 @@
   outline: 2px solid var(--calcite-ui-border-2);
   outline-offset: 2px;
 }
-
 .year:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
@@ -242,11 +224,11 @@
 
 .suffix {
   position: absolute;
+  top: 0px;
+  left: 0px;
   width: 4rem;
   white-space: nowrap;
   text-align: left;
-  top: 0;
-  left: 0;
 }
 
 .suffix__invisible {

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

@@ -3,9 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
-import { getKey } from "../../utils/key";
 import { CalciteHeading } from "../functional/CalciteHeading";
 export class CalciteDatePickerMonthHeader {
   constructor() {
@@ -19,7 +17,7 @@ export class CalciteDatePickerMonthHeader {
      */
     this.onYearKey = (e) => {
       const year = e.target.value;
-      switch (getKey(e.key)) {
+      switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
           this.setYear(year, -1);
@@ -37,7 +35,7 @@ export class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.prevMonthDate);
     };
     this.prevMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.prevMonthClick(e);
       }
@@ -46,7 +44,7 @@ export class CalciteDatePickerMonthHeader {
       this.handleArrowClick(e, this.nextMonthDate);
     };
     this.nextMonthKeydown = (e) => {
-      const key = getKey(e.key);
+      const key = e.key;
       if (key === " " || key === "Enter") {
         this.nextMonthClick(e);
       }
@@ -69,10 +67,9 @@ export class CalciteDatePickerMonthHeader {
     this.setNextPrevMonthDates();
   }
   render() {
-    const dir = getElementDir(this.el);
-    return (h("div", { class: "header", dir: dir }, this.renderContent(dir)));
+    return h("div", { class: "header" }, this.renderContent());
   }
-  renderContent(dir) {
+  renderContent() {
     var _a;
     if (!this.activeDate || !this.localeData) {
       return null;
@@ -87,11 +84,11 @@ export class CalciteDatePickerMonthHeader {
     const suffix = (_a = this.localeData.year) === null || _a === void 0 ? void 0 : _a.suffix;
     return (h(Fragment, null,
       h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })),
       h("div", { class: { text: true, "text--reverse": reverse } },
         h(CalciteHeading, { class: "month", level: this.headingLevel }, localizedMonth),
         h("span", { class: "year-wrap" },
-          h("input", { class: {
+          h("input", { "aria-label": this.intlYear, class: {
               year: true,
               "year--suffix": !!suffix
             }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.yearChanged, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }),
@@ -99,7 +96,7 @@ export class CalciteDatePickerMonthHeader {
             h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear),
             " " + suffix)))),
       h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 },
-        h("calcite-icon", { dir: dir, "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+        h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -289,6 +286,23 @@ export class CalciteDatePickerMonthHeader {
       "attribute": "intl-next-month",
       "reflect": false
     },
+    "intlYear": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Localized string for year."
+      },
+      "attribute": "intl-year",
+      "reflect": false
+    },
     "scale": {
       "type": "string",
       "mutable": false,