@esri/calcite-components 2.7.0-next.5 → 2.7.0-next.7

package/dist/collection/utils/sortableComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"sortableComponent.js","sourceRoot":"","sources":["../../../src/utils/sortableComponent.ts"],"names":[],"mappings":"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","sourcesContent":["import Sortable from \"sortablejs\";\nconst sortableComponentSet = new Set<SortableComponent>();\n\nexport interface DragDetail {\n  toEl: HTMLElement;\n  fromEl: HTMLElement;\n  dragEl: HTMLElement;\n  newIndex: number;\n  oldIndex: number;\n}\n\nexport const CSS = {\n  ghostClass: \"calcite-sortable--ghost\",\n  chosenClass: \"calcite-sortable--chosen\",\n  dragClass: \"calcite-sortable--drag\",\n  fallbackClass: \"calcite-sortable--fallback\",\n};\n\n/**\n * Defines interface for components with sorting functionality.\n */\nexport interface SortableComponent {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * When `true`, dragging is enabled.\n   */\n  dragEnabled: boolean;\n\n  /**\n   * Specifies which items inside the element should be draggable.\n   */\n  dragSelector?: string;\n\n  /**\n   * The list's group identifier.\n   */\n  group?: string;\n\n  /**\n   * The selector for the handle elements.\n   */\n  handleSelector: string;\n\n  /**\n   * The Sortable instance.\n   */\n  sortable: Sortable;\n\n  /**\n   * Whether the element can move from the list.\n   */\n  canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * Whether the element can be added from another list.\n   */\n  canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * Called when any sortable component drag starts. For internal use only. Any public drag events should emit within `onDragStart()`.\n   */\n  onGlobalDragStart: () => void;\n\n  /**\n   * Called when any sortable component drag ends. For internal use only. Any public drag events should emit within `onDragEnd()`.\n   */\n  onGlobalDragEnd: () => void;\n\n  /**\n   * Called when a component's dragging ends.\n   */\n  onDragEnd: (detail: DragDetail) => void;\n\n  /**\n   * Called when a component's dragging starts.\n   */\n  onDragStart: (detail: DragDetail) => void;\n\n  /**\n   * Called by any change to the list (add / update / remove).\n   */\n  onDragSort: (detail: DragDetail) => void;\n}\n\nexport interface SortableComponentItem {\n  /**\n   * When `true`, the item is not draggable.\n   *\n   *\n   * Notes:\n   *\n   * This property should use the @Prop decorator and reflect.\n   * This property should be used to set the `calcite-handle` disabled property.\n   */\n  dragDisabled: boolean;\n}\n\n/**\n * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.\n *\n * @param {SortableComponent} component - The sortable component.\n */\nexport function connectSortableComponent(component: SortableComponent): void {\n  disconnectSortableComponent(component);\n  sortableComponentSet.add(component);\n\n  const dataIdAttr = \"id\";\n  const { group, handleSelector: handle, dragSelector: draggable } = component;\n\n  component.sortable = Sortable.create(component.el, {\n    dataIdAttr,\n    ...CSS,\n    ...(!!draggable && { draggable }),\n    ...(!!group && {\n      group: {\n        name: group,\n        ...(!!component.canPull && {\n          pull: (to, from, dragEl, { newIndex, oldIndex }) =>\n            component.canPull({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),\n        }),\n        ...(!!component.canPut && {\n          put: (to, from, dragEl, { newIndex, oldIndex }) =>\n            component.canPut({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),\n        }),\n      },\n    }),\n    handle,\n    filter: \"[drag-disabled]\",\n    onStart: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      dragState.active = true;\n      onGlobalDragStart();\n      component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n    onEnd: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      dragState.active = false;\n      onGlobalDragEnd();\n      component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n    onSort: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      component.onDragSort({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n  });\n}\n\n/**\n * Helper to remove track of a SortableComponent. This should be called in the `disconnectedCallback` lifecycle method.\n *\n * @param {SortableComponent} component - The sortable component.\n */\nexport function disconnectSortableComponent(component: SortableComponent): void {\n  sortableComponentSet.delete(component);\n\n  component.sortable?.destroy();\n  component.sortable = null;\n}\n\nconst dragState: { active: boolean } = { active: false };\n\n/**\n * Helper to determine if dragging is currently active.\n *\n * @param component The sortable component.\n * @returns {boolean} a boolean value.\n */\nexport function dragActive(component: SortableComponent): boolean {\n  return component.dragEnabled && dragState.active;\n}\n\nfunction onGlobalDragStart(): void {\n  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());\n}\n\nfunction onGlobalDragEnd(): void {\n  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());\n}\n"]}
+{"version":3,"file":"sortableComponent.js","sourceRoot":"","sources":["../../../src/utils/sortableComponent.ts"],"names":[],"mappings":"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","sourcesContent":["import Sortable from \"sortablejs\";\nconst sortableComponentSet = new Set<SortableComponent>();\n\nexport interface DragDetail {\n  toEl: HTMLElement;\n  fromEl: HTMLElement;\n  dragEl: HTMLElement;\n  newIndex: number;\n  oldIndex: number;\n}\n\nexport const CSS = {\n  ghostClass: \"calcite-sortable--ghost\",\n  chosenClass: \"calcite-sortable--chosen\",\n  dragClass: \"calcite-sortable--drag\",\n  fallbackClass: \"calcite-sortable--fallback\",\n};\n\n/**\n * Defines interface for components with sorting functionality.\n */\nexport interface SortableComponent {\n  /**\n   * The host element.\n   */\n  readonly el: HTMLElement;\n\n  /**\n   * When `true`, dragging is enabled.\n   */\n  dragEnabled: boolean;\n\n  /**\n   * Specifies which items inside the element should be draggable.\n   */\n  dragSelector?: string;\n\n  /**\n   * The list's group identifier.\n   */\n  group?: string;\n\n  /**\n   * The selector for the handle elements.\n   */\n  handleSelector: string;\n\n  /**\n   * The Sortable instance.\n   */\n  sortable: Sortable;\n\n  /**\n   * Whether the element can move from the list.\n   */\n  canPull: (detail: DragDetail) => boolean;\n\n  /**\n   * Whether the element can be added from another list.\n   */\n  canPut: (detail: DragDetail) => boolean;\n\n  /**\n   * Called when any sortable component drag starts. For internal use only. Any public drag events should emit within `onDragStart()`.\n   */\n  onGlobalDragStart: () => void;\n\n  /**\n   * Called when any sortable component drag ends. For internal use only. Any public drag events should emit within `onDragEnd()`.\n   */\n  onGlobalDragEnd: () => void;\n\n  /**\n   * Called when a component's dragging ends.\n   */\n  onDragEnd: (detail: DragDetail) => void;\n\n  /**\n   * Called when a component's dragging starts.\n   */\n  onDragStart: (detail: DragDetail) => void;\n\n  /**\n   * Called by any change to the list (add / update / remove).\n   */\n  onDragSort: (detail: DragDetail) => void;\n}\n\nexport interface SortableComponentItem {\n  /**\n   * When `true`, the item is not draggable.\n   *\n   *\n   * Notes:\n   *\n   * This property should use the @Prop decorator and reflect.\n   * This property should be used to set the `calcite-handle` disabled property.\n   */\n  dragDisabled: boolean;\n}\n\n/**\n * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.\n *\n * @param {SortableComponent} component - The sortable component.\n */\nexport function connectSortableComponent(component: SortableComponent): void {\n  disconnectSortableComponent(component);\n  sortableComponentSet.add(component);\n\n  const dataIdAttr = \"id\";\n  const { group, handleSelector: handle, dragSelector: draggable } = component;\n\n  component.sortable = Sortable.create(component.el, {\n    dataIdAttr,\n    ...CSS,\n    ...(!!draggable && { draggable }),\n    ...(!!group && {\n      group: {\n        name: group,\n        ...(!!component.canPull && {\n          pull: (to, from, dragEl, { newIndex, oldIndex }) =>\n            component.canPull({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),\n        }),\n        ...(!!component.canPut && {\n          put: (to, from, dragEl, { newIndex, oldIndex }) =>\n            component.canPut({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),\n        }),\n      },\n    }),\n    handle,\n    filter: `${handle}[disabled]`,\n    onStart: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      dragState.active = true;\n      onGlobalDragStart();\n      component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n    onEnd: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      dragState.active = false;\n      onGlobalDragEnd();\n      component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n    onSort: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {\n      component.onDragSort({ fromEl, dragEl, toEl, newIndex, oldIndex });\n    },\n  });\n}\n\n/**\n * Helper to remove track of a SortableComponent. This should be called in the `disconnectedCallback` lifecycle method.\n *\n * @param {SortableComponent} component - The sortable component.\n */\nexport function disconnectSortableComponent(component: SortableComponent): void {\n  sortableComponentSet.delete(component);\n\n  component.sortable?.destroy();\n  component.sortable = null;\n}\n\nconst dragState: { active: boolean } = { active: false };\n\n/**\n * Helper to determine if dragging is currently active.\n *\n * @param component The sortable component.\n * @returns {boolean} a boolean value.\n */\nexport function dragActive(component: SortableComponent): boolean {\n  return component.dragEnabled && dragState.active;\n}\n\nfunction onGlobalDragStart(): void {\n  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());\n}\n\nfunction onGlobalDragEnd(): void {\n  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());\n}\n"]}

package/dist/collection/utils/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { Build, getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "./locale";

package/dist/collection/utils/time.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { getDateTimeFormat, getSupportedNumberingSystem, numberStringFormatter } from "./locale";
 import { decimalPlaces } from "./math";

package/dist/collection/utils/time.spec.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { formatTimePart, isValidTime, localizeTimeStringToParts, parseTimeString, toISOTimeString } from "./time";
 describe("formatTimePart", () => {

package/dist/components/ExpandToggle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { forceUpdate, h } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';

package/dist/components/FloatingArrow.js

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

package/dist/components/Heading.js

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

package/dist/components/Validation.js

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

package/dist/components/action-group.js

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

package/dist/components/action-menu.js

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

package/dist/components/action.js

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

package/dist/components/ar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/array.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 function getRoundRobinIndex(index, total) {
     return (index + total) % total;

package/dist/components/avatar.js

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

package/dist/components/bg.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/bs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, Build, h } from '@stencil/core/internal/client/index.js';
 import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form.js';

package/dist/components/ca.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/calcite-accordion-item.js

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

package/dist/components/calcite-accordion.js

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

package/dist/components/calcite-action-bar.js

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

package/dist/components/calcite-action-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { A as ActionGroup, d as defineCustomElement$1 } from './action-group.js';
 

package/dist/components/calcite-action-menu.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { A as ActionMenu, d as defineCustomElement$1 } from './action-menu.js';
 

package/dist/components/calcite-action-pad.js

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

package/dist/components/calcite-action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { A as Action, d as defineCustomElement$1 } from './action.js';
 

package/dist/components/calcite-alert.js

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

package/dist/components/calcite-avatar.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { A as Avatar, d as defineCustomElement$1 } from './avatar.js';
 

package/dist/components/calcite-block-section.js

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

package/dist/components/calcite-block.js

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

package/dist/components/calcite-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { B as Button, d as defineCustomElement$1 } from './button.js';
 

package/dist/components/calcite-card-group.js

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

package/dist/components/calcite-card.js

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

package/dist/components/calcite-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { C as Checkbox, d as defineCustomElement$1 } from './checkbox.js';
 

package/dist/components/calcite-chip-group.js

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

package/dist/components/calcite-chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { C as Chip, d as defineCustomElement$1 } from './chip.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { e as ColorPickerHexInput, d as defineCustomElement$1 } from './color-picker-hex-input.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { C as ColorPickerSwatch, d as defineCustomElement$1 } from './color-picker-swatch.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.7.0-next.5
+ * v2.7.0-next.7
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';
@@ -78,10 +78,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         };
         this.handleHexInputChange = (event) => {
             event.stopPropagation();
-            const { allowEmpty, color: color$1 } = this;
+            const { isClearable, color: color$1 } = this;
             const input = event.target;
             const hex = input.value;
-            if (allowEmpty && !hex) {
+            if (isClearable && !hex) {
                 this.internalColorSet(null);
                 return;
             }
@@ -104,7 +104,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                     ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
                     : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.allowEmpty && !input.value) {
+            if (this.isClearable && !input.value) {
                 inputValue = "";
             }
             else {
@@ -123,7 +123,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             const input = event.currentTarget;
             const channelIndex = Number(input.getAttribute("data-channel-index"));
             const channels = [...this.channels];
-            const shouldClearChannels = this.allowEmpty && !input.value;
+            const shouldClearChannels = this.isClearable && !input.value;
             if (shouldClearChannels) {
                 this.channels = [null, null, null, null];
                 this.internalColorSet(null);
@@ -250,7 +250,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             return (h("calcite-tab-title", { class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
         };
         this.renderChannelsTab = (channelMode) => {
-            const { allowEmpty, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
+            const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
             const selected = channelMode === activeChannelMode;
             const isRgb = channelMode === "rgb";
             const channelAriaLabels = isRgb
@@ -262,7 +262,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 const isAlphaChannel = index === 3;
                 if (isAlphaChannel) {
                     channelValue =
-                        allowEmpty && !channelValue ? channelValue : alphaToOpacity(channelValue);
+                        isClearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
                 }
                 /* the channel container is ltr, so we apply the host's direction */
                 return this.renderChannel(channelValue, index, channelAriaLabels[index], direction, isAlphaChannel ? "%" : "");
@@ -363,6 +363,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.allowEmpty = false;
         this.alphaChannel = false;
         this.channelsDisabled = false;
+        this.clearable = false;
         this.color = DEFAULT_COLOR;
         this.disabled = false;
         this.format = "auto";
@@ -389,6 +390,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.opacityScopeLeft = undefined;
         this.scopeOrientation = undefined;
     }
+    handleAllowEmptyOrClearableChange() {
+        this.isClearable = this.clearable || this.allowEmpty;
+    }
     handleAlphaChannelChange(alphaChannel) {
         const { format } = this;
         if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
@@ -414,8 +418,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         /* wired up by t9n util */
     }
     handleValueChange(value, oldValue) {
-        const { allowEmpty, format } = this;
-        const checkMode = !allowEmpty || value;
+        const { isClearable, format } = this;
+        const checkMode = !isClearable || value;
         let modeChanged = false;
         if (checkMode) {
             const nextMode = parseMode(value);
@@ -438,7 +442,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             }
             return;
         }
-        const color$1 = allowEmpty && !value
+        const color$1 = isClearable && !value
             ? null
             : color(value != null && typeof value === "object" && alphaCompatible(this.mode)
                 ? normalizeColor(value)
@@ -495,8 +499,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        const { allowEmpty, color: color$1, format, value } = this;
-        const willSetNoColor = allowEmpty && !value;
+        this.handleAllowEmptyOrClearableChange();
+        const { isClearable, color: color$1, format, value } = this;
+        const willSetNoColor = isClearable && !value;
         const parsedMode = parseMode(value);
         const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
         const initialColor = willSetNoColor ? null : valueIsCompatible ? color(value) : color$1;
@@ -536,7 +541,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //
     //--------------------------------------------------------------------------
     render() {
-        const { allowEmpty, channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
+        const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
         const selectedColorInHex = color ? hexify(color, alphaChannel) : null;
         const hueTop = thumbRadius;
         const hueLeft = hueScopeLeft ?? (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
@@ -575,7 +580,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (h("div", { class: {
                 [CSS.controlSection]: true,
                 [CSS.section]: true,
-            } }, h("div", { class: CSS.hexAndChannelsGroup }, noHex ? null : (h("div", { class: CSS.hexOptions }, h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, alphaChannel: alphaChannel, class: CSS.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (h("calcite-tabs", { class: {
+            } }, h("div", { class: CSS.hexAndChannelsGroup }, noHex ? null : (h("div", { class: CSS.hexOptions }, h("calcite-color-picker-hex-input", { allowEmpty: this.isClearable, alphaChannel: alphaChannel, class: CSS.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (h("calcite-tabs", { class: {
                 [CSS.colorModeContainer]: true,
                 [CSS.splitSection]: true,
             }, scale: scale === "l" ? "m" : "s" }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
@@ -911,6 +916,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
+        "allowEmpty": ["handleAllowEmptyOrClearableChange"],
+        "clearable": ["handleAllowEmptyOrClearableChange"],
         "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
         "color": ["handleColorChange"],
         "format": ["handleFormatOrAlphaChannelChange"],
@@ -924,6 +931,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "allowEmpty": [516, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],
         "channelsDisabled": [4, "channels-disabled"],
+        "clearable": [516],
         "color": [1040],
         "disabled": [516],
         "format": [513],
@@ -951,6 +959,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "scopeOrientation": [32],
         "setFocus": [64]
     }, [[2, "keydown", "handleChannelKeyUpOrDown"], [2, "keyup", "handleChannelKeyUpOrDown"]], {
+        "allowEmpty": ["handleAllowEmptyOrClearableChange"],
+        "clearable": ["handleAllowEmptyOrClearableChange"],
         "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
         "color": ["handleColorChange"],
         "format": ["handleFormatOrAlphaChannelChange"],