@esri/solutions-components 0.6.7 → 0.6.8

package/dist/components/calcite-card.js

@@ -5,11 +5,11 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { t as toAriaBoolean, g as getSlotted } from './dom.js';
+import { t as toAriaBoolean, a as getSlotted } from './dom.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
 import { d as defineCustomElement$4 } from './checkbox.js';
-import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$3 } from './label2.js';
 import { d as defineCustomElement$2 } from './loader.js';
 
 /*!
@@ -36,136 +36,136 @@ const SLOTS = {
 
 const cardCss = ":host{display:block;max-inline-size:100%}:host .calcite-card-container{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:var(--calcite-border-radius-base)}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header,.footer{display:flex;padding-inline:0.75rem;padding-block:0.75rem 0.25rem}.header{flex-direction:column}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{padding:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3)}:host([selected]) .calcite-card-container{border-color:var(--calcite-ui-brand)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selectable]) .header{padding-inline-end:2rem}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper{position:absolute;margin:0px;padding:0px;inset-block-start:0.5rem;inset-inline-end:0.5rem}.thumbnail-wrapper{display:flex}.calcite-card-container.inline{flex-direction:row}.calcite-card-container.inline>.container{inline-size:60%}.calcite-card-container.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.calcite-card-container.inline slot[name=thumbnail]::slotted(img),.calcite-card-container.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.cardSelectClick = () => {
-      this.selectCard();
-    };
-    this.cardSelectKeyDown = (event) => {
-      switch (event.key) {
-        case " ":
-        case "Enter":
-          this.selectCard();
-          event.preventDefault();
-          break;
-      }
-    };
-    this.loading = false;
-    this.selected = false;
-    this.selectable = false;
-    this.thumbnailPosition = "block-start";
-    this.messages = undefined;
-    this.messageOverrides = undefined;
-    this.effectiveLocale = undefined;
-    this.defaultMessages = undefined;
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectConditionalSlotComponent(this);
-    connectLocalized(this);
-    connectMessages(this);
-  }
-  disconnectedCallback() {
-    disconnectConditionalSlotComponent(this);
-    disconnectLocalized(this);
-    disconnectMessages(this);
-  }
-  async componentWillLoad() {
-    await setUpMessages(this);
-  }
-  render() {
-    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
-    const thumbnailStart = this.thumbnailPosition.endsWith("start");
-    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
-  }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
-  selectCard() {
-    this.selected = !this.selected;
-    this.calciteCardSelect.emit();
-  }
-  renderThumbnail() {
-    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
-  }
-  renderCheckbox() {
-    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: this.messages.select })));
-  }
-  renderHeader() {
-    const { el } = this;
-    const title = getSlotted(el, SLOTS.title);
-    const subtitle = getSlotted(el, SLOTS.subtitle);
-    const hasHeader = title || subtitle;
-    return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
-  }
-  renderFooter() {
-    const { el } = this;
-    const startFooter = getSlotted(el, SLOTS.footerStart);
-    const endFooter = getSlotted(el, SLOTS.footerEnd);
-    const hasFooter = startFooter || endFooter;
-    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerStart }), h("slot", { name: SLOTS.footerEnd }))) : null;
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get el() { return this; }
-  static get watchers() { return {
-    "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleChange"]
-  }; }
-  static get style() { return cardCss; }
-}, [1, "calcite-card", {
-    "loading": [516],
-    "selected": [1540],
-    "selectable": [516],
-    "thumbnailPosition": [513, "thumbnail-position"],
-    "messages": [1040],
-    "messageOverrides": [1040],
-    "effectiveLocale": [32],
-    "defaultMessages": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-card", "calcite-checkbox", "calcite-label", "calcite-loader"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-card":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Card);
-      }
-      break;
-    case "calcite-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "calcite-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "calcite-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.cardSelectClick = () => {
+      this.selectCard();
+    };
+    this.cardSelectKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          this.selectCard();
+          event.preventDefault();
+          break;
+      }
+    };
+    this.loading = false;
+    this.selected = false;
+    this.selectable = false;
+    this.thumbnailPosition = "block-start";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = undefined;
+    this.defaultMessages = undefined;
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  async componentWillLoad() {
+    await setUpMessages(this);
+  }
+  render() {
+    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+    const thumbnailStart = this.thumbnailPosition.endsWith("start");
+    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  selectCard() {
+    this.selected = !this.selected;
+    this.calciteCardSelect.emit();
+  }
+  renderThumbnail() {
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderCheckbox() {
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: this.messages.select })));
+  }
+  renderHeader() {
+    const { el } = this;
+    const title = getSlotted(el, SLOTS.title);
+    const subtitle = getSlotted(el, SLOTS.subtitle);
+    const hasHeader = title || subtitle;
+    return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const startFooter = getSlotted(el, SLOTS.footerStart);
+    const endFooter = getSlotted(el, SLOTS.footerEnd);
+    const hasFooter = startFooter || endFooter;
+    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerStart }), h("slot", { name: SLOTS.footerEnd }))) : null;
+  }
+  static get assetsDirs() { return ["assets"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
+  static get style() { return cardCss; }
+}, [1, "calcite-card", {
+    "loading": [516],
+    "selected": [1540],
+    "selectable": [516],
+    "thumbnailPosition": [513, "thumbnail-position"],
+    "messages": [1040],
+    "messageOverrides": [1040],
+    "effectiveLocale": [32],
+    "defaultMessages": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-card", "calcite-checkbox", "calcite-label", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
 defineCustomElement$1();
 
 const CalciteCard = Card;

package/dist/components/calcite-chip-group.js

@@ -4,193 +4,193 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { e as focusElementInGroup, t as toAriaBoolean } from './dom.js';
+import { v as focusElementInGroup, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
 
 const chipGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:0.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:0.25rem}:host([scale=l]) .container{gap:0.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
-const ChipGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteChipGroupSelect = createEvent(this, "calciteChipGroupSelect", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    //--------------------------------------------------------------------------
-    this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.items = [];
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.updateItems = (event) => {
-      var _a;
-      const target = event ? event.target : this.slotRefEl;
-      this.items = target === null || target === void 0 ? void 0 : target.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
-      (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
-        el.interactive = true;
-        el.scale = this.scale;
-        el.selectionMode = this.selectionMode;
-      });
-      this.setSelectedItems(false);
-    };
-    this.setSelectedItems = (emit, elToMatch) => {
-      if (elToMatch) {
-        this.items.forEach((el) => {
-          const matchingEl = elToMatch === el;
-          switch (this.selectionMode) {
-            case "multiple":
-              if (matchingEl) {
-                el.selected = !el.selected;
-              }
-              break;
-            case "single":
-              el.selected = matchingEl ? !el.selected : false;
-              break;
-            case "single-persist":
-              el.selected = !!matchingEl;
-              break;
-          }
-        });
-      }
-      this.selectedItems = this.items.filter((el) => el.selected);
-      if (emit) {
-        this.calciteChipGroupSelect.emit();
-      }
-    };
-    this.disabled = false;
-    this.label = undefined;
-    this.scale = "m";
-    this.selectionMode = "none";
-    this.selectedItems = [];
-  }
-  onSelectionModeChange() {
-    this.updateItems();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    connectInteractive(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
-  componentDidRender() {
-    disconnectInteractive(this);
-    updateHostInteraction(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  calciteInternalChipKeyEventListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
-      switch (event.detail.key) {
-        case "ArrowRight":
-          focusElementInGroup(interactiveItems, event.detail.target, "next");
-          break;
-        case "ArrowLeft":
-          focusElementInGroup(interactiveItems, event.detail.target, "previous");
-          break;
-        case "Home":
-          focusElementInGroup(interactiveItems, event.detail.target, "first");
-          break;
-        case "End":
-          focusElementInGroup(interactiveItems, event.detail.target, "last");
-          break;
-      }
-    }
-  }
-  calciteChipCloseListener(event) {
-    const item = event.target;
-    if (this.items.includes(item)) {
-      if (this.items.indexOf(item) > 0) {
-        focusElementInGroup(this.items, item, "previous");
-      }
-      else if (this.items.indexOf(item) === 0) {
-        focusElementInGroup(this.items, item, "next");
-      }
-      else {
-        focusElementInGroup(this.items, item, "first");
-      }
-    }
-    this.items = this.items.filter((el) => el !== item);
-  }
-  calciteChipSelectListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      this.setSelectedItems(true, event.target);
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Sets focus on the component's first focusable element.
-   */
-  async setFocus() {
-    var _a;
-    await componentFocusable(this);
-    if (!this.disabled) {
-      return (_a = (this.selectedItems[0] || this.items[0])) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  //--------------------------------------------------------------------------
-  render() {
-    const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-    return (h("div", { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) })));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "selectionMode": ["onSelectionModeChange"]
-  }; }
-  static get style() { return chipGroupCss; }
-}, [1, "calcite-chip-group", {
-    "disabled": [516],
-    "label": [1],
-    "scale": [513],
-    "selectionMode": [513, "selection-mode"],
-    "selectedItems": [1040],
-    "setFocus": [64]
-  }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-chip-group"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-chip-group":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ChipGroup);
-      }
-      break;
-  } });
-}
+const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteChipGroupSelect = createEvent(this, "calciteChipGroupSelect", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    //--------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.items = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.updateItems = (event) => {
+      var _a;
+      const target = event ? event.target : this.slotRefEl;
+      this.items = target === null || target === void 0 ? void 0 : target.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
+      (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+        el.interactive = true;
+        el.scale = this.scale;
+        el.selectionMode = this.selectionMode;
+      });
+      this.setSelectedItems(false);
+    };
+    this.setSelectedItems = (emit, elToMatch) => {
+      if (elToMatch) {
+        this.items.forEach((el) => {
+          const matchingEl = elToMatch === el;
+          switch (this.selectionMode) {
+            case "multiple":
+              if (matchingEl) {
+                el.selected = !el.selected;
+              }
+              break;
+            case "single":
+              el.selected = matchingEl ? !el.selected : false;
+              break;
+            case "single-persist":
+              el.selected = !!matchingEl;
+              break;
+          }
+        });
+      }
+      this.selectedItems = this.items.filter((el) => el.selected);
+      if (emit) {
+        this.calciteChipGroupSelect.emit();
+      }
+    };
+    this.disabled = false;
+    this.label = undefined;
+    this.scale = "m";
+    this.selectionMode = "none";
+    this.selectedItems = [];
+  }
+  onSelectionModeChange() {
+    this.updateItems();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    connectInteractive(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  componentDidRender() {
+    disconnectInteractive(this);
+    updateHostInteraction(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalChipKeyEventListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      const interactiveItems = this.items.filter((el) => !el.disabled);
+      switch (event.detail.key) {
+        case "ArrowRight":
+          focusElementInGroup(interactiveItems, event.detail.target, "next");
+          break;
+        case "ArrowLeft":
+          focusElementInGroup(interactiveItems, event.detail.target, "previous");
+          break;
+        case "Home":
+          focusElementInGroup(interactiveItems, event.detail.target, "first");
+          break;
+        case "End":
+          focusElementInGroup(interactiveItems, event.detail.target, "last");
+          break;
+      }
+    }
+  }
+  calciteChipCloseListener(event) {
+    const item = event.target;
+    if (this.items.includes(item)) {
+      if (this.items.indexOf(item) > 0) {
+        focusElementInGroup(this.items, item, "previous");
+      }
+      else if (this.items.indexOf(item) === 0) {
+        focusElementInGroup(this.items, item, "next");
+      }
+      else {
+        focusElementInGroup(this.items, item, "first");
+      }
+    }
+    this.items = this.items.filter((el) => el !== item);
+  }
+  calciteChipSelectListener(event) {
+    if (event.composedPath().includes(this.el)) {
+      this.setSelectedItems(true, event.target);
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Sets focus on the component's first focusable element.
+   */
+  async setFocus() {
+    var _a;
+    await componentFocusable(this);
+    if (!this.disabled) {
+      return (_a = (this.selectedItems[0] || this.items[0])) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
+    return (h("div", { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "selectionMode": ["onSelectionModeChange"]
+  }; }
+  static get style() { return chipGroupCss; }
+}, [1, "calcite-chip-group", {
+    "disabled": [516],
+    "label": [1],
+    "scale": [513],
+    "selectionMode": [513, "selection-mode"],
+    "selectedItems": [1040],
+    "setFocus": [64]
+  }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-chip-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-chip-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChipGroup);
+      }
+      break;
+  } });
+}
 defineCustomElement$1();
 
 const CalciteChipGroup = ChipGroup;