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

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

@@ -3,26 +3,32 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const CSS = {
+  button: "button",
   buttonBottomLeft: "button--bottom-left",
   buttonBottomRight: "button--bottom-right",
-  button: "button",
-  delimiter: "delimiter",
-  hour: "hour",
   buttonHourDown: "button--hour-down",
   buttonHourUp: "button--hour-up",
-  input: "input",
-  meridiem: "meridiem",
   buttonMeridiemDown: "button--meridiem-down",
   buttonMeridiemUp: "button--meridiem-up",
-  minute: "minute",
   buttonMinuteDown: "button--minute-down",
   buttonMinuteUp: "button--minute-up",
-  second: "second",
   buttonSecondDown: "button--second-down",
   buttonSecondUp: "button--second-up",
-  timePicker: "time-picker",
   buttonTopLeft: "button--top-left",
-  buttonTopRight: "button--top-right"
+  buttonTopRight: "button--top-right",
+  column: "column",
+  delimiter: "delimiter",
+  hour: "hour",
+  input: "input",
+  meridiem: "meridiem",
+  minute: "minute",
+  second: "second",
+  showMeridiem: "show-meridiem",
+  showSecond: "show-second",
+  "scale-s": "scale-s",
+  "scale-m": "scale-m",
+  "scale-l": "scale-l",
+  timePicker: "time-picker"
 };
 export const TEXT = {
   hour: "Hour",

package/dist/collection/components/calcite-tip/calcite-tip.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-tip-group/calcite-tip-group.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -47,7 +47,11 @@
 }
 
 :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 {
@@ -159,10 +163,10 @@ h5.heading {
   border-bottom-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-left: 1rem;
-  padding-right: 0;
   padding-top: 0;
   padding-bottom: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 1rem;
 }
 
 .header h2.heading {
@@ -198,7 +202,7 @@ h5.heading {
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   margin-top: 1px;
   animation-name: none;
-  animation-duration: 150ms;
+  animation-duration: var(--calcite-animation-timing);
   height: var(--calcite-tip-manager-height);
 }
 
@@ -242,15 +246,6 @@ h5.heading {
   margin-right: 0.5rem;
 }
 
-/* RTL */
-
-:host-context([dir=rtl]) .header.header {
-  padding-right: 1rem;
-  padding-left: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 /* @keyframes*/
 
 @keyframes tip-advance {

package/dist/collection/components/calcite-tooltip/calcite-tooltip.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -5,7 +5,6 @@
 import { Component, h, Listen, Prop, Element } from "@stencil/core";
 import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../calcite-tooltip/resources";
 import { queryElementRoots } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
  */
@@ -117,7 +116,7 @@ export class CalciteTooltipManager {
   //
   //--------------------------------------------------------------------------
   keyUpHandler(event) {
-    if (getKey(event.key) === "Escape") {
+    if (event.key === "Escape") {
       const { tooltipEl } = this;
       if (tooltipEl) {
         this.clearHoverTimeout(tooltipEl);

package/dist/collection/components/calcite-tree/calcite-tree.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-tree-item/calcite-tree-item.css

@@ -47,7 +47,11 @@
 }
 
 :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 {
@@ -85,51 +89,75 @@
 }
 
 :host {
-  --calcite-tree-indicator: var(--calcite-ui-border-1);
-  --calcite-tree-indicator-active: var(--calcite-ui-brand);
-  --calcite-tree-text: var(--calcite-ui-text-3);
-  --calcite-tree-text-active: var(--calcite-ui-text-1);
   display: block;
   cursor: pointer;
   outline: 2px solid transparent;
   outline-offset: 2px;
   max-width: 100%;
-  color: var(--calcite-tree-text);
+  color: var(--calcite-ui-text-3);
 }
 
 :host([scale=s]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
+}
+
+:host([scale=s]) .node-container {
   --calcite-tree-padding-y: 0.25rem;
 }
 
-:host([scale=s]) .node-container .checkbox {
-  margin-inline-start: 1.5rem;
+:host([scale=s]) .node-container .checkbox,
+:host([scale=s]) .node-container .chevron,
+:host([scale=s]) .node-container .checkmark,
+:host([scale=s]) .node-container .bullet-point {
+  margin-inline: 0.25rem;
 }
 
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+}
+
+:host([scale=m]) .node-container {
   --calcite-tree-padding-y: 0.5rem;
 }
 
-:host([scale=m]) .node-container .checkbox {
-  margin-inline-start: 2rem;
+:host([scale=m]) .node-container .checkbox,
+:host([scale=m]) .node-container .chevron,
+:host([scale=m]) .node-container .checkmark,
+:host([scale=m]) .node-container .bullet-point {
+  margin-inline: 0.5rem;
 }
 
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
+}
+
+:host([scale=l]) .node-container {
   --calcite-tree-padding-y: 0.75rem;
 }
 
-:host([scale=l]) .node-container .checkbox {
-  margin-inline-start: 2.5rem;
+:host([scale=l]) .node-container .checkbox,
+:host([scale=l]) .node-container .chevron,
+:host([scale=l]) .node-container .checkmark,
+:host([scale=l]) .node-container .bullet-point {
+  margin-inline: 0.75rem;
 }
 
-:host([lines]) {
-  --calcite-tree-line: var(--calcite-ui-border-2);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([lines]) .children-container:after {
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  transition-property: background-color, border-color, color, fill, stroke;
+  top: 0;
+  position: absolute;
+  width: 1px;
+  height: 96%;
+  content: "";
+  background-color: var(--calcite-ui-border-2);
+  z-index: -1;
 }
 
 :host(:not([lines])) .node-container:after {
@@ -182,28 +210,12 @@
   overflow: hidden;
   height: 0;
   margin-inline-start: 1.25rem;
-  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
-  transition: 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
+  transition: var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;
   transform-origin: top;
 }
 
-.children-container:after {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-  transition-property: background-color, border-color, color, fill, stroke;
-  top: 0;
-  position: absolute;
-  width: 1px;
-  height: 96%;
-  content: "";
-  background-color: var(--calcite-tree-line);
-  z-index: -1;
-}
-
 :host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
@@ -217,30 +229,14 @@
   padding: var(--calcite-tree-padding-y) 0;
 }
 
-.node-container .checkmark,
-.node-container .bullet-point {
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
-.node-container .checkbox {
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
 .node-container .checkmark,
 .node-container .bullet-point {
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   opacity: 0;
-  color: var(--calcite-tree-indicator);
-}
-
-.node-container:hover ::slotted(*),
-:host([selected]) .node-container:hover ::slotted(*),
-:host(:focus) .node-container ::slotted(*) {
-  color: var(--calcite-tree-text-hover);
+  color: var(--calcite-ui-border-1);
 }
 
 .node-container:hover .checkmark,
@@ -254,8 +250,8 @@
 
 :host([selected]) > .node-container,
 :host([selected]) > .node-container:hover {
-  color: var(--calcite-tree-text-active);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([selected]) > .node-container .bullet-point,
@@ -266,15 +262,15 @@
   color: var(--calcite-ui-brand);
 }
 
-:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
 
-:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
 
-:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
 
@@ -289,25 +285,23 @@
 
 :host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-tree-text-active);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([has-children][selected]) > .node-container[data-selection-mode=children], :host([has-children][selected]) > .node-container[data-selection-mode=multi-children] {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
 .chevron {
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   position: relative;
   align-self: center;
+  color: var(--calcite-ui-text-3);
   flex: 0 0 auto;
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  color: var(--calcite-tree-text);
 }
 
 .calcite--rtl .chevron {
@@ -318,19 +312,7 @@
   transform: rotate(90deg);
 }
 
-:host([scale=s]) > .node-container .checkbox {
-  margin-inline-end: 0.5rem;
-}
-
-:host([scale=m]) > .node-container .checkbox {
-  margin-inline-end: 0.75rem;
-}
-
-:host([scale=l]) > .node-container .checkbox {
-  margin-inline-end: 1rem;
-}
-
 :host([selected]) .checkmark,
 :host([selected]) .bullet-point {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -5,7 +5,6 @@
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";
-import { getKey } from "../../utils/key";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 /**
@@ -164,7 +163,7 @@ export class CalciteTreeItem {
   }
   keyDownHandler(e) {
     let root;
-    switch (getKey(e.key)) {
+    switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
           modifyCurrentSelection: e.shiftKey,

package/dist/collection/components/calcite-value-list/calcite-value-list.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/calcite-value-list/calcite-value-list.js

@@ -392,7 +392,7 @@ export class CalciteValueList {
             "location": "global"
           }
         },
-        "return": "Promise<Map<string, HTMLCalciteValueListItemElement>>"
+        "return": "Promise<Map<string, any>>"
       },
       "docs": {
         "text": "Returns the currently selected items",

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.css

@@ -47,7 +47,11 @@
 }
 
 :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 {

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -39,6 +39,6 @@ export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };

package/dist/collection/utils/conditionalSlot.js

@@ -0,0 +1,26 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { forceUpdate } from "@stencil/core";
+const slotChangedMap = new WeakMap();
+function onSlotChange() {
+  forceUpdate(this);
+}
+const eventType = "slotchange";
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+export function connectConditionalSlotComponent(component) {
+  const boundSlotChange = onSlotChange.bind(component);
+  component.el.shadowRoot.addEventListener(eventType, boundSlotChange);
+  slotChangedMap.set(component, boundSlotChange);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+export function disconnectConditionalSlotComponent(component) {
+  const boundSlotChange = slotChangedMap.get(component);
+  component.el.shadowRoot.removeEventListener(eventType, boundSlotChange);
+  slotChangedMap.delete(component);
+}