@esri/calcite-components 1.3.0-next.8 → 1.3.0

package/dist/collection/components/input-time-picker/input-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
@@ -11,9 +11,14 @@ import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
+import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
 import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
+import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
+import { CSS } from "./resources";
 export class InputTimePicker {
   constructor() {
+    this.focusOnOpen = false;
+    this.dialogId = `time-picker-dialog--${guid()}`;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
     this.previousValidValue = null;
@@ -24,7 +29,6 @@ export class InputTimePicker {
     //
     //--------------------------------------------------------------------------
     this.calciteInternalInputBlurHandler = () => {
-      this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
       numberStringFormatter.numberFormatOptions = {
@@ -44,7 +48,6 @@ export class InputTimePicker {
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
-        this.open = true;
         event.stopPropagation();
       }
     };
@@ -77,6 +80,24 @@ export class InputTimePicker {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.popoverCloseHandler = () => {
+      deactivateFocusTrap(this, {
+        onDeactivate: () => {
+          this.calciteInputEl.setFocus();
+          this.focusOnOpen = false;
+        }
+      });
+    };
+    this.popoverOpenHandler = () => {
+      activateFocusTrap(this, {
+        onActivate: () => {
+          if (this.focusOnOpen) {
+            this.calciteTimePickerEl.setFocus();
+            this.focusOnOpen = false;
+          }
+        }
+      });
+    };
     this.keyDownHandler = (event) => {
       const { defaultPrevented, key } = event;
       if (defaultPrevented) {
@@ -85,11 +106,18 @@ export class InputTimePicker {
       if (key === "Enter") {
         if (submitForm(this)) {
           event.preventDefault();
+          this.calciteInputEl.setFocus();
         }
       }
-      if (key === "Escape" && this.open) {
+      else if (key === "ArrowDown") {
+        this.open = true;
+        this.focusOnOpen = true;
+        event.preventDefault();
+      }
+      else if (key === "Escape" && this.open) {
         this.open = false;
         event.preventDefault();
+        this.calciteInputEl.setFocus();
       }
     };
     this.setCalcitePopoverEl = (el) => {
@@ -100,6 +128,13 @@ export class InputTimePicker {
     };
     this.setCalciteTimePickerEl = (el) => {
       this.calciteTimePickerEl = el;
+      connectFocusTrap(this, {
+        focusTrapEl: el,
+        focusTrapOptions: {
+          initialFocus: false,
+          setReturnFocus: false
+        }
+      });
     };
     this.setInputValue = (newInputValue) => {
       if (!this.calciteInputEl) {
@@ -151,11 +186,19 @@ export class InputTimePicker {
         }
       }
     };
+    this.onInputWrapperClick = () => {
+      this.open = !this.open;
+    };
+    this.deactivate = () => {
+      this.open = false;
+    };
     this.open = false;
     this.disabled = false;
+    this.focusTrapDisabled = false;
     this.form = undefined;
     this.readOnly = false;
-    this.messagesOverrides = undefined;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.name = undefined;
     this.numberingSystem = undefined;
     this.required = false;
@@ -164,6 +207,7 @@ export class InputTimePicker {
     this.placement = "auto";
     this.step = 60;
     this.value = null;
+    this.defaultMessages = undefined;
     this.effectiveLocale = "";
     this.localizedValue = undefined;
   }
@@ -176,11 +220,20 @@ export class InputTimePicker {
       this.reposition(true);
     }
   }
+  handleFocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
+  }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
       this.open = false;
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   valueWatcher(newValue) {
     if (!this.internalValueChange) {
       this.setValue({ value: newValue, origin: "external" });
@@ -195,24 +248,6 @@ export class InputTimePicker {
       includeSeconds: this.shouldIncludeSeconds()
     }));
   }
-  clickHandler(event) {
-    if (event.composedPath().includes(this.calciteTimePickerEl)) {
-      return;
-    }
-    this.setFocus();
-  }
-  timePickerBlurHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.open = false;
-  }
-  timePickerFocusHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!this.readOnly) {
-      this.open = true;
-    }
-  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -249,9 +284,11 @@ export class InputTimePicker {
     }
     connectLabel(this);
     connectForm(this);
+    connectMessages(this);
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -261,6 +298,8 @@ export class InputTimePicker {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
+    deactivateFocusTrap(this);
+    disconnectMessages(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -271,15 +310,18 @@ export class InputTimePicker {
   //
   // --------------------------------------------------------------------------
   render() {
-    const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, scale: this.scale, step: this.step,
+    const { disabled, messages, readOnly, dialogId } = this;
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setCalciteInputEl })), h("calcite-popover", { focusTrapDisabled: true, id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+      ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messagesOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, value: this.value,
+      ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this })));
   }
+  renderToggleIcon(open) {
+    return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
+  }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }
   static get delegatesFocus() { return true; }
@@ -293,6 +335,7 @@ export class InputTimePicker {
       "$": ["input-time-picker.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "open": {
@@ -331,6 +374,24 @@ export class InputTimePicker {
         "reflect": true,
         "defaultValue": "false"
       },
+      "focusTrapDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, prevents focus trapping."
+        },
+        "attribute": "focus-trap-disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "form": {
         "type": "string",
         "mutable": false,
@@ -369,16 +430,20 @@ export class InputTimePicker {
         "reflect": true,
         "defaultValue": "false"
       },
-      "messagesOverrides": {
+      "messageOverrides": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "Partial<TimePickerMessages>",
-          "resolved": "{ hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }",
+          "original": "Partial<InputTimePickerMessages & TimePickerMessages>",
+          "resolved": "{ chooseTime?: string; hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
+            "InputTimePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-time-picker/t9n"
+            },
             "TimePickerMessages": {
               "location": "import",
               "path": "../time-picker/assets/time-picker/t9n"
@@ -392,6 +457,29 @@ export class InputTimePicker {
           "text": "Use this property to override individual strings used by the component."
         }
       },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "InputTimePickerMessages",
+          "resolved": "{ chooseTime: string; }",
+          "references": {
+            "InputTimePickerMessages": {
+              "location": "import",
+              "path": "./assets/input-time-picker/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -561,6 +649,7 @@ export class InputTimePicker {
   }
   static get states() {
     return {
+      "defaultMessages": {},
       "effectiveLocale": {},
       "localizedValue": {}
     };
@@ -633,12 +722,18 @@ export class InputTimePicker {
     return [{
         "propName": "open",
         "methodName": "openHandler"
+      }, {
+        "propName": "focusTrapDisabled",
+        "methodName": "handleFocusTrapDisabled"
       }, {
         "propName": "disabled",
         "methodName": "handleDisabledAndReadOnlyChange"
       }, {
         "propName": "readOnly",
         "methodName": "handleDisabledAndReadOnlyChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "value",
         "methodName": "valueWatcher"
@@ -650,25 +745,4 @@ export class InputTimePicker {
         "methodName": "valueRelatedPropChange"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "clickHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "calciteInternalTimePickerBlur",
-        "method": "timePickerBlurHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "calciteInternalTimePickerFocus",
-        "method": "timePickerFocusHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -0,0 +1,8 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.3.0
+ */
+export const CSS = {
+  toggleIcon: "toggle-icon"
+};

package/dist/collection/components/label/label.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 /**
 * CSS Custom Properties
 *
@@ -167,12 +171,8 @@
 }
 
 :host([disabled]) > .container {
-  pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-:host([disabled]) ::slotted(*) {
-  pointer-events: none;
-}
 :host([disabled]) ::slotted(*[disabled]),
 :host([disabled]) ::slotted(*[disabled] *) {
   --tw-bg-opacity: 1;

package/dist/collection/components/label/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

package/dist/collection/components/label/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: inline;
 }
@@ -124,8 +128,18 @@
 }
 :host a:focus,
 :host span:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 
 calcite-icon {

package/dist/collection/components/link/link.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -75,6 +75,9 @@ export class Link {
   //
   //--------------------------------------------------------------------------
   clickHandler(event) {
+    if (this.disabled) {
+      return;
+    }
     // forwards the click() to the internal link for non user-initiated events
     if (!event.isTrusted) {
       this.childEl.click();

package/dist/collection/components/list/list.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/list/list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h } from "@stencil/core";
 import { debounce } from "lodash-es";

package/dist/collection/components/list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   container: "container",

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

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -159,7 +163,7 @@ td {
 tr:focus,
 td:focus {
   z-index: 300;
-  outline: 2px solid var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-ui-focus-color);
 }
 
 .content,

package/dist/collection/components/list-item/list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
@@ -541,7 +541,7 @@ export class ListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, the component is selected."
+          "text": "When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"` or `\"multiple\"`, the component is selected."
         },
         "attribute": "selected",
         "reflect": true,

package/dist/collection/components/list-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { Build } from "@stencil/core";
 const listItemGroupSelector = "calcite-list-item-group";

package/dist/collection/components/list-item-group/list-item-group.css

@@ -86,13 +86,17 @@
 }
 
 :host([disabled]) {
-  pointer-events: none;
   cursor: default;
   -webkit-user-select: none;
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
+:host([disabled]) *,
+:host([disabled]) ::slotted(*) {
+  pointer-events: none;
+}
+
 :host {
   display: flex;
   flex-direction: column;

package/dist/collection/components/list-item-group/list-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/list-item-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/loader/loader.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/modal/modal.css

@@ -248,8 +248,18 @@
   vertical-align: -2px;
 }
 .close:focus {
-  outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: -2px;
+  outline: 2px solid var(--calcite-ui-focus-color);
+  outline-offset: calc(
+            -2px *
+            calc(
+              1 -
+              2 * clamp(
+                0,
+                var(--calcite-ui-focus-offset-invert),
+                1
+              )
+            )
+          );
 }
 .close:hover, .close:focus, .close:active {
   background-color: var(--calcite-ui-foreground-2);

package/dist/collection/components/modal/modal.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/modal/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.8
+ * v1.3.0
  */
 export const CSS = {
   modal: "modal",