@esri/calcite-components 2.1.0-next.9 → 2.1.0

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
@@ -12,9 +12,10 @@ import { u as updateMessages, c as connectMessages, s as setUpMessages, d as dis
 import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.js';
 import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
 import { e as focusElement } from './dom.js';
-import { d as defineCustomElement$7 } from './filter2.js';
-import { d as defineCustomElement$6 } from './icon.js';
-import { d as defineCustomElement$5 } from './input.js';
+import { d as defineCustomElement$8 } from './filter2.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './input.js';
+import { d as defineCustomElement$5 } from './input-message.js';
 import { d as defineCustomElement$4 } from './loader.js';
 import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
@@ -334,7 +335,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
+    const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-loader", "calcite-progress", "calcite-scrim"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-value-list":
             if (!customElements.get(tagName)) {
@@ -343,15 +344,20 @@ function defineCustomElement$1() {
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -1 +1 @@
-{"file":"calcite-value-list.js","mappings":"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","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\nexport enum ICON_TYPES {\n  grip = \"grip\",\n}\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n      ? messages.dragHandleActive\n      : status === \"change\"\n      ? messages.dragHandleChange\n      : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\"\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n  ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement\n> implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can  move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = false;\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<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\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: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the currently selected items */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-value-list.js","mappings":"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","names":[],"sources":["src/components/value-list/resources.ts","src/components/value-list/utils.ts","src/components/value-list/value-list.scss?tag=calcite-value-list&encapsulation=shadow","src/components/value-list/value-list.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  handle: \"handle\",\n};\nexport enum ICON_TYPES {\n  grip = \"grip\",\n}\nexport const TEXT = {\n  filterResults: \"Filter results\",\n};\n","import { getItemIndex } from \"../pick-list/shared-list-logic\";\nimport { DragStatus } from \"./interfaces\";\nimport { ValueList } from \"./value-list\";\n\nexport function getScreenReaderText(\n  item: HTMLCalciteValueListItemElement,\n  status: DragStatus,\n  valueList: ValueList<HTMLCalciteValueListItemElement>\n): string {\n  const { items, messages } = valueList;\n\n  const total = items.length;\n  const position = getItemIndex(valueList, item) + 1;\n  const template =\n    status === \"idle\"\n      ? messages.dragHandleIdle\n      : status === \"active\"\n      ? messages.dragHandleActive\n      : status === \"change\"\n      ? messages.dragHandleChange\n      : messages.dragHandleCommit;\n\n  return replacePlaceholders(template, item.label, position, total);\n}\n\nexport function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {\n  handle: HTMLCalciteHandleElement;\n  item: HTMLCalciteValueListItemElement;\n} {\n  const handle = event\n    .composedPath()\n    .find((item: HTMLElement) => item.dataset?.jsHandle !== undefined) as HTMLCalciteHandleElement;\n\n  const item = event\n    .composedPath()\n    .find(\n      (item: HTMLElement) => item.tagName?.toLowerCase() === \"calcite-value-list-item\"\n    ) as HTMLCalciteValueListItemElement;\n\n  return { handle, item };\n}\n\nexport function replacePlaceholders(text: string, label: string, position: number, total: number): string {\n  const replacePosition = text.replace(\"{position}\", position.toString());\n  const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n  return replaceLabel.replace(\"{total}\", total.toString());\n}\n",":host {\n  @apply text-color-2\n    text-n1\n    relative\n    box-border\n    flex\n    flex-shrink-0\n    flex-grow-0\n    flex-col\n    items-stretch\n    bg-transparent;\n  * {\n    @apply box-border;\n  }\n}\n\n@include disabled();\n\ncalcite-value-list-item:last-of-type {\n  @apply shadow-none;\n}\n\n:host([filter-enabled]) header {\n  @apply bg-foreground-1\n    mb-1\n    flex\n    items-center\n    justify-end;\n  &.sticky-pos {\n    @apply sticky top-0 z-sticky;\n  }\n  @apply shadow-border-bottom;\n}\n\ncalcite-filter {\n  @apply mb-px;\n}\n\n.assistive-text {\n  @apply sr-only;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  calciteInternalListItemValueChangeHandler,\n  calciteListFocusOutHandler,\n  calciteListItemChangeHandler,\n  cleanUpObserver,\n  deselectRemovedItems,\n  deselectSiblingItems,\n  getItemData,\n  handleFilter,\n  handleFilterEvent,\n  handleInitialFilter,\n  initialize,\n  initializeObserver,\n  ItemData,\n  keyDownHandler,\n  ListFocusId,\n  moveItemIndex,\n  mutationObserverCallback,\n  removeItem,\n  selectSiblings,\n  setFocus,\n  setUpItems,\n} from \"../pick-list/shared-list-logic\";\nimport List from \"../pick-list/shared-list-render\";\nimport { ListItemAndHandle } from \"../value-list-item/interfaces\";\nimport { ValueListMessages } from \"./assets/value-list/t9n\";\nimport { CSS, ICON_TYPES } from \"./resources\";\nimport { getHandleAndItemElement, getScreenReaderText } from \"./utils\";\nimport {\n  DragDetail,\n  connectSortableComponent,\n  disconnectSortableComponent,\n  SortableComponent,\n  dragActive,\n} from \"../../utils/sortableComponent\";\nimport { focusElement } from \"../../utils/dom\";\n\n/**\n * @deprecated Use the `list` component instead.\n * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.\n * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.\n */\n@Component({\n  tag: \"calcite-value-list\",\n  styleUrl: \"value-list.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class ValueList<\n  ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement\n> implements\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent,\n    SortableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When provided, the method will be called to determine whether the element can  move from the list.\n   */\n  @Prop() canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * When provided, the method will be called to determine whether the element can be added from another list.\n   */\n  @Prop() canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * When `true`, `calcite-value-list-item`s are sortable via a draggable button.\n   */\n  @Prop({ reflect: true }) dragEnabled = false;\n\n  /**\n   * The currently filtered items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: HTMLCalciteValueListItemElement[] = [];\n\n  /**\n   * The currently filtered data.\n   *\n   * @readonly\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ mutable: true }) filteredData: ItemData = [];\n\n  /**\n   * When `true`, an input appears at the top of the component that can be used by end users to filter list items.\n   */\n  @Prop({ reflect: true }) filterEnabled = false;\n\n  /**\n   * Placeholder text for the filter's input field.\n   */\n  @Prop({ reflect: true }) filterPlaceholder: string;\n\n  /**\n   * Text for the filter input field.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by shared-list-logic module\n  @Prop({ reflect: true, mutable: true }) filterText: string;\n\n  /**\n   * The component's group identifier.\n   *\n   * To drag elements from one list into another, both lists must have the same group value.\n   */\n  @Prop({ reflect: true }) group?: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Similar to standard radio buttons and checkboxes.\n   * When `true`, a user can select multiple `calcite-value-list-item`s at a time.\n   * When `false`, only a single `calcite-value-list-item` can be selected at a time,\n   * and a new selection will deselect previous selections.\n   */\n  @Prop({ reflect: true }) multiple = false;\n\n  /**\n   * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.\n   */\n  @Prop({ reflect: true }) selectionFollowsFocus = false;\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<ValueListMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\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: ValueListMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteValueListElement;\n\n  @State() dataForFilter: ItemData = [];\n\n  @State() defaultMessages: ValueListMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() selectedValues: Map<string, ItemElement> = new Map();\n\n  items: ItemElement[];\n\n  lastSelectedItem: ItemElement = null;\n\n  mutationObserver = createObserver(\"mutation\", mutationObserverCallback.bind(this));\n\n  sortable: Sortable;\n\n  emitCalciteListChange: () => void;\n\n  emitCalciteListFilter: () => void;\n\n  filterEl: HTMLCalciteFilterElement;\n\n  assistiveTextEl: HTMLSpanElement;\n\n  handleSelector = `.${CSS.handle}`;\n\n  dragSelector = \"calcite-value-list-item\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    initialize.call(this);\n    initializeObserver.call(this);\n    this.setUpSorting();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    handleInitialFilter.call(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    if (dragActive(this)) {\n      return;\n    }\n\n    disconnectInteractive(this);\n    disconnectSortableComponent(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    cleanUpObserver.call(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits when any of the list item selections have changed.\n   */\n  @Event({ cancelable: false }) calciteListChange: EventEmitter<\n    Map<string, HTMLCalciteValueListItemElement>\n  >;\n\n  /**\n   * Emits when the order of the list has changed.\n   */\n  @Event({ cancelable: false }) calciteListOrderChange: EventEmitter<any[]>;\n\n  /**\n   * Emits when a filter has changed.\n   */\n  @Event({ cancelable: false }) calciteListFilter: EventEmitter<void>;\n\n  @Listen(\"focusout\")\n  calciteListFocusOutHandler(event: FocusEvent): void {\n    calciteListFocusOutHandler.call(this, event);\n  }\n\n  @Listen(\"calciteListItemRemove\")\n  calciteListItemRemoveHandler(event: CustomEvent<void>): void {\n    removeItem.call(this, event);\n  }\n\n  @Listen(\"calciteListItemChange\")\n  calciteListItemChangeHandler(event: CustomEvent): void {\n    calciteListItemChangeHandler.call(this, event);\n  }\n\n  @Listen(\"calciteInternalListItemPropsChange\")\n  calciteInternalListItemPropsChangeHandler(event: CustomEvent): void {\n    event.stopPropagation();\n    this.setUpFilter();\n  }\n\n  @Listen(\"calciteInternalListItemValueChange\")\n  calciteInternalListItemValueChangeHandler(event: CustomEvent): void {\n    calciteInternalListItemValueChangeHandler.call(this, event);\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onGlobalDragStart(): void {\n    cleanUpObserver.call(this);\n  }\n\n  onGlobalDragEnd(): void {\n    initializeObserver.call(this);\n  }\n\n  onDragEnd(): void {}\n\n  onDragStart(): void {}\n\n  onDragSort(): void {\n    this.items = Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n    const values = this.items.map((item) => item.value);\n    this.calciteListOrderChange.emit(values);\n  }\n\n  getItems(): ItemElement[] {\n    return Array.from(this.el.querySelectorAll<ItemElement>(\"calcite-value-list-item\"));\n  }\n\n  setUpItems(): void {\n    setUpItems.call(this, \"calcite-value-list-item\");\n    this.setUpSorting();\n  }\n\n  setUpFilter(): void {\n    if (this.filterEnabled) {\n      this.dataForFilter = this.getItemData();\n    }\n  }\n\n  setFilterEl = (el: HTMLCalciteFilterElement): void => {\n    this.filterEl = el;\n  };\n\n  setFilteredItems = (filteredItems: HTMLCalciteValueListItemElement[]): void => {\n    this.filteredItems = filteredItems;\n  };\n\n  setUpSorting(): void {\n    const { dragEnabled } = this;\n\n    if (!dragEnabled) {\n      return;\n    }\n\n    connectSortableComponent(this);\n  }\n\n  deselectRemovedItems = deselectRemovedItems.bind(this);\n\n  deselectSiblingItems = deselectSiblingItems.bind(this);\n\n  selectSiblings = selectSiblings.bind(this);\n\n  handleFilter = handleFilter.bind(this);\n\n  handleFilterEvent = handleFilterEvent.bind(this);\n\n  getItemData = getItemData.bind(this);\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const { handle, item } = getHandleAndItemElement(event);\n    if (handle && !item.handleActivated && event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"commit\", this));\n    }\n\n    if (!handle || !item.handleActivated) {\n      keyDownHandler.call(this, event);\n      return;\n    }\n\n    event.preventDefault();\n\n    const { items } = this;\n\n    if (event.key === \" \") {\n      this.updateScreenReaderText(getScreenReaderText(item, \"active\", this));\n    }\n\n    if ((event.key !== \"ArrowUp\" && event.key !== \"ArrowDown\") || items.length <= 1) {\n      return;\n    }\n\n    const { el } = this;\n    const nextIndex = moveItemIndex(this, item, event.key === \"ArrowUp\" ? \"up\" : \"down\");\n    if (nextIndex === items.length - 1) {\n      el.appendChild(item);\n    } else {\n      const itemAtNextIndex = el.children[nextIndex];\n      const insertionReferenceItem =\n        itemAtNextIndex === item.nextElementSibling\n          ? itemAtNextIndex.nextElementSibling\n          : itemAtNextIndex;\n      el.insertBefore(item, insertionReferenceItem);\n    }\n\n    this.items = this.getItems();\n    this.calciteListOrderChange.emit(this.items.map(({ value }) => value));\n\n    requestAnimationFrame(() => focusElement(handle));\n    item.handleActivated = true;\n\n    this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"change\", this));\n  };\n\n  handleBlur(): void {\n    if (this.dragEnabled) {\n      this.updateScreenReaderText(\"\");\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Returns the currently selected items */\n  @Method()\n  async getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>> {\n    return this.selectedValues;\n  }\n\n  /**\n   * Sets focus on the component's first focusable element.\n   *\n   * @param focusId\n   */\n  @Method()\n  async setFocus(focusId?: ListFocusId): Promise<void> {\n    await componentFocusable(this);\n\n    return setFocus.call(this, focusId);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getIconType(): ICON_TYPES | null {\n    let type = null;\n    if (this.dragEnabled) {\n      type = ICON_TYPES.grip;\n    }\n    return type;\n  }\n\n  updateScreenReaderText(text: string): void {\n    this.assistiveTextEl.textContent = text;\n  }\n\n  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void {\n    handleElement.ariaLabel = text;\n  }\n\n  storeAssistiveEl = (el: HTMLSpanElement): void => {\n    this.assistiveTextEl = el;\n  };\n\n  handleFocusIn = (event: FocusEvent): void => {\n    const { handle, item } = getHandleAndItemElement(event);\n    if (!item?.handleActivated && item && handle) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n  };\n\n  @Listen(\"calciteValueListItemDragHandleBlur\")\n  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {\n    const { item, handle } = event.detail;\n    if (!item?.handleActivated && item) {\n      this.updateHandleAriaLabel(handle, getScreenReaderText(item, \"idle\", this));\n    }\n    event.stopPropagation();\n  }\n\n  render(): VNode {\n    return (\n      <List\n        onBlur={this.handleBlur}\n        onFocusin={this.handleFocusIn}\n        onKeyDown={this.keyDownHandler}\n        props={this}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';

package/dist/components/color-picker-hex-input.js

@@ -1,14 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';
 import { c as color } from './index2.js';
 import { e as focusElement } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
-import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './input-message.js';
 import { d as defineCustomElement$3 } from './input-number.js';
 import { d as defineCustomElement$2 } from './input-text.js';
 import { d as defineCustomElement$1 } from './progress.js';
@@ -371,7 +372,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-color-picker-hex-input", "calcite-icon", "calcite-input-number", "calcite-input-text", "calcite-progress"];
+    const components = ["calcite-color-picker-hex-input", "calcite-icon", "calcite-input-message", "calcite-input-number", "calcite-input-text", "calcite-progress"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-color-picker-hex-input":
             if (!customElements.get(tagName)) {
@@ -379,6 +380,11 @@ function defineCustomElement() {
             }
             break;
         case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/color-picker-hex-input.js.map

@@ -1 +1 @@
-{"file":"color-picker-hex-input.js","mappings":";;;;;;;;;;;;;;;MAEaA,KAAG,GAAG;IACjB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,aAAa;IACzB,eAAe,EAAE,oBAAoB;IACrC,SAAS,EAAE,YAAY;IACvB,kBAAkB,EAAE,sBAAsB;IAC1C,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,mBAAmB;IACpC,cAAc,EAAE,iBAAiB;IACjC,WAAW,EAAE,cAAc;IAC3B,MAAM,EAAE,QAAQ;IAChB,mBAAmB,EAAE,wBAAwB;IAC7C,UAAU,EAAE,mBAAmB;IAC/B,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,gBAAgB;IAC9B,aAAa,EAAE,gBAAgB;IAC/B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,qBAAqB;IACxC,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,cAAc;IAC3B,kBAAkB,EAAE,sBAAsB;IAC1C,kBAAkB,EAAE,sBAAsB;IAC1C,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,gBAAgB;EAC9B;MAEWC,eAAa,GAAGC,KAAK,CAAC,SAAS,EAAE;MACjC,0BAA0B,GAAG,iBAAiB;MAE9C,UAAU,GAAG;IACxB,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;EACN;MAEW,UAAU,GAAG;IACxB,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;EACN;AAEF;MACa,qBAAqB,GAAG,UAAU,CAAC,CAAC,GAAG,EAAE;MAEzC,cAAc,GAAG;IAC5B,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,GAAG;EACR;MAEW,UAAU,GAAG;IACxB,CAAC,EAAE;QACD,MAAM,EAAE;YACN,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,UAAU,EAAE;YACV,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;SACX;KACF;IACD,CAAC,EAAE;QACD,MAAM,EAAE;YACN,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,GAAG;SACX;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;SACX;KACF;IACD,CAAC,EAAE;QACD,MAAM,EAAE;YACN,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,UAAU,EAAE;YACV,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,GAAG;SACX;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;SACX;KACF;EACD;MAEW,UAAU,GAAG;;ACpGnB,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;CAC9B;;ACJD,MAAM,sBAAsB,GAAG,wbAAwb;;ACqCvd,MAAM,aAAa,GAAGA,KAAK,EAAE,CAAC;MAOjB,mBAAmB;;;;;;QAgGtB,mBAAc,GAAG;YACvB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC;YAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;YAC9B,MAAM,GAAG,GAAG,IAAI,UAAU,EAAE,CAAC;YAC7B,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;YAC3C,MAAM,cAAc,GAAG,UAAU,IAAI,CAAC,UAAU,CAAC;YACjD,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;;YAGtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAExB,IAAI,cAAc,KAAK,UAAU,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,EAAE;gBACrD,OAAO;aACR;;YAGD,IAAI,CAAC,KAAK;gBACR,UAAU,IAAI,CAAC,aAAa;sBACxB,EAAE;sBACF,IAAI,CAAC,yBAAyB,CAC5B,QAAQ;;oBAEN,aAAa,CAAC,MAAM,EAAgB,CACrC,CACF,CAAC;SACT,CAAC;QAEM,uBAAkB,GAAG;YAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;YACnC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;YAC9B,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;YAC3C,MAAM,cAAc,GAAG,UAAU,IAAI,CAAC,UAAU,CAAC;YAEjD,IAAI,cAAc,EAAE;gBAClB,OAAO;aACR;;YAGD,IAAI,CAAC,KAAK;gBACR,UAAU,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC;SACzF,CAAC;QAEM,qBAAgB,GAAG;YACzB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAC1C,IAAI,KAAK,GAAG,SAAS,CAAC;YAEtB,IAAI,KAAK,EAAE;gBACT,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBAC9C,MAAM,qBAAqB,GAAG,UAAU,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC;gBAC1E,IAAI,qBAAqB,IAAI,IAAI,CAAC,aAAa,EAAE;oBAC/C,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;oBACzE,KAAK,GAAG,GAAG,UAAU,GAAG,QAAQ,EAAE,CAAC;iBACpC;aACF;YAED,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1C,CAAC;QAEM,yBAAoB,GAAG;YAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;YACnC,IAAI,KAAsB,CAAC;YAE3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;gBACf,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aACpB;iBAAM;gBACL,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;gBACjD,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;aACjD;YAED,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1C,CAAC;QAEQ,mBAAc,GAAG,CAAC,KAAoB;YAC9C,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;YACrD,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YAClE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YACtB,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAE1C,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,OAAO,EAAE;gBACpC,IAAI,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;oBACvC,IAAI,CAAC,gBAAgB,EAAE,CAAC;iBACzB;qBAAM;oBACL,IAAI,CAAC,oBAAoB,EAAE,CAAC;iBAC7B;gBAED,IAAI,GAAG,KAAK,OAAO,EAAE;oBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;gBAED,OAAO;aACR;YAED,MAAM,UAAU,GAAG,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,CAAC;YAC5D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;YAE5B,IAAI,UAAU,EAAE;gBACd,IAAI,CAAC,KAAK,EAAE;oBACV,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;oBAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO;iBACR;gBAED,MAAM,SAAS,GAAG,GAAG,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAC7C,MAAM,IAAI,GAAG,QAAQ,GAAG,EAAE,GAAG,CAAC,CAAC;gBAE/B,IAAI,CAAC,gBAAgB,CACnB,MAAM,CACJ,IAAI,CAAC,gBAAgB,CACnB,aAAa,EACb,IAAI,GAAG,SAAS,EAChB,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,GAAG,KAAK,GAAG,GAAG,CAClD,EACD,YAAY,CACb,EACD,QAAQ,CACT,CAAC;gBAEF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,MAAM,aAAa,GAAG,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC;YACnD,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC;YACpC,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEvC,IAAI,UAAU,IAAI,CAAC,aAAa,IAAI,CAAC,YAAY,EAAE;gBACjD,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAqB;YAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAEhD,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACxC;SACF,CAAC;QAmBM,yBAAoB,GAAW,IAAI,CAAC,KAAK,CAAC;QAgH1C,qBAAgB,GAAG,CAAC,IAAiC;YAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SAC1B,CAAC;QAEM,yBAAoB,GAAG,CAAC,IAAmC;YACjE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;SAC9B,CAAC;0BAtUmB,KAAK;4BAKH,KAAK;wBAOT,KAAK;;;qBAagB,GAAG;qBAKa,YAAY,CAClE,MAAM,CAAC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,EACxC,IAAI,CAAC,YAAY,EACjB,IAAI,CACL;6BA0KsC,aAAa;;;;;;;IAjPpD,iBAAiB;QACf,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEjD,IAAI,KAAK,EAAE;YACT,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;YAErD,IAAI,UAAU,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE;gBACxC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;aACtD;YAED,OAAO;SACR;QAED,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;SAC1C;KACF;IAED,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAkDD,iBAAiB,CAAC,KAAa,EAAE,QAAgB;QAC/C,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;KAC/C;;;;;;IAiLD,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;QAC5D,MAAM,iBAAiB,GAAG,IAAI,CAAC,6BAA6B,CAAC,aAAa,CAAC,CAAC;QAC5E,MAAM,UAAU,GAAG,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;QAE7C,QACE,WAAK,KAAK,EAAE,GAAG,CAAC,SAAS,IACvB,0BACE,KAAK,EAAE,GAAG,CAAC,QAAQ,EACnB,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,QAAQ,EAChC,SAAS,EAAE,CAAC,EACZ,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAC/C,8BAA8B,EAAE,IAAI,CAAC,cAAc,EACnD,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,UAAU,EAAC,GAAG,EACd,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,aAAa;;YAEpB,GAAG,EAAE,IAAI,CAAC,gBAAgB,GAC1B,EACD,YAAY,IACX,4BACE,KAAK,EAAE,GAAG,CAAC,YAAY,EACvB,GAAG,EAAC,eAAe,EACnB,KAAK,EAAE,QAAQ,EAAE,OAAO,EACxB,GAAG,EAAE,cAAc,CAAC,GAAG,EACvB,SAAS,EAAE,CAAC,EACZ,GAAG,EAAE,cAAc,CAAC,GAAG,EACvB,gBAAgB,EAAC,MAAM,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,0BAA0B,EAAE,IAAI,CAAC,oBAAoB,EACrD,gCAAgC,EAAE,IAAI,CAAC,kBAAkB,EACzD,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,KAAK,EAAE,UAAU,EACjB,UAAU,EAAC,GAAG,EACd,KAAK,EAAE,iBAAiB;;YAExB,GAAG,EAAE,IAAI,CAAC,oBAAoB,GAC9B,IACA,IAAI,CACJ,EACN;KACH;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,OAAO,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACxC;;;;;;IAQO,gBAAgB,CAAC,KAAoB,EAAE,QAAuB,EAAE,IAAI,GAAG,IAAI;QACjF,IAAI,KAAK,EAAE;YACT,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;YAC9B,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;YAEnE,IAAI,UAAU,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE;gBACxC,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;gBAC7C,MAAM,SAAS,GAAGA,KAAK,CAAC,UAAU,CAAC,CAAC;gBACpC,MAAM,kBAAkB,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC;gBAEvF,MAAM,OAAO,GACX,CAAC,YAAY;oBACb,kBAAkB,KAAK,YAAY,CAAC,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC;gBAExF,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;gBAC/B,IAAI,CAAC,oBAAoB,GAAG,kBAAkB,CAAC;gBAC/C,IAAI,CAAC,KAAK,GAAG,kBAAkB,CAAC;gBAEhC,IAAI,OAAO,IAAI,IAAI,EAAE;oBACnB,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;iBAC9C;gBAED,OAAO;aACR;SACF;aAAM,IAAI,IAAI,CAAC,UAAU,EAAE;YAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAElB,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAAC;aAC9C;YAED,OAAO;SACR;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;IAUO,yBAAyB,CAAC,GAAW;QAC3C,OAAO,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;KACpD;IAEO,6BAA6B,CAAC,KAAY;QAChD,OAAO,KAAK,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACxD;IAEO,gBAAgB,CAACC,OAAY,EAAE,MAAc,EAAE,OAAoB;QACzE,IAAI,cAAwB,CAAC;QAC7B,MAAM,QAAQ,GAAGA,OAAK,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEzC,IAAI,OAAO,KAAK,KAAK,EAAE;YACrB,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,CAAC,CAAC;YACzE,cAAc,GAAG;gBACf,GAAG,iBAAiB;gBACpB,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS;aAChC,CAAC;SACf;aAAM;YACL,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAACA,OAAK,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;YAC3E,cAAc,GAAG,CAAC,GAAG,WAAW,EAAE,WAAW,CAAa,CAAC;SAC5D;QAED,OAAOD,KAAK,CAAC,cAAc,CAAC,CAAC;KAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CSS","DEFAULT_COLOR","Color","color"],"sources":["src/components/color-picker/resources.ts","src/components/color-picker-hex-input/resources.ts","src/components/color-picker-hex-input/color-picker-hex-input.scss?tag=calcite-color-picker-hex-input&encapsulation=shadow","src/components/color-picker-hex-input/color-picker-hex-input.tsx"],"sourcesContent":["import Color from \"color\";\n\nexport const CSS = {\n  channel: \"channel\",\n  channels: \"channels\",\n  colorField: \"color-field\",\n  colorFieldScope: \"scope--color-field\",\n  colorMode: \"color-mode\",\n  colorModeContainer: \"color-mode-container\",\n  container: \"container\",\n  control: \"control\",\n  controlAndScope: \"control-and-scope\",\n  controlSection: \"control-section\",\n  deleteColor: \"delete-color\",\n  header: \"header\",\n  hexAndChannelsGroup: \"hex-and-channels-group\",\n  hexOptions: \"color-hex-options\",\n  hueScope: \"scope--hue\",\n  hueSlider: \"hue-slider\",\n  opacityScope: \"scope--opacity\",\n  opacitySlider: \"opacity-slider\",\n  preview: \"preview\",\n  previewAndSliders: \"preview-and-sliders\",\n  saveColor: \"save-color\",\n  savedColor: \"saved-color\",\n  savedColors: \"saved-colors\",\n  savedColorsButtons: \"saved-colors-buttons\",\n  savedColorsSection: \"saved-colors-section\",\n  scope: \"scope\",\n  section: \"section\",\n  slider: \"slider\",\n  sliders: \"sliders\",\n  splitSection: \"section--split\",\n};\n\nexport const DEFAULT_COLOR = Color(\"#007AC2\");\nexport const DEFAULT_STORAGE_KEY_PREFIX = \"calcite-color-\";\n\nexport const RGB_LIMITS = {\n  r: 255,\n  g: 255,\n  b: 255,\n};\n\nexport const HSV_LIMITS = {\n  h: 360,\n  s: 100,\n  v: 100,\n};\n\n// 0 and 360 represent the same value, so we limit the hue to 359\nexport const HUE_LIMIT_CONSTRAINED = HSV_LIMITS.h - 1;\n\nexport const OPACITY_LIMITS = {\n  min: 0,\n  max: 100,\n};\n\nexport const DIMENSIONS = {\n  s: {\n    slider: {\n      height: 12,\n      width: 104,\n    },\n    colorField: {\n      height: 80,\n      width: 160,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n  m: {\n    slider: {\n      height: 12,\n      width: 204,\n    },\n    colorField: {\n      height: 150,\n      width: 272,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n  l: {\n    slider: {\n      height: 12,\n      width: 384,\n    },\n    colorField: {\n      height: 200,\n      width: 464,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n};\n\nexport const SCOPE_SIZE = 1;\n","export const CSS = {\n  container: \"container\",\n  hexInput: \"hex-input\",\n  opacityInput: \"opacity-input\",\n};\n",":host {\n  @apply block;\n}\n\n.container {\n  @apply flex w-full items-center flex-nowrap;\n}\n\n.hex-input {\n  @apply grow uppercase;\n}\n\n.opacity-input {\n  inline-size: 68px;\n  margin-inline-start: -1px;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    @apply flex-wrap gap-y-0.5;\n  }\n\n  .opacity-input {\n    inline-size: unset;\n    margin-inline-start: unset;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .opacity-input {\n    inline-size: 88px;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  alphaToOpacity,\n  hexChar,\n  hexify,\n  isLonghandHex,\n  isValidHex,\n  normalizeHex,\n  opacityToAlpha,\n  rgbToHex,\n} from \"../color-picker/utils\";\nimport { CSS } from \"./resources\";\nimport { Scale } from \"../interfaces\";\nimport { Channels, RGB } from \"../color-picker/interfaces\";\nimport Color from \"color\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { NumberingSystem } from \"../../utils/locale\";\nimport { OPACITY_LIMITS } from \"../color-picker/resources\";\nimport { ColorPickerMessages } from \"../color-picker/assets/color-picker/t9n\";\n\nconst DEFAULT_COLOR = Color();\n\n@Component({\n  tag: \"calcite-color-picker-hex-input\",\n  styleUrl: \"color-picker-hex-input.scss\",\n  shadow: true,\n})\nexport class ColorPickerHexInput implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { allowEmpty, alphaChannel, value } = this;\n\n    if (value) {\n      const normalized = normalizeHex(value, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        this.internalSetValue(normalized, normalized, false);\n      }\n\n      return;\n    }\n\n    if (allowEmpty) {\n      this.internalSetValue(null, null, false);\n    }\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n   *\n   * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.\n   */\n  @Prop() allowEmpty = false;\n\n  /**\n   * When true, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  /**\n   * Specifies accessible label for the input field.\n   *\n   * @deprecated use `messages` instead\n   */\n  @Prop() hexLabel = \"Hex\";\n\n  /**\n   * Messages are passed by parent component for accessible labels.\n   *\n   * @internal\n   */\n  @Prop() messages: ColorPickerMessages;\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem?: NumberingSystem;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The hex value.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: string, oldValue: string): void {\n    this.internalSetValue(value, oldValue, false);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when the hex value changes.\n   */\n  @Event({ cancelable: false }) calciteColorPickerHexInputChange: EventEmitter<void>;\n\n  private onHexInputBlur = (): void => {\n    const node = this.hexInputNode;\n    const inputValue = node.value;\n    const hex = `#${inputValue}`;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n    const isLonghand = isLonghandHex(hex);\n\n    // ensure modified pasted hex values are committed since we prevent default to remove the # char.\n    this.onHexInputChange();\n\n    if (willClearValue || (isValidHex(hex) && isLonghand)) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor\n        ? \"\"\n        : this.formatHexForInternalInput(\n            rgbToHex(\n              // always display hex input in RRGGBB format\n              internalColor.object() as any as RGB\n            )\n          );\n  };\n\n  private onOpacityInputBlur = (): void => {\n    const node = this.opacityInputNode;\n    const inputValue = node.value;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n\n    if (willClearValue) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor ? \"\" : this.formatOpacityForInternalInput(internalColor);\n  };\n\n  private onHexInputChange = (): void => {\n    const nodeValue = this.hexInputNode.value;\n    let value = nodeValue;\n\n    if (value) {\n      const normalized = normalizeHex(value, false);\n      const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;\n      if (preserveExistingAlpha && this.internalColor) {\n        const alphaHex = normalizeHex(this.internalColor.hexa(), true).slice(-2);\n        value = `${normalized + alphaHex}`;\n      }\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onOpacityInputChange = (): void => {\n    const node = this.opacityInputNode;\n    let value: number | string;\n\n    if (!node.value) {\n      value = node.value;\n    } else {\n      const alpha = opacityToAlpha(Number(node.value));\n      value = this.internalColor?.alpha(alpha).hexa();\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  protected onInputKeyDown = (event: KeyboardEvent): void => {\n    const { altKey, ctrlKey, metaKey, shiftKey } = event;\n    const { alphaChannel, hexInputNode, internalColor, value } = this;\n    const { key } = event;\n    const composedPath = event.composedPath();\n\n    if (key === \"Tab\" || key === \"Enter\") {\n      if (composedPath.includes(hexInputNode)) {\n        this.onHexInputChange();\n      } else {\n        this.onOpacityInputChange();\n      }\n\n      if (key === \"Enter\") {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    const isNudgeKey = key === \"ArrowDown\" || key === \"ArrowUp\";\n    const oldValue = this.value;\n\n    if (isNudgeKey) {\n      if (!value) {\n        this.internalSetValue(this.previousNonNullValue, oldValue);\n        event.preventDefault();\n        return;\n      }\n\n      const direction = key === \"ArrowUp\" ? 1 : -1;\n      const bump = shiftKey ? 10 : 1;\n\n      this.internalSetValue(\n        hexify(\n          this.nudgeRGBChannels(\n            internalColor,\n            bump * direction,\n            composedPath.includes(hexInputNode) ? \"rgb\" : \"a\"\n          ),\n          alphaChannel\n        ),\n        oldValue\n      );\n\n      event.preventDefault();\n      return;\n    }\n\n    const withModifiers = altKey || ctrlKey || metaKey;\n    const singleChar = key.length === 1;\n    const validHexChar = hexChar.test(key);\n\n    if (singleChar && !withModifiers && !validHexChar) {\n      event.preventDefault();\n    }\n  };\n\n  private onHexInputPaste = (event: ClipboardEvent): void => {\n    const hex = event.clipboardData.getData(\"text\");\n\n    if (isValidHex(hex)) {\n      event.preventDefault();\n      this.hexInputNode.value = hex.slice(1);\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerHexInputElement;\n\n  private hexInputNode: HTMLCalciteInputTextElement;\n\n  /**\n   * The last valid/selected color. Used as a fallback if an invalid hex code is entered.\n   */\n  @State() internalColor: Color | null = DEFAULT_COLOR;\n\n  private opacityInputNode: HTMLCalciteInputNumberElement;\n\n  private previousNonNullValue: string = this.value;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;\n    const hexInputValue = this.formatHexForInternalInput(value);\n    const opacityInputValue = this.formatOpacityForInternalInput(internalColor);\n    const inputScale = scale === \"l\" ? \"m\" : \"s\";\n\n    return (\n      <div class={CSS.container}>\n        <calcite-input-text\n          class={CSS.hexInput}\n          label={messages?.hex || hexLabel}\n          maxLength={6}\n          onCalciteInputTextChange={this.onHexInputChange}\n          onCalciteInternalInputTextBlur={this.onHexInputBlur}\n          onKeyDown={this.onInputKeyDown}\n          onPaste={this.onHexInputPaste}\n          prefixText=\"#\"\n          scale={inputScale}\n          value={hexInputValue}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.storeHexInputRef}\n        />\n        {alphaChannel ? (\n          <calcite-input-number\n            class={CSS.opacityInput}\n            key=\"opacity-input\"\n            label={messages?.opacity}\n            max={OPACITY_LIMITS.max}\n            maxLength={3}\n            min={OPACITY_LIMITS.min}\n            numberButtonType=\"none\"\n            numberingSystem={this.numberingSystem}\n            onCalciteInputNumberChange={this.onOpacityInputChange}\n            onCalciteInternalInputNumberBlur={this.onOpacityInputBlur}\n            onKeyDown={this.onInputKeyDown}\n            scale={inputScale}\n            suffixText=\"%\"\n            value={opacityInputValue}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.storeOpacityInputRef}\n          />\n        ) : null}\n      </div>\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\n    return focusElement(this.hexInputNode);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private internalSetValue(value: string | null, oldValue: string | null, emit = true): void {\n    if (value) {\n      const { alphaChannel } = this;\n      const normalized = normalizeHex(value, alphaChannel, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        const { internalColor: currentColor } = this;\n        const nextColor = Color(normalized);\n        const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);\n\n        const changed =\n          !currentColor ||\n          normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);\n\n        this.internalColor = nextColor;\n        this.previousNonNullValue = normalizedLonghand;\n        this.value = normalizedLonghand;\n\n        if (changed && emit) {\n          this.calciteColorPickerHexInputChange.emit();\n        }\n\n        return;\n      }\n    } else if (this.allowEmpty) {\n      this.internalColor = null;\n      this.value = null;\n\n      if (emit) {\n        this.calciteColorPickerHexInputChange.emit();\n      }\n\n      return;\n    }\n\n    this.value = oldValue;\n  }\n\n  private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {\n    this.hexInputNode = node;\n  };\n\n  private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {\n    this.opacityInputNode = node;\n  };\n\n  private formatHexForInternalInput(hex: string): string {\n    return hex ? hex.replace(\"#\", \"\").slice(0, 6) : \"\";\n  }\n\n  private formatOpacityForInternalInput(color: Color): string {\n    return color ? `${alphaToOpacity(color.alpha())}` : \"\";\n  }\n\n  private nudgeRGBChannels(color: Color, amount: number, context: \"rgb\" | \"a\"): Color {\n    let nudgedChannels: Channels;\n    const channels = color.array();\n    const rgbChannels = channels.slice(0, 3);\n\n    if (context === \"rgb\") {\n      const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);\n      nudgedChannels = [\n        ...nudgedRGBChannels,\n        this.alphaChannel ? channels[3] : undefined,\n      ] as Channels;\n    } else {\n      const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);\n      nudgedChannels = [...rgbChannels, nudgedAlpha] as Channels;\n    }\n\n    return Color(nudgedChannels);\n  }\n}\n"],"version":3}
+{"file":"color-picker-hex-input.js","mappings":"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","names":["CSS","DEFAULT_COLOR","Color","color"],"sources":["src/components/color-picker/resources.ts","src/components/color-picker-hex-input/resources.ts","src/components/color-picker-hex-input/color-picker-hex-input.scss?tag=calcite-color-picker-hex-input&encapsulation=shadow","src/components/color-picker-hex-input/color-picker-hex-input.tsx"],"sourcesContent":["import Color from \"color\";\n\nexport const CSS = {\n  channel: \"channel\",\n  channels: \"channels\",\n  colorField: \"color-field\",\n  colorFieldScope: \"scope--color-field\",\n  colorMode: \"color-mode\",\n  colorModeContainer: \"color-mode-container\",\n  container: \"container\",\n  control: \"control\",\n  controlAndScope: \"control-and-scope\",\n  controlSection: \"control-section\",\n  deleteColor: \"delete-color\",\n  header: \"header\",\n  hexAndChannelsGroup: \"hex-and-channels-group\",\n  hexOptions: \"color-hex-options\",\n  hueScope: \"scope--hue\",\n  hueSlider: \"hue-slider\",\n  opacityScope: \"scope--opacity\",\n  opacitySlider: \"opacity-slider\",\n  preview: \"preview\",\n  previewAndSliders: \"preview-and-sliders\",\n  saveColor: \"save-color\",\n  savedColor: \"saved-color\",\n  savedColors: \"saved-colors\",\n  savedColorsButtons: \"saved-colors-buttons\",\n  savedColorsSection: \"saved-colors-section\",\n  scope: \"scope\",\n  section: \"section\",\n  slider: \"slider\",\n  sliders: \"sliders\",\n  splitSection: \"section--split\",\n};\n\nexport const DEFAULT_COLOR = Color(\"#007AC2\");\nexport const DEFAULT_STORAGE_KEY_PREFIX = \"calcite-color-\";\n\nexport const RGB_LIMITS = {\n  r: 255,\n  g: 255,\n  b: 255,\n};\n\nexport const HSV_LIMITS = {\n  h: 360,\n  s: 100,\n  v: 100,\n};\n\n// 0 and 360 represent the same value, so we limit the hue to 359\nexport const HUE_LIMIT_CONSTRAINED = HSV_LIMITS.h - 1;\n\nexport const OPACITY_LIMITS = {\n  min: 0,\n  max: 100,\n};\n\nexport const DIMENSIONS = {\n  s: {\n    slider: {\n      height: 12,\n      width: 104,\n    },\n    colorField: {\n      height: 80,\n      width: 160,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n  m: {\n    slider: {\n      height: 12,\n      width: 204,\n    },\n    colorField: {\n      height: 150,\n      width: 272,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n  l: {\n    slider: {\n      height: 12,\n      width: 384,\n    },\n    colorField: {\n      height: 200,\n      width: 464,\n    },\n    thumb: {\n      radius: 10,\n    },\n  },\n};\n\nexport const SCOPE_SIZE = 1;\n","export const CSS = {\n  container: \"container\",\n  hexInput: \"hex-input\",\n  opacityInput: \"opacity-input\",\n};\n",":host {\n  @apply block;\n}\n\n.container {\n  @apply flex w-full items-center flex-nowrap;\n}\n\n.hex-input {\n  @apply grow uppercase;\n}\n\n.opacity-input {\n  inline-size: 68px;\n  margin-inline-start: -1px;\n}\n\n:host([scale=\"s\"]) {\n  .container {\n    @apply flex-wrap gap-y-0.5;\n  }\n\n  .opacity-input {\n    inline-size: unset;\n    margin-inline-start: unset;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .opacity-input {\n    inline-size: 88px;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  alphaToOpacity,\n  hexChar,\n  hexify,\n  isLonghandHex,\n  isValidHex,\n  normalizeHex,\n  opacityToAlpha,\n  rgbToHex,\n} from \"../color-picker/utils\";\nimport { CSS } from \"./resources\";\nimport { Scale } from \"../interfaces\";\nimport { Channels, RGB } from \"../color-picker/interfaces\";\nimport Color from \"color\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { NumberingSystem } from \"../../utils/locale\";\nimport { OPACITY_LIMITS } from \"../color-picker/resources\";\nimport { ColorPickerMessages } from \"../color-picker/assets/color-picker/t9n\";\n\nconst DEFAULT_COLOR = Color();\n\n@Component({\n  tag: \"calcite-color-picker-hex-input\",\n  styleUrl: \"color-picker-hex-input.scss\",\n  shadow: true,\n})\nexport class ColorPickerHexInput implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { allowEmpty, alphaChannel, value } = this;\n\n    if (value) {\n      const normalized = normalizeHex(value, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        this.internalSetValue(normalized, normalized, false);\n      }\n\n      return;\n    }\n\n    if (allowEmpty) {\n      this.internalSetValue(null, null, false);\n    }\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n   *\n   * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.\n   */\n  @Prop() allowEmpty = false;\n\n  /**\n   * When true, the component will allow updates to the color's alpha value.\n   */\n  @Prop() alphaChannel = false;\n\n  /**\n   * Specifies accessible label for the input field.\n   *\n   * @deprecated use `messages` instead\n   */\n  @Prop() hexLabel = \"Hex\";\n\n  /**\n   * Messages are passed by parent component for accessible labels.\n   *\n   * @internal\n   */\n  @Prop() messages: ColorPickerMessages;\n\n  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem?: NumberingSystem;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The hex value.\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = normalizeHex(\n    hexify(DEFAULT_COLOR, this.alphaChannel),\n    this.alphaChannel,\n    true\n  );\n\n  @Watch(\"value\")\n  handleValueChange(value: string, oldValue: string): void {\n    this.internalSetValue(value, oldValue, false);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when the hex value changes.\n   */\n  @Event({ cancelable: false }) calciteColorPickerHexInputChange: EventEmitter<void>;\n\n  private onHexInputBlur = (): void => {\n    const node = this.hexInputNode;\n    const inputValue = node.value;\n    const hex = `#${inputValue}`;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n    const isLonghand = isLonghandHex(hex);\n\n    // ensure modified pasted hex values are committed since we prevent default to remove the # char.\n    this.onHexInputChange();\n\n    if (willClearValue || (isValidHex(hex) && isLonghand)) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor\n        ? \"\"\n        : this.formatHexForInternalInput(\n            rgbToHex(\n              // always display hex input in RRGGBB format\n              internalColor.object() as any as RGB\n            )\n          );\n  };\n\n  private onOpacityInputBlur = (): void => {\n    const node = this.opacityInputNode;\n    const inputValue = node.value;\n    const { allowEmpty, internalColor } = this;\n    const willClearValue = allowEmpty && !inputValue;\n\n    if (willClearValue) {\n      return;\n    }\n\n    // manipulating DOM directly since rerender doesn't update input value\n    node.value =\n      allowEmpty && !internalColor ? \"\" : this.formatOpacityForInternalInput(internalColor);\n  };\n\n  private onHexInputChange = (): void => {\n    const nodeValue = this.hexInputNode.value;\n    let value = nodeValue;\n\n    if (value) {\n      const normalized = normalizeHex(value, false);\n      const preserveExistingAlpha = isValidHex(normalized) && this.alphaChannel;\n      if (preserveExistingAlpha && this.internalColor) {\n        const alphaHex = normalizeHex(this.internalColor.hexa(), true).slice(-2);\n        value = `${normalized + alphaHex}`;\n      }\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  private onOpacityInputChange = (): void => {\n    const node = this.opacityInputNode;\n    let value: number | string;\n\n    if (!node.value) {\n      value = node.value;\n    } else {\n      const alpha = opacityToAlpha(Number(node.value));\n      value = this.internalColor?.alpha(alpha).hexa();\n    }\n\n    this.internalSetValue(value, this.value);\n  };\n\n  protected onInputKeyDown = (event: KeyboardEvent): void => {\n    const { altKey, ctrlKey, metaKey, shiftKey } = event;\n    const { alphaChannel, hexInputNode, internalColor, value } = this;\n    const { key } = event;\n    const composedPath = event.composedPath();\n\n    if (key === \"Tab\" || key === \"Enter\") {\n      if (composedPath.includes(hexInputNode)) {\n        this.onHexInputChange();\n      } else {\n        this.onOpacityInputChange();\n      }\n\n      if (key === \"Enter\") {\n        event.preventDefault();\n      }\n\n      return;\n    }\n\n    const isNudgeKey = key === \"ArrowDown\" || key === \"ArrowUp\";\n    const oldValue = this.value;\n\n    if (isNudgeKey) {\n      if (!value) {\n        this.internalSetValue(this.previousNonNullValue, oldValue);\n        event.preventDefault();\n        return;\n      }\n\n      const direction = key === \"ArrowUp\" ? 1 : -1;\n      const bump = shiftKey ? 10 : 1;\n\n      this.internalSetValue(\n        hexify(\n          this.nudgeRGBChannels(\n            internalColor,\n            bump * direction,\n            composedPath.includes(hexInputNode) ? \"rgb\" : \"a\"\n          ),\n          alphaChannel\n        ),\n        oldValue\n      );\n\n      event.preventDefault();\n      return;\n    }\n\n    const withModifiers = altKey || ctrlKey || metaKey;\n    const singleChar = key.length === 1;\n    const validHexChar = hexChar.test(key);\n\n    if (singleChar && !withModifiers && !validHexChar) {\n      event.preventDefault();\n    }\n  };\n\n  private onHexInputPaste = (event: ClipboardEvent): void => {\n    const hex = event.clipboardData.getData(\"text\");\n\n    if (isValidHex(hex)) {\n      event.preventDefault();\n      this.hexInputNode.value = hex.slice(1);\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteColorPickerHexInputElement;\n\n  private hexInputNode: HTMLCalciteInputTextElement;\n\n  /**\n   * The last valid/selected color. Used as a fallback if an invalid hex code is entered.\n   */\n  @State() internalColor: Color | null = DEFAULT_COLOR;\n\n  private opacityInputNode: HTMLCalciteInputNumberElement;\n\n  private previousNonNullValue: string = this.value;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { alphaChannel, hexLabel, internalColor, messages, scale, value } = this;\n    const hexInputValue = this.formatHexForInternalInput(value);\n    const opacityInputValue = this.formatOpacityForInternalInput(internalColor);\n    const inputScale = scale === \"l\" ? \"m\" : \"s\";\n\n    return (\n      <div class={CSS.container}>\n        <calcite-input-text\n          class={CSS.hexInput}\n          label={messages?.hex || hexLabel}\n          maxLength={6}\n          onCalciteInputTextChange={this.onHexInputChange}\n          onCalciteInternalInputTextBlur={this.onHexInputBlur}\n          onKeyDown={this.onInputKeyDown}\n          onPaste={this.onHexInputPaste}\n          prefixText=\"#\"\n          scale={inputScale}\n          value={hexInputValue}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.storeHexInputRef}\n        />\n        {alphaChannel ? (\n          <calcite-input-number\n            class={CSS.opacityInput}\n            key=\"opacity-input\"\n            label={messages?.opacity}\n            max={OPACITY_LIMITS.max}\n            maxLength={3}\n            min={OPACITY_LIMITS.min}\n            numberButtonType=\"none\"\n            numberingSystem={this.numberingSystem}\n            onCalciteInputNumberChange={this.onOpacityInputChange}\n            onCalciteInternalInputNumberBlur={this.onOpacityInputBlur}\n            onKeyDown={this.onInputKeyDown}\n            scale={inputScale}\n            suffixText=\"%\"\n            value={opacityInputValue}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.storeOpacityInputRef}\n          />\n        ) : null}\n      </div>\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\n    return focusElement(this.hexInputNode);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private internalSetValue(value: string | null, oldValue: string | null, emit = true): void {\n    if (value) {\n      const { alphaChannel } = this;\n      const normalized = normalizeHex(value, alphaChannel, alphaChannel);\n\n      if (isValidHex(normalized, alphaChannel)) {\n        const { internalColor: currentColor } = this;\n        const nextColor = Color(normalized);\n        const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);\n\n        const changed =\n          !currentColor ||\n          normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);\n\n        this.internalColor = nextColor;\n        this.previousNonNullValue = normalizedLonghand;\n        this.value = normalizedLonghand;\n\n        if (changed && emit) {\n          this.calciteColorPickerHexInputChange.emit();\n        }\n\n        return;\n      }\n    } else if (this.allowEmpty) {\n      this.internalColor = null;\n      this.value = null;\n\n      if (emit) {\n        this.calciteColorPickerHexInputChange.emit();\n      }\n\n      return;\n    }\n\n    this.value = oldValue;\n  }\n\n  private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {\n    this.hexInputNode = node;\n  };\n\n  private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {\n    this.opacityInputNode = node;\n  };\n\n  private formatHexForInternalInput(hex: string): string {\n    return hex ? hex.replace(\"#\", \"\").slice(0, 6) : \"\";\n  }\n\n  private formatOpacityForInternalInput(color: Color): string {\n    return color ? `${alphaToOpacity(color.alpha())}` : \"\";\n  }\n\n  private nudgeRGBChannels(color: Color, amount: number, context: \"rgb\" | \"a\"): Color {\n    let nudgedChannels: Channels;\n    const channels = color.array();\n    const rgbChannels = channels.slice(0, 3);\n\n    if (context === \"rgb\") {\n      const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);\n      nudgedChannels = [\n        ...nudgedRGBChannels,\n        this.alphaChannel ? channels[3] : undefined,\n      ] as Channels;\n    } else {\n      const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount);\n      nudgedChannels = [...rgbChannels, nudgedAlpha] as Channels;\n    }\n\n    return Color(nudgedChannels);\n  }\n}\n"],"version":3}

package/dist/components/color-picker-swatch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';

package/dist/components/combobox-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter.js';
@@ -18,8 +18,10 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
 import { i as isSingleLike, h as hasActiveChildren, C as CSS$1, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, c as ComboboxItem, d as ComboboxItemGroup } from './utils2.js';
 import { g as getIconScale } from './component.js';
-import { d as defineCustomElement$2 } from './chip.js';
-import { d as defineCustomElement$1 } from './icon.js';
+import { V as Validation } from './Validation.js';
+import { d as defineCustomElement$3 } from './chip.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './input-message.js';
 import { d as debounce } from './debounce.js';
 
 const CSS = {
@@ -34,11 +36,11 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Fri, 15 Dec 2023 03:25:09 GMT
+ * Generated on Tue, 19 Dec 2023 06:48:46 GMT
  */
 const calciteSize48 = "48px";
 
-const comboboxCss = ":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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid 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          )}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-s)}:host([scale=m]) .input--icon,:host([scale=l]) .input--icon{padding-inline:0.25rem}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":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{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid 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          )}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-s)}:host([scale=m]) .input--icon,:host([scale=l]) .input--icon{padding-inline:0.25rem}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{padding-block-start:0.5rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -406,6 +408,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         this.placeholderIcon = undefined;
         this.placeholderIconFlipRtl = false;
         this.maxItems = 0;
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.name = undefined;
         this.allowCustomValues = undefined;
         this.overlayPositioning = "absolute";
@@ -1075,7 +1079,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
+        ], h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -1105,6 +1109,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "placeholderIcon": [513, "placeholder-icon"],
         "placeholderIconFlipRtl": [516, "placeholder-icon-flip-rtl"],
         "maxItems": [514, "max-items"],
+        "validationMessage": [1, "validation-message"],
+        "validationIcon": [8, "validation-icon"],
         "name": [513],
         "allowCustomValues": [516, "allow-custom-values"],
         "overlayPositioning": [513, "overlay-positioning"],
@@ -1150,7 +1156,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-combobox", "calcite-chip", "calcite-icon"];
+    const components = ["calcite-combobox", "calcite-chip", "calcite-icon", "calcite-input-message"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
@@ -1159,10 +1165,15 @@ function defineCustomElement() {
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }