@esri/calcite-components 1.0.0-next.363 → 1.0.0-next.367

package/dist/components/calcite-shell.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 
 const CSS = {
   main: "main",
@@ -39,12 +40,23 @@ let CalciteShell$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
   renderHeader() {
     const hasHeader = !!getSlotted(this.el, SLOTS.header);
-    return hasHeader ? h("slot", { name: SLOTS.header }) : null;
+    return hasHeader ? h("slot", { key: "header", name: SLOTS.header }) : null;
   }
   renderContent() {
     const content = !!this.contentBehind
@@ -62,7 +74,7 @@ let CalciteShell$1 = class extends HTMLElement {
   }
   renderFooter() {
     const hasFooter = !!getSlotted(this.el, SLOTS.footer);
-    return hasFooter ? (h("div", { class: CSS.footer }, h("slot", { name: SLOTS.footer }))) : null;
+    return hasFooter ? (h("div", { class: CSS.footer, key: "footer" }, h("slot", { name: SLOTS.footer }))) : null;
   }
   renderMain() {
     const primaryPanel = getSlotted(this.el, SLOTS.primaryPanel);

package/dist/components/calcite-tile2.js

@@ -4,6 +4,7 @@
  */
 import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 import { d as defineCustomElement$1 } from './calcite-link2.js';
 
@@ -42,6 +43,17 @@ let CalciteTile = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/calcite-tip.js

@@ -6,6 +6,7 @@ import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@sten
 import { H as HEADING_LEVEL$1 } from './resources4.js';
 import { b as getSlotted } from './dom.js';
 import { C as CalciteHeading, c as constrainHeadingLevel } from './CalciteHeading.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$4 } from './calcite-action2.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-loader2.js';
@@ -67,6 +68,17 @@ let CalciteTip$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -85,7 +97,7 @@ let CalciteTip$1 = class extends HTMLElement {
   }
   renderImageFrame() {
     const { el } = this;
-    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame }, h("slot", { name: SLOTS.thumbnail }))) : null;
+    return getSlotted(el, SLOTS.thumbnail) ? (h("div", { class: CSS.imageFrame, key: "thumbnail" }, h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderInfoNode() {
     return (h("div", { class: CSS.info }, h("slot", null)));

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

@@ -5,6 +5,7 @@
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { T as TreeSelectionMode } from './interfaces2.js';
 import { b as getSlotted, a as getElementDir, C as CSS_UTILITY, e as filterDirectChildren, n as nodeListToArray } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$3 } from './calcite-checkbox2.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
@@ -99,6 +100,10 @@ let CalciteTreeItem$1 = class extends HTMLElement {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
     }
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");

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

@@ -7,6 +7,7 @@ import { I as ICON_TYPES } from './resources3.js';
 import { g as guid } from './guid.js';
 import { S as SLOTS$1, a as CSS, d as defineCustomElement$2 } from './calcite-pick-list-item2.js';
 import { b as getSlotted } from './dom.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { d as defineCustomElement$5 } from './calcite-action2.js';
 import { d as defineCustomElement$4 } from './calcite-icon2.js';
 import { d as defineCustomElement$3 } from './calcite-loader2.js';
@@ -78,6 +79,17 @@ let CalciteValueListItem$1 = class extends HTMLElement {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   // --------------------------------------------------------------------------

package/dist/components/conditionalSlot.js

@@ -0,0 +1,40 @@
+/*!
+ * 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/internal/client';
+import { c as createObserver } from './observers.js';
+
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ */
+function connectConditionalSlotComponent(component) {
+  if (!mutationObserver) {
+    mutationObserver = createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ */
+function disconnectConditionalSlotComponent(component) {
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    forceUpdate(target);
+  });
+}
+
+export { connectConditionalSlotComponent as c, disconnectConditionalSlotComponent as d };

package/dist/components/utils2.js

@@ -9,6 +9,9 @@ const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 const ComboboxDefaultPlacement = "bottom-leading";
+const TEXT = {
+  removeTag: "Remove tag"
+};
 
 function getAncestors(element) {
   var _a, _b;
@@ -35,4 +38,4 @@ function getDepth(element) {
   return result.snapshotLength;
 }
 
-export { ComboboxChildSelector as C, getItemChildren as a, ComboboxItem as b, ComboboxItemGroup as c, ComboboxDefaultPlacement as d, getAncestors as e, getDepth as f, getItemAncestors as g, hasActiveChildren as h };
+export { ComboboxChildSelector as C, TEXT as T, getItemChildren as a, ComboboxItem as b, ComboboxItemGroup as c, ComboboxDefaultPlacement as d, getAncestors as e, getDepth as f, getItemAncestors as g, hasActiveChildren as h };