@esri/calcite-components 2.2.0-next.10 → 2.2.0-next.12

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

@@ -1 +1 @@
-{"file":"calcite-value-list.js","mappings":";;;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,MAAM,EAAE,QAAQ;CACjB,CAAC;AACF,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,KAAV,UAAU;;SCAN,mBAAmB,CACjC,IAAqC,EACrC,MAAkB,EAClB,SAAqD;IAErD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAEtC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC3B,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACnD,MAAM,QAAQ,GACZ,MAAM,KAAK,MAAM;UACb,QAAQ,CAAC,cAAc;UACvB,MAAM,KAAK,QAAQ;cACjB,QAAQ,CAAC,gBAAgB;cACzB,MAAM,KAAK,QAAQ;kBACjB,QAAQ,CAAC,gBAAgB;kBACzB,QAAQ,CAAC,gBAAgB,CAAC;IAEpC,OAAO,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AACpE,CAAC;SAEe,uBAAuB,CAAC,KAAiC;IAIvE,MAAM,MAAM,GAAG,KAAK;SACjB,YAAY,EAAE;SACd,IAAI,CAAC,CAAC,IAAiB,KAAK,IAAI,CAAC,OAAO,EAAE,QAAQ,KAAK,SAAS,CAA6B,CAAC;IAEjG,MAAM,IAAI,GAAG,KAAK;SACf,YAAY,EAAE;SACd,IAAI,CACH,CAAC,IAAiB,KAAK,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,KAAK,yBAAyB,CAC9C,CAAC;IAEvC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAC;SAEe,mBAAmB,CAAC,IAAY,EAAE,KAAa,EAAE,QAAgB,EAAE,KAAa;IAC9F,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxE,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACnE,OAAO,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC3D;;AC9CA,MAAM,YAAY,GAAG,q/CAAq/C;;MCmF7/C,SAAS;;;;;;;;QAsIpB,qBAAgB,GAAgB,IAAI,CAAC;QAErC,qBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAYnF,mBAAc,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;QAElC,iBAAY,GAAG,yBAAyB,CAAC;QAwIzC,gBAAW,GAAG,CAAC,EAA4B;YACzC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;QAEF,qBAAgB,GAAG,CAAC,aAAgD;YAClE,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;SACpC,CAAC;QAYF,yBAAoB,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvD,yBAAoB,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvD,mBAAc,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE3C,iBAAY,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEvC,sBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEjD,gBAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,KAAK,CAAC,gBAAgB,EAAE;gBAC1B,OAAO;aACR;YAED,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;YACxD,IAAI,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACxD,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;aACxE;YAED,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBACpC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;gBACjC,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBACrB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;aACxE;YAED,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;gBAC/E,OAAO;aACR;YAED,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC;YACrF,IAAI,SAAS,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAClC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;aACtB;iBAAM;gBACL,MAAM,eAAe,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAC/C,MAAM,sBAAsB,GAC1B,eAAe,KAAK,IAAI,CAAC,kBAAkB;sBACvC,eAAe,CAAC,kBAAkB;sBAClC,eAAe,CAAC;gBACtB,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;aAC/C;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC;YAEvE,qBAAqB,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAE5B,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;SAC/E,CAAC;QAsDF,qBAAgB,GAAG,CAAC,EAAmB;YACrC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;SAC3B,CAAC;QAEF,kBAAa,GAAG,CAAC,KAAiB;YAChC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,uBAAuB,CAAC,KAAK,CAAC,CAAC;YACxD,IAAI,CAAC,IAAI,EAAE,eAAe,IAAI,IAAI,IAAI,MAAM,EAAE;gBAC5C,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;aAC7E;SACF,CAAC;wBAvZkC,KAAK;;;2BAeF,KAAK;6BAOgC,EAAE;4BAQ5B,EAAE;6BAKX,KAAK;;;;uBAuBX,KAAK;wBAQJ,KAAK;qCAKQ,KAAK;;;6BA6BnB,EAAE;;+BAIV,EAAE;8BAOuB,IAAI,GAAG,EAAE;;IA/B7D,gBAAgB;;KAEf;IAyBD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;;;;;;IA8BD,iBAAiB;QACf,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO;SACR;QAED,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClB,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO;SACR;QAED,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,2BAA2B,CAAC,IAAI,CAAC,CAAC;QAClC,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;IA0BD,0BAA0B,CAAC,KAAiB;QAC1C,0BAA0B,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC9C;IAGD,4BAA4B,CAAC,KAAwB;QACnD,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC9B;IAGD,4BAA4B,CAAC,KAAkB;QAC7C,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChD;IAGD,yCAAyC,CAAC,KAAkB;QAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAGD,yCAAyC,CAAC,KAAkB;QAC1D,yCAAyC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;;;;;;IAQD,iBAAiB;QACf,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,eAAe;QACb,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;IAED,SAAS,MAAW;IAEpB,WAAW,MAAW;IAEtB,UAAU;QACR,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;QAC1F,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QACpD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC1C;IAED,QAAQ;QACN,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;KACrF;IAED,UAAU;QACR,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,WAAW;QACT,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;SACzC;KACF;IAUD,YAAY;QACV,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAE7B,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QAED,wBAAwB,CAAC,IAAI,CAAC,CAAC;KAChC;IA+DD,UAAU;QACR,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;SACjC;KACF;;;;;;;IAUD,MAAM,gBAAgB;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;;;;;;IAQD,MAAM,QAAQ,CAAC,OAAqB;QAClC,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;KACrC;;;;;;IAQD,WAAW;QACT,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;SACxB;QACD,OAAO,IAAI,CAAC;KACb;IAED,sBAAsB,CAAC,IAAY;QACjC,IAAI,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC;KACzC;IAED,qBAAqB,CAAC,aAA8B,EAAE,IAAY;QAChE,aAAa,CAAC,SAAS,GAAG,IAAI,CAAC;KAChC;IAcD,uBAAuB,CAAC,KAAqC;QAC3D,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,IAAI,EAAE,eAAe,IAAI,IAAI,EAAE;YAClC,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;SAC7E;QACD,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,IACH,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,KAAK,EAAE,IAAI,GACX,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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  >\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  >\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 component's 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.2.0-next.10
+ * v2.2.0-next.12
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n */\n\n:host([scale=\"s\"]) {\n  --calcite-checkbox-size: theme(\"spacing.3\");\n}\n:host([scale=\"m\"]) {\n  --calcite-checkbox-size: theme(\"fontSize.n1\");\n}\n:host([scale=\"l\"]) {\n  --calcite-checkbox-size: theme(\"spacing.4\");\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size);\n    block-size: var(--calcite-checkbox-size);\n  }\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n    color: theme(\"backgroundColor.background\");\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after {\n    content: \"\";\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n@include disabled();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The ID of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Emits when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Emits when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"toggle\"\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\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={(toggleEl) => (this.toggleEl = toggleEl)}\n          >\n            <svg aria-hidden=\"true\" class=\"check-svg\" viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"checkbox.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n */\n\n:host([scale=\"s\"]) {\n  --calcite-checkbox-size: theme(\"spacing.3\");\n}\n:host([scale=\"m\"]) {\n  --calcite-checkbox-size: theme(\"fontSize.n1\");\n}\n:host([scale=\"l\"]) {\n  --calcite-checkbox-size: theme(\"spacing.4\");\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size);\n    block-size: var(--calcite-checkbox-size);\n  }\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n    color: theme(\"backgroundColor.background\");\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after {\n    content: \"\";\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n@include disabled();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale, Status } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The ID of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"toggle\"\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\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={(toggleEl) => (this.toggleEl = toggleEl)}\n          >\n            <svg aria-hidden=\"true\" class=\"check-svg\" viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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.2.0-next.10
+ * v2.2.0-next.12
  */
 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,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.2.0-next.10
+ * v2.2.0-next.12
  */
 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';

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

@@ -1 +1 @@
-{"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}
+{"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 `true`, an empty color (`null`) will be allowed as a `value`.\n   *\n   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `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.2.0-next.10
+ * v2.2.0-next.12
  */
 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.2.0-next.10
+ * v2.2.0-next.12
  */
 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-item.js.map

@@ -1 +1 @@
-{"file":"combobox-item.js","mappings":"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","names":[],"sources":["src/components/combobox-item/resources.ts","src/components/combobox-item/combobox-item.scss?tag=calcite-combobox-item&encapsulation=shadow","src/components/combobox-item/combobox-item.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconActive: \"icon--active\",\n  iconIndent: \"icon--indent\",\n  custom: \"icon--custom\",\n  dot: \"icon--dot\",\n  single: \"label--single\",\n  label: \"label\",\n  active: \"label--active\",\n  selected: \"label--selected\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n","@include base-component();\n\n.scale--s {\n  @apply text-n2h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.2\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--m {\n  @apply text-n1h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.3\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.3\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--l {\n  @apply text-0h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing[2.5]\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.4\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.6\");\n}\n\n.container {\n  --calcite-combobox-item-indent-value: calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );\n}\n\n:host(:focus) {\n  @apply shadow-none;\n}\n\n@include disabled();\n\n:host,\nul {\n  @apply m-0 flex flex-col p-0;\n}\n\n:host(:focus),\nul:focus {\n  @apply outline-none;\n}\n\n.label {\n  @apply text-color-3\n    focus-base\n    relative\n    box-border\n    flex\n    w-full\n    min-w-full\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n  @include word-break();\n  padding-block: var(--calcite-combobox-item-spacing-unit-s);\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n:host([disabled]) .label {\n  @apply cursor-default;\n}\n\n// selected state\n.label--selected {\n  @apply text-color-1 font-medium;\n}\n\n.label--active {\n  @apply focus-inset;\n}\n\n.label:hover,\n.label:active {\n  @apply text-color-1\n    bg-foreground-2\n    no-underline\n    shadow-none;\n}\n\n.title {\n  padding-block: 0;\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n.icon {\n  @apply inline-flex\n    opacity-0\n    duration-150\n    ease-in-out;\n  color: theme(\"borderColor.color.1\");\n}\n\n.icon--indent {\n  padding-inline-start: var(--calcite-combobox-item-indent-value);\n}\n\n.icon--custom {\n  margin-block-start: -1px;\n  padding-inline-start: var(--calcite-combobox-item-spacing-unit-l);\n  @apply text-color-3;\n}\n\n.icon--active {\n  @apply text-color-1;\n}\n\n.icon--dot {\n  @apply flex justify-center;\n  min-inline-size: var(--calcite-combobox-item-selector-icon-size);\n}\n\n.icon--dot:before {\n  text-align: start;\n  content: \"\\2022\";\n}\n\n.label--active .icon {\n  @apply opacity-100;\n}\n\n.label--selected .icon {\n  @apply opacity-100;\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host(:hover[disabled]) .icon {\n  @apply opacity-100;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { ComboboxChildElement } from \"../combobox/interfaces\";\nimport { getAncestors, getDepth, isSingleLike } from \"../combobox/utils\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding nested `calcite-combobox-item`s.\n */\n@Component({\n  tag: \"calcite-combobox-item\",\n  styleUrl: \"combobox-item.scss\",\n  shadow: true,\n})\nexport class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */\n  @Prop({ mutable: true }) ancestors: ComboboxChildElement[];\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true }) guid = guid();\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteComboboxItemChange.emit();\n  }\n\n  /** The component's text. */\n  @Prop({ reflect: true }) textLabel!: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /**\n   * When `true`, omits the component from the `calcite-combobox` filtered search results.\n   */\n  @Prop({ reflect: true }) filterDisabled: boolean;\n\n  /**\n   * Specifies the selection mode:\n   * - \"multiple\" allows any number of selected items (default),\n   * - \"single\" allows only one selection,\n   * - \"single-persist\" allow and require one open item,\n   * - \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  > = \"multiple\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteComboboxItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ancestors = getAncestors(this.el);\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Emits whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  toggleSelected(): Promise<void> {\n    const isSinglePersistSelect = this.selectionMode === \"single-persist\";\n\n    if (this.disabled || (isSinglePersistSelect && this.selected)) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n\n  private itemClickHandler = (): void => {\n    this.toggleSelected();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(iconPath: string): VNode {\n    return this.icon ? (\n      <calcite-icon\n        class={{\n          [CSS.custom]: !!this.icon,\n          [CSS.iconActive]: this.icon && this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon || iconPath}\n        key=\"icon\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n  }\n\n  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {\n    return showDot ? (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.dot]: true,\n          [CSS.iconIndent]: true,\n        }}\n      />\n    ) : (\n      <calcite-icon\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconActive]: this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={iconPath}\n        key=\"indicator\"\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  renderChildren(): VNode {\n    if (getSlotted(this.el)) {\n      return (\n        <ul key=\"default-slot-container\">\n          <slot />\n        </ul>\n      );\n    }\n\n    return null;\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const isSingleSelect = isSingleLike(this.selectionMode);\n    const showDot = isSingleSelect && !disabled;\n    const defaultIcon = isSingleSelect ? \"dot\" : \"check\";\n    const iconPath = disabled ? \"\" : defaultIcon;\n\n    const classes = {\n      [CSS.label]: true,\n      [CSS.selected]: this.selected,\n      [CSS.active]: this.active,\n      [CSS.single]: isSingleSelect,\n    };\n    const depth = getDepth(this.el);\n\n    return (\n      <Host aria-hidden=\"true\">\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={`container scale--${this.scale}`}\n            style={{ \"--calcite-combobox-item-spacing-indent-multiplier\": `${depth}` }}\n          >\n            <li class={classes} id={this.guid} onClick={this.itemClickHandler}>\n              {this.renderSelectIndicator(showDot, iconPath)}\n              {this.renderIcon(iconPath)}\n              <span class=\"title\">{this.textLabel}</span>\n            </li>\n            {this.renderChildren()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"combobox-item.js","mappings":";;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,cAAc;IAC1B,UAAU,EAAE,cAAc;IAC1B,MAAM,EAAE,cAAc;IACtB,GAAG,EAAE,WAAW;IAChB,MAAM,EAAE,eAAe;IACvB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,eAAe;IACvB,QAAQ,EAAE,iBAAiB;IAC3B,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,gBAAgB;CAChC;;ACZD,MAAM,eAAe,GAAG,+iHAA+iH;;MCuC1jH,YAAY;;;;;;QAgIf,qBAAgB,GAAG;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;wBA1HkC,KAAK;wBAKU,KAAK;sBAGtB,KAAK;;oBAMP,IAAI,EAAE;;2BAMC,KAAK;;;;6BAkCxC,UAAU;qBAOS,GAAG;;IAtC1B,oBAAoB;QAClB,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;KACvC;;;;;;IAoDD,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,+BAA+B,CAAC,IAAI,CAAC,CAAC;QACtC,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,kCAAkC,CAAC,IAAI,CAAC,CAAC;QACzC,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAoBD,cAAc;QACZ,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,KAAK,gBAAgB,CAAC;QAEtE,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC7D,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC;;;;;;IAYD,UAAU,CAAC,QAAgB;QACzB,OAAO,IAAI,CAAC,IAAI,IACd,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBACzB,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;gBAC5C,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC3B,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,IACA,IAAI,CAAC;KACV;IAED,qBAAqB,CAAC,OAAgB,EAAE,QAAgB;QACtD,OAAO,OAAO,IACZ,YACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;gBAChB,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI;gBACf,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,GACD,KAEF,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;gBAChB,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ;gBAC/B,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,QAAQ,EACd,GAAG,EAAC,WAAW,EACf,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;KACH;IAED,cAAc;QACZ,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACvB,QACE,UAAI,GAAG,EAAC,wBAAwB,IAC9B,eAAQ,CACL,EACL;SACH;QAED,OAAO,IAAI,CAAC;KACb;IAED,MAAM;QACJ,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,MAAM,OAAO,GAAG,cAAc,IAAI,CAAC,QAAQ,CAAC;QAC5C,MAAM,WAAW,GAAG,cAAc,GAAG,KAAK,GAAG,OAAO,CAAC;QACrD,MAAM,QAAQ,GAAG,QAAQ,GAAG,EAAE,GAAG,WAAW,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI;YACjB,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;YAC7B,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM;YACzB,CAAC,GAAG,CAAC,MAAM,GAAG,cAAc;SAC7B,CAAC;QACF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEhC,QACE,EAAC,IAAI,mBAAa,MAAM,IACtB,EAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IACtC,WACE,KAAK,EAAE,oBAAoB,IAAI,CAAC,KAAK,EAAE,EACvC,KAAK,EAAE,EAAE,mDAAmD,EAAE,GAAG,KAAK,EAAE,EAAE,IAE1E,UAAI,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC9D,IAAI,CAAC,qBAAqB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAC7C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAC1B,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAQ,CACxC,EACJ,IAAI,CAAC,cAAc,EAAE,CAClB,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/combobox-item/resources.ts","src/components/combobox-item/combobox-item.scss?tag=calcite-combobox-item&encapsulation=shadow","src/components/combobox-item/combobox-item.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconActive: \"icon--active\",\n  iconIndent: \"icon--indent\",\n  custom: \"icon--custom\",\n  dot: \"icon--dot\",\n  single: \"label--single\",\n  label: \"label\",\n  active: \"label--active\",\n  selected: \"label--selected\",\n  title: \"title\",\n  textContainer: \"text-container\",\n};\n","@include base-component();\n\n.scale--s {\n  @apply text-n2h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.1\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.2\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--m {\n  @apply text-n1h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.3\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing.2\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.3\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.4\");\n}\n\n.scale--l {\n  @apply text-0h;\n  --calcite-combobox-item-spacing-unit-l: theme(\"spacing.4\");\n  --calcite-combobox-item-spacing-unit-s: theme(\"spacing[2.5]\");\n  --calcite-combobox-item-spacing-indent: theme(\"spacing.4\");\n  --calcite-combobox-item-selector-icon-size: theme(\"spacing.6\");\n}\n\n.container {\n  --calcite-combobox-item-indent-value: calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );\n}\n\n:host(:focus) {\n  @apply shadow-none;\n}\n\n@include disabled();\n\n:host,\nul {\n  @apply m-0 flex flex-col p-0;\n}\n\n:host(:focus),\nul:focus {\n  @apply outline-none;\n}\n\n.label {\n  @apply text-color-3\n    focus-base\n    relative\n    box-border\n    flex\n    w-full\n    min-w-full\n    cursor-pointer\n    items-center\n    no-underline\n    duration-150\n    ease-in-out;\n  @include word-break();\n  padding-block: var(--calcite-combobox-item-spacing-unit-s);\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n:host([disabled]) .label {\n  @apply cursor-default;\n}\n\n// selected state\n.label--selected {\n  @apply text-color-1 font-medium;\n}\n\n.label--active {\n  @apply focus-inset;\n}\n\n.label:hover,\n.label:active {\n  @apply text-color-1\n    bg-foreground-2\n    no-underline\n    shadow-none;\n}\n\n.title {\n  padding-block: 0;\n  padding-inline: var(--calcite-combobox-item-spacing-unit-l);\n}\n\n.icon {\n  @apply inline-flex\n    opacity-0\n    duration-150\n    ease-in-out;\n  color: theme(\"borderColor.color.1\");\n}\n\n.icon--indent {\n  padding-inline-start: var(--calcite-combobox-item-indent-value);\n}\n\n.icon--custom {\n  margin-block-start: -1px;\n  padding-inline-start: var(--calcite-combobox-item-spacing-unit-l);\n  @apply text-color-3;\n}\n\n.icon--active {\n  @apply text-color-1;\n}\n\n.icon--dot {\n  @apply flex justify-center;\n  min-inline-size: var(--calcite-combobox-item-selector-icon-size);\n}\n\n.icon--dot:before {\n  text-align: start;\n  content: \"\\2022\";\n}\n\n.label--active .icon {\n  @apply opacity-100;\n}\n\n.label--selected .icon {\n  @apply opacity-100;\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host(:hover[disabled]) .icon {\n  @apply opacity-100;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { getSlotted } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { ComboboxChildElement } from \"../combobox/interfaces\";\nimport { getAncestors, getDepth, isSingleLike } from \"../combobox/utils\";\nimport { Scale, SelectionMode } from \"../interfaces\";\nimport { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\n\n/**\n * @slot - A slot for adding nested `calcite-combobox-item`s.\n */\n@Component({\n  tag: \"calcite-combobox-item\",\n  styleUrl: \"combobox-item.scss\",\n  shadow: true,\n})\nexport class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */\n  @Prop({ mutable: true }) ancestors: ComboboxChildElement[];\n\n  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true }) guid = guid();\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  @Watch(\"selected\")\n  selectedWatchHandler(): void {\n    this.calciteComboboxItemChange.emit();\n  }\n\n  /** The component's text. */\n  @Prop({ reflect: true }) textLabel!: string;\n\n  /** The component's value. */\n  @Prop() value!: any;\n\n  /**\n   * When `true`, omits the component from the `calcite-combobox` filtered search results.\n   */\n  @Prop({ reflect: true }) filterDisabled: boolean;\n\n  /**\n   * Specifies the selection mode of the component, where:\n   *\n   * `\"multiple\"` allows any number of selections,\n   *\n   * `\"single\"` allows only one selection,\n   *\n   * `\"single-persist\"` allows one selection and prevents de-selection, and\n   *\n   * `\"ancestors\"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  > = \"multiple\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteComboboxItemElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ancestors = getAncestors(this.el);\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n    disconnectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires whenever the component is selected or unselected.\n   *\n   */\n  @Event({ cancelable: false }) calciteComboboxItemChange: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  toggleSelected(): Promise<void> {\n    const isSinglePersistSelect = this.selectionMode === \"single-persist\";\n\n    if (this.disabled || (isSinglePersistSelect && this.selected)) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n\n  private itemClickHandler = (): void => {\n    this.toggleSelected();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderIcon(iconPath: string): VNode {\n    return this.icon ? (\n      <calcite-icon\n        class={{\n          [CSS.custom]: !!this.icon,\n          [CSS.iconActive]: this.icon && this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={this.icon || iconPath}\n        key=\"icon\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n  }\n\n  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {\n    return showDot ? (\n      <span\n        class={{\n          [CSS.icon]: true,\n          [CSS.dot]: true,\n          [CSS.iconIndent]: true,\n        }}\n      />\n    ) : (\n      <calcite-icon\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconActive]: this.selected,\n          [CSS.iconIndent]: true,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={iconPath}\n        key=\"indicator\"\n        scale={getIconScale(this.scale)}\n      />\n    );\n  }\n\n  renderChildren(): VNode {\n    if (getSlotted(this.el)) {\n      return (\n        <ul key=\"default-slot-container\">\n          <slot />\n        </ul>\n      );\n    }\n\n    return null;\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n    const isSingleSelect = isSingleLike(this.selectionMode);\n    const showDot = isSingleSelect && !disabled;\n    const defaultIcon = isSingleSelect ? \"dot\" : \"check\";\n    const iconPath = disabled ? \"\" : defaultIcon;\n\n    const classes = {\n      [CSS.label]: true,\n      [CSS.selected]: this.selected,\n      [CSS.active]: this.active,\n      [CSS.single]: isSingleSelect,\n    };\n    const depth = getDepth(this.el);\n\n    return (\n      <Host aria-hidden=\"true\">\n        <InteractiveContainer disabled={disabled}>\n          <div\n            class={`container scale--${this.scale}`}\n            style={{ \"--calcite-combobox-item-spacing-indent-multiplier\": `${depth}` }}\n          >\n            <li class={classes} id={this.guid} onClick={this.itemClickHandler}>\n              {this.renderSelectIndicator(showDot, iconPath)}\n              {this.renderIcon(iconPath)}\n              <span class=\"title\">{this.textLabel}</span>\n            </li>\n            {this.renderChildren()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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.2.0-next.10
+ * v2.2.0-next.12
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter.js';
@@ -36,7 +36,7 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jan 2024 20:04:12 GMT
+ * Generated on Tue, 09 Jan 2024 00:59:10 GMT
  */
 const calciteSize48 = "48px";