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

package/dist/components/en-au.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-ca.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-gb.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es-mx.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/et.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fi.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/filter.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.11
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/filter2.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.11
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter.js';

package/dist/components/filter2.js.map

@@ -1 +1 @@
-{"file":"filter2.js","mappings":"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","names":[],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n};\n\nexport const DEBOUNCE_TIMEOUT = 250;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition:\n    padding var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition:\n    inset-inline-start var(--calcite-animation-timing),\n    inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\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 { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\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 {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, DEBOUNCE_TIMEOUT, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\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   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\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: FilterMessages;\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<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This event fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (this.items.length) {\n      this.updateFiltered(filter(this.items, this.value));\n    }\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.items.length && this.updateFiltered(filter(this.items, value), emit, onFilter),\n    DEBOUNCE_TIMEOUT,\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\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={(el): void => {\n                this.textInput = el;\n              }}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"filter2.js","mappings":"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","names":[],"sources":["src/components/filter/resources.ts","src/components/filter/filter.scss?tag=calcite-filter&encapsulation=shadow","src/components/filter/filter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  searchIcon: \"search-icon\",\n};\n\nexport const ICONS = {\n  search: \"search\",\n  close: \"x\",\n};\n\nexport const DEBOUNCE_TIMEOUT = 250;\n",":host {\n  @extend %component-host;\n  @apply flex w-full;\n}\n\n@include disabled();\n\n.container {\n  @apply flex w-full p-2;\n}\n\nlabel {\n  @apply relative\n    mx-1\n    my-0\n    flex w-full\n    items-center\n    overflow-hidden;\n}\n\ninput[type=\"text\"] {\n  @apply font-inherit\n    text-color-1\n    text-n2h\n    mb-1\n    w-full\n    border-none\n    bg-transparent\n    py-1;\n  padding-inline-end: theme(\"spacing.1\");\n  padding-inline-start: theme(\"spacing.6\");\n  transition:\n    padding var(--calcite-animation-timing),\n    box-shadow var(--calcite-animation-timing);\n  &::-ms-clear {\n    @apply hidden;\n  }\n}\n\ncalcite-input {\n  @apply w-full;\n}\n\n.search-icon {\n  @apply text-color-2\n    absolute\n    flex;\n  inset-inline-start: 0;\n  transition:\n    inset-inline-start var(--calcite-animation-timing),\n    inset-inline-end var(--calcite-animation-timing),\n    opacity var(--calcite-animation-timing);\n}\n\ninput[type=\"text\"]:focus {\n  @apply border-color-brand outline-none;\n  padding-inline: theme(\"padding.1\");\n  & ~ .search-icon {\n    inset-inline-start: calc(theme(\"spacing.4\") * -1);\n    @apply opacity-0;\n  }\n}\n\n.clear-button {\n  @apply text-color-2\n    flex\n    cursor-pointer\n    items-center\n    border-0\n    bg-transparent;\n  &:hover,\n  &:focus {\n    @apply text-color-1;\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 { debounce } from \"lodash-es\";\nimport { filter } from \"../../utils/filter\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\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 {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { FilterMessages } from \"./assets/filter/t9n\";\nimport { CSS, DEBOUNCE_TIMEOUT, ICONS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-filter\",\n  styleUrl: \"filter.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class Filter\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Defines the items to filter. The component uses the values as the starting point, and returns items\n   *\n   * that contain the string entered in the input, using a partial match and recursive search.\n   *\n   * This property is needed to conduct filtering.\n   *\n   */\n  @Prop() items: object[] = [];\n\n  @Watch(\"items\")\n  watchItemsHandler(): void {\n    this.filterDebounced(this.value);\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   * The component's resulting items after filtering.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) filteredItems: object[] = [];\n\n  /**\n   * Specifies placeholder text for the input element.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true }) value = \"\";\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: FilterMessages;\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<FilterMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.filterDebounced(value);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State/Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFilterElement;\n\n  textInput: HTMLCalciteInputElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: FilterMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the filter text changes.\n   */\n  @Event({ cancelable: false }) calciteFilterChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (this.items.length) {\n      this.updateFiltered(filter(this.items, this.value));\n    }\n    await setUpMessages(this);\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.filterDebounced.cancel();\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Performs a filter on the component.\n   *\n   * This method can be useful because filtering is delayed and asynchronous.\n   *\n   * @param {string} value - The filter text value.\n   * @returns {Promise<void>}\n   */\n  @Method()\n  async filter(value: string = this.value): Promise<void> {\n    return new Promise((resolve) => {\n      this.value = value;\n      this.filterDebounced(value, false, resolve);\n    });\n  }\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  private filterDebounced = debounce(\n    (value: string, emit = false, onFilter?: () => void): void =>\n      this.items.length && this.updateFiltered(filter(this.items, value), emit, onFilter),\n    DEBOUNCE_TIMEOUT,\n  );\n\n  inputHandler = (event: CustomEvent): void => {\n    const target = event.target as HTMLCalciteInputElement;\n    this.value = target.value;\n    this.filterDebounced(target.value, true);\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") {\n      this.clear();\n      event.preventDefault();\n    }\n\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n    }\n  };\n\n  clear = (): void => {\n    this.value = \"\";\n    this.filterDebounced(\"\", true);\n    this.setFocus();\n  };\n\n  updateFiltered(filtered: object[], emit = false, callback?: () => void): void {\n    this.filteredItems = filtered;\n    if (emit) {\n      this.calciteFilterChange.emit();\n    }\n    callback?.();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { disabled, scale } = this;\n\n    return (\n      <InteractiveContainer disabled={disabled}>\n        <div class={CSS.container}>\n          <label>\n            <calcite-input\n              clearable={true}\n              disabled={disabled}\n              icon={ICONS.search}\n              label={this.messages.label}\n              messageOverrides={{ clear: this.messages.clear }}\n              onCalciteInputInput={this.inputHandler}\n              onKeyDown={this.keyDownHandler}\n              placeholder={this.placeholder}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\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={(el): void => {\n                this.textInput = el;\n              }}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/components/floating-ui.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.11
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';

package/dist/components/focusTrapComponent.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.11
  */
 import { h as tabbable, j as focusable, k as isTabbable, l as getTabIndex, m as isFocusable, e as focusElement, n as tabbableOptions } from './dom.js';
 

package/dist/components/form.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.11
  */
 import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client/index.js';

package/dist/components/fr-ch.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fr.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/graph.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.11
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/graph.js.map

@@ -1 +1 @@
-{"file":"graph.js","mappings":"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","names":[],"sources":["src/components/graph/util.ts","src/components/graph/graph.scss?tag=calcite-graph&encapsulation=shadow","src/components/graph/graph.tsx"],"sourcesContent":["import { DataSeries, Extent, Graph, Point, TranslateOptions, Translator } from \"../graph/interfaces\";\n\n/**\n * Calculate slope of the tangents\n * uses Steffen interpolation as it's monotonic\n * http://jrwalsh1.github.io/posts/interpolations/\n *\n * @param p0\n * @param p1\n * @param p2\n */\nfunction slope(p0: Point, p1: Point, p2: Point): number {\n  const dx = p1[0] - p0[0];\n  const dx1 = p2[0] - p1[0];\n  const dy = p1[1] - p0[1];\n  const dy1 = p2[1] - p1[1];\n  const m = dy / (dx || (dx1 < 0 && 0));\n  const m1 = dy1 / (dx1 || (dx < 0 && 0));\n  const p = (m * dx1 + m1 * dx) / (dx + dx1);\n  return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;\n}\n\n/**\n * Calculate slope for just one tangent (single-sided)\n *\n * @param p0\n * @param p1\n * @param m\n */\nfunction slopeSingle(p0: Point, p1: Point, m: number): number {\n  const dx = p1[0] - p0[0];\n  const dy = p1[1] - p0[1];\n  return dx ? ((3 * dy) / dx - m) / 2 : m;\n}\n\n/**\n * Given two points and their tangent slopes,\n * calculate the bezier handle coordinates and return draw command.\n *\n * Translates Hermite Spline to Bézier curve:\n * https://stackoverflow.com/questions/42574940/\n *\n * @param p0\n * @param p1\n * @param m0\n * @param m1\n * @param t\n */\nfunction bezier(p0: Point, p1: Point, m0: number, m1: number, t: Translator): string {\n  const [x0, y0] = p0;\n  const [x1, y1] = p1;\n  const dx = (x1 - x0) / 3;\n  const h1 = t([x0 + dx, y0 + dx * m0]).join(\",\");\n  const h2 = t([x1 - dx, y1 - dx * m1]).join(\",\");\n  const p = t([x1, y1]).join(\",\");\n  return `C ${h1} ${h2} ${p}`;\n}\n\n/**\n * Generate a function which will translate a point\n * from the data coordinate space to svg viewbox oriented pixels\n *\n * @param root0\n * @param root0.width\n * @param root0.height\n * @param root0.min\n * @param root0.max\n */\nexport function translate({ width, height, min, max }: TranslateOptions): Translator {\n  const rangeX = max[0] - min[0];\n  const rangeY = max[1] - min[1];\n  return (point) => {\n    const x = ((point[0] - min[0]) / rangeX) * width;\n    const y = height - (point[1] / rangeY) * height;\n    return [x, y];\n  };\n}\n\n/**\n * Get the min and max values from the dataset\n *\n * @param data\n */\nexport function range(data: DataSeries): Extent {\n  const [startX, startY] = data[0];\n  const min: Point = [startX, startY];\n  const max: Point = [startX, startY];\n  return data.reduce(\n    ({ min, max }, [x, y]) => ({\n      min: [Math.min(min[0], x), Math.min(min[1], y)],\n      max: [Math.max(max[0], x), Math.max(max[1], y)],\n    }),\n    { min, max },\n  );\n}\n\n/**\n * Generate drawing commands for an area graph\n * returns a string can can be passed directly to a path element's `d` attribute\n *\n * @param root0\n * @param root0.data\n * @param root0.min\n * @param root0.max\n * @param root0.t\n */\nexport function area({ data, min, max, t }: Graph): string {\n  if (data.length === 0) {\n    return \"\";\n  }\n\n  // important points for beginning and ending the path\n  const [startX, startY] = t(data[0]);\n  const [minX, minY] = t(min);\n  const [maxX] = t(max);\n\n  // keep track of previous slope/points\n  let m: number;\n  let p0: Point;\n  let p1: Point;\n\n  // iterate over data points, calculating command for each\n  const commands = data.reduce((acc, point, i) => {\n    p0 = data[i - 2];\n    p1 = data[i - 1];\n    if (i > 1) {\n      const m1 = slope(p0, p1, point);\n      const m0 = m === undefined ? slopeSingle(p0, p1, m1) : m;\n      const command = bezier(p0, p1, m0, m1, t);\n      m = m1;\n      return `${acc} ${command}`;\n    }\n    return acc;\n  }, `M ${minX},${minY} L ${minX},${startY} L ${startX},${startY}`);\n\n  // close the path\n  const last = data[data.length - 1];\n  const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);\n  return `${commands} ${end} L ${maxX},${minY} Z`;\n}\n",":host {\n  @apply block;\n  block-size: 100%;\n}\n\n.svg {\n  fill: currentColor;\n  stroke: transparent;\n  @apply m-0 block h-full w-full p-0;\n\n  .graph-path--highlight {\n    fill: var(--calcite-color-brand);\n    @apply opacity-50;\n  }\n}\n\n@include base-component();\n","import { Component, Element, forceUpdate, h, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { createObserver } from \"../../utils/observers\";\nimport { ColorStop, DataSeries, Point } from \"./interfaces\";\nimport { area, range, translate } from \"./util\";\n\n@Component({\n  tag: \"calcite-graph\",\n  styleUrl: \"graph.scss\",\n  shadow: true,\n})\nexport class Graph {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Array of tuples describing a single data point ([x, y])\n   * These data points should be sorted by x-axis value\n   */\n  @Prop() data: DataSeries = [];\n\n  /**\n   * Array of values describing a single color stop ([offset, color, opacity])\n   * These color stops should be sorted by offset value\n   */\n  @Prop() colorStops: ColorStop[];\n\n  /** Start of highlight color if highlighting range */\n  @Prop() highlightMin: number;\n\n  /** End of highlight color if highlighting range */\n  @Prop() highlightMax: number;\n\n  /** Lowest point of the range */\n  @Prop({ reflect: true }) min!: number;\n\n  /** Highest point of the range */\n  @Prop({ reflect: true }) max!: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.resizeObserver?.observe(this.el);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;\n    const id = this.graphId;\n    const { clientHeight: height, clientWidth: width } = el;\n\n    // if we have no data, return empty svg\n    if (!data || data.length === 0) {\n      return (\n        <svg\n          aria-hidden=\"true\"\n          class=\"svg\"\n          height={height}\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 ${width} ${height}`}\n          width={width}\n        />\n      );\n    }\n\n    const { min: rangeMin, max: rangeMax } = range(data);\n\n    let currentMin: Point = rangeMin;\n    let currentMax: Point = rangeMax;\n\n    if (min < rangeMin[0] || min > rangeMin[0]) {\n      currentMin = [min, 0];\n    }\n\n    if (max > rangeMax[0] || max < rangeMax[0]) {\n      currentMax = [max, rangeMax[1]];\n    }\n\n    const t = translate({ min: currentMin, max: currentMax, width, height });\n    const [hMinX] = t([highlightMin, currentMax[1]]);\n    const [hMaxX] = t([highlightMax, currentMax[1]]);\n    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });\n    const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;\n    return (\n      <svg\n        aria-hidden=\"true\"\n        class=\"svg\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${width} ${height}`}\n        width={width}\n      >\n        {colorStops ? (\n          <defs>\n            <linearGradient id={`linear-gradient-${id}`} x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n              {colorStops.map(({ offset, color, opacity }) => (\n                <stop offset={`${offset * 100}%`} stop-color={color} stop-opacity={opacity} />\n              ))}\n            </linearGradient>\n          </defs>\n        ) : null}\n\n        {highlightMin !== undefined ? (\n          [\n            <mask height=\"100%\" id={`${id}1`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n            M 0,0\n            L ${hMinX - 1},0\n            L ${hMinX - 1},${height}\n            L 0,${height}\n            Z\n          `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <mask height=\"100%\" id={`${id}2`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n            M ${hMinX + 1},0\n            L ${hMaxX - 1},0\n            L ${hMaxX - 1},${height}\n            L ${hMinX + 1}, ${height}\n            Z\n          `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <mask height=\"100%\" id={`${id}3`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n                M ${hMaxX + 1},0\n                L ${width},0\n                L ${width},${height}\n                L ${hMaxX + 1}, ${height}\n                Z\n              `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <path class=\"graph-path\" d={areaPath} fill={fill} mask={`url(#${id}1)`} />,\n            <path class=\"graph-path--highlight\" d={areaPath} fill={fill} mask={`url(#${id}2)`} />,\n            <path class=\"graph-path\" d={areaPath} fill={fill} mask={`url(#${id}3)`} />,\n          ]\n        ) : (\n          <path class=\"graph-path\" d={areaPath} fill={fill} />\n        )}\n      </svg>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteGraphElement;\n\n  private graphId = `calcite-graph-${guid()}`;\n\n  private resizeObserver = createObserver(\"resize\", () => forceUpdate(this));\n}\n"],"version":3}
+{"file":"graph.js","mappings":"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","names":[],"sources":["src/components/graph/util.ts","src/components/graph/graph.scss?tag=calcite-graph&encapsulation=shadow","src/components/graph/graph.tsx"],"sourcesContent":["import { DataSeries, Extent, Graph, Point, TranslateOptions, Translator } from \"../graph/interfaces\";\n\n/**\n * Calculate slope of the tangents\n * uses Steffen interpolation as it's monotonic\n * http://jrwalsh1.github.io/posts/interpolations/\n *\n * @param p0\n * @param p1\n * @param p2\n */\nfunction slope(p0: Point, p1: Point, p2: Point): number {\n  const dx = p1[0] - p0[0];\n  const dx1 = p2[0] - p1[0];\n  const dy = p1[1] - p0[1];\n  const dy1 = p2[1] - p1[1];\n  const m = dy / (dx || (dx1 < 0 && 0));\n  const m1 = dy1 / (dx1 || (dx < 0 && 0));\n  const p = (m * dx1 + m1 * dx) / (dx + dx1);\n  return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;\n}\n\n/**\n * Calculate slope for just one tangent (single-sided)\n *\n * @param p0\n * @param p1\n * @param m\n */\nfunction slopeSingle(p0: Point, p1: Point, m: number): number {\n  const dx = p1[0] - p0[0];\n  const dy = p1[1] - p0[1];\n  return dx ? ((3 * dy) / dx - m) / 2 : m;\n}\n\n/**\n * Given two points and their tangent slopes,\n * calculate the bezier handle coordinates and return draw command.\n *\n * Translates Hermite Spline to Bézier curve:\n * https://stackoverflow.com/questions/42574940/\n *\n * @param p0\n * @param p1\n * @param m0\n * @param m1\n * @param t\n */\nfunction bezier(p0: Point, p1: Point, m0: number, m1: number, t: Translator): string {\n  const [x0, y0] = p0;\n  const [x1, y1] = p1;\n  const dx = (x1 - x0) / 3;\n  const h1 = t([x0 + dx, y0 + dx * m0]).join(\",\");\n  const h2 = t([x1 - dx, y1 - dx * m1]).join(\",\");\n  const p = t([x1, y1]).join(\",\");\n  return `C ${h1} ${h2} ${p}`;\n}\n\n/**\n * Generate a function which will translate a point\n * from the data coordinate space to svg viewbox oriented pixels\n *\n * @param root0\n * @param root0.width\n * @param root0.height\n * @param root0.min\n * @param root0.max\n */\nexport function translate({ width, height, min, max }: TranslateOptions): Translator {\n  const rangeX = max[0] - min[0];\n  const rangeY = max[1] - min[1];\n  return (point) => {\n    const x = ((point[0] - min[0]) / rangeX) * width;\n    const y = height - (point[1] / rangeY) * height;\n    return [x, y];\n  };\n}\n\n/**\n * Get the min and max values from the dataset\n *\n * @param data\n */\nexport function range(data: DataSeries): Extent {\n  const [startX, startY] = data[0];\n  const min: Point = [startX, startY];\n  const max: Point = [startX, startY];\n  return data.reduce(\n    ({ min, max }, [x, y]) => ({\n      min: [Math.min(min[0], x), Math.min(min[1], y)],\n      max: [Math.max(max[0], x), Math.max(max[1], y)],\n    }),\n    { min, max },\n  );\n}\n\n/**\n * Generate drawing commands for an area graph\n * returns a string can can be passed directly to a path element's `d` attribute\n *\n * @param root0\n * @param root0.data\n * @param root0.min\n * @param root0.max\n * @param root0.t\n */\nexport function area({ data, min, max, t }: Graph): string {\n  if (data.length === 0) {\n    return \"\";\n  }\n\n  // important points for beginning and ending the path\n  const [startX, startY] = t(data[0]);\n  const [minX, minY] = t(min);\n  const [maxX] = t(max);\n\n  // keep track of previous slope/points\n  let m: number;\n  let p0: Point;\n  let p1: Point;\n\n  // iterate over data points, calculating command for each\n  const commands = data.reduce((acc, point, i) => {\n    p0 = data[i - 2];\n    p1 = data[i - 1];\n    if (i > 1) {\n      const m1 = slope(p0, p1, point);\n      const m0 = m === undefined ? slopeSingle(p0, p1, m1) : m;\n      const command = bezier(p0, p1, m0, m1, t);\n      m = m1;\n      return `${acc} ${command}`;\n    }\n    return acc;\n  }, `M ${minX},${minY} L ${minX},${startY} L ${startX},${startY}`);\n\n  // close the path\n  const last = data[data.length - 1];\n  const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);\n  return `${commands} ${end} L ${maxX},${minY} Z`;\n}\n",":host {\n  @apply block;\n  block-size: 100%;\n}\n\n.svg {\n  fill: currentColor;\n  stroke: transparent;\n  @apply m-0 block h-full w-full p-0;\n\n  .graph-path--highlight {\n    fill: var(--calcite-color-brand);\n    @apply opacity-50;\n  }\n}\n\n@include base-component();\n","import { Component, Element, forceUpdate, h, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { createObserver } from \"../../utils/observers\";\nimport { ColorStop, DataSeries, Point } from \"./interfaces\";\nimport { area, range, translate } from \"./util\";\n\n@Component({\n  tag: \"calcite-graph\",\n  styleUrl: \"graph.scss\",\n  shadow: true,\n})\nexport class Graph {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Array of tuples describing a single data point ([x, y])\n   * These data points should be sorted by x-axis value.\n   */\n  @Prop() data: DataSeries = [];\n\n  /**\n   * Array of values describing a single color stop ([offset, color, opacity])\n   * These color stops should be sorted by offset value.\n   */\n  @Prop() colorStops: ColorStop[];\n\n  /** Start of highlight color if highlighting range. */\n  @Prop() highlightMin: number;\n\n  /** End of highlight color if highlighting range. */\n  @Prop() highlightMax: number;\n\n  /** Lowest point of the range. */\n  @Prop({ reflect: true }) min!: number;\n\n  /** Highest point of the range. */\n  @Prop({ reflect: true }) max!: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.resizeObserver?.observe(this.el);\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  render(): VNode {\n    const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;\n    const id = this.graphId;\n    const { clientHeight: height, clientWidth: width } = el;\n\n    // if we have no data, return empty svg\n    if (!data || data.length === 0) {\n      return (\n        <svg\n          aria-hidden=\"true\"\n          class=\"svg\"\n          height={height}\n          preserveAspectRatio=\"none\"\n          viewBox={`0 0 ${width} ${height}`}\n          width={width}\n        />\n      );\n    }\n\n    const { min: rangeMin, max: rangeMax } = range(data);\n\n    let currentMin: Point = rangeMin;\n    let currentMax: Point = rangeMax;\n\n    if (min < rangeMin[0] || min > rangeMin[0]) {\n      currentMin = [min, 0];\n    }\n\n    if (max > rangeMax[0] || max < rangeMax[0]) {\n      currentMax = [max, rangeMax[1]];\n    }\n\n    const t = translate({ min: currentMin, max: currentMax, width, height });\n    const [hMinX] = t([highlightMin, currentMax[1]]);\n    const [hMaxX] = t([highlightMax, currentMax[1]]);\n    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });\n    const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;\n    return (\n      <svg\n        aria-hidden=\"true\"\n        class=\"svg\"\n        height={height}\n        preserveAspectRatio=\"none\"\n        viewBox={`0 0 ${width} ${height}`}\n        width={width}\n      >\n        {colorStops ? (\n          <defs>\n            <linearGradient id={`linear-gradient-${id}`} x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n              {colorStops.map(({ offset, color, opacity }) => (\n                <stop offset={`${offset * 100}%`} stop-color={color} stop-opacity={opacity} />\n              ))}\n            </linearGradient>\n          </defs>\n        ) : null}\n\n        {highlightMin !== undefined ? (\n          [\n            <mask height=\"100%\" id={`${id}1`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n            M 0,0\n            L ${hMinX - 1},0\n            L ${hMinX - 1},${height}\n            L 0,${height}\n            Z\n          `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <mask height=\"100%\" id={`${id}2`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n            M ${hMinX + 1},0\n            L ${hMaxX - 1},0\n            L ${hMaxX - 1},${height}\n            L ${hMinX + 1}, ${height}\n            Z\n          `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <mask height=\"100%\" id={`${id}3`} width=\"100%\" x=\"0%\" y=\"0%\">\n              <path\n                d={`\n                M ${hMaxX + 1},0\n                L ${width},0\n                L ${width},${height}\n                L ${hMaxX + 1}, ${height}\n                Z\n              `}\n                fill=\"white\"\n              />\n            </mask>,\n\n            <path class=\"graph-path\" d={areaPath} fill={fill} mask={`url(#${id}1)`} />,\n            <path class=\"graph-path--highlight\" d={areaPath} fill={fill} mask={`url(#${id}2)`} />,\n            <path class=\"graph-path\" d={areaPath} fill={fill} mask={`url(#${id}3)`} />,\n          ]\n        ) : (\n          <path class=\"graph-path\" d={areaPath} fill={fill} />\n        )}\n      </svg>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteGraphElement;\n\n  private graphId = `calcite-graph-${guid()}`;\n\n  private resizeObserver = createObserver(\"resize\", () => forceUpdate(this));\n}\n"],"version":3}

package/dist/components/guid.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.11
  */
 function gen(counts) {
     return counts

package/dist/components/handle.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.11
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/handle.js.map

@@ -1 +1 @@
-{"file":"handle.js","mappings":"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","names":[],"sources":["src/components/handle/resources.ts","src/components/handle/handle.scss?tag=calcite-handle&encapsulation=shadow","src/components/handle/handle.tsx"],"sourcesContent":["export const CSS = {\n  handle: \"handle\",\n  handleSelected: \"handle--selected\",\n};\n\nexport const ICONS = {\n  drag: \"drag\",\n};\n",":host {\n  @apply flex;\n}\n\n.handle {\n  @apply focus-base\n    flex\n    items-center\n    justify-center\n    self-stretch\n    border-none\n    bg-transparent;\n  color: theme(\"borderColor.color.input\");\n  padding-block: theme(\"spacing.3\");\n  padding-inline: theme(\"spacing.1\");\n  line-height: 0;\n\n  calcite-icon {\n    color: inherit;\n  }\n}\n\n:host(:not([disabled])) .handle {\n  @apply cursor-move;\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  &:focus {\n    @apply text-color-1 focus-inset;\n  }\n  &--selected {\n    @apply bg-foreground-3 text-color-1;\n  }\n}\n\n@include disabled();\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 { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS } from \"./resources\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\n\n@Component({\n  tag: \"calcite-handle\",\n  styleUrl: \"handle.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Handle implements LoadableComponent, T9nComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  @Watch(\"messages\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"setPosition\")\n  @Watch(\"setSize\")\n  handleAriaTextChange(): void {\n    const message = this.getAriaText(\"live\");\n\n    if (message) {\n      this.calciteInternalAssistiveTextChange.emit({\n        message,\n      });\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   * Value for the button title attribute\n   */\n  @Prop({ reflect: true }) dragHandle: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  @Prop() messages: HandleMessages;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setPosition: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setSize: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, disables unselecting the component when blurred.\n   *\n   * @internal\n   */\n  @Prop() blurUnselectDisabled = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  @Prop() messageOverrides: Partial<HandleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectMessages(this);\n    disconnectLocalized(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteHandleElement;\n\n  handleButton: HTMLElement;\n\n  @State() effectiveLocale: string;\n\n  @State() defaultMessages: HandleMessages;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\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 }) calciteHandleChange: EventEmitter<void>;\n\n  /**\n   * Emitted when the handle is selected and the up or down arrow key is pressed.\n   */\n  @Event({ cancelable: false }) calciteHandleNudge: EventEmitter<HandleNudge>;\n\n  /**\n   * Emitted when the assistive text has changed.\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAssistiveTextChange: EventEmitter<HandleChange>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.handleButton?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getAriaText(type: \"label\" | \"live\"): string {\n    const { setPosition, setSize, label, messages, selected } = this;\n\n    if (!messages || !label || typeof setSize !== \"number\" || typeof setPosition !== \"number\") {\n      return null;\n    }\n\n    const text =\n      type === \"label\"\n        ? selected\n          ? messages.dragHandleChange\n          : messages.dragHandleIdle\n        : selected\n          ? messages.dragHandleActive\n          : messages.dragHandleCommit;\n\n    const replacePosition = text.replace(\"{position}\", setPosition.toString());\n    const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n    return replaceLabel.replace(\"{total}\", setSize.toString());\n  }\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n        this.selected = !this.selected;\n        this.calciteHandleChange.emit();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"up\" });\n        break;\n      case \"ArrowDown\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"down\" });\n        break;\n    }\n  };\n\n  handleBlur = (): void => {\n    if (this.blurUnselectDisabled || this.disabled) {\n      return;\n    }\n\n    if (this.selected) {\n      this.selected = false;\n      this.calciteHandleChange.emit();\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486\n      <span\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        aria-pressed={this.disabled ? null : toAriaBoolean(this.selected)}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        role=\"button\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.messages?.dragHandle}\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={(el): void => {\n          this.handleButton = el;\n        }}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"handle.js","mappings":"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","names":[],"sources":["src/components/handle/resources.ts","src/components/handle/handle.scss?tag=calcite-handle&encapsulation=shadow","src/components/handle/handle.tsx"],"sourcesContent":["export const CSS = {\n  handle: \"handle\",\n  handleSelected: \"handle--selected\",\n};\n\nexport const ICONS = {\n  drag: \"drag\",\n};\n",":host {\n  @apply flex;\n}\n\n.handle {\n  @apply focus-base\n    flex\n    items-center\n    justify-center\n    self-stretch\n    border-none\n    bg-transparent;\n  color: theme(\"borderColor.color.input\");\n  padding-block: theme(\"spacing.3\");\n  padding-inline: theme(\"spacing.1\");\n  line-height: 0;\n\n  calcite-icon {\n    color: inherit;\n  }\n}\n\n:host(:not([disabled])) .handle {\n  @apply cursor-move;\n  &:hover {\n    @apply bg-foreground-2 text-color-1;\n  }\n  &:focus {\n    @apply text-color-1 focus-inset;\n  }\n  &--selected {\n    @apply bg-foreground-3 text-color-1;\n  }\n}\n\n@include disabled();\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 { toAriaBoolean } from \"../../utils/dom\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS } from \"./resources\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\n\n@Component({\n  tag: \"calcite-handle\",\n  styleUrl: \"handle.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Handle implements LoadableComponent, T9nComponent, InteractiveComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  @Watch(\"messages\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"setPosition\")\n  @Watch(\"setSize\")\n  handleAriaTextChange(): void {\n    const message = this.getAriaText(\"live\");\n\n    if (message) {\n      this.calciteInternalAssistiveTextChange.emit({\n        message,\n      });\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   * Value for the button title attribute.\n   */\n  @Prop({ reflect: true }) dragHandle: string;\n\n  /**\n   * Made into a prop for testing purposes only.\n   *\n   * @internal\n   */\n  @Prop() messages: HandleMessages;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setPosition: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() setSize: number;\n\n  /**\n   *\n   *\n   * @internal\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, disables unselecting the component when blurred.\n   *\n   * @internal\n   */\n  @Prop() blurUnselectDisabled = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  @Prop() messageOverrides: Partial<HandleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectMessages(this);\n    connectLocalized(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectMessages(this);\n    disconnectLocalized(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteHandleElement;\n\n  handleButton: HTMLElement;\n\n  @State() effectiveLocale: string;\n\n  @State() defaultMessages: HandleMessages;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\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 }) calciteHandleChange: EventEmitter<void>;\n\n  /**\n   * Fires when the handle is selected and the up or down arrow key is pressed.\n   */\n  @Event({ cancelable: false }) calciteHandleNudge: EventEmitter<HandleNudge>;\n\n  /**\n   * Fires when the assistive text has changed.\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAssistiveTextChange: EventEmitter<HandleChange>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.handleButton?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  getAriaText(type: \"label\" | \"live\"): string {\n    const { setPosition, setSize, label, messages, selected } = this;\n\n    if (!messages || !label || typeof setSize !== \"number\" || typeof setPosition !== \"number\") {\n      return null;\n    }\n\n    const text =\n      type === \"label\"\n        ? selected\n          ? messages.dragHandleChange\n          : messages.dragHandleIdle\n        : selected\n          ? messages.dragHandleActive\n          : messages.dragHandleCommit;\n\n    const replacePosition = text.replace(\"{position}\", setPosition.toString());\n    const replaceLabel = replacePosition.replace(\"{itemLabel}\", label);\n    return replaceLabel.replace(\"{total}\", setSize.toString());\n  }\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \" \":\n        this.selected = !this.selected;\n        this.calciteHandleChange.emit();\n        event.preventDefault();\n        break;\n      case \"ArrowUp\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"up\" });\n        break;\n      case \"ArrowDown\":\n        if (!this.selected) {\n          return;\n        }\n        event.preventDefault();\n        this.calciteHandleNudge.emit({ direction: \"down\" });\n        break;\n    }\n  };\n\n  handleBlur = (): void => {\n    if (this.blurUnselectDisabled || this.disabled) {\n      return;\n    }\n\n    if (this.selected) {\n      this.selected = false;\n      this.calciteHandleChange.emit();\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486\n      <span\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        aria-pressed={this.disabled ? null : toAriaBoolean(this.selected)}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        role=\"button\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.messages?.dragHandle}\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={(el): void => {\n          this.handleButton = el;\n        }}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/he.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hi.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hr.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/hu.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/icon.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.11
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/id.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.11
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/index.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.11
  */
 import { d as darkMode, a as autoMode } from './resources.js';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client/index.js';

package/dist/components/index2.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.11
  */
 function createCommonjsModule(fn, basedir, module) {
 	return module = {

package/dist/components/index3.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.11
  */
 const supportedTimeZones = (() => {
     const platformTimeZones = Intl.supportedValuesOf('timeZone');

package/dist/components/index4.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.11
  */
 class NativeDateEngine {
     constructor() {

package/dist/components/input-message.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.11
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { o as setRequestedIcon } from './dom.js';

package/dist/components/input-number.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.11
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, i as isPrimaryPointerButton, o as setRequestedIcon, a as getElementDir } from './dom.js';

package/dist/components/input-text.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.11
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, o as setRequestedIcon, a as getElementDir } from './dom.js';

package/dist/components/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.11
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, i as isPrimaryPointerButton, o as setRequestedIcon, a as getElementDir } from './dom.js';

package/dist/components/interactive.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.11
  */
 import { Build, h } from '@stencil/core/internal/client/index.js';
 
@@ -140,10 +140,7 @@ const CSS = {
     container: "interaction-container",
 };
 function InteractiveContainer({ disabled }, children) {
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-error - `inert` is missing from Stencil's types (see https://github.com/ionic-team/stencil/issues/5071)
-    h("div", { class: CSS.container, inert: disabled }, ...children));
+    return (h("div", { class: CSS.container, inert: disabled }, ...children));
 }
 
 export { InteractiveContainer as I, connectInteractive as c, disconnectInteractive as d, getUserAgentString as g, updateHostInteraction as u };