@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,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]) {
@@ -89,16 +79,16 @@
 }
 
 :host {
+  position: relative;
   display: inline-block;
-  vertical-align: top;
   width: 100%;
-  position: relative;
   overflow: visible;
-  border-radius: 0;
+  border-radius: 0px;
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
   background-color: var(--calcite-ui-foreground-1);
+  vertical-align: top;
 }
 
 :host([scale=s]) {

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

@@ -161,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)) {
@@ -211,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() {
@@ -354,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

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

@@ -13,10 +13,14 @@ function getSupportedLocale(lang = "") {
   if (locales.indexOf(lang) > -1) {
     return lang;
   }
-  else {
-    const base = lang.split("-")[0];
-    return locales.indexOf(base) > -1 ? base : "en";
+  lang = lang.toLowerCase();
+  if (lang.includes("-")) {
+    lang = lang.replace(/(\w+)-(\w+)/, (_match, language, region) => `${language}-${region.toUpperCase()}`);
+    if (!locales.includes(lang)) {
+      lang = lang.split("-")[0];
+    }
   }
+  return locales.includes(lang) ? lang : "en";
 }
 /**
  * CLDR cache.

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

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,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,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%;
 }
 
@@ -111,23 +101,25 @@
 
 .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;
 }
 
@@ -135,11 +127,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;
@@ -150,12 +140,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;
@@ -166,12 +154,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;
@@ -187,8 +173,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);
 }
@@ -227,7 +212,6 @@
 :host([end-of-range]) .calcite--rtl .day-wrapper {
   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;
@@ -242,7 +226,6 @@
 :host([start-of-range]) .calcite--rtl .day-wrapper {
   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;
@@ -266,59 +249,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);
@@ -328,9 +315,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);
@@ -340,9 +325,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);
@@ -352,21 +335,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);
 }
 

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

@@ -1,51 +1,42 @@
 /* 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: calc(150ms * var(--calcite-internal-duration-factor));
   --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
@@ -79,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]) {
@@ -94,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;
 }