@esri/calcite-components 5.1.0-next.52 → 5.1.0-next.54

package/dist/components/calcite-list/customElement.js

@@ -102,6 +102,7 @@ class List extends LitElement {
     this.listen("calciteInternalListItemSelectMultiple", this.handleCalciteInternalListItemSelectMultiple);
     this.listen("calciteInternalListItemChange", this.handleCalciteInternalListItemChange);
     this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
+    this.listen("calciteInternalListItemGroupChange", this.handleCalciteInternalListItemChange);
   }
   static {
     this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], filterRowHeight: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
@@ -323,10 +324,14 @@ class List extends LitElement {
       return;
     }
     event.stopPropagation();
-    this.updateListItemsDebounced();
+    this.handleListItemChange();
   }
   handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    if (this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
+    this.handleListItemChange();
   }
   connectObserver() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });

package/dist/components/calcite-list-item/customElement.js

@@ -133,6 +133,9 @@ class ListItem extends LitElement {
     if (changes.has("displayMode") && this.hasUpdated) {
       this.handleExpandableChange(this.defaultSlotRef.value);
     }
+    if (changes.has("label") || changes.has("description") || changes.has("metadata")) {
+      this.emitCalciteInternalListItemChange();
+    }
     if (changes.has("expanded") && this.hasUpdated) {
       if (this.expanded) {
         this.handleExpandedChange();

package/dist/components/calcite-list-item-group/customElement.js

@@ -17,6 +17,7 @@ class ListItemGroup extends LitElement {
     this.filterHidden = false;
     this.scale = "m";
     this.calciteInternalListItemGroupDefaultSlotChange = createEvent({ cancelable: false });
+    this.calciteInternalListItemGroupChange = createEvent({ cancelable: false });
   }
   static {
     this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
@@ -24,6 +25,11 @@ class ListItemGroup extends LitElement {
   static {
     this.styles = styles;
   }
+  willUpdate(changes) {
+    if (changes.has("heading")) {
+      this.calciteInternalListItemGroupChange.emit();
+    }
+  }
   handleDefaultSlotChange() {
     this.calciteInternalListItemGroupDefaultSlotChange.emit();
   }

package/dist/components/calcite-navigation/customElement.js

@@ -38,6 +38,7 @@ class Navigation extends LitElement {
     this.mutationObserver = createObserver("mutation", () => {
       this.updateNavigationLogo();
       this.updateNavigationUser();
+      this.updateNestedNavigation();
     });
     this.navigationAction = false;
     this.scale = "m";
@@ -57,11 +58,13 @@ class Navigation extends LitElement {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateNavigationLogo();
     this.updateNavigationUser();
+    this.updateNestedNavigation();
   }
   updated(changes) {
-    if (changes.has("scale") || changes.has("logoSlotHasElements") || changes.has("userSlotHasElements")) {
+    if (changes.has("scale") || changes.has("logoSlotHasElements") || changes.has("userSlotHasElements") || changes.has("secondarySlotHasElements") || changes.has("tertiarySlotHasElements")) {
       this.updateNavigationLogo();
       this.updateNavigationUser();
+      this.updateNestedNavigation();
     }
   }
   disconnectedCallback() {
@@ -135,6 +138,17 @@ class Navigation extends LitElement {
       item.scale = this.scale;
     });
   }
+  updateNestedNavigation() {
+    const nestedNavigation = [
+      ...this.getOwnedNavigationElements(SLOTS.navSecondary, "calcite-navigation"),
+      ...this.getOwnedNavigationElements(SLOTS.navTertiary, "calcite-navigation")
+    ];
+    nestedNavigation.forEach((item) => {
+      if (item !== this.el) {
+        item.scale = this.scale;
+      }
+    });
+  }
   renderMenuAction() {
     return html`<slot name=${SLOTS.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && html`<calcite-action .icon=${ICONS.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${ref(this.navigationActionRef)}></calcite-action>` || ""}</slot>`;
   }