@esri/calcite-components 2.9.0-next.2 → 2.9.0-next.20

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

@@ -1,25 +1,26 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const filter = require('./filter-545ae2ca.js');
-const interactive = require('./interactive-a21fc529.js');
-const loadable = require('./loadable-8502181b.js');
-const locale = require('./locale-3c14df15.js');
-const t9n = require('./t9n-d22d6156.js');
-const debounce = require('./debounce-348db285.js');
-require('./browser-1a5f23a5.js');
-require('./dom-b3b692c7.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
-require('./key-b4561c75.js');
-require('./observers-9d4b94fa.js');
+const index = require('./index-ca9c5738.js');
+const filter = require('./filter-d8b68281.js');
+const interactive = require('./interactive-46826d66.js');
+const loadable = require('./loadable-485b5ca8.js');
+const locale = require('./locale-22e50901.js');
+const t9n = require('./t9n-a2235c64.js');
+const debounce = require('./debounce-8594d56b.js');
+require('./browser-d83e81a6.js');
+require('./component-62e55d43.js');
+require('./dom-4f3978e9.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
+require('./key-987bfdfb.js');
+require('./observers-64d0e318.js');
 
 const CSS = {
     container: "container",

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

@@ -1 +1 @@
-{"file":"calcite-filter.entry.cjs.js","mappings":"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","names":["debounce","filter","updateMessages","setUpLoadableComponent","setUpMessages","connectInteractive","connectLocalized","connectMessages","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","componentFocusable","h","InteractiveContainer"],"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.defaultPrevented) {\n      return;\n    }\n\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              ref={(el): void => {\n                this.textInput = el;\n              }}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-filter.entry.cjs.js","mappings":"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","names":["debounce","filter","updateMessages","setUpLoadableComponent","setUpMessages","connectInteractive","connectLocalized","connectMessages","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","componentFocusable","h","InteractiveContainer"],"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.defaultPrevented) {\n      return;\n    }\n\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              ref={(el): void => {\n                this.textInput = el;\n              }}\n              scale={scale}\n              type=\"text\"\n              value={this.value}\n            />\n          </label>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-flow-item.cjs.entry.js

@@ -1,24 +1,25 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const dom = require('./dom-b3b692c7.js');
-const interactive = require('./interactive-a21fc529.js');
-const loadable = require('./loadable-8502181b.js');
-const locale = require('./locale-3c14df15.js');
-const t9n = require('./t9n-d22d6156.js');
-const resources = require('./resources-b8705ec7.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
-require('./browser-1a5f23a5.js');
-require('./key-b4561c75.js');
-require('./observers-9d4b94fa.js');
+const index = require('./index-ca9c5738.js');
+const dom = require('./dom-4f3978e9.js');
+const interactive = require('./interactive-46826d66.js');
+const loadable = require('./loadable-485b5ca8.js');
+const locale = require('./locale-22e50901.js');
+const t9n = require('./t9n-a2235c64.js');
+const resources = require('./resources-e6acc4bc.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
+require('./browser-d83e81a6.js');
+require('./component-62e55d43.js');
+require('./key-987bfdfb.js');
+require('./observers-64d0e318.js');
 
 const CSS = {
     backButton: "back-button",
@@ -29,6 +30,8 @@ const ICONS = {
 };
 const SLOTS = {
     actionBar: "action-bar",
+    contentTop: "content-top",
+    contentBottom: "content-bottom",
     headerActionsStart: "header-actions-start",
     headerActionsEnd: "header-actions-end",
     headerMenuActions: "header-menu-actions",
@@ -175,7 +178,7 @@ const FlowItem = class {
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, } = this;
-        return (index.h(index.Host, { key: 'bc389d11e0967785a37b7cc943eb2759ba6b387d' }, index.h(interactive.InteractiveContainer, { key: '429de3294431e151b7e9ce3ac804aa54ed8ca136', disabled: disabled }, index.h("calcite-panel", { key: '92ce7b01605a8d5a2a3d4c261acf8208c62e0bc5', closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef }, this.renderBackButton(), index.h("slot", { key: 'ce7fde074940ba4682f8fb2fb095b31c149a0508', name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { key: '91ea539db5e395afbb89018c30302dddaa812950', name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { key: '874de66d9caf644e6bd9e269336a1b7393ef5457', name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { key: '57055cb0579efe0f0cbc35b41e23949a075ad375', name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { key: 'afd616ff8ff6b7957062530a55dfa034ccbfc4e9', name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { key: '19a4c82531c19b179d04e9965147a9839c8639bc', name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { key: 'aec586df08cfa02e8259b2c11dc13a4635098915', name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { key: 'c4a11605a7cae83b16352fa53b2fe8d015e64681', name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", { key: '93c0a287ae64c54a4c943e232924838dff1bd4be' })))));
+        return (index.h(index.Host, { key: 'ccb470196c73156160ca37504bfa80465afcbaca' }, index.h(interactive.InteractiveContainer, { key: 'de7635e66d3a633e0887a255382e6be7f4756885', disabled: disabled }, index.h("calcite-panel", { key: '6a2274d35eb972055c96f90166da763ed62bd1b3', closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef }, this.renderBackButton(), index.h("slot", { key: '8b49efe6068d9f95229057d8c70105e6406aca3f', name: SLOTS.actionBar, slot: resources.SLOTS.actionBar }), index.h("slot", { key: '1e1e9b50868fcf1ef21fc5559b7f947ed03e7ecd', name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { key: '2baa09cf14039ab4e6f5c1611c721c000424c8ea', name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { key: 'd42339bd5033bc3e603ee8f2308901b1e1348378', name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { key: '0f27efdced2b4b6ad47c984d169f0ec152a0d04e', name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { key: '41e208260ceb203ea045e6264137235be2fa21da', name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { key: '5454482b484598a76ba74109a36d1a330fe8d2e7', name: SLOTS.contentTop, slot: resources.SLOTS.contentTop }), index.h("slot", { key: '3204234c0cbff2ebee7f1848e3b07160ae2bd14c', name: SLOTS.contentBottom, slot: resources.SLOTS.contentBottom }), index.h("slot", { key: '87d1f991a3d12ec7b5b8d829334d68f68bc82f19', name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { key: '672fca101390f2f414e614b8a4c86c932bbfa901', name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", { key: 'a1589a501927413a4f9cf4044f55b214bf2aa583' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/calcite-flow-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-flow-item.entry.cjs.js","mappings":"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","names":["connectInteractive","connectLocalized","connectMessages","setUpMessages","setUpLoadableComponent","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","updateMessages","componentFocusable","getElementDir","h","Host","InteractiveContainer","PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto overflow-hidden;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\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 { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\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 header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FlowItemMessages;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        ref={this.setBackRef}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n      overlayPositioning,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handlePanelClose}\n            onCalcitePanelScroll={this.handlePanelScroll}\n            onCalcitePanelToggle={this.handlePanelToggle}\n            overlayPositioning={overlayPositioning}\n            ref={this.setContainerRef}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-flow-item.entry.cjs.js","mappings":"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","names":["connectInteractive","connectLocalized","connectMessages","setUpMessages","setUpLoadableComponent","updateHostInteraction","disconnectInteractive","disconnectLocalized","disconnectMessages","setComponentLoaded","updateMessages","componentFocusable","getElementDir","h","Host","InteractiveContainer","PANEL_SLOTS"],"sources":["src/components/flow-item/resources.ts","src/components/flow-item/flow-item.scss?tag=calcite-flow-item&encapsulation=shadow","src/components/flow-item/flow-item.tsx"],"sourcesContent":["export const CSS = {\n  backButton: \"back-button\",\n};\n\nexport const ICONS = {\n  backLeft: \"chevron-left\",\n  backRight: \"chevron-right\",\n};\n\nexport const SLOTS = {\n  actionBar: \"action-bar\",\n  contentTop: \"content-top\",\n  contentBottom: \"content-bottom\",\n  headerActionsStart: \"header-actions-start\",\n  headerActionsEnd: \"header-actions-end\",\n  headerMenuActions: \"header-menu-actions\",\n  headerContent: \"header-content\",\n  fab: \"fab\",\n  footer: \"footer\",\n  footerActions: \"footer-actions\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.\n * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.\n */\n\n:host {\n  @extend %component-host;\n  @apply relative flex w-full flex-auto overflow-hidden;\n}\n\n@include disabled();\n\n.back-button {\n  @apply border-color-3\n  border-0\n  border-solid;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\ncalcite-panel {\n  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);\n  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\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 { HeadingLevel } from \"../functional/Heading\";\nimport { SLOTS as PANEL_SLOTS } from \"../panel/resources\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlowItemMessages } from \"./assets/flow-item/t9n\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.\n * @slot content-top - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).\n * @slot content-bottom - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)\n * @slot header-actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n * @slot header-actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot header-content - A slot for adding custom content to the component's header.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.\n * @slot footer-actions - [Deprecated] Use the `\"footer\"` slot instead. A slot for adding `calcite-button`s to the component's footer.\n * @slot footer - A slot for adding custom content to the component's footer.\n */\n@Component({\n  tag: \"calcite-flow-item\",\n  styleUrl: \"flow-item.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class FlowItem\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** When `true`, displays a close button in the trailing side of the component's header. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, the component will be hidden. */\n  @Prop({ reflect: true }) closed = false;\n\n  /**\n   * When `true`, hides the component's content area.\n   */\n  @Prop({ reflect: true }) collapsed = false;\n\n  /**\n   * Specifies the direction of the collapse.\n   *\n   * @internal\n   */\n  @Prop() collapseDirection: \"down\" | \"up\" = \"down\";\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When provided, the method will be called before it is removed from its parent `calcite-flow`.\n   */\n  @Prop() beforeBack: () => Promise<void>;\n\n  /** A description for the component. */\n  @Prop() description: string;\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 header text.\n   */\n  @Prop() heading: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, the action menu items in the `header-menu-actions` slot are open.\n   */\n  @Prop({ reflect: true }) menuOpen = false;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<FlowItemMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: FlowItemMessages;\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  /**\n   * When `true`, displays a back button in the component's header.\n   *\n   * @internal\n   */\n  @Prop() showBackButton = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the back button is clicked.\n   */\n  @Event({ cancelable: true }) calciteFlowItemBack: EventEmitter<void>;\n\n  /**\n   * Fires when the content is scrolled.\n   */\n  @Event({ cancelable: false }) calciteFlowItemScroll: EventEmitter<void>;\n\n  /**\n   * Fires when the close button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemClose: EventEmitter<void>;\n\n  /**\n   * Fires when the collapse button is clicked.\n   */\n  @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowItemElement;\n\n  containerEl: HTMLCalcitePanelElement;\n\n  backButtonEl: HTMLCalciteActionElement;\n\n  @State() defaultMessages: FlowItemMessages;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component.\n   *\n   * @returns promise.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { backButtonEl, containerEl } = this;\n\n    if (backButtonEl) {\n      return backButtonEl.setFocus();\n    } else if (containerEl) {\n      return containerEl.setFocus();\n    }\n  }\n\n  /**\n   * Scrolls the component's content to a specified set of coordinates.\n   *\n   * @example\n   * myCalciteFlowItem.scrollContentTo({\n   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n   *   behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n   * });\n   * @param options - allows specific coordinates to be defined.\n   * @returns - promise that resolves once the content is scrolled to.\n   */\n  @Method()\n  async scrollContentTo(options?: ScrollToOptions): Promise<void> {\n    await this.containerEl?.scrollContentTo(options);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handlePanelScroll = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemScroll.emit();\n  };\n\n  handlePanelClose = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.calciteFlowItemClose.emit();\n  };\n\n  handlePanelToggle = (event: CustomEvent<void>): void => {\n    event.stopPropagation();\n    this.collapsed = (event.target as HTMLCalcitePanelElement).collapsed;\n    this.calciteFlowItemToggle.emit();\n  };\n\n  backButtonClick = (): void => {\n    this.calciteFlowItemBack.emit();\n  };\n\n  setBackRef = (node: HTMLCalciteActionElement): void => {\n    this.backButtonEl = node;\n  };\n\n  setContainerRef = (node: HTMLCalcitePanelElement): void => {\n    this.containerEl = node;\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderBackButton(): VNode {\n    const { el } = this;\n\n    const rtl = getElementDir(el) === \"rtl\";\n    const { showBackButton, backButtonClick, messages } = this;\n    const label = messages.back;\n    const icon = rtl ? ICONS.backRight : ICONS.backLeft;\n\n    return showBackButton ? (\n      <calcite-action\n        aria-label={label}\n        class={CSS.backButton}\n        icon={icon}\n        key=\"flow-back-button\"\n        onClick={backButtonClick}\n        ref={this.setBackRef}\n        scale=\"s\"\n        slot=\"header-actions-start\"\n        text={label}\n        title={label}\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      collapsed,\n      collapseDirection,\n      collapsible,\n      closable,\n      closed,\n      description,\n      disabled,\n      heading,\n      headingLevel,\n      loading,\n      menuOpen,\n      messages,\n      overlayPositioning,\n    } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <calcite-panel\n            closable={closable}\n            closed={closed}\n            collapseDirection={collapseDirection}\n            collapsed={collapsed}\n            collapsible={collapsible}\n            description={description}\n            disabled={disabled}\n            heading={heading}\n            headingLevel={headingLevel}\n            loading={loading}\n            menuOpen={menuOpen}\n            messageOverrides={messages}\n            onCalcitePanelClose={this.handlePanelClose}\n            onCalcitePanelScroll={this.handlePanelScroll}\n            onCalcitePanelToggle={this.handlePanelToggle}\n            overlayPositioning={overlayPositioning}\n            ref={this.setContainerRef}\n          >\n            {this.renderBackButton()}\n            <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />\n            <slot name={SLOTS.headerActionsStart} slot={PANEL_SLOTS.headerActionsStart} />\n            <slot name={SLOTS.headerActionsEnd} slot={PANEL_SLOTS.headerActionsEnd} />\n            <slot name={SLOTS.headerContent} slot={PANEL_SLOTS.headerContent} />\n            <slot name={SLOTS.headerMenuActions} slot={PANEL_SLOTS.headerMenuActions} />\n            <slot name={SLOTS.fab} slot={PANEL_SLOTS.fab} />\n            <slot name={SLOTS.contentTop} slot={PANEL_SLOTS.contentTop} />\n            <slot name={SLOTS.contentBottom} slot={PANEL_SLOTS.contentBottom} />\n            <slot name={SLOTS.footerActions} slot={PANEL_SLOTS.footerActions} />\n            <slot name={SLOTS.footer} slot={PANEL_SLOTS.footer} />\n            <slot />\n          </calcite-panel>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,15 +1,16 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const observers = require('./observers-9d4b94fa.js');
-const loadable = require('./loadable-8502181b.js');
+const index = require('./index-ca9c5738.js');
+const observers = require('./observers-64d0e318.js');
+const loadable = require('./loadable-485b5ca8.js');
+require('./component-62e55d43.js');
 
 const CSS = {
     frame: "frame",

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

@@ -1 +1 @@
-{"file":"calcite-flow.entry.cjs.js","mappings":"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","names":["createObserver","componentFocusable","setUpLoadableComponent","setComponentLoaded","h"],"sources":["src/components/flow/resources.ts","src/components/flow/flow.scss?tag=calcite-flow&encapsulation=shadow","src/components/flow/flow.tsx"],"sourcesContent":["export const CSS = {\n  frame: \"frame\",\n  frameAdvancing: \"frame--advancing\",\n  frameRetreating: \"frame--retreating\",\n};\n",":host {\n  @extend %component-host;\n  @apply relative\n    flex\n    w-full\n    flex-auto\n    items-stretch\n    overflow-hidden\n    bg-transparent;\n\n  .frame {\n    @apply relative\n      m-0\n      flex\n      w-full\n      flex-auto\n      flex-col\n      items-stretch\n      p-0;\n  }\n\n  ::slotted(calcite-flow-item),\n  ::slotted(calcite-panel) {\n    @apply h-full;\n  }\n\n  ::slotted(.calcite-match-height:last-child) {\n    @apply flex\n    flex-auto\n    overflow-hidden;\n  }\n\n  .frame--advancing {\n    animation: calcite-frame-advance var(--calcite-animation-timing);\n  }\n\n  .frame--retreating {\n    animation: calcite-frame-retreat var(--calcite-animation-timing);\n  }\n\n  @keyframes calcite-frame-advance {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes calcite-frame-retreat {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(-50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Listen, Method, Prop, State, VNode } from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { FlowDirection, FlowItemLikeElement } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-flow-item` elements to the component.\n */\n@Component({\n  tag: \"calcite-flow\",\n  styleUrl: \"flow.scss\",\n  shadow: true,\n})\nexport class Flow implements LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Removes the currently active `calcite-flow-item`.\n   */\n  @Method()\n  async back(): Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement> {\n    const { items } = this;\n\n    const lastItem = items[items.length - 1];\n\n    if (!lastItem) {\n      return;\n    }\n\n    const beforeBack = lastItem.beforeBack\n      ? lastItem.beforeBack\n      : (): Promise<void> => Promise.resolve();\n\n    try {\n      await beforeBack.call(lastItem);\n    } catch (_error) {\n      // back prevented\n      return;\n    }\n\n    lastItem.remove();\n\n    return lastItem;\n  }\n\n  /**\n   * Sets focus on the component.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { items } = this;\n    const activeItem = items[items.length - 1];\n\n    return activeItem?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This property enables the component to consider other custom elements implementing flow-item's interface.\n   *\n   * @internal\n   */\n  @Prop() customItemSelectors: string;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowElement;\n\n  @State() flowDirection: FlowDirection = null;\n\n  @State() itemCount = 0;\n\n  @State() items: FlowItemLikeElement[] = [];\n\n  itemMutationObserver = createObserver(\"mutation\", () => this.updateFlowProps());\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.updateFlowProps();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.itemMutationObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  @Listen(\"calciteFlowItemBack\")\n  async handleItemBackClick(event: CustomEvent): Promise<void> {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    await this.back();\n    return this.setFocus();\n  }\n\n  getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {\n    const allowRetreatingDirection = oldFlowItemCount > 1;\n    const allowAdvancingDirection = oldFlowItemCount && newFlowItemCount > 1;\n\n    if (!allowAdvancingDirection && !allowRetreatingDirection) {\n      return null;\n    }\n\n    return newFlowItemCount < oldFlowItemCount ? \"retreating\" : \"advancing\";\n  };\n\n  updateFlowProps = (): void => {\n    const { customItemSelectors, el, items } = this;\n\n    const newItems = Array.from<FlowItemLikeElement>(\n      el.querySelectorAll(\n        `calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : \"\"}`,\n      ),\n    ).filter((flowItem) => flowItem.closest(\"calcite-flow\") === el);\n\n    const oldItemCount = items.length;\n    const newItemCount = newItems.length;\n    const activeItem = newItems[newItemCount - 1];\n    const previousItem = newItems[newItemCount - 2];\n\n    if (newItemCount && activeItem) {\n      newItems.forEach((itemNode) => {\n        itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;\n        itemNode.hidden = itemNode !== activeItem;\n      });\n    }\n\n    if (previousItem) {\n      previousItem.menuOpen = false;\n    }\n\n    this.items = newItems;\n\n    if (oldItemCount !== newItemCount) {\n      const flowDirection = this.getFlowDirection(oldItemCount, newItemCount);\n      this.itemCount = newItemCount;\n      this.flowDirection = flowDirection;\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { flowDirection } = this;\n\n    const frameDirectionClasses = {\n      [CSS.frame]: true,\n      [CSS.frameAdvancing]: flowDirection === \"advancing\",\n      [CSS.frameRetreating]: flowDirection === \"retreating\",\n    };\n\n    return (\n      <div class={frameDirectionClasses}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-flow.entry.cjs.js","mappings":"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","names":["createObserver","componentFocusable","setUpLoadableComponent","setComponentLoaded","h"],"sources":["src/components/flow/resources.ts","src/components/flow/flow.scss?tag=calcite-flow&encapsulation=shadow","src/components/flow/flow.tsx"],"sourcesContent":["export const CSS = {\n  frame: \"frame\",\n  frameAdvancing: \"frame--advancing\",\n  frameRetreating: \"frame--retreating\",\n};\n",":host {\n  @extend %component-host;\n  @apply relative\n    flex\n    w-full\n    flex-auto\n    items-stretch\n    overflow-hidden\n    bg-transparent;\n\n  .frame {\n    @apply relative\n      m-0\n      flex\n      w-full\n      flex-auto\n      flex-col\n      items-stretch\n      p-0;\n  }\n\n  ::slotted(calcite-flow-item),\n  ::slotted(calcite-panel) {\n    @apply h-full;\n  }\n\n  ::slotted(.calcite-match-height:last-child) {\n    @apply flex\n    flex-auto\n    overflow-hidden;\n  }\n\n  .frame--advancing {\n    animation: calcite-frame-advance var(--calcite-animation-timing);\n  }\n\n  .frame--retreating {\n    animation: calcite-frame-retreat var(--calcite-animation-timing);\n  }\n\n  @keyframes calcite-frame-advance {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n\n  @keyframes calcite-frame-retreat {\n    0% {\n      @apply bg-opacity-50;\n      transform: translate3d(-50px, 0, 0);\n    }\n    100% {\n      @apply bg-opacity-100;\n      transform: translate3d(0, 0, 0);\n    }\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Listen, Method, Prop, State, VNode } from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { FlowDirection, FlowItemLikeElement } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-flow-item` elements to the component.\n */\n@Component({\n  tag: \"calcite-flow\",\n  styleUrl: \"flow.scss\",\n  shadow: true,\n})\nexport class Flow implements LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Removes the currently active `calcite-flow-item`.\n   */\n  @Method()\n  async back(): Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement> {\n    const { items } = this;\n\n    const lastItem = items[items.length - 1];\n\n    if (!lastItem) {\n      return;\n    }\n\n    const beforeBack = lastItem.beforeBack\n      ? lastItem.beforeBack\n      : (): Promise<void> => Promise.resolve();\n\n    try {\n      await beforeBack.call(lastItem);\n    } catch (_error) {\n      // back prevented\n      return;\n    }\n\n    lastItem.remove();\n\n    return lastItem;\n  }\n\n  /**\n   * Sets focus on the component.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    const { items } = this;\n    const activeItem = items[items.length - 1];\n\n    return activeItem?.setFocus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * This property enables the component to consider other custom elements implementing flow-item's interface.\n   *\n   * @internal\n   */\n  @Prop() customItemSelectors: string;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteFlowElement;\n\n  @State() flowDirection: FlowDirection = null;\n\n  @State() itemCount = 0;\n\n  @State() items: FlowItemLikeElement[] = [];\n\n  itemMutationObserver = createObserver(\"mutation\", () => this.updateFlowProps());\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.updateFlowProps();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.itemMutationObserver?.disconnect();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  @Listen(\"calciteFlowItemBack\")\n  async handleItemBackClick(event: CustomEvent): Promise<void> {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    await this.back();\n    return this.setFocus();\n  }\n\n  getFlowDirection = (oldFlowItemCount: number, newFlowItemCount: number): FlowDirection | null => {\n    const allowRetreatingDirection = oldFlowItemCount > 1;\n    const allowAdvancingDirection = oldFlowItemCount && newFlowItemCount > 1;\n\n    if (!allowAdvancingDirection && !allowRetreatingDirection) {\n      return null;\n    }\n\n    return newFlowItemCount < oldFlowItemCount ? \"retreating\" : \"advancing\";\n  };\n\n  updateFlowProps = (): void => {\n    const { customItemSelectors, el, items } = this;\n\n    const newItems = Array.from<FlowItemLikeElement>(\n      el.querySelectorAll(\n        `calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : \"\"}`,\n      ),\n    ).filter((flowItem) => flowItem.closest(\"calcite-flow\") === el);\n\n    const oldItemCount = items.length;\n    const newItemCount = newItems.length;\n    const activeItem = newItems[newItemCount - 1];\n    const previousItem = newItems[newItemCount - 2];\n\n    if (newItemCount && activeItem) {\n      newItems.forEach((itemNode) => {\n        itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;\n        itemNode.hidden = itemNode !== activeItem;\n      });\n    }\n\n    if (previousItem) {\n      previousItem.menuOpen = false;\n    }\n\n    this.items = newItems;\n\n    if (oldItemCount !== newItemCount) {\n      const flowDirection = this.getFlowDirection(oldItemCount, newItemCount);\n      this.itemCount = newItemCount;\n      this.flowDirection = flowDirection;\n    }\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const { flowDirection } = this;\n\n    const frameDirectionClasses = {\n      [CSS.frame]: true,\n      [CSS.frameAdvancing]: flowDirection === \"advancing\",\n      [CSS.frameRetreating]: flowDirection === \"retreating\",\n    };\n\n    return (\n      <div class={frameDirectionClasses}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,26 +1,26 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const guid = require('./guid-8153c924.js');
-const observers = require('./observers-9d4b94fa.js');
-const dom = require('./dom-b3b692c7.js');
-const form = require('./form-2f0ce4f5.js');
-const interactive = require('./interactive-a21fc529.js');
-const key = require('./key-b4561c75.js');
-const label = require('./label-1bfab83c.js');
-const loadable = require('./loadable-8502181b.js');
-const locale = require('./locale-3c14df15.js');
-const math = require('./math-8823ec49.js');
-require('./resources-2cc41c87.js');
-require('./browser-1a5f23a5.js');
-require('./component-4791014e.js');
+const index = require('./index-ca9c5738.js');
+const guid = require('./guid-70d8b321.js');
+const observers = require('./observers-64d0e318.js');
+const dom = require('./dom-4f3978e9.js');
+const form = require('./form-228b04bd.js');
+const interactive = require('./interactive-46826d66.js');
+const key = require('./key-987bfdfb.js');
+const label = require('./label-0eaf6fab.js');
+const loadable = require('./loadable-485b5ca8.js');
+const locale = require('./locale-22e50901.js');
+const math = require('./math-dac59516.js');
+require('./resources-ea1d0de4.js');
+require('./browser-d83e81a6.js');
+require('./component-62e55d43.js');
 
 /**
  * Calculate slope of the tangents

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

@@ -1,23 +1,24 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const dom = require('./dom-b3b692c7.js');
-const loadable = require('./loadable-8502181b.js');
-const locale = require('./locale-3c14df15.js');
-const t9n = require('./t9n-d22d6156.js');
-const interactive = require('./interactive-a21fc529.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
-require('./key-b4561c75.js');
-require('./observers-9d4b94fa.js');
-require('./browser-1a5f23a5.js');
+const index = require('./index-ca9c5738.js');
+const dom = require('./dom-4f3978e9.js');
+const loadable = require('./loadable-485b5ca8.js');
+const locale = require('./locale-22e50901.js');
+const t9n = require('./t9n-a2235c64.js');
+const interactive = require('./interactive-46826d66.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
+require('./component-62e55d43.js');
+require('./key-987bfdfb.js');
+require('./observers-64d0e318.js');
+require('./browser-d83e81a6.js');
 
 const CSS = {
     handle: "handle",
@@ -176,11 +177,11 @@ const Handle = class {
     render() {
         return (
         // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        index.h("span", { key: '66a256fe117b3c7313e9e1bf436ded9e53739d0e', "aria-checked": this.disabled ? null : dom.toAriaBoolean(this.selected), "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        index.h("span", { key: '940b61723418e1800f83fb666b9eb1085ae1eb01', "aria-checked": this.disabled ? null : dom.toAriaBoolean(this.selected), "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 this.handleButton = el;
             },
             // role of radio is being applied to allow space key to select in screen readers
-            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, index.h("calcite-icon", { key: '06885cacbc113664fbbb9236175afac058fecd81', icon: ICONS.drag, scale: "s" })));
+            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip() }, index.h("calcite-icon", { key: '638b64e5b29d1cd7842f41acfeec2ade557614a8', icon: ICONS.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"calcite-handle.entry.cjs.js","mappings":"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","names":["connectInteractive","connectMessages","connectLocalized","setUpLoadableComponent","setUpMessages","setComponentLoaded","updateHostInteraction","disconnectInteractive","disconnectMessages","disconnectLocalized","updateMessages","componentFocusable","h","toAriaBoolean"],"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\nexport const SUBSTITUTIONS = {\n  itemLabel: \"{itemLabel}\",\n  position: \"{position}\",\n  total: \"{total}\",\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  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 {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS, SUBSTITUTIONS } from \"./resources\";\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  private getTooltip(): string {\n    const { label, messages } = this;\n\n    if (!messages) {\n      return \"\";\n    }\n\n    if (!label) {\n      return messages.dragHandleUntitled;\n    }\n\n    return messages.dragHandle.replace(SUBSTITUTIONS.itemLabel, label);\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(SUBSTITUTIONS.position, setPosition.toString());\n    const replaceLabel = replacePosition.replace(SUBSTITUTIONS.itemLabel, label);\n    return replaceLabel.replace(SUBSTITUTIONS.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-checked={this.disabled ? null : toAriaBoolean(this.selected)}\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        ref={(el): void => {\n          this.handleButton = el;\n        }}\n        // role of radio is being applied to allow space key to select in screen readers\n        role=\"radio\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.getTooltip()}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-handle.entry.cjs.js","mappings":"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","names":["connectInteractive","connectMessages","connectLocalized","setUpLoadableComponent","setUpMessages","setComponentLoaded","updateHostInteraction","disconnectInteractive","disconnectMessages","disconnectLocalized","updateMessages","componentFocusable","h","toAriaBoolean"],"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\nexport const SUBSTITUTIONS = {\n  itemLabel: \"{itemLabel}\",\n  position: \"{position}\",\n  total: \"{total}\",\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  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 {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { HandleMessages } from \"./assets/handle/t9n\";\nimport { HandleChange, HandleNudge } from \"./interfaces\";\nimport { CSS, ICONS, SUBSTITUTIONS } from \"./resources\";\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  private getTooltip(): string {\n    const { label, messages } = this;\n\n    if (!messages) {\n      return \"\";\n    }\n\n    if (!label) {\n      return messages.dragHandleUntitled;\n    }\n\n    return messages.dragHandle.replace(SUBSTITUTIONS.itemLabel, label);\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(SUBSTITUTIONS.position, setPosition.toString());\n    const replaceLabel = replacePosition.replace(SUBSTITUTIONS.itemLabel, label);\n    return replaceLabel.replace(SUBSTITUTIONS.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-checked={this.disabled ? null : toAriaBoolean(this.selected)}\n        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}\n        aria-label={this.disabled ? null : this.getAriaText(\"label\")}\n        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}\n        onBlur={this.handleBlur}\n        onKeyDown={this.handleKeyDown}\n        ref={(el): void => {\n          this.handleButton = el;\n        }}\n        // role of radio is being applied to allow space key to select in screen readers\n        role=\"radio\"\n        tabIndex={this.disabled ? null : 0}\n        title={this.getTooltip()}\n      >\n        <calcite-icon icon={ICONS.drag} scale=\"s\" />\n      </span>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,17 +1,17 @@
 /*!
  * 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.9.0-next.2
+ * v2.9.0-next.20
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-816b2235.js');
-const dom = require('./dom-b3b692c7.js');
-const observers = require('./observers-9d4b94fa.js');
-require('./guid-8153c924.js');
-require('./resources-2cc41c87.js');
+const index = require('./index-ca9c5738.js');
+const dom = require('./dom-4f3978e9.js');
+const observers = require('./observers-64d0e318.js');
+require('./guid-70d8b321.js');
+require('./resources-ea1d0de4.js');
 
 const CSS = {
     icon: "icon",
@@ -137,7 +137,7 @@ const Icon = class {
         const size = scaleToPx[scale];
         const semantic = !!textLabel;
         const paths = [].concat(pathData || "");
-        return (index.h(index.Host, { key: '0c60b0a95752e214f7846583e31a8e803c8b4d0d', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: '1b95324870ee42ef72a05e4fc06133bf3711bd78', "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '03df405731dff4dbb4e6e9bd1c7f809b620d7505', "aria-hidden": dom.toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, index.h("svg", { key: 'd8fbf4132b6819717415a30ae11bf3695c282d78', "aria-hidden": "true", class: {
                 [CSS.flipRtl]: dir === "rtl" && flipRtl,
                 svg: true,
             }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (index.h("path", { d: path })) : (index.h("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));