npm - @esri/calcite-components - Versions diffs - 1.3.0-next.1 → 1.3.0-next.11 - Mend

@esri/calcite-components 1.3.0-next.1 → 1.3.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1006) hide show

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

@@ -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.1
+ * v1.3.0-next.11
  */
 import { h } from "@stencil/core";
 import { debounce } from "lodash-es";
@@ -190,6 +190,9 @@ export class List {
     });
     this.updateSelectedItems();
   }
+  handleCalciteListItemClose() {
+    this.updateListItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -246,7 +249,7 @@ export class List {
       item.selectionMode = selectionMode;
     });
     this.listItems = items;
-    this.enabledListItems = items.filter((item) => !item.disabled);
+    this.enabledListItems = items.filter((item) => !item.disabled && !item.closed);
     if (this.filterEnabled) {
       this.dataForFilter = this.getItemData();
     }
@@ -590,6 +593,12 @@ export class List {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteListItemClose",
+        "method": "handleCalciteListItemClose",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -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.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item/assets/list-item/t9n/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export type ListItemMessages = {
+  close: string;
+};

package/dist/collection/components/list-item/assets/list-item/t9n/messages.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ar.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_bg.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_bs.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ca.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_cs.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Zavřít"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_da.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_de.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_el.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Κλείσιμο"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_en.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_es.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_et.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_fi.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_fr.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_he.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "סגירה"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_hr.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_hu.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Bezárás"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_id.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_it.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ja.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_ko.json ADDED Viewed

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

package/dist/collection/components/list-item/assets/list-item/t9n/messages_lt.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Uždaryti"
+}

package/dist/collection/components/list-item/assets/list-item/t9n/messages_lv.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "close": "Aizvērt"
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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/list-item.js CHANGED Viewed

@@ -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.1
+ * v1.3.0-next.11
  */
 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 CHANGED Viewed

@@ -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.1
+ * v1.3.0-next.11
  */
 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 CHANGED Viewed

@@ -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.1
+ * v1.3.0-next.11
  */
 import { Build } from "@stencil/core";
 const listItemGroupSelector = "calcite-list-item-group";

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

@@ -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 CHANGED Viewed

@@ -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.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

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

@@ -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.1
+ * v1.3.0-next.11
  */
 export const CSS = {
   container: "container",

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

@@ -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.1
+ * v1.3.0-next.11
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";