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

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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client/index.js';
@@ -130,10 +130,11 @@ function disconnectForm(component) {
 function afterConnectDefaultValueSet(component, value) {
     component.defaultValue = value;
 }
-const hiddenInputChangeHandler = (event) => {
-    event.target.dispatchEvent(new CustomEvent("calciteInternalHiddenInputChange", { bubbles: true }));
+const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
+const hiddenInputInputHandler = (event) => {
+    event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
 };
-const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("change", hiddenInputChangeHandler);
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
 /**
  * Helper for maintaining a form-associated's hidden input in sync with the component.
  *
@@ -182,7 +183,7 @@ function syncHiddenFormInput(component) {
         }
         docFrag.append(input);
         // emits when hidden input is autofilled
-        input.addEventListener("change", hiddenInputChangeHandler);
+        input.addEventListener("input", hiddenInputInputHandler);
         defaultSyncHiddenFormInput(component, input, value);
     });
     if (docFrag) {
@@ -244,6 +245,6 @@ const HiddenFormInputSlot = ({ component, }) => {
     return h("slot", { name: hiddenFormInputSlotName });
 };
 
-export { HiddenFormInputSlot as H, afterConnectDefaultValueSet as a, connectForm as c, disconnectForm as d, findAssociatedForm as f, resetForm as r, submitForm as s };
+export { HiddenFormInputSlot as H, afterConnectDefaultValueSet as a, connectForm as c, disconnectForm as d, findAssociatedForm as f, internalHiddenInputInputEvent as i, resetForm as r, submitForm as s };
 
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"file":"form.js","mappings":"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","names":[],"sources":["src/utils/form.tsx"],"sourcesContent":["import { closestElementCrossShadowBoundary, queryElementRoots } from \"./dom\";\nimport { FunctionalComponent, h } from \"@stencil/core\";\n\n/**\n * Exported for testing purposes.\n */\nexport const hiddenFormInputSlotName = \"hidden-form-input\";\n\n/**\n * Defines interface for form owning components.\n *\n * Allows calling submit/reset methods on the form.\n */\nexport interface FormOwner {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * The ID of the form to associate with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  form: string;\n\n  /**\n   * The form this component is associated with.\n   *\n   * @internal\n   */\n  formEl: HTMLFormElement;\n}\n\n/**\n * Defines interface for form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface FormComponent<T = any> extends FormOwner {\n  /**\n   * When true, this component's value will not be submitted in the form.\n   */\n  disabled: boolean;\n\n  /**\n   * When true, form submit requests will enforce field requirement.\n   *\n   * @todo remove optional in follow-up PR\n   */\n  required?: boolean;\n\n  /**\n   * The name used to submit the value to the associated form.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  name: string;\n\n  /**\n   * This form component's value.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  value: T;\n\n  /**\n   * The initial value for this form component.\n   *\n   * When the form is reset, the value will be set to this property.\n   */\n  defaultValue: T;\n\n  /**\n   * Hook for components to provide custom form reset behavior.\n   */\n  onFormReset?(): void;\n\n  /**\n   * Hook for components to sync _extra_ props on the hidden input form element used for form-submitting.\n   *\n   * Note: The following props are set by default: disabled, hidden, name, required, value.\n   */\n  syncHiddenFormInput?(input: HTMLInputElement): void;\n}\n\n/**\n * Defines interface for checkable form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface CheckableFormComponent<T = any> extends FormComponent<T> {\n  /**\n   * For boolean-valued components, this property defines whether the associated value is submitted to the form or not.\n   */\n  checked: boolean;\n\n  /**\n   * The initial checked value for this form component.\n   *\n   * When the form is reset, the checked property will be set to this value.\n   */\n  defaultChecked: boolean;\n}\n\nfunction isCheckable(component: FormComponent): component is CheckableFormComponent {\n  return \"checked\" in component;\n}\n\nconst onFormResetMap = new WeakMap<HTMLElement, FormComponent[\"onFormReset\"]>();\nconst formComponentSet = new WeakSet<HTMLElement>();\n\n/**\n * This helps determine if our form component is part of a composite form-associated component.\n *\n * @param form\n * @param formComponentEl\n */\nfunction hasRegisteredFormComponentParent(\n  form: HTMLFormElement,\n  formComponentEl: HTMLElement,\n): boolean {\n  // if we have a parent component using the form ID attribute, we assume it is form-associated\n  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(\n    formComponentEl.parentElement,\n    \"[form]\",\n  );\n\n  if (hasParentComponentWithFormIdSet) {\n    return true;\n  }\n\n  // we use events as a way to test for nested form-associated components across shadow bounds\n  const formComponentRegisterEventName = \"calciteInternalFormComponentRegister\";\n\n  let hasRegisteredFormComponentParent = false;\n\n  form.addEventListener(\n    formComponentRegisterEventName,\n    (event) => {\n      hasRegisteredFormComponentParent = event\n        .composedPath()\n        .some((element) => formComponentSet.has(element as HTMLElement));\n      event.stopPropagation();\n    },\n    { once: true },\n  );\n\n  formComponentEl.dispatchEvent(\n    new CustomEvent(formComponentRegisterEventName, {\n      bubbles: true,\n      composed: true,\n    }),\n  );\n\n  return hasRegisteredFormComponentParent;\n}\n\n/**\n * Helper to submit a form.\n *\n * @param component\n * @returns true if its associated form was submitted, false otherwise.\n */\nexport function submitForm(component: FormOwner): boolean {\n  const { formEl } = component;\n\n  if (!formEl) {\n    return false;\n  }\n\n  formEl.requestSubmit();\n\n  return true;\n}\n\n/**\n * Helper to reset a form.\n *\n * @param component\n */\nexport function resetForm(component: FormOwner): void {\n  component.formEl?.reset();\n}\n\n/**\n * Helper to set up form interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectForm<T>(component: FormComponent<T>): void {\n  const { el, value } = component;\n  const associatedForm = findAssociatedForm(component);\n\n  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {\n    return;\n  }\n\n  component.formEl = associatedForm;\n  component.defaultValue = value;\n\n  if (isCheckable(component)) {\n    component.defaultChecked = component.checked;\n  }\n\n  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);\n  associatedForm.addEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.set(component.el, boundOnFormReset);\n  formComponentSet.add(el);\n}\n\n/**\n * Utility method to find a form-component's associated form element.\n *\n * @param component\n */\nexport function findAssociatedForm(component: FormOwner): HTMLFormElement | null {\n  const { el, form } = component;\n\n  return form\n    ? queryElementRoots<HTMLFormElement>(el, { id: form })\n    : closestElementCrossShadowBoundary<HTMLFormElement>(el, \"form\");\n}\n\nfunction onFormReset<T>(this: FormComponent<T>): void {\n  if (isCheckable(this)) {\n    this.checked = this.defaultChecked;\n    return;\n  }\n\n  this.value = this.defaultValue;\n}\n\n/**\n * Helper to tear down form interactions on disconnectedCallback.\n *\n * @param component\n */\nexport function disconnectForm<T>(component: FormComponent<T>): void {\n  const { el, formEl } = component;\n\n  if (!formEl) {\n    return;\n  }\n\n  const boundOnFormReset = onFormResetMap.get(el);\n  formEl.removeEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.delete(el);\n  component.formEl = null;\n  formComponentSet.delete(el);\n}\n\n/**\n * Helper for setting the default value on initialization after connectedCallback.\n *\n * Note that this is only needed if the default value cannot be determined on connectedCallback.\n *\n * @param component\n * @param value\n */\nexport function afterConnectDefaultValueSet<T>(component: FormComponent<T>, value: any): void {\n  component.defaultValue = value;\n}\n\nconst hiddenInputChangeHandler = (event: Event) => {\n  event.target.dispatchEvent(\n    new CustomEvent(\"calciteInternalHiddenInputChange\", { bubbles: true }),\n  );\n};\n\nconst removeHiddenInputChangeEventListener = (input: HTMLInputElement) =>\n  input.removeEventListener(\"change\", hiddenInputChangeHandler);\n\n/**\n * Helper for maintaining a form-associated's hidden input in sync with the component.\n *\n * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198\n *\n * @param component\n */\nfunction syncHiddenFormInput(component: FormComponent): void {\n  const { el, formEl, name, value } = component;\n  const { ownerDocument } = el;\n\n  const inputs = el.querySelectorAll<HTMLInputElement>(`input[slot=\"${hiddenFormInputSlotName}\"]`);\n\n  if (!formEl || !name) {\n    inputs.forEach((input) => {\n      removeHiddenInputChangeEventListener(input);\n      input.remove();\n    });\n    return;\n  }\n\n  const values = Array.isArray(value) ? value : [value];\n  const extra: any[] = [];\n  const seen = new Set<any>();\n\n  inputs.forEach((input) => {\n    const valueMatch = values.find(\n      (val) =>\n        /* intentional non-strict equality check */\n        val == input.value,\n    );\n\n    if (valueMatch != null) {\n      seen.add(valueMatch);\n      defaultSyncHiddenFormInput(component, input, valueMatch);\n    } else {\n      extra.push(input);\n    }\n  });\n\n  let docFrag: DocumentFragment;\n\n  values.forEach((value) => {\n    if (seen.has(value)) {\n      return;\n    }\n\n    let input = extra.pop();\n\n    if (!input) {\n      input = ownerDocument!.createElement(\"input\");\n      input.slot = hiddenFormInputSlotName;\n    }\n\n    if (!docFrag) {\n      docFrag = ownerDocument!.createDocumentFragment();\n    }\n\n    docFrag.append(input);\n\n    // emits when hidden input is autofilled\n    input.addEventListener(\"change\", hiddenInputChangeHandler);\n\n    defaultSyncHiddenFormInput(component, input, value);\n  });\n\n  if (docFrag) {\n    el.append(docFrag);\n  }\n  extra.forEach((input) => {\n    removeHiddenInputChangeEventListener(input);\n    input.remove();\n  });\n}\n\nfunction defaultSyncHiddenFormInput(\n  component: FormComponent,\n  input: HTMLInputElement,\n  value: string,\n): void {\n  const { defaultValue, disabled, form, name, required } = component;\n\n  // keep in sync to prevent losing reset value\n  input.defaultValue = defaultValue;\n  input.disabled = disabled;\n  input.name = name;\n  input.required = required;\n  input.tabIndex = -1;\n\n  // we set the attr as the prop is read-only\n  if (form) {\n    input.setAttribute(\"form\", form);\n  } else {\n    input.removeAttribute(\"form\");\n  }\n\n  if (isCheckable(component)) {\n    input.checked = component.checked;\n\n    // keep in sync to prevent losing reset value\n    input.defaultChecked = component.defaultChecked;\n    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on\n    input.value = component.checked ? value || \"on\" : \"\";\n  } else {\n    input.value = value || \"\";\n  }\n\n  component.syncHiddenFormInput?.(input);\n}\n\ninterface HiddenFormInputSlotProps {\n  component: FormComponent;\n}\n\n/**\n * Helper to render the slot for form-associated component's hidden input.\n *\n * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.\n *\n * render(): VNode {\n *   <Host>\n *     <div class={CSS.container}>\n *     // ...\n *     <HiddenFormInputSlot component={this} />\n *     </div>\n *   </Host>\n * }\n *\n * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.\n *\n * @param root0\n * @param root0.component\n */\nexport const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps> = ({\n  component,\n}) => {\n  syncHiddenFormInput(component);\n\n  return <slot name={hiddenFormInputSlotName} />;\n};\n"],"version":3}
+{"file":"form.js","mappings":"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","names":[],"sources":["src/utils/form.tsx"],"sourcesContent":["import { closestElementCrossShadowBoundary, queryElementRoots } from \"./dom\";\nimport { FunctionalComponent, h } from \"@stencil/core\";\n\n/**\n * Exported for testing purposes.\n */\nexport const hiddenFormInputSlotName = \"hidden-form-input\";\n\n/**\n * Defines interface for form owning components.\n *\n * Allows calling submit/reset methods on the form.\n */\nexport interface FormOwner {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * The ID of the form to associate with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  form: string;\n\n  /**\n   * The form this component is associated with.\n   *\n   * @internal\n   */\n  formEl: HTMLFormElement;\n}\n\n/**\n * Defines interface for form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface FormComponent<T = any> extends FormOwner {\n  /**\n   * When true, this component's value will not be submitted in the form.\n   */\n  disabled: boolean;\n\n  /**\n   * When true, form submit requests will enforce field requirement.\n   *\n   * @todo remove optional in follow-up PR\n   */\n  required?: boolean;\n\n  /**\n   * The name used to submit the value to the associated form.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  name: string;\n\n  /**\n   * This form component's value.\n   *\n   * Note that this prop should use the @Prop decorator.\n   */\n  value: T;\n\n  /**\n   * The initial value for this form component.\n   *\n   * When the form is reset, the value will be set to this property.\n   */\n  defaultValue: T;\n\n  /**\n   * Hook for components to provide custom form reset behavior.\n   */\n  onFormReset?(): void;\n\n  /**\n   * Hook for components to sync _extra_ props on the hidden input form element used for form-submitting.\n   *\n   * Note: The following props are set by default: disabled, hidden, name, required, value.\n   */\n  syncHiddenFormInput?(input: HTMLInputElement): void;\n}\n\n/**\n * Defines interface for checkable form-associated components.\n *\n * Along with the interface, use the matching form utils to help set up the component behavior.\n */\nexport interface CheckableFormComponent<T = any> extends FormComponent<T> {\n  /**\n   * For boolean-valued components, this property defines whether the associated value is submitted to the form or not.\n   */\n  checked: boolean;\n\n  /**\n   * The initial checked value for this form component.\n   *\n   * When the form is reset, the checked property will be set to this value.\n   */\n  defaultChecked: boolean;\n}\n\nfunction isCheckable(component: FormComponent): component is CheckableFormComponent {\n  return \"checked\" in component;\n}\n\nconst onFormResetMap = new WeakMap<HTMLElement, FormComponent[\"onFormReset\"]>();\nconst formComponentSet = new WeakSet<HTMLElement>();\n\n/**\n * This helps determine if our form component is part of a composite form-associated component.\n *\n * @param form\n * @param formComponentEl\n */\nfunction hasRegisteredFormComponentParent(\n  form: HTMLFormElement,\n  formComponentEl: HTMLElement,\n): boolean {\n  // if we have a parent component using the form ID attribute, we assume it is form-associated\n  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(\n    formComponentEl.parentElement,\n    \"[form]\",\n  );\n\n  if (hasParentComponentWithFormIdSet) {\n    return true;\n  }\n\n  // we use events as a way to test for nested form-associated components across shadow bounds\n  const formComponentRegisterEventName = \"calciteInternalFormComponentRegister\";\n\n  let hasRegisteredFormComponentParent = false;\n\n  form.addEventListener(\n    formComponentRegisterEventName,\n    (event) => {\n      hasRegisteredFormComponentParent = event\n        .composedPath()\n        .some((element) => formComponentSet.has(element as HTMLElement));\n      event.stopPropagation();\n    },\n    { once: true },\n  );\n\n  formComponentEl.dispatchEvent(\n    new CustomEvent(formComponentRegisterEventName, {\n      bubbles: true,\n      composed: true,\n    }),\n  );\n\n  return hasRegisteredFormComponentParent;\n}\n\n/**\n * Helper to submit a form.\n *\n * @param component\n * @returns true if its associated form was submitted, false otherwise.\n */\nexport function submitForm(component: FormOwner): boolean {\n  const { formEl } = component;\n\n  if (!formEl) {\n    return false;\n  }\n\n  formEl.requestSubmit();\n\n  return true;\n}\n\n/**\n * Helper to reset a form.\n *\n * @param component\n */\nexport function resetForm(component: FormOwner): void {\n  component.formEl?.reset();\n}\n\n/**\n * Helper to set up form interactions on connectedCallback.\n *\n * @param component\n */\nexport function connectForm<T>(component: FormComponent<T>): void {\n  const { el, value } = component;\n  const associatedForm = findAssociatedForm(component);\n\n  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {\n    return;\n  }\n\n  component.formEl = associatedForm;\n  component.defaultValue = value;\n\n  if (isCheckable(component)) {\n    component.defaultChecked = component.checked;\n  }\n\n  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);\n  associatedForm.addEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.set(component.el, boundOnFormReset);\n  formComponentSet.add(el);\n}\n\n/**\n * Utility method to find a form-component's associated form element.\n *\n * @param component\n */\nexport function findAssociatedForm(component: FormOwner): HTMLFormElement | null {\n  const { el, form } = component;\n\n  return form\n    ? queryElementRoots<HTMLFormElement>(el, { id: form })\n    : closestElementCrossShadowBoundary<HTMLFormElement>(el, \"form\");\n}\n\nfunction onFormReset<T>(this: FormComponent<T>): void {\n  if (isCheckable(this)) {\n    this.checked = this.defaultChecked;\n    return;\n  }\n\n  this.value = this.defaultValue;\n}\n\n/**\n * Helper to tear down form interactions on disconnectedCallback.\n *\n * @param component\n */\nexport function disconnectForm<T>(component: FormComponent<T>): void {\n  const { el, formEl } = component;\n\n  if (!formEl) {\n    return;\n  }\n\n  const boundOnFormReset = onFormResetMap.get(el);\n  formEl.removeEventListener(\"reset\", boundOnFormReset);\n  onFormResetMap.delete(el);\n  component.formEl = null;\n  formComponentSet.delete(el);\n}\n\n/**\n * Helper for setting the default value on initialization after connectedCallback.\n *\n * Note that this is only needed if the default value cannot be determined on connectedCallback.\n *\n * @param component\n * @param value\n */\nexport function afterConnectDefaultValueSet<T>(component: FormComponent<T>, value: any): void {\n  component.defaultValue = value;\n}\n\nexport const internalHiddenInputInputEvent = \"calciteInternalHiddenInputInput\";\n\nconst hiddenInputInputHandler = (event: Event) => {\n  event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));\n};\n\nconst removeHiddenInputChangeEventListener = (input: HTMLInputElement) =>\n  input.removeEventListener(\"input\", hiddenInputInputHandler);\n\n/**\n * Helper for maintaining a form-associated's hidden input in sync with the component.\n *\n * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198\n *\n * @param component\n */\nfunction syncHiddenFormInput(component: FormComponent): void {\n  const { el, formEl, name, value } = component;\n  const { ownerDocument } = el;\n\n  const inputs = el.querySelectorAll<HTMLInputElement>(`input[slot=\"${hiddenFormInputSlotName}\"]`);\n\n  if (!formEl || !name) {\n    inputs.forEach((input) => {\n      removeHiddenInputChangeEventListener(input);\n      input.remove();\n    });\n    return;\n  }\n\n  const values = Array.isArray(value) ? value : [value];\n  const extra: any[] = [];\n  const seen = new Set<any>();\n\n  inputs.forEach((input) => {\n    const valueMatch = values.find(\n      (val) =>\n        /* intentional non-strict equality check */\n        val == input.value,\n    );\n\n    if (valueMatch != null) {\n      seen.add(valueMatch);\n      defaultSyncHiddenFormInput(component, input, valueMatch);\n    } else {\n      extra.push(input);\n    }\n  });\n\n  let docFrag: DocumentFragment;\n\n  values.forEach((value) => {\n    if (seen.has(value)) {\n      return;\n    }\n\n    let input = extra.pop();\n\n    if (!input) {\n      input = ownerDocument!.createElement(\"input\");\n      input.slot = hiddenFormInputSlotName;\n    }\n\n    if (!docFrag) {\n      docFrag = ownerDocument!.createDocumentFragment();\n    }\n\n    docFrag.append(input);\n\n    // emits when hidden input is autofilled\n    input.addEventListener(\"input\", hiddenInputInputHandler);\n\n    defaultSyncHiddenFormInput(component, input, value);\n  });\n\n  if (docFrag) {\n    el.append(docFrag);\n  }\n  extra.forEach((input) => {\n    removeHiddenInputChangeEventListener(input);\n    input.remove();\n  });\n}\n\nfunction defaultSyncHiddenFormInput(\n  component: FormComponent,\n  input: HTMLInputElement,\n  value: string,\n): void {\n  const { defaultValue, disabled, form, name, required } = component;\n\n  // keep in sync to prevent losing reset value\n  input.defaultValue = defaultValue;\n  input.disabled = disabled;\n  input.name = name;\n  input.required = required;\n  input.tabIndex = -1;\n\n  // we set the attr as the prop is read-only\n  if (form) {\n    input.setAttribute(\"form\", form);\n  } else {\n    input.removeAttribute(\"form\");\n  }\n\n  if (isCheckable(component)) {\n    input.checked = component.checked;\n\n    // keep in sync to prevent losing reset value\n    input.defaultChecked = component.defaultChecked;\n    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on\n    input.value = component.checked ? value || \"on\" : \"\";\n  } else {\n    input.value = value || \"\";\n  }\n\n  component.syncHiddenFormInput?.(input);\n}\n\ninterface HiddenFormInputSlotProps {\n  component: FormComponent;\n}\n\n/**\n * Helper to render the slot for form-associated component's hidden input.\n *\n * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.\n *\n * render(): VNode {\n *   <Host>\n *     <div class={CSS.container}>\n *     // ...\n *     <HiddenFormInputSlot component={this} />\n *     </div>\n *   </Host>\n * }\n *\n * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.\n *\n * @param root0\n * @param root0.component\n */\nexport const HiddenFormInputSlot: FunctionalComponent<HiddenFormInputSlotProps> = ({\n  component,\n}) => {\n  syncHiddenFormInput(component);\n\n  return <slot name={hiddenFormInputSlotName} />;\n};\n"],"version":3}

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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 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.12
  */
 const supportedTimeZones = (() => {
     const platformTimeZones = Intl.supportedValuesOf('timeZone');