@esri/calcite-components 1.3.0-next.2 → 1.3.0-next.20

package/dist/collection/components/list-item/assets/list-item/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "close": "Lukk"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ro.json

@@ -0,0 +1,3 @@
+{
+  "close": "Închidere"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ru.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрыть"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_sk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvoriť"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_sl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zapri"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_sr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_sv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Stäng"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_th.json

@@ -0,0 +1,3 @@
+{
+  "close": "ปิด"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_tr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Kapat"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_uk.json

@@ -0,0 +1,3 @@
+{
+  "close": "Закрити"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_vi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Đóng"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "close": "关闭"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_zh-HK.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "close": "關閉"
+}

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,13 +1,15 @@
 /*!
  * 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.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { getDepth, getListItemChildren, updateListItemChildren } from "./utils";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 const focusMap = new Map();
 const listSelector = "calcite-list";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
@@ -26,6 +28,10 @@ export class ListItem {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.closeClickHandler = () => {
+      this.closed = true;
+      this.calciteListItemClose.emit();
+    };
     this.handleContentSlotChange = (event) => {
       this.hasCustomContent = slotChangeHasAssignedElement(event);
     };
@@ -138,6 +144,8 @@ export class ListItem {
       focusEl?.focus();
     };
     this.active = false;
+    this.closable = false;
+    this.closed = false;
     this.description = undefined;
     this.disabled = false;
     this.label = undefined;
@@ -149,6 +157,10 @@ export class ListItem {
     this.value = undefined;
     this.selectionMode = null;
     this.selectionAppearance = null;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
     this.level = null;
     this.visualLevel = null;
     this.parentListEl = undefined;
@@ -169,15 +181,24 @@ export class ListItem {
       this.calciteInternalListItemSelect.emit();
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
     const { el } = this;
     this.parentListEl = el.closest(listSelector);
     this.level = getDepth(el) + 1;
     this.visualLevel = getDepth(el, true);
     this.setSelectionDefaults();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -185,6 +206,10 @@ export class ListItem {
   componentDidRender() {
     updateHostInteraction(this, "managed");
   }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -235,10 +260,10 @@ export class ListItem {
       ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
-    const { label, hasActionsEnd } = this;
-    return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container", role: "gridcell",
+    const { label, hasActionsEnd, closable, messages } = this;
+    return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+      ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
   }
   renderContentStart() {
     const { hasContentStart } = this;
@@ -274,7 +299,7 @@ export class ListItem {
       ref: (el) => (this.contentEl = el) }, content));
   }
   render() {
-    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode } = this;
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed } = this;
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
     const borderSelected = showBorder && selected;
     const borderUnselected = showBorder && !selected;
@@ -282,7 +307,7 @@ export class ListItem {
         [CSS.container]: true,
         [CSS.containerBorderSelected]: borderSelected,
         [CSS.containerBorderUnselected]: borderUnselected
-      }, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
+      }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS.nestedContainer]: true,
@@ -313,6 +338,7 @@ export class ListItem {
       "$": ["list-item.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "active": {
@@ -336,6 +362,42 @@ export class ListItem {
         "reflect": false,
         "defaultValue": "false"
       },
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, a close button is added to the component."
+        },
+        "attribute": "closable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "closed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, hides the component."
+        },
+        "attribute": "closed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -479,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,
@@ -556,11 +618,59 @@ export class ListItem {
         "attribute": "selection-appearance",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<ListItemMessages>",
+          "resolved": "{ close?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "ListItemMessages": {
+              "location": "import",
+              "path": "./assets/list-item/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ListItemMessages",
+          "resolved": "{ close: string; }",
+          "references": {
+            "ListItemMessages": {
+              "location": "import",
+              "path": "./assets/list-item/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
       }
     };
   }
   static get states() {
     return {
+      "effectiveLocale": {},
+      "defaultMessages": {},
       "level": {},
       "visualLevel": {},
       "parentListEl": {},
@@ -588,6 +698,21 @@ export class ListItem {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteListItemClose",
+        "name": "calciteListItemClose",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the close button is clicked."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "calciteInternalListItemSelect",
         "name": "calciteInternalListItemSelect",
@@ -672,6 +797,12 @@ export class ListItem {
       }, {
         "propName": "selected",
         "methodName": "handleSelectedChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
 }

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.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   container: "container",
@@ -38,5 +38,6 @@ export const ICONS = {
   closedLTR: "caret-right",
   closedRTL: "caret-left",
   open: "caret-down",
-  blank: "blank"
+  blank: "blank",
+  close: "x"
 };

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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 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.2
+ * v1.3.0-next.20
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -24,9 +24,7 @@ import { connectMessages, disconnectMessages, setUpMessages, updateMessages } fr
  */
 export class Modal {
   constructor() {
-    this.mutationObserver = createObserver("mutation", () => {
-      this.updateFooterVisibility();
-    });
+    this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
     this.cssVarObserver = createObserver("mutation", () => {
       this.updateSizeCssVars();
     });
@@ -38,8 +36,6 @@ export class Modal {
     //--------------------------------------------------------------------------
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
-      this.focusTrapEl = el;
-      connectFocusTrap(this);
     };
     this.openEnd = () => {
       this.setFocus();
@@ -59,6 +55,10 @@ export class Modal {
         this.removeOverflowHiddenClass();
       });
     };
+    this.handleMutationObserver = () => {
+      this.updateFooterVisibility();
+      this.updateFocusTrapElements();
+    };
     this.updateFooterVisibility = () => {
       this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
@@ -129,6 +129,7 @@ export class Modal {
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
+    connectFocusTrap(this);
   }
   disconnectedCallback() {
     this.removeOverflowHiddenClass();
@@ -226,7 +227,7 @@ export class Modal {
    */
   async setFocus() {
     await componentLoaded(this);
-    focusFirstTabbable(this.focusTrapEl);
+    focusFirstTabbable(this.el);
   }
   /**
    * Updates the element(s) that are used within the focus-trap of the component.

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.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   modal: "modal",

package/dist/collection/components/notice/notice.css

@@ -200,8 +200,18 @@
   outline-color: transparent;
 }
 .notice-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
+              )
+            )
+          );
 }
 
 :host {

package/dist/collection/components/notice/notice.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.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/notice/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.2
+ * v1.3.0-next.20
  */
 export const SLOTS = {
   title: "title",

package/dist/collection/components/option/option.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.2
+ * v1.3.0-next.20
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-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.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.css

@@ -133,8 +133,18 @@
   outline-color: transparent;
 }
 :host button: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
+              )
+            )
+          );
 }
 
 .previous,

package/dist/collection/components/pagination/pagination.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.2
+ * v1.3.0-next.20
  */
 import { Fragment, h } from "@stencil/core";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";

package/dist/collection/components/pagination/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.2
+ * v1.3.0-next.20
  */
 export const CSS = {
   page: "page",