@esri/calcite-components 2.12.0 → 2.13.0-next.1

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const loadable = require('./loadable-8de43def.js');
-const t9n = require('./t9n-0ac48eea.js');
-const interactive = require('./interactive-9db98a91.js');
-const locale = require('./locale-987403a2.js');
-const key = require('./key-5de2d409.js');
-const component = require('./component-c5bbc3ae.js');
-const browser = require('./browser-89880371.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./observers-3a410d9c.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const interactive = require('./interactive-6e051cdc.js');
+const locale = require('./locale-38c1927e.js');
+const key = require('./key-c3b3fd7e.js');
+const component = require('./component-96607c76.js');
+const browser = require('./browser-192fd050.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./observers-498f2676.js');
 
 const CSS = {
     title: "title",
@@ -125,7 +125,6 @@ const Chip = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -139,7 +138,6 @@ const Chip = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -245,7 +243,7 @@ const Chip = class {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (index.h(index.Host, { key: '6d76da5a2ae7a51ceffa4d1ca67d2f610b900a1c' }, index.h(interactive.InteractiveContainer, { key: 'fd0190d60cffb6d0f564a91f55b0e4f69663fb5b', disabled: disabled }, index.h("div", { key: '825b342318201ee13735f9b6e830f26b0fb4e137', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (index.h(index.Host, { key: '3a1a1b8f2ee556048db84661b3471e193e8369ab' }, index.h(interactive.InteractiveContainer, { key: '41107303be8be1dc3a591d3a5577c108e3bb5bd8', disabled: disabled }, index.h("div", { key: '66fc23716742af883dddfe25a030d2052c6050b4', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? dom.toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? dom.toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
                 [CSS.container]: true,
@@ -262,7 +260,7 @@ const Chip = class {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS.title }, index.h("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: '2fae7be4c41cb78f11b3ecc9739f36114069b0c7', class: CSS.title }, index.h("slot", { key: '7f84235908569b7c805c6b5aed2d0821af51a46e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-chip.entry.cjs.js","mappings":"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","names":["isActivationKey","slotChangeHasAssignedElement","updateMessages","connectInteractive","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setUpLoadableComponent","isBrowser","setUpMessages","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/chip/resources.ts","src/components/chip/chip.scss?tag=calcite-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["export const CSS = {\n  title: \"title\",\n  close: \"close\",\n  imageContainer: \"image-container\",\n  chipIcon: \"chip-icon\",\n  textSlotted: \"text--slotted\",\n  container: \"container\",\n  imageSlotted: \"image--slotted\",\n  closable: \"closable\",\n  multiple: \"multiple\",\n  single: \"single\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n  selected: \"selected\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  checkedSingle: \"circle-f\",\n  uncheckedMultiple: \"square\",\n  checkedMultiple: \"check-square-f\",\n} as const;\n",".container,\n.select-icon,\n.title {\n  padding-inline-start: var(--calcite-internal-chip-padding-start);\n  padding-inline-end: var(--calcite-internal-chip-padding-end);\n}\n\n.select-icon:not(.select-icon--active) {\n  padding-inline: 0;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2 h-6;\n\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .select-icon--active {\n    @apply h-4 w-4;\n  }\n\n  .image-container {\n    @apply h-5 w-5;\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-6 h-6;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n      }\n\n      &.text--slotted {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n\n      &.closable {\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-xs);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: var(--calcite-spacing-base);\n      padding-inline-end: var(--calcite-spacing-sm);\n    }\n  }\n}\n\n:host([scale=\"s\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n}\n\n:host([scale=\"m\"]) {\n  @apply text-n1 h-8;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1.5]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .image-container,\n  .select-icon--active {\n    @apply h-6 w-6;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-8 h-8;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-base);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-base);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n      }\n\n      &.text--slotted {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n\n      &.closable {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-px);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-sm);\n    }\n  }\n}\n\n:host([scale=\"m\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0 h-11;\n\n  --calcite-chip-spacing-s-internal: theme(\"spacing[2]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[3]\");\n\n  .image-container,\n  .close,\n  .select-icon--active {\n    @apply h-8 w-8;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-11 h-11;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-md);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n\n      &.closable {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-md);\n    }\n  }\n}\n\n:host([scale=\"l\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n}\n\n:host {\n  @apply inline-flex\n    cursor-default\n    rounded-full;\n}\n\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  rounded-full\n  focus-base\n  justify-center\n  border\n  border-solid\n  border-color-1\n  box-border\n  font-medium;\n\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n}\n\n:host([scale=\"s\"]) .container.selectable.single.image--slotted {\n  --calcite-internal-chip-padding-end: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n:host([scale=\"s\"]) .container:not(.selected):not(.multiple).image--slotted {\n  --calcite-internal-chip-padding-start: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n.container.text--slotted .title {\n  @apply truncate;\n\n  --calcite-internal-chip-padding-start: var(--calcite-chip-spacing-s-internal);\n  --calcite-internal-chip-padding-end: var(--calcite-chip-spacing-s-internal);\n}\n\n.container:not(.text--slotted) .title {\n  display: none;\n}\n\n.container:not(.image--slotted) .image-container {\n  display: none;\n}\n\n.container:not(.is-circle) {\n  &.image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.image--slotted .image-container ~ .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.selectable:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.selectable):not(.text--slotted) .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text-slotted).image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {\n    margin-inline-end: 0;\n    ~ .chip-icon {\n      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);\n    }\n  }\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  margin-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.close {\n  @apply focus-base\n    transition-default\n    text-color-1\n    m-0\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  border-radius: 50%;\n  align-content: center;\n  justify-content: center;\n  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  &:hover {\n    background-color: var(--calcite-chip-transparent-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-chip-transparent-hover);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-chip-transparent-press);\n  }\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n.select-icon {\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  inset-block-start: -1px;\n  position: relative;\n  visibility: hidden;\n  inline-size: 0;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  &.select-icon--active {\n    visibility: visible;\n    opacity: 0.5;\n  }\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n.container:hover .select-icon--active {\n  opacity: 1;\n}\n\n.multiple .select-icon {\n  @apply flex justify-center items-center;\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n:host([kind=\"neutral\"]) {\n  background-color: var(--calcite-color-foreground-2);\n  color: var(--calcite-color-text-1);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    color: var(--calcite-color-text-3);\n  }\n}\n\n:host([kind=\"inverse\"]) {\n  background-color: var(--calcite-color-inverse);\n  @apply text-color-inverse;\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-text-inverse);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n}\n\n:host([appearance=\"outline-fill\"]),\n:host([appearance=\"outline\"]) {\n  @apply text-color-1 bg-foreground-1;\n  .close {\n    @apply text-color-3;\n  }\n}\n\n:host([appearance=\"outline-fill\"]) {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"outline\"]) {\n  @apply bg-transparent;\n}\n\n:host([kind=\"neutral\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"neutral\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-1);\n}\n\n:host([kind=\"inverse\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"inverse\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-inverse);\n}\n\n:host([kind=\"brand\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"brand\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-brand);\n}\n\n:host([kind=\"brand\"][appearance=\"solid\"]),\n:host([kind=\"inverse\"][appearance=\"solid\"]) {\n  button {\n    outline-color: var(--calcite-color-text-inverse);\n  }\n}\n\n:host([closed]) {\n  display: none;\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n * @slot image - A slot for adding an image.\n */\n@Component({\n  tag: \"calcite-chip\",\n  styleUrl: \"chip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Chip\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"solid\";\n\n  /** Specifies the kind of the component, which will apply to border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"inverse\" | \"neutral\", Kind> = \"neutral\";\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /** When `true`, hides the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * This internal property, managed by a containing `calcite-chip-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  watchSelected(selected: boolean): void {\n    if (this.selectionMode === \"none\") {\n      return;\n    }\n    this.handleSelectionPropertyChange(selected);\n  }\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ChipMessages>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ChipMessages;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.\n   * This is set to `true` by a parent Chip Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  /**\n   * @internal\n   */\n  @Prop() parentChipGroup: HTMLCalciteChipGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteChipElement;\n\n  @State() defaultMessages: ChipMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() private hasText = false;\n\n  @State() private hasImage = false;\n\n  private containerEl: HTMLDivElement;\n\n  private closeButtonEl: HTMLButtonElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's close button is selected.\n   */\n  @Event({ cancelable: false }) calciteChipClose: EventEmitter<void>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event({ cancelable: false }) calciteChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalSyncSelectedChips: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    if (this.selectionMode !== \"none\" && this.interactive && this.selected) {\n      this.handleSelectionPropertyChange(this.selected);\n    }\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      await setUpMessages(this);\n      this.updateHasText();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleEmittingEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalChipKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  clickHandler(): void {\n    if (!this.interactive && this.closable) {\n      this.closeButtonEl.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    } else if (!this.disabled && this.closable) {\n      this.closeButtonEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (): void => {\n    this.updateHasText();\n  };\n\n  private close = (): void => {\n    this.calciteChipClose.emit();\n    this.selected = false;\n    this.closed = true;\n  };\n\n  private closeButtonKeyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private updateHasText() {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  private handleSlotImageChange = (event: Event): void => {\n    this.hasImage = slotChangeHasAssignedElement(event);\n  };\n\n  private handleEmittingEvent = (): void => {\n    if (this.interactive) {\n      this.calciteChipSelect.emit();\n    }\n  };\n\n  private handleSelectionPropertyChange(selected: boolean): void {\n    if (this.selectionMode === \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n    const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);\n\n    if (!selectedInParent && selected && this.selectionMode !== \"multiple\") {\n      this.calciteInternalChipSelect.emit();\n    }\n    if (this.selectionMode !== \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChipImage(): VNode {\n    return (\n      <div class={CSS.imageContainer}>\n        <slot name={SLOTS.image} onSlotchange={this.handleSlotImageChange} />\n      </div>\n    );\n  }\n\n  renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\"\n        ? this.selected\n          ? ICONS.checkedMultiple\n          : ICONS.uncheckedMultiple\n        : this.selected\n          ? ICONS.checkedSingle\n          : undefined;\n\n    return (\n      <div\n        class={{\n          [CSS.selectIcon]: true,\n          [CSS.selectIconActive]: this.selectionMode === \"multiple\" || this.selected,\n        }}\n      >\n        {icon ? <calcite-icon icon={icon} scale={getIconScale(this.scale)} /> : null}\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.dismissLabel}\n        class={CSS.close}\n        onClick={this.close}\n        onKeyDown={this.closeButtonKeyDownHandler}\n        ref={(el) => (this.closeButtonEl = el)}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderIcon(): VNode {\n    return (\n      <calcite-icon\n        class={CSS.chipIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon}\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const disableInteraction = disabled || (!disabled && !this.interactive);\n    const role =\n      this.selectionMode === \"multiple\" && this.interactive\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\" && this.interactive\n          ? \"radio\"\n          : this.interactive\n            ? \"button\"\n            : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div\n            aria-checked={\n              this.selectionMode !== \"none\" && this.interactive\n                ? toAriaBoolean(this.selected)\n                : undefined\n            }\n            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n            aria-label={this.label}\n            class={{\n              [CSS.container]: true,\n              [CSS.textSlotted]: this.hasText,\n              [CSS.imageSlotted]: this.hasImage,\n              [CSS.selectable]: this.selectionMode !== \"none\",\n              [CSS.multiple]: this.selectionMode === \"multiple\",\n              [CSS.single]:\n                this.selectionMode === \"single\" || this.selectionMode === \"single-persist\",\n              [CSS.selected]: this.selected,\n              [CSS.closable]: this.closable,\n              [CSS.nonInteractive]: !this.interactive,\n              [CSS.isCircle]:\n                !this.closable &&\n                !this.hasText &&\n                (!this.icon || !this.hasImage) &&\n                (this.selectionMode === \"none\" ||\n                  (!!this.selectionMode && this.selectionMode !== \"multiple\" && !this.selected)),\n            }}\n            onClick={this.handleEmittingEvent}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot onSlotchange={this.handleDefaultSlotChange} />\n            </span>\n            {this.closable && this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-chip.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,cAAc,EAAE,iBAAiB;IACjC,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,eAAe;IAC5B,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,gBAAgB;IAC9B,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,aAAa;IACzB,gBAAgB,EAAE,qBAAqB;IACvC,cAAc,EAAE,iBAAiB;IACjC,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,GAAG;IACV,aAAa,EAAE,UAAU;IACzB,iBAAiB,EAAE,QAAQ;IAC3B,eAAe,EAAE,gBAAgB;CACzB;;AC5BV,MAAM,OAAO,GAAG,ijaAAija,CAAC;AAClka,0BAAe,OAAO;;MCmDT,IAAI;;;;;;;;;;;;;QA6OP,4BAAuB,GAAG;YAChC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB,CAAC;QAEM,UAAK,GAAG;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB,CAAC;QAEM,8BAAyB,GAAG,CAAC,KAAoB;YACvD,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,EAAE,CAAC;aACd;SACF,CAAC;QAMM,0BAAqB,GAAG,CAAC,KAAY;YAC3C,IAAI,CAAC,QAAQ,GAAGC,gCAA4B,CAAC,KAAK,CAAC,CAAC;SACrD,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;aAC/B;SACF,CAAC;wBAjQkC,KAAK;0BAIvC,OAAO;oBAGuE,SAAS;wBAGrD,KAAK;;2BAMF,KAAK;qBAGJ,GAAG;;;sBASM,KAAK;6BASpD,MAAM;wBAG2C,KAAK;;;2BAmClC,KAAK;;;;uBAwBA,KAAK;wBAEJ,KAAK;;IA1DjC,aAAa,CAAC,QAAiB;QAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;YACjC,OAAO;SACR;QACD,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,CAAC;KAC9C;IAiBD,gBAAgB;;KAEf;IA4BD,qBAAqB;QACnBC,kBAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IA+CD,iBAAiB;QACfC,uBAAgB,CAAC,IAAI,CAAC,CAAC;QACvBC,mBAAe,CAAC,IAAI,CAAC,CAAC;KACvB;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;YACtE,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnD;KACF;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClBC,0BAAmB,CAAC,IAAI,CAAC,CAAC;QAC1BC,sBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,MAAM,iBAAiB;QACrBC,+BAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAIC,iBAAS,EAAE,EAAE;YACf,MAAMC,iBAAa,CAAC,IAAI,CAAC,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;KACF;;;;;;IAQD,cAAc,CAAC,KAAoB;QACjC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE;YAC5B,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO;oBACV,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACR,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW,CAAC;gBACjB,KAAK,MAAM,CAAC;gBACZ,KAAK,KAAK;oBACR,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;aACT;SACF;KACF;IAGD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE;YACtC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC5B;KACF;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;SAC3B;aAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC1C,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;SAC7B;KACF;IAyBO,aAAa;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;KACtD;IAYO,6BAA6B,CAAC,QAAiB;QACrD,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YACnC,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;SAC9C;QACD,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE9E,IAAI,CAAC,gBAAgB,IAAI,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,EAAE;YACtE,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;SACvC;QACD,IAAI,IAAI,CAAC,aAAa,KAAK,QAAQ,EAAE;YACnC,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;SAC9C;KACF;;;;;;IAOD,eAAe;QACb,QACEC,iBAAK,KAAK,EAAE,GAAG,CAAC,cAAc,IAC5BA,kBAAM,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAAI,CACjE,EACN;KACH;IAED,mBAAmB;QACjB,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU;cAC7B,IAAI,CAAC,QAAQ;kBACX,KAAK,CAAC,eAAe;kBACrB,KAAK,CAAC,iBAAiB;cACzB,IAAI,CAAC,QAAQ;kBACX,KAAK,CAAC,aAAa;kBACnB,SAAS,CAAC;QAElB,QACEA,iBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;gBACtB,CAAC,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ;aAC3E,IAEA,IAAI,GAAGA,0BAAc,IAAI,EAAE,IAAI,EAAE,KAAK,EAAEC,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,GAAG,IAAI,CACxE,EACN;KACH;IAED,iBAAiB;QACf,QACED,kCACc,IAAI,CAAC,QAAQ,CAAC,YAAY,EACtC,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,SAAS,EAAE,IAAI,CAAC,yBAAyB,EACzC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IAEhCA,0BAAc,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAEC,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,CAC7D,EACT;KACH;IAED,UAAU;QACR,QACED,0BACE,KAAK,EAAE,GAAG,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAEC,sBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,EACF;KACH;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,kBAAkB,GAAG,QAAQ,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxE,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW;cACjD,UAAU;cACV,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;kBAC/C,OAAO;kBACP,IAAI,CAAC,WAAW;sBACd,QAAQ;sBACR,SAAS,CAAC;QACpB,QACED,QAACE,UAAI,uDACHF,QAACG,gCAAoB,qDAAC,QAAQ,EAAE,QAAQ,IACtCH,kFAEI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW;kBAC7CI,iBAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;kBAC5B,SAAS,mBAEA,kBAAkB,GAAGA,iBAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,gBAC3D,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI;gBACrB,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO;gBAC/B,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ;gBACjC,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,KAAK,MAAM;gBAC/C,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,KAAK,UAAU;gBACjD,CAAC,GAAG,CAAC,MAAM,GACT,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,aAAa,KAAK,gBAAgB;gBAC5E,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;gBAC7B,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;gBAC7B,CAAC,GAAG,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,WAAW;gBACvC,CAAC,GAAG,CAAC,QAAQ,GACX,CAAC,IAAI,CAAC,QAAQ;oBACd,CAAC,IAAI,CAAC,OAAO;qBACZ,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;qBAC7B,IAAI,CAAC,aAAa,KAAK,MAAM;yBAC3B,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aACnF,EACD,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,kBAAkB,GAAG,CAAC,CAAC,GAAG,CAAC,IAEpC,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAC3D,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC/BJ,mEAAM,KAAK,EAAE,GAAG,CAAC,KAAK,IACpBA,mEAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC/C,EACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACtC,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;","names":["isActivationKey","slotChangeHasAssignedElement","updateMessages","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectLocalized","disconnectMessages","setUpLoadableComponent","isBrowser","setUpMessages","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/chip/resources.ts","src/components/chip/chip.scss?tag=calcite-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["export const CSS = {\n  title: \"title\",\n  close: \"close\",\n  imageContainer: \"image-container\",\n  chipIcon: \"chip-icon\",\n  textSlotted: \"text--slotted\",\n  container: \"container\",\n  imageSlotted: \"image--slotted\",\n  closable: \"closable\",\n  multiple: \"multiple\",\n  single: \"single\",\n  selectable: \"selectable\",\n  selectIcon: \"select-icon\",\n  selectIconActive: \"select-icon--active\",\n  nonInteractive: \"non-interactive\",\n  isCircle: \"is-circle\",\n  selected: \"selected\",\n};\n\nexport const SLOTS = {\n  image: \"image\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n  checkedSingle: \"circle-f\",\n  uncheckedMultiple: \"square\",\n  checkedMultiple: \"check-square-f\",\n} as const;\n",".container,\n.select-icon,\n.title {\n  padding-inline-start: var(--calcite-internal-chip-padding-start);\n  padding-inline-end: var(--calcite-internal-chip-padding-end);\n}\n\n.select-icon:not(.select-icon--active) {\n  padding-inline: 0;\n}\n\n:host([scale=\"s\"]) {\n  @apply text-n2 h-6;\n\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .select-icon--active {\n    @apply h-4 w-4;\n  }\n\n  .image-container {\n    @apply h-5 w-5;\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-6 h-6;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n      }\n\n      &.text--slotted {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n\n      &.closable {\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-xs);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: var(--calcite-spacing-base);\n      padding-inline-end: var(--calcite-spacing-sm);\n    }\n  }\n}\n\n:host([scale=\"s\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n}\n\n:host([scale=\"m\"]) {\n  @apply text-n1 h-8;\n  --calcite-chip-spacing-s-internal: theme(\"spacing[1.5]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[2]\");\n\n  .close,\n  .image-container,\n  .select-icon--active {\n    @apply h-6 w-6;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-8 h-8;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-px);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-px);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-base);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-base);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n      }\n\n      &.text--slotted {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n\n      &.closable {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-px);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-sm);\n    }\n  }\n}\n\n:host([scale=\"m\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n}\n\n:host([scale=\"l\"]) {\n  @apply text-0 h-11;\n\n  --calcite-chip-spacing-s-internal: theme(\"spacing[2]\");\n  --calcite-chip-spacing-l-internal: theme(\"spacing[3]\");\n\n  .image-container,\n  .close,\n  .select-icon--active {\n    @apply h-8 w-8;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .container.is-circle,\n  .container.is-circle.image--slotted {\n    @apply w-11 h-11;\n\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  }\n\n  .multiple {\n    .select-icon {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted {\n      .select-icon {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-md);\n      }\n    }\n  }\n\n  .container {\n    --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);\n    --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n\n    &.image--slotted {\n      --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n      --calcite-internal-chip-padding-end: var(--calcite-spacing-sm);\n\n      &.closable {\n        --calcite-internal-chip-padding-start: var(--calcite-spacing-xs);\n        --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n      }\n    }\n  }\n\n  .container:not(.is-circle):not(.multiple) {\n    &:not(.image-slotted) .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-xxs);\n    }\n\n    &.image--slotted .select-icon.select-icon--active {\n      padding-inline-start: 0;\n      padding-inline-end: var(--calcite-spacing-md);\n    }\n  }\n}\n\n:host([scale=\"l\"][closable]) .container {\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-sm);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xs);\n}\n\n:host {\n  @apply inline-flex\n    cursor-default\n    rounded-full;\n}\n\n.container {\n  @apply inline-flex\n  h-full\n  max-w-full\n  items-center\n  rounded-full\n  focus-base\n  justify-center\n  border\n  border-solid\n  border-color-1\n  box-border\n  font-medium;\n\n  &.selectable {\n    @apply cursor-pointer;\n  }\n  &:not(.non-interactive):focus {\n    @apply focus-outset;\n  }\n}\n\n:host([scale=\"s\"]) .container.selectable.single.image--slotted {\n  --calcite-internal-chip-padding-end: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n:host([scale=\"s\"]) .container:not(.selected):not(.multiple).image--slotted {\n  --calcite-internal-chip-padding-start: calc(theme(\"spacing[0.5]\") / 2);\n}\n\n.container.text--slotted .title {\n  @apply truncate;\n\n  --calcite-internal-chip-padding-start: var(--calcite-chip-spacing-s-internal);\n  --calcite-internal-chip-padding-end: var(--calcite-chip-spacing-s-internal);\n}\n\n.container:not(.text--slotted) .title {\n  display: none;\n}\n\n.container:not(.image--slotted) .image-container {\n  display: none;\n}\n\n.container:not(.is-circle) {\n  &.image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.image--slotted .image-container ~ .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &.selectable:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.selectable):not(.text--slotted) .chip-icon {\n    margin-inline-start: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text--slotted) .chip-icon {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.text-slotted).image--slotted .image-container {\n    margin-inline-end: var(--calcite-chip-spacing-s-internal);\n  }\n\n  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {\n    margin-inline-end: 0;\n    ~ .chip-icon {\n      margin-inline-start: calc(var(--calcite-chip-spacing-s-internal) * 2);\n    }\n  }\n}\n\n.chip-icon {\n  @apply relative my-0 inline-flex duration-150 ease-in-out;\n  margin-inline: var(--calcite-chip-spacing-s-internal);\n}\n\n.image-container {\n  @apply inline-flex overflow-hidden;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.close {\n  @apply focus-base\n    transition-default\n    text-color-1\n    m-0\n    cursor-pointer\n    items-center\n    border-none\n    bg-transparent;\n  -webkit-appearance: none;\n  display: flex;\n  border-radius: 50%;\n  align-content: center;\n  justify-content: center;\n  --calcite-chip-transparent-hover: var(--calcite-color-transparent-hover);\n  --calcite-chip-transparent-press: var(--calcite-color-transparent-press);\n  --calcite-internal-chip-padding-start: var(--calcite-spacing-xxs);\n  --calcite-internal-chip-padding-end: var(--calcite-spacing-xxs);\n  &:hover {\n    background-color: var(--calcite-chip-transparent-hover);\n  }\n  &:focus {\n    background-color: var(--calcite-chip-transparent-hover);\n    @apply focus-inset;\n  }\n  &:active {\n    background-color: var(--calcite-chip-transparent-press);\n  }\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n.select-icon {\n  align-self: center;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  inset-block-start: -1px;\n  position: relative;\n  visibility: hidden;\n  inline-size: 0;\n  opacity: 0;\n  transition:\n    opacity 0.15s ease-in-out,\n    inline-size 0.15s ease-in-out;\n  &.select-icon--active {\n    visibility: visible;\n    opacity: 0.5;\n  }\n}\n\n:host([selected]) .select-icon {\n  opacity: 1;\n}\n\n.container:hover .select-icon--active {\n  opacity: 1;\n}\n\n.multiple .select-icon {\n  @apply flex justify-center items-center;\n}\n\nslot[name=\"image\"]::slotted(*) {\n  @apply rounded-half flex h-full w-full overflow-hidden;\n}\n\n:host([kind=\"neutral\"]) {\n  background-color: var(--calcite-color-foreground-2);\n  color: var(--calcite-color-text-1);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    color: var(--calcite-color-text-3);\n  }\n}\n\n:host([kind=\"inverse\"]) {\n  background-color: var(--calcite-color-inverse);\n  @apply text-color-inverse;\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-text-inverse);\n  .container {\n    border-color: transparent;\n  }\n  .close {\n    @apply text-color-inverse;\n  }\n}\n\n:host([appearance=\"outline-fill\"]),\n:host([appearance=\"outline\"]) {\n  @apply text-color-1 bg-foreground-1;\n  .close {\n    @apply text-color-3;\n  }\n}\n\n:host([appearance=\"outline-fill\"]) {\n  @apply bg-foreground-1;\n}\n\n:host([appearance=\"outline\"]) {\n  @apply bg-transparent;\n}\n\n:host([kind=\"neutral\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"neutral\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-1);\n}\n\n:host([kind=\"inverse\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"inverse\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-border-inverse);\n}\n\n:host([kind=\"brand\"][appearance=\"outline-fill\"]) .container,\n:host([kind=\"brand\"][appearance=\"outline\"]) .container {\n  border-color: var(--calcite-color-brand);\n}\n\n:host([kind=\"brand\"][appearance=\"solid\"]),\n:host([kind=\"inverse\"][appearance=\"solid\"]) {\n  button {\n    outline-color: var(--calcite-color-text-inverse);\n  }\n}\n\n:host([closed]) {\n  display: none;\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { Appearance, Kind, Scale, SelectionMode } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ChipMessages } from \"./assets/chip/t9n\";\nimport { CSS, SLOTS, ICONS } from \"./resources\";\n\n/**\n * @slot - A slot for adding text.\n * @slot image - A slot for adding an image.\n */\n@Component({\n  tag: \"calcite-chip\",\n  styleUrl: \"chip.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Chip\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"solid\";\n\n  /** Specifies the kind of the component, which will apply to border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"inverse\" | \"neutral\", Kind> = \"neutral\";\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the size of the component. When contained in a parent `calcite-chip-group` inherits the parent's `scale` value. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /** When `true`, hides the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /**\n   * This internal property, managed by a containing `calcite-chip-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  watchSelected(selected: boolean): void {\n    if (this.selectionMode === \"none\") {\n      return;\n    }\n    this.handleSelectionPropertyChange(selected);\n  }\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ChipMessages>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ChipMessages;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit.\n   * This is set to `true` by a parent Chip Group component.\n   *\n   * @internal\n   */\n  @Prop() interactive = false;\n\n  /**\n   * @internal\n   */\n  @Prop() parentChipGroup: HTMLCalciteChipGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteChipElement;\n\n  @State() defaultMessages: ChipMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() private hasText = false;\n\n  @State() private hasImage = false;\n\n  private containerEl: HTMLDivElement;\n\n  private closeButtonEl: HTMLButtonElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's close button is selected.\n   */\n  @Event({ cancelable: false }) calciteChipClose: EventEmitter<void>;\n\n  /**\n   * Fires when the selected state of the component changes.\n   */\n  @Event({ cancelable: false }) calciteChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipKeyEvent: EventEmitter<KeyboardEvent>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalChipSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalSyncSelectedChips: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    if (this.selectionMode !== \"none\" && this.interactive && this.selected) {\n      this.handleSelectionPropertyChange(this.selected);\n    }\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      await setUpMessages(this);\n      this.updateHasText();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.handleEmittingEvent();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"Home\":\n        case \"End\":\n          this.calciteInternalChipKeyEvent.emit(event);\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"click\")\n  clickHandler(): void {\n    if (!this.interactive && this.closable) {\n      this.closeButtonEl.focus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (!this.disabled && this.interactive) {\n      this.containerEl?.focus();\n    } else if (!this.disabled && this.closable) {\n      this.closeButtonEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private handleDefaultSlotChange = (): void => {\n    this.updateHasText();\n  };\n\n  private close = (): void => {\n    this.calciteChipClose.emit();\n    this.selected = false;\n    this.closed = true;\n  };\n\n  private closeButtonKeyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      this.close();\n    }\n  };\n\n  private updateHasText() {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  private handleSlotImageChange = (event: Event): void => {\n    this.hasImage = slotChangeHasAssignedElement(event);\n  };\n\n  private handleEmittingEvent = (): void => {\n    if (this.interactive) {\n      this.calciteChipSelect.emit();\n    }\n  };\n\n  private handleSelectionPropertyChange(selected: boolean): void {\n    if (this.selectionMode === \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n    const selectedInParent = this.parentChipGroup.selectedItems.includes(this.el);\n\n    if (!selectedInParent && selected && this.selectionMode !== \"multiple\") {\n      this.calciteInternalChipSelect.emit();\n    }\n    if (this.selectionMode !== \"single\") {\n      this.calciteInternalSyncSelectedChips.emit();\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChipImage(): VNode {\n    return (\n      <div class={CSS.imageContainer}>\n        <slot name={SLOTS.image} onSlotchange={this.handleSlotImageChange} />\n      </div>\n    );\n  }\n\n  renderSelectionIcon(): VNode {\n    const icon =\n      this.selectionMode === \"multiple\"\n        ? this.selected\n          ? ICONS.checkedMultiple\n          : ICONS.uncheckedMultiple\n        : this.selected\n          ? ICONS.checkedSingle\n          : undefined;\n\n    return (\n      <div\n        class={{\n          [CSS.selectIcon]: true,\n          [CSS.selectIconActive]: this.selectionMode === \"multiple\" || this.selected,\n        }}\n      >\n        {icon ? <calcite-icon icon={icon} scale={getIconScale(this.scale)} /> : null}\n      </div>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    return (\n      <button\n        aria-label={this.messages.dismissLabel}\n        class={CSS.close}\n        onClick={this.close}\n        onKeyDown={this.closeButtonKeyDownHandler}\n        ref={(el) => (this.closeButtonEl = el)}\n        tabIndex={this.disabled ? -1 : 0}\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    );\n  }\n\n  renderIcon(): VNode {\n    return (\n      <calcite-icon\n        class={CSS.chipIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon}\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const disableInteraction = disabled || (!disabled && !this.interactive);\n    const role =\n      this.selectionMode === \"multiple\" && this.interactive\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\" && this.interactive\n          ? \"radio\"\n          : this.interactive\n            ? \"button\"\n            : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div\n            aria-checked={\n              this.selectionMode !== \"none\" && this.interactive\n                ? toAriaBoolean(this.selected)\n                : undefined\n            }\n            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}\n            aria-label={this.label}\n            class={{\n              [CSS.container]: true,\n              [CSS.textSlotted]: this.hasText,\n              [CSS.imageSlotted]: this.hasImage,\n              [CSS.selectable]: this.selectionMode !== \"none\",\n              [CSS.multiple]: this.selectionMode === \"multiple\",\n              [CSS.single]:\n                this.selectionMode === \"single\" || this.selectionMode === \"single-persist\",\n              [CSS.selected]: this.selected,\n              [CSS.closable]: this.closable,\n              [CSS.nonInteractive]: !this.interactive,\n              [CSS.isCircle]:\n                !this.closable &&\n                !this.hasText &&\n                (!this.icon || !this.hasImage) &&\n                (this.selectionMode === \"none\" ||\n                  (!!this.selectionMode && this.selectionMode !== \"multiple\" && !this.selected)),\n            }}\n            onClick={this.handleEmittingEvent}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={disableInteraction ? -1 : 0}\n          >\n            {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n            {this.renderChipImage()}\n            {this.icon && this.renderIcon()}\n            <span class={CSS.title}>\n              <slot onSlotchange={this.handleDefaultSlotChange} />\n            </span>\n            {this.closable && this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -1,27 +1,27 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const utils = require('./utils-88a54038.js');
-const dom = require('./dom-cdce16d7.js');
-const interactive = require('./interactive-9db98a91.js');
-const key = require('./key-5de2d409.js');
-const loadable = require('./loadable-8de43def.js');
-const locale = require('./locale-987403a2.js');
-const math = require('./math-a71d1af7.js');
-const t9n = require('./t9n-0ac48eea.js');
-const throttle = require('./throttle-8f335b6a.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./browser-89880371.js');
-require('./observers-3a410d9c.js');
-require('./debounce-e2fa4fee.js');
+const index = require('./index-4fe70fa3.js');
+const utils = require('./utils-71f155f2.js');
+const dom = require('./dom-1ff7fb61.js');
+const interactive = require('./interactive-6e051cdc.js');
+const key = require('./key-c3b3fd7e.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const locale = require('./locale-38c1927e.js');
+const math = require('./math-02ee6fc0.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const throttle = require('./throttle-9ef96d10.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./browser-192fd050.js');
+require('./observers-498f2676.js');
+require('./debounce-f870378c.js');
 
 const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:6px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex;row-gap:0.125rem}.channel[data-channel-index=\"3\"]{inline-size:159px}:host([scale=s]) .channels{flex-wrap:wrap}:host([scale=s]) .channel{flex-basis:30%;flex-grow:1}:host([scale=s]) .channel[data-channel-index=\"3\"]{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .channel[data-channel-index=\"3\"]{inline-size:131px}.saved-colors{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteColorPickerStyle0 = colorPickerCss;
@@ -544,7 +544,6 @@ const ColorPicker = class {
         await t9n.setUpMessages(this);
     }
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -554,7 +553,6 @@ const ColorPicker = class {
     disconnectedCallback() {
         window.removeEventListener("pointermove", this.globalPointerMoveHandler);
         window.removeEventListener("pointerup", this.globalPointerUpHandler);
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -583,10 +581,10 @@ const ColorPicker = class {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (index.h(interactive.InteractiveContainer, { key: 'cd7c2469429382b1adee89c87c4774160795203c', disabled: this.disabled }, index.h("div", { key: 'dd6809c82d3ffe64b8eaebd0669e7f61c0ea87d1', class: utils.CSS.container }, index.h("div", { key: '888c08c46fec112861b076c3cf24b9be7b4a66cd', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '23631c824c61abb2a3ca74e35bffc8be0364a052', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: 'a5271bbe3c4f45e3cf7736dd8f4201f54420bfb7', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? utils.HSV_LIMITS.v : utils.HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [utils.CSS.scope]: true, [utils.CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (index.h(interactive.InteractiveContainer, { key: '480abbd358a11eca065770296d5977a39127eb55', disabled: this.disabled }, index.h("div", { key: '5f846f434da09debc4ec19968f711f8247717d99', class: utils.CSS.container }, index.h("div", { key: '03a4972a1b73150812a5591a6a3ad40d9f137609', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '98bf95683c8c77a1374164e25eaa6487966cc61f', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: 'd8a56396ec88948832aab77f1937d79e578c1c26', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? utils.HSV_LIMITS.v : utils.HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [utils.CSS.scope]: true, [utils.CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), index.h("div", { key: 'eee6c10107513fd46316d2ba7510977b72771cd2', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: '964481e1c6c6c050df076e8cdc9d7e5b2cbeec79', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: 'f915032fe532e140005b0ff1253b0a971a17b079', class: utils.CSS.sliders }, index.h("div", { key: '2bcb609ce36df2d0f75abb767ee6dc88c0c9ea3b', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '99e268a194b785a8ec97fed67a523c602def2a94', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: '4cdc0f98048a48e070430bf4f1f817571534f31b', "aria-label": messages.hue, "aria-valuemax": utils.HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || utils.DEFAULT_COLOR.round().hue(), class: { [utils.CSS.scope]: true, [utils.CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), index.h("div", { key: '1543c78201e76f483f803d77415873e11657c03d', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: '53b303036533c996271cf19a2e20ac69e4ab00ea', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: '005f0300b60ce8d332d0658ea0a257ad9d75f85b', class: utils.CSS.sliders }, index.h("div", { key: 'f095c425c316a976d23d87efc3059d6e8b4aa9a3', class: utils.CSS.controlAndScope }, index.h("canvas", { key: 'ce2785cbdc0e78210ec8d345f8d4dfb4bf85a568', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: 'b96a018b9185c57bb581fe767edb13efe6097ab6', "aria-label": messages.hue, "aria-valuemax": utils.HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || utils.DEFAULT_COLOR.round().hue(), class: { [utils.CSS.scope]: true, [utils.CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (index.h("div", { class: utils.CSS.controlAndScope }, index.h("canvas", { class: { [utils.CSS.slider]: true, [utils.CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), index.h("div", { "aria-label": messages.opacity, "aria-valuemax": utils.OPACITY_LIMITS.max, "aria-valuemin": utils.OPACITY_LIMITS.min, "aria-valuenow": (color || utils.DEFAULT_COLOR).round().alpha(), class: { [utils.CSS.scope]: true, [utils.CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {